Views
5 months ago

tornadofx-guide

5. Data Controls You

5. Data Controls You might wonder why the label got so big and bold by default. This is coming from the default stylesheet. The stylesheet is a good starting point for further customization. All properties of the data grid can be configured in code as well as in CSS, and the stylesheet lists all possible style properties. The number list showcased multiple selection. When a cell is selected, it receives the CSS pseudo class of selected . By default it will behave mostly like a ListView row with regards to selection styles. You can access the selectionModel of the data grid to listen for selection changes, see what items are selected etc. Summary Functional constructs work well with data controls like TableView , TreeView , and others we have seen in this chapter. Using the builder patterns, you can quickly and functionally declare how data is displayed. In Chapter 7, we will embed controls in layouts to create more complex UI's easily. 70

6. Type Safe CSS Type-Safe CSS While you can create plain text CSS style sheets in JavaFX, TornadoFX provides the option to bring type-safety and compiled CSS to JavaFX. You can conveniently choose to create styles in its own class, or do it inline within a control declaration. Inline CSS The quickest and easiest way to style a control on the fly is to call a given Node 's inline style { } function. All the CSS properties available on a given control are available in a type-safe manner, with compilation checks and auto-completion. For example, you can style the borders on a Button (using the box() function), bold its font, and rotate it (Figure 6.1). button("Press Me") { style { fontWeight = FontWeight.EXTRA_BOLD borderColor += box( top = Color.RED, right = Color.DARKGREEN, left = Color.ORANGE, bottom = Color.PURPLE ) rotate = 45.deg } } setOnAction { println("You pressed the button") } Figure 6.1 This is especially helpful when you want to style a control without breaking the declaration flow of the Button . However, keep in mind the style { } will replace all styles applied to that control unless you pass true for its optional append argument. 71

GUIDE
Guide
Guide
GUIDE
GUIDE
Guide
Guide
GUIDE
Guide
GUIDE
GUIDE
GUIDE