Tabs

Mit der Tabs Komponente können mehrere Tab Komponente angezeigt werden. Diese eignet sich gut, um verschiedenen Content auf einer View anzuzeigen.

Um das zu erreichen kann wie folgt vorgegangen werden:

1. Hinzufügen von Tabs per Drag and Drop

2. Die gewünschte Anzahl an Tab Elemente per Drag and Drop auf die Tabs Komponente ziehen

3. Neues VerticalLayout unter der Tabs Komponente per Drag and Drop einfügen

4. Die Höhe und Breite des VerticalLayouts in der Toobox auf 100% stellen

5. Zuletzt per Rechtsklick > Events > selectedChange > onSelectedChange [add] das Event hinzufügen
   
   

   Open

   

6. Dann kann Beispielsweise der folgende Code eingefügt werden:

   /** * Event handler delegate method for the {@link Tabs} {@link #tabs}. * * @see ComponentEventListener#onComponentEvent(ComponentEvent) * @eventHandlerDelegate Do NOT delete, used by UI designer! */ private void tabs_onSelectedChange(final SelectedChangeEvent event) { final String selection = event.getSelectedTab().getLabel(); this.verticalLayout.removeAll(); if(selection.contentEquals("Eins")) { this.verticalLayout.add(new Button("Eins wurde ausgewählt")); } else if(selection.contentEquals("Zwei")) { this.verticalLayout.add(new Button("Zwei wurde ausgewählt")); } else if(selection.contentEquals("Drei")) { this.verticalLayout.add(new Button("Drei wurde ausgewählt")); } else if(selection.contentEquals("Vier")) { this.verticalLayout.add(new Button("Vier wurde ausgewählt")); } }

Anstatt nur einen neuen Button kann z.B. auch eine eigene komplexe GUI-Komponente hinzugefügt werden.