Views
8 months ago

tornadofx-guide

6. Type Safe CSS Figure

6. Type Safe CSS Figure 6.10 - A cell is selected and the Button is being hovered over. Both are now red. Whenever you need modifiers, use the select() function to make those contextual style modifications. Control-Specific Stylesheets If you decide to create your own controls (often by extending an existing control, like Button ), JavaFX allows you to pair a stylesheet with it. In this situation, it is advantageous to load this Stylesheet only when this control is loaded. For instance, if you have a DangerButton class that extends Button , you might consider creating a Stylesheet specifically for that DangerButton . To allow JavaFX to load it, you need to override the getUserAgentStyleSheet() function as shown below. This will convert your type-safe Stylesheet into plain text CSS that JavaFX natively understands. class DangerButton : Button("Danger!") { init { addClass(DangerButtonStyles.dangerButton) } override fun getUserAgentStylesheet() = DangerButtonStyles().base64URL.toExternalF orm() } class DangerButtonStyles : Stylesheet() { companion object { val dangerButton by cssclass() } } init { dangerButton { backgroundInsets += box(0.px) fontWeight = FontWeight.BOLD fontSize = 20.px padding = box(10.px) } } 86

6. Type Safe CSS The DangerButtonStyles().base64URL.toExternalForm() expression creates an instance of the DangerButtonStyles , and turns it into a URL containing the entire stylesheet that JavaFX can consume. Conclusion TornadoFX does a great job executing a brilliant concept to make CSS type-safe, and it further demonstrates the power of Kotlin DSL's. Configuration through static text files is slow to express with, but type-safe CSS makes it fluent and quick especially with IDE autocompletion. Even if you are pragmatic about UI's and feel styling is superfluous, there will be times you need to leverage conditional formatting and highlighting so rules "pop out" in a UI. At minimum, get comfortable using the inline style { } block so you can quickly access styling properties that cannot be accessed any other way (such as TextWeight ). 87

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