WOTabPanel

The WOTabPanel component displays a tab panel. When the user selects a tab the corresponding panel appears.

This component can be embedded within a WOForm. When the WOTabPanel contains form fields that are bound to an enterprise object’s attributes, the HTML element the user clicks to change tabs must be a submit button. This ensures that the values the user types into these fields get stored in the enterprise object. If the HTML element the user clicks is a hyperlink, the enterprise object’s attributes are not updated when the user switches tabs and the form field values are lost. The submitActionName binding determines whether the HTML element that switches tabs is a hyperlink or a submit button.

Synopsis

WOTabPanel { tabs=anArray; selectedTab=aString; [tabNameKey=aString;]

[nonSelectedBgColor=hexString;] [bgcolor=hexString;] [textColor=hexString;]

[submitActionName=anActionName;] };

Bindings

tabs

An array of objects representing the tabs. For example, the array could be named movieArray and contain Movie objects.

selectedTab

The object corresponding to the currently selected tab. For example, currentMovie could represent the currently selected object in movieArray . This attribute gets updated each time the tab panel is redisplayed. In addition, this attribute defines the initially selected object and defaults to the first object in the list.

tabNameKey

A key representing the tab object’s name string displayed in the tab. For the movie example, the name key is set to "title" and the WOTabPanel will display currentMovie.title. If your tab objects are Strings, do not set this attribute.

nonSelectedBgColor

Color of the tabs that are not selected.

bgcolor

Color of the selected tab and the main panel area.

textColor

Color of the text within the tab.

submitActionName

The name of an action that is called when a new tab is selected. This attribute functions only when the tab panel is embedded within a WOForm. If submitActionName is not defined or is set to null, the tab selectors are hyperlinks. Otherwise the tab selectors are submit buttons. If you want the tab selector to be a submit button, but don’t want to call an action, set this attribute to the empty string ("").

Example

The WOTabPanel component is used in conjunction with the WOKeyValueConditional which conditionally displays the tab panel contents depending on the tab the user selects. The following example shows the HTML, template, and Java files for the parent component containing a tab panel.

<WEBOBJECTNAME=TabPanel1>

    <WEBOBJECT NAME=KeyValueConditional1>

        This is the content<BR>forthe first tab.<BR>

    </WEBOBJECT>

    <WEBOBJECT NAME=KeyValueConditional2>

        This is the content<BR>forthe second tab.<BR>

    </WEBOBJECT>

</WEBOBJECT>

TabPanel1: WOTabPanel {

    tabs = keyList;

    selectedTab = selection;

}

KeyValueConditional1: WOKeyValueConditional{

    key = "selection";

    value = "first";

}

KeyValueConditional2: WOKeyValueConditional{

    key = "selection";

    value = "second";

}

protectedNSArray keyList;

protected String selection;

public Main() {

    keyList = new NSArray(newObject[] {"first","second"});

}

The parent component’s constructor initializes the key list. The selection string holds the current selection which the WOKeyValueConditional components query to decide if they should display their contents.