Fork us on GitHub

TIP: Customize Tabs Behavior

Tabs are very flexible and can be customize in many ways
TIP: Customize Tabs Behavior

TIP: Customize Tabs Behavior

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() {
    @Override
    protected Component createTab(String title, Image icon) { (1)
        SpanButton custom = new SpanButton(title);
        custom.setIcon(icon);
        custom.setUIID("Container");
        custom.setTextUIID("Tab");
        custom.setIconPosition(BorderLayout.NORTH);
        custom.setIconUIID("Tab");
        return custom;
    }

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

    protected void selectTab(Component tab) { (3)
    }

    @Override
    protected void bindTabActionListener(Component tab, ActionListener l) {
        ((SpanButton)tab).addActionListener(l);
    }
};

tb.setTabUIID(null);
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);

hi.show();
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
Share this Post:

Posted by Shai Almog

Shai is the co-founder of Codename One. He's been a professional programmer for over 25 years. During that time he has worked with dozens of companies including Sun Microsystems.
For more follow Shai on Twitter & github.