Views
4 months ago

tornadofx-guide

6. Type Safe CSS

6. Type Safe CSS style(append = true) { } .... Some times you want to apply the same styles to many nodes in one go. The style { } function can also be applied to any Iterable that contains Nodes: vbox { label("First") label("Second") label("Third") children.style { fontWeight = FontWeight.BOLD } } The fontWeight style is applied to all children of the vbox, in essence all the labels we added. When your styling complexity passes a certain threshold, you may want to consider using Stylesheets which we will cover next. Applying Style Classes with Stylesheets If you want to organize, re-use, combine, and override styles you need to leverage a Stylesheet . Traditionally in JavaFX, a stylesheet is defined in a plain CSS text file included in the project. However, TornadoFX allows creating stylesheets with pure Kotlin code. This has the benefits of compilation checks, auto-completion, and other perks that come with statically typed code. To declare a Stylesheet , extend it onto your own class to hold your customized styles. import tornadofx.* class MyStyle: Stylesheet() { } Next, you will want to specify its companion object to hold class-level properties that can easily be retrieved. Declare a new cssclass() -delegated property called tackyButton , and define four colors we will use for its borders. 72

6. Type Safe CSS import javafx.scene.paint.Color import tornadofx.* class MyStyle: Stylesheet() { companion object { val tackyButton by cssclass() } } private val topColor = Color.RED private val rightColor = Color.DARKGREEN private val leftColor = Color.ORANGE private val bottomColor = Color.PURPLE Note also you can use the c() function to build colors quickly using RGB values or color Strings. private val topColor = c("#FF0000") private val rightColor = c("#006400") private val leftColor = c("#FFA500") private val bottomColor = c("#800080") Finally, declare an init() block to apply styling to the classes. Define your selection and provide a block that manipulates its various properties. (For compound selections, call the s() function, which is an alias for the select() function). Set rotate to 10 degrees, define the borderColor using the four colors and the box() function, make the font family "Comic Sans MS", and increase the fontSize to 20 pixels. Note that there are extension properties for Number types to quickly yield the value in that unit, such as 10.deg for 10 degrees and 20.px for 20 pixels. 73

GUIDE
GUIDE
Guide
Guide
GUIDE
Guide
GUIDE
GUIDE
GUIDE
GUIDE