PATH |
WOTabPanel
Component Description
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
the 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 inmovieArray
. 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 (NSStrings in Objective-C), 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 tonull
, 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.
<WEBOBJECT NAME=TabPanel1> <WEBOBJECT NAME=KeyValueConditional1> This is the content<BR>for the first tab.<BR> </WEBOBJECT> <WEBOBJECT NAME=KeyValueConditional2> This is the content<BR>for the second tab.<BR> </WEBOBJECT> </WEBOBJECT>
TabPanel1: WOTabPanel { tabs = keyList; selectedTab = selection; } KeyValueConditional1: WOKeyValueConditional { key = "selection"; value = "first"; } KeyValueConditional2: WOKeyValueConditional { key = "selection"; value = "second"; }
protected NSArray keyList; protected String selection; public Main() { keyList = new NSArray(new Object[] {"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.