J2ME Polish
J2ME Polish 2.4 Documentation
Enough Software

Using TabbedForms

Design

TabbedForm
The above design has been realized with following settings in polish.css:

.tabbedForm {
	padding: 4;
	layout: hcenter | vcenter;
	background {
		type: vertical-gradient;
		top-color: screenBgColor;
		bottom-color: screenBgBottomColor;
		start: 10%;
		end: 80%;
		top: title;
		bottom: menubar;
	}
	/* not supported because we use the extended menu bar:
	menubar-color: menubarColor;
	*/
	scrollindicator-up-image: url( arrowU.png );
	scrollindicator-down-image: url( arrowD.png );
	title-style: solidTitle;
}

tabbar {
	background-color: white;
	layout: expand;
	padding-bottom: 0;
	tabbar-left-arrow: url( left.png );
	tabbar-right-arrow: url( right.png );
	tabbar-arrow-y-offset: 3;
	tabbar-roundtrip: true;
	/* not supported, since we use arrow images:
	tabbar-scrolling-indicator-color: COLOR_FOREGROUND;
	*/
}

activetab {
	padding: 3;
	padding-left: 10;
	padding-right: 8;
	padding-top: 7;
	background-type: round-tab;
	background-color: activeTabColor;
	background-arc: 8;
	font-color: black;
	font-style: bold;
}

inactivetab {
	margin-left: 2;
	margin-right: 2;
	margin-bottom: 1;
	padding: 3;
	padding-left: 6;
	padding-right: 4;
	background-type: round-tab;
	background-color: inactiveTabColor;
	background-arc: 8;
	font-color: gray;
}

The TabbedForm contains any kind of items in several tabs. The user can jump between different tabs by clicking left and right.

The TabbedForm uses these default styles for its design:

  • tabbar: the design of the complete bar that contains all tabs
  • activetab: the design of the currently selected tab
  • inactivetab: designs the remaining tabs

CSS Attributes for TabbedForm

You can use following TabbedForm specific CSS attributes for your design:

CSS Attributes for the Tab Bar

For designing the tab bar at the top of a TabbedForm, use these CSS attributes:

Programming

You can use the TabbedForm in most aspects like a normal javax.microedition.lcdui.Form with some additional options for managing items on specific tabs and tab interaction.

  • TabbedForm(String title, String[] tabNames, Image[] tabImages ): Creates a new TabbedForm with the specified tabs - can be used with a style preprocessing directive..
  • append( int tabIndex, Item item ): Appends an item to the specified tab - can be used together with a style preprocessing directive.
  • append( int tabIndex, Item item, Style itemStyle ): Appends an item with a programatically chosen style.
  • set( int tabIndex, int itemIndex, Item item ): Exchanges an existing item in the specified tab.
  • Item get(int tabIndex, int itemNum): Retrieves an item from the specified tab.
  • delete( int tabIndex, Item item ), delete( int tabIndex, int itemIndex ): Deletes an item from a specific tab.
  • deleteAll( int tabIndex ): Clears a complete tab.
  • int size( int tabIndex ): Gets the number of items within a tab.
  • int getTabCount(): Retrieves the number of tabs.
  • setActiveTab( int tabIndex ): Swicthes the the specified tab.
  • int getActiveTab(): Retrieves the currently selected tab.
  • setTabImage( int tabIndex, Image image ): Changes the image of the existing tab.
  • setText(int tabIndex, String text ): Changes the text of the existing tab.
  • setTabbedFormListener( TabbedFormListener listener ): Sets the TabbedFormListener that is invoked whenever the user changes a tab.

Please refer to the "tabbedform" sample application for working example.

Configuration

You can configure if List should not show commands like "Select" for implicit and exclusive Lists or "Mark" for multiple lists. By default such commands are shown. Specify these configuration settings in the variables section of your build.xml script.

Variable  DefaultValuesExplanation
polish.TabbedForm.allowTabSelection false true, false Allows the user to select the tabs - this is then necessary for changing the tab as well.
<variable name="polish.TabbedForm.allowTabSelection" value="true" />
polish.TabbedForm.releaseResourcesOnTabChange false true, false Releases all resources hold by a specific tab after another one has been selected. This might make sense when some tabs hold very complex UI data like RGB based animations.
<variable name="polish.TabbedForm.releaseResourcesOnTabChange" value="true" />

JavaDoc

back to top