Tabstrip (SAP Library - Running an Enterprise Portal)

Tabstrip

Definition

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

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").

Example

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

This graphic is explained in the accompanying text