A container that enables the user to switch between several panels -by clicking on the tab - that appear to share the same space on the screen. The user can view a particular panel by clicking its tab. Use tabStripItem to define the panel size and title. Use tabStripItemBody to define the layout of the tabStripItem. Use tabStripItemHeader to change the settings of the title (specified through tabStripItem).
bodyHeight
Defines the height of panel. The tabs are added on top of panel. The height of the tabs is defined by used text font.
horizontalAlignment
Defines the horizontal alignment of the tapStripItems.
LEFT
Left justifies the content of the cell.
RIGHT
Right justifies the content of the cell.
CENTER
Centers the content of the cell.
CHAR
Aligns text around a specific character. Not supported by all web clients.
JUSTIFY
Sets text in the cell left and right aligned. Not supported by all web clients.
id
Identification name of the tabStrip.
selection
Defines which tab is the active/displayed panel.
tooltip
Defines the hint of the tab which is displayed as the mouse cursor passes over the panel of the tabStrip, or as the mouse button is pressed but not released.
verticalAlignment
Defines the vertical alignment of the tapStripItems.
BASELINE
The content of the cell is aligned on the baseline line of the cell (or bottom when no baseline exits).
BOTTOM
The content of the cell is aligned to the bottom line of the cell.
MIDDLE
The content of the cell is aligned to the middle of the cell height.
TOP
The content of the cell is aligned to the top line of the cell.
width
Defines the overall width of the tabStrip control.
Attributes |
M |
Values |
Usage |
---|---|---|---|
bodyHeight |
Unit (100) |
Taglib bodyHeight="100" Classlib setBodyHeight("100") |
|
horizontalAlignment |
CENTER (d) CHAR JUSTIFY LEFT RIGHT |
Taglib horizontalAlignment="LEFT" Classlib setHorizontalAlignment(CellHAlign.LEFT) |
|
id |
* |
String (cs) |
Taglib id="TabbedNotebook" Classlib setId("TabbedNotebook") |
selection |
Numeric (1) |
Taglib selection="3" Classlib setSelection(3) |
|
tooltip |
String |
Taglib tooltip="select a tab" Classlib setTooltip("select a tab") |
|
verticalAlignment |
BASELINE BOTTOM MIDDLE TOP (d) |
Taglib verticalAlignment="MIDDLE" Classlib setVerticalAlignment(CellVAlign.MIDDLE) |
|
width |
Unit (400) |
Taglib width="200" Classlib setWidth("200") |
tabStripItem
Specifies the panel size and the tab of a tabStrip. Use tabStripItemBody to define the layout of the tabStripItem. Use tabStripItemHeader to change the settings of the title later on. A tabStripItem must have a unique 'id' and 'index' attribute and can call a specific event handler that is activated when this tab is clicked.
header
The tab can have text (set by the 'title' attribute) or any other control. 'header' specifies the component. Common use would be to display icons in the tabs (instead of text).
height
Defines the height of the tabStripItem.
id
Identification name of the tabStripItem.
index
Defines the index of the tabStripItem. The 'selection' attribute of the tabStrip refers to the 'index'. The 'index' is mandatory and can be alphanumeric.
onSelect
Defines the event handling method that will be processed when the user clicks on the tab. The string for the event name is not case sensitive - the reference however has to be spelled exactly the same way as the definition of the 'onSelect' event.
If you define a 'onSelect' event, you have to switch to the new selected tab in your application, using the tabstrip method selection (see above). If you do not define a 'onSelect' event the tab can be clicked, the selected tab is displayed, but no event is generated.
title
Defines the text that is displayed in the tab itself.
tooltip
Defines the hint of the tab which is displayed as the mouse cursor passes over the panel of the tabStrip, or as the mouse button is pressed but not released.
width
Defines the overall width of the tabStripItem.
Attributes |
M |
Values |
Usage |
---|---|---|---|
header |
Component |
Taglib No tag available Classlib setHeader(htmlb.Image("icon.gif", "Text title") |
|
height |
Unit |
Taglib height="80" Classlib setHeight("80") |
|
id |
* |
String (cs) |
Taglib id=" TabbedNotebook " Classlib setId("TabbedNotebook") |
index |
* |
String (cs) |
Taglib index="I3" Classlib setIndex("I3") |
title |
String |
Taglib title="Settings" Classlib setTitle="Settings" |
|
tooltip |
String |
Taglib tooltip="Desktop settings" Classlib setTooltip("Desktop settings") |
|
width |
Unit |
Taglib width="200" Classlib setWidth("200") |
Events |
M |
Values |
Usage |
onSelect |
String (cs) |
Taglib onSelect="proc_tab3" Classlib setOnSelect("proc_tab3") |
tabStripItemBody
Specifies the layout of the tabStripItem.
tabStripItemHeader
The tabStripItem attributes 'title' and 'header' can be altered or set by tabStripItemHeader (see following example definition of "tab 4").
using the taglib
<hbj:tabStrip id="myTabStrip1" bodyHeight="100" width="200" horizontalAlignment="CENTER" verticalAlignment="TOP" selection="3" tooltip="Tooltip for myTabStrip1" > <hbj:tabStripItem id="myTabStripItem1" index="1" height="80" width="160" onSelect="myTabStripItem1OnSelect" title="Tab 1" tooltip="My Tooltip for Tab 1" > <hbj:tabStripItemBody> <hbj:textView text="TextView on Tab 1" /> </hbj:tabStripItemBody> </hbj:tabStripItem> <hbj:tabStripItem id="myTabStripItem2" index="2" height="80" width="160" onSelect="myTabStripItem2OnSelect" title="Tab 2" tooltip="My Tooltip for Tab 2" > <hbj:tabStripItemBody> <hbj:textView text="TextView on Tab 2" /> </hbj:tabStripItemBody> </hbj:tabStripItem> <hbj:tabStripItem id="myTabStripItem3" index="4" height="80" width="160" onSelect="myTabStripItem3OnSelect" tooltip="My Tooltip for Tab 3" > <hbj:tabStripItemBody> <% myTabStripItem3.setHeader(new com.sap.htmlb.Image ("/icons/bottom.gif", "Image not available") ); %> <hbj:textView text="TextView on Tab 3" /> </hbj:tabStripItemBody> </hbj:tabStripItem> <hbj:tabStripItem id="myTabStripItem4" index="3" height="80" width="160" onSelect="myTabStripItem4OnSelect" tooltip="My Tooltip for Tab 4" > <hbj:tabStripItemHeader> <hbj:textView text="Tab 4" /> </hbj:tabStripItemHeader> <hbj:tabStripItemBody> <hbj:textView text="Body of Tab 4" /> </hbj:tabStripItemBody> </hbj:tabStripItem> </hbj:tabStrip>
using the classlib
Form form = (Form) this.getForm(); TabStrip ts = new TabStrip("myTabStrip"); ts.setBodyHeight("100"); ts.setWidth("200"); ts.setHAlign(CellHAlign.CENTER); ts.setVAlign(CellVAlign.TOP); ts.setSelection(3); ts.setTooltip("Tooltip for myTabStrip1"); TextView tvt1 = new TextView(); tvt1.setText("TextView on Tab 1"); TextView tvt2 = new TextView(); tvt2.setText("TextView on Tab 2"); TextView tvt3 = new TextView(); tvt3.setText("TextView on Tab 3"); TextView tvt4 = new TextView(); tvt4.setText("TextView on Tab 4"); TabStripItem tsi1 = ts.addTab(1, "Tab 1", tvt1); tsi1.setHeight("80"); tsi1.setWidth("160"); tsi1.setOnSelect("myTabStripItem1OnSelect"); TabStripItem tsi2 = ts.addTab(2, "Tab 2", tvt2); tsi2.setHeight("80"); tsi2.setWidth("160"); tsi2.setOnSelect("myTabStripItem2OnSelect"); tsi2.setTooltip("My Tooltip for Tab 2"); TabStripItem tsi3 = ts.addTab( 3, new Image( request.getPublicResourcePath() + "/../mimes/saplogo.gif", "Logo"), tvt3); tsi3.setHeight("80"); tsi3.setWidth("160"); tsi3.setOnSelect("myTabStripItem3OnSelect"); tsi3.setTooltip("My Tooltip for Tab 3"); TabStripItem tsi4 = ts.addTab(4, "Tab 4", tvt4); tsi4.setHeight("80"); tsi4.setWidth("160"); tsi4.setOnSelect("myTabStripItem4OnSelect"); tsi4.setTooltip("My Tooltip for Tab 4"); form.addComponent(ts);
Result