Tabs - relu91/nifty-gui GitHub Wiki

The tabs control does just what it implies. It makes it possible for you to have tabbed panels in your Nifty interface. To do this, there are two controls, the tabs-control and the tab-control.

This is the main container control. To create a tabbed view, you need to add one or more tab-controls tot his tabs-control. The tabs-control consists of two parts, the buttons and the content. In the button area of the tabs-control the buttons are created which enable switching between the different tabs. The content area is where the actual tab is displayed.

The tab-control is where you define the actual tab content area. This is another container control. This means you can add the content you want to display on the tab inside this control. The tab-control has one mandatory attribute, aside from the normal control attributes. This is the caption. This caption is used on the button in the button area of the tabs-control.

The Tabs Java API is used to:

• add/remove tabs and
• set a tab as active tab.

The following tables describe all of the parameters that you can apply to the overal tab control when it is being created.

The following tables describe all of the parameters that you can apply to the individual tab control when they are being created.

The TabSelectedEvent is published on the EventBus when a different tab is selected.

To build a nifty tab through the builders two things need to be done. First the tabs-control needs to be built, then the tab-controls need to be added to the tabs-control.

control(new ControlBuilder(DialogPanelControlDefinition.NAME) {{
   control(new TabsBuilder("tabs") {{ }});
}});

Here we build a tab with the caption "Tab 1" and the id tab_1. Inside the tab we create a panel with a label displaying the text "Tab 1".

Element tab1 = new TabBuilder("tab_1", "Tab 1") {{
    panel(new PanelBuilder() {{
        childLayoutHorizontal();
            control(builders.createLabel("Tab 1")); 
        }});
    }}.build(nifty, screen, this.tabs.getElement());
// here we add the newly created tab to the main tabs-control.
tabs.addTab(tab1);

// create a tabs control
<control id="edit_tabs" name="nifty-tabs" buttonWidth="50%" buttonHeight="50px">
<control id="tab_1" name="nifty-tab" caption="tab 1"/>
</control>

In this example you can see the two different controls, tabs-control and tab-control. Both are container controls, on inside the other. Here, the tabs control contains two tab controls, tab_1 and tab_2. Inside the tabs is the actual content of the tabs, tab_2_content and tab_2_content. These are the tabs which are displayed on the screen when the related tab button is clicked.

Complete examples can be found in the new nifty-default-controls-example (using JavaBuilder only).

Back to Nifty Standard Controls (Nifty 1.3)