Control API for Tabstrip (tabStrip)

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.
attribute req. values default case sens. JSP taglib classlib
bodyHeight no Unit 100 - bodyHeight="100" setBodyHeight("100")
horizontalAlignment no CENTER
CHAR
JUSTIFY
LEFT
RIGHT		 CENTER yes horizontalAlignment="LEFT" setHAlign(CellHAlign.LEFT)
id yes String none yes id="TabbedNotebook"  
selection no Numeric 1 - selection="3" setSelection(3)
tooltip no String none no tooltip="select a tab" setTooltip("select a tab")
verticalAlignment no BASELINE
BOTTOM
MIDDLE
TOP 		TOP yes verticalAlignment="MIDDLE" setVAlign(CellHAlign.MIDDLE)
width no Unit 400 - width="200" 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 action 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 do not define a 'onSelect' event the tab can be clicked 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.
attribute req. values default case sens. JSP taglib classlib
header no Component none no   setHeader(htmlb.Image("Icon.gif", "Texttitle"))
height no Unit 100 - height="80" setHeight("80")
id yes String none yes id="TabbedNotebook"  
index yes String none - index="I3" setIndex("I3")
title no String none no title="Settings" setTitle("Settings")
tooltip no String none no tooltip="Desktop settings" setTooltip("Desktop settings")
width no Unit 400 - width="200" setWidth("200")

 

events req. values default case sens. JSP taglib classlib
onSelect no String none yes onSelect="proc_tab3" 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").

Example
<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.sapportals.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>
Result