LWUIT: tabs - how to mark the currently selected tab

Question

I have 4 tabs. Each tab is represented by a button. Those buttons are used to select the currently displayed tab. Each button has an icon and text.

I'd like to highlight the currently selected tab by changing background color and text label color of the corresponding button. I'd like to do it using Theme and Resource Editor.

I created theme and specified unselected, selected and pressed styles for UIID "Tab". My tabs look great in Sun WTK! Fine! But I found that on a real phone the tabs always look like unselected. I tried on Nokia 5800 XPressMusic and C7. Why the difference?

After some experiments I found out the reason - the buttons may be only in 2 states: unselected and pressed. They never be in the selected state. On the emulator when I move to a button using navi keys, it becomes selected.

So, what should I do to mark the current tab?

Answer 1

I implemented what I needed. Thanks to Shai and his example.

I didn't use theme properties and made all customizations in the code. I did so because I didn't catch how setting unique UIID can help me, since the problem is not in the identifying the UIID for which the props have to be changed, but in identifying the button's style to be changed.

Below some important notes of my solution.

1. Call addActionListener for the buttons AFTER they have added to the tabs.
2. When any tab button is pressed, update UNSELECTED styles of the tab buttons. Also you can change their icons.
3. Call form's repaint() after step 2.

Answer 2

You can use a few different approaches especially in 1.5.

LWUIT 1.5 has a Tabs component which pretty much does everything for you and is remarkably flexible.

It uses radio buttons on which the method setToggleButton(true) is invoked. Toggle buttons act like radio buttons so when you press a button in the group it stays pressed and is rendered using the ToggleButton style (you can set the UIID to whatever you want). See a sample of using toggle buttons in the font demo portion of LWUIT demo.

An option that will work for older versions of LWUIT is to just set the UIID of the button to a different value when it is pressed (and restore the UIID of the previously selected button to the original value).