Open Source & Free  

TIP: Customize Tabs Behavior

TIP: Customize Tabs Behavior

Header Image

The Tabs component isn’t our first attempt at the the multi-tab UI and as such we made a lot of changes to the logic to facilitate a level of flexibility that can answer most use cases e.g. Tabs that can be closed with an X on the top right section or span multiple rows.

Most developers are oblivious to this capability which is a shame, it is indeed a bit obscure. The code below demonstrates multi-line tabs:

Form hi = new Form("Custom Tabs", new BorderLayout());

Tabs tb = new Tabs() {
    protected Component createTab(String title, Image icon) { (1)
        SpanButton custom = new SpanButton(title);
        return custom;

    protected void setTabSelectedIcon(Component tab, Image icon) {
        ((SpanButton)tab).setPressedIcon(icon); (2)

    protected void selectTab(Component tab) { (3)

    protected void bindTabActionListener(Component tab, ActionListener l) {

tb.addTab("Tab 1", FontImage.MATERIAL_3D_ROTATION, 4, new Label("T1"));
tb.addTab("Really long text in tab", FontImage.MATERIAL_ACCESSIBILITY, 4, new Label("T2"));
tb.addTab("Tab 3", FontImage.MATERIAL_ACCESS_ALARM, 4, new Label("T3"));
tb.addTab("Tab 4", FontImage.MATERIAL_ACCOUNT_BOX, 4, new Label("T4"));

tb.getTabsContainer().setScrollableX(false); (4)

hi.add(BorderLayout.CENTER, tb);;
1 This method can return any arbitrary component to use as a Tab, by default Tabs uses RadioButton but you can use anything e.g. here we used SpanButton
2 We added this in the latest version in git, that method still isn’t available but will be this Friday
3 This method works well when we have a RadioButton tab at which point it can make it “selected” however in this case I would just set the UIID to something other than the default for the selected tab. Since I didn’t want to get into it I left it blank.
4 By default tabs are scrollable which prevents them from breaking lines. This code must reside after adding the tabs otherwise scrollability will be enabled implicitly.

The result looks pretty much like a standard tabs only it allows line breaks and when we have enough space uses it intelligently.

Portrait mode shows the line break in place
Figure 1. Portrait mode shows the line break in place
In landscape we have more space so a line break isn't necessary
Figure 2. In landscape we have more space so a line break isn’t necessary


Leave a Reply