Views
2 weeks ago

tornadofx-guide

7. Layouts and Menus

7. Layouts and Menus gridpane { row { button("Left") { gridpaneColumnConstraints { percentWidth = 25.0 } } } button("Middle") button("Right") } constraintsForColumn(1).percentWidth = 50.0 StackPane A StackPane is a layout you will use less often. For each control you add, it will literally stack them on top of each other not like a VBox , but literally overlay them. For instance, you can create a "BOTTOM" Button and put a "TOP" Button on top of it. The order you declare controls will add them from bottom-to-top in that same order (Figure 7.10). class MyView: View() { override val root = stackpane { button("BOTTOM") { useMaxHeight = true useMaxWidth = true style { backgroundColor += Color.AQUAMARINE fontSize = 40.0.px } } } } button("TOP") { style { backgroundColor += Color.WHITE } } Figure 7.11 102

7. Layouts and Menus TabPane A TabPane creates a UI with different screens separated by "tabs". This allows switching between different screens quickly and easily by clicking on the corresponding tab (Figure 7.11). You can declare a tabpane() and then declare as many tab() instances as you need. For each tab() function pass in the name of the Tab and the parent Node control to populate it. tabpane { tab("Screen 1", VBox()) { button("Button 1") button("Button 2") } tab("Screen 2", HBox()) { button("Button 3") button("Button 4") } } Figure 7.12 TabPane is an effective tool to separate screens and organize a high number of controls. The syntax is somewhat succinct enough to declare complex controls like TableView right inside the tab() block (Figure 7.13). 103

GUIDE
GUIDE
GUIDE
Guide
Guide
GUIDE
guide
guide
Guide
Guide
GUIDE
GUIDE
GUIDE
Guide
Guide
Guide
GUIDE TO
GUIDE
GUIDE
GUIDE