TornadoFX编程指南，第6章，类型安全CSS

2017-08-09 本文已影响412人公子小水

译自《Type-Safe CSS》

类型安全CSS

虽然您可以在JavaFX中创建纯文本的CSS样式表，但TornadoFX提供了将类型安全性和编译的CSS引入JavaFX的选项。您可以方便地选择在自己的类中创建样式（create styles in its own class），或者在控件声明中内联（inline within a control declaration）。

内联CSS

最快速地且最简单地给控件指定样式的方式是，调用一个给定的Node的内联style { }函数。给定控件上可用的所有CSS属性都可以以类型安全的方式提供，具有编译检查（compilation checks）和自动完成（auto-completion）。

例如，您可以给Button的边框（使用box()函数）进行样式化，粗体显示它的字体，然后旋转它（图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") }
}

图6.1

当您希望在不破坏Button的声明流的情况下调整控件时，这是特别有用的。但是，请记住， style { }将替换应用于该控件的所有样式，除非您为其可选的append参数传递true。

style(append = true) {
      ....
}

有时您想一次性将相同的样式应用于许多节点。style { }函数也可以应用于包含节点的任何Iterable：

vbox {
    label("First")
    label("Second")
    label("Third")
    children.style {
        fontWeight = FontWeight.BOLD
    }
}

fontWeight样式适用于vbox的所有子项，本质上就是我们添加的所有标签。

当您的样式复杂度超过一定阈值时，您可能需要考虑使用我们将在下面介绍的样式表（Stylesheets）。

使用样式表应用样式类（Applying Style Classes with Stylesheets）

如果要组织（organize），重用（re-use），组合（combine）和覆盖（override）样式，您需要使用Stylesheet 。传统上在JavaFX中，样式表在项目中包含的纯CSS文本文件中定义。但是，TornadoFX允许使用纯Kotlin代码创建样式表。这具有编译检查，自动完成和其他带有静态类型代码的好处（compilation checks, auto-completion, and other perks）。

要声明Stylesheet，将其扩展到您自己的类以保存您的自定义样式。

import tornadofx.*

class MyStyle: Stylesheet() {
}

接下来，您将要指定其companion object来保存可以轻松检索的类级属性。声明一个新的cssclass() 代理属性，名为tackyButton，并定义我们将用于其边框的四种颜色。

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
    }
}

注意，您也可以使用c()函数使用RGB值或颜色字符串快速构建颜色。

  private val topColor = c("#FF0000")
  private val rightColor = c("#006400")
  private val leftColor = c("#FFA500")
  private val bottomColor = c("#800080")

最后，声明一个init()块来将样式应用于类。定义您的选择（selection），并提供一个操纵其各种属性的块。（对于复合选择，调用s()函数，它是select()函数的别名）。设置rotate到10度，使用四种颜色和box()函数定义borderColor ，使字体系列 “Comic Sans MS”，并将fontSize增加到20像素。请注意， Number类型的扩展属性可以快速生成该单位的值，例如10度为10.deg，20像素为20.px。

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
    }

    init {
        tackyButton {
            rotate = 10.deg
            borderColor += box(topColor,rightColor,bottomColor,leftColor)
            fontFamily = "Comic Sans MS"
            fontSize = 20.px
        }
    }
}

现在，您可以将tackyButton样式应用于支持这些属性的按钮，标签和其他控件。虽然此样式可以与其他控件（如标签）配合使用，但我们将在此示例中定位按钮。

首先，将MyStyle样式表加载到应用程序中。

class MyApp: App(MyView::class, MyStyle::class) {
    init {
        reloadStylesheetsOnFocus()
    }
}

reloadStylesheetsOnFocus()函数调用将指示TornadoFX每次Stage获取焦点时重新加载样式表。您还可以将--live-stylesheets参数传递给应用程序来完成此操作。

重要信息：要reload可以工作，您必须以调试模式运行JVM，并且必须先指示IDE重新编译，然后再切换回应用程序。没有这些步骤，什么都不会发生。这也适用于类似的reloadViewsOnFocus()，但重新加载整个视图，而不仅仅是样式表。这样，您可以在 “代码更改，编译，刷新（code change, compile, refresh）” 的方式中快速演变UI。

您可以通过调用其addClass()函数将样式直接应用于控件。为两个按钮提供MyStyle.tackyButton样式的代码如下（图6.2）。

class MyView: View() {
    override val root = vbox {
        button("Press Me") {
            addClass(MyStyle.tackyButton)
        }
        button("Press Me Too") {
            addClass(MyStyle.tackyButton)
        }
    }
}

图6.2

Intellij IDEA可以执行一个quickfix导入成员变量，允许addClass(MyStyle.tackyButton)缩短为addClass(tackyButton)，如果你愿意的话。

您也可以使用removeClass()来删除指定的样式。

将样式定位到类型（Targeting Styles to a Type）

使用纯Kotlin的好处之一是您可以使用Kotlin代码来严格的操纵UI控件的行为和条件。例如，您可以通过遍历控件的children，过滤仅针对Buttons的子项，并向其中应用addClass()，将样式应用于任何Button。

class MyView: View() {
    override val root = vbox {
        button("Press Me")
        button("Press Me Too")

        children.asSequence()
                .filter { it is Button }
                .forEach { it.addClass(MyStyle.tackyButton) }
    }
}

事实上，一次操作几个节点上的类是很常见的，因此TornadoFX为它提供了一个快捷方式：

children.filter { it is Button }.addClass(MyStyle.tackyButton) }

您还可以通过选择和修改Stylesheet的button来定位应用程序中的所有Button实例。这将应用样式给所有按钮。

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
    }

    init {
        button {
            rotate = 10.deg
            borderColor += box(topColor,rightColor,leftColor,bottomColor)
            fontFamily = "Comic Sans MS"
            fontSize = 20.px
        }
    }
}

import javafx.scene.layout.VBox
import tornadofx.*

class MyApp: App(MyView::class, MyStyle::class) {
    init {
        reloadStylesheetsOnFocus()
    }
}

class MyView: View() {
    override val root = vbox {
        button("Press Me")
        button("Press Me Too")
    }
}

图6.3

还可以选择多个类和控件类型来混合并匹配样式（mix-and-match）。例如，您可以将标签和按钮的字体大小设置为20像素，并为按钮创建粘性边框（tacky borders）和字体（图6.4）。

class MyStyle: Stylesheet() {

    companion object {

        private val topColor = Color.RED
        private val rightColor = Color.DARKGREEN
        private val leftColor = Color.ORANGE
        private val bottomColor = Color.PURPLE
    }

    init {
        s(button, label) {
            fontSize = 20.px
        }
        button {
            rotate = 10.deg
            borderColor += box(topColor,rightColor,leftColor,bottomColor)
            fontFamily = "Comic Sans MS"
        }
    }
}

class MyApp: App(MyView::class, MyStyle::class) {
    init {
        reloadStylesheetsOnFocus()
    }
}

class MyView: View() {
    override val root = vbox {
        label("Lorem Ipsum")
        button("Press Me")
        button("Press Me Too")
    }
}

图6.4

多值CSS属性（Multi-Value CSS Properties）

某些CSS属性可以接受多个值，而TornadoFX样式表可以使用multi()函数来简化。这允许您通过varargs参数指定多个值，并让TornadoFX处理其余值。例如，您可以将多个背景颜色和插图嵌入到控件中（图6.5）。

label("Lore Ipsum") {
    style {
        fontSize = 30.px
        backgroundColor = multi(Color.RED, Color.BLUE, Color.YELLOW)
        backgroundInsets = multi(box(4.px), box(8.px), box(12.px))
    }
}

图6.5

multi()函数应该在接受多个值的地方工作。如果您只需要为接受多个值的属性分配一个值，则需要使用plusAssign()运算符来添加它（图6.6）。

label("Lore Ipsum") {
    style {
        fontSize = 30.px
        backgroundColor += Color.RED
        backgroundInsets += box(4.px)
    }
}

图6.6

嵌套样式（Nesting Styles）

在选择器块（selector block）中，您可以应用更多的针对子控件的样式。

例如，定义一个名为critical的CSS类。使其在任何适用于它的控件上放置一个橙色边框，并将其pad设为5像素。

class MyStyle: Stylesheet() {

    companion object {
        val critical by cssclass()
    }

    init {
        critical {
            borderColor += box(Color.ORANGE)
            padding = box(5.px)
        }
    }
}

但是假设当我们对任何控件（例如HBox应用critical时，我们希望它可以对控件内的按钮添加额外的样式。嵌套另一个选择（Nesting another selection）将会做到这一点。

class MyStyle: Stylesheet() {
    companion object {
        val critical by cssclass()
    }
    init {
        critical {
            borderColor += box(Color.ORANGE)
            padding = box(5.px)
            button {
                backgroundColor += Color.RED
                textFill = Color.WHITE
            }
        }## Targeting Control Types
         ## If you want to style controls by their type, you can save yourself the effort
    }
}

现在当你应用critical时候，一个HBox， HBox里面的所有按钮都会得到button定义样式（图6.7）

class MyApp: App(MyView::class, MyStyle::class) {
    init {
        reloadStylesheetsOnFocus()
    }
}

class MyView: View() {
    override val root = hbox {
        addClass(MyStyle.critical)
        button("Warning!")
        button("Danger!")
    }
}

图6.7

在这里不要混淆一个关键的事情。这个橙色边框只适用于HBox，因为它已经应用到critical。按钮没有橙色边框，因为他们是HBox的子节点。虽然他们的风格是由critical定义的，但它们不会继承其父级的样式，只能为button定义。

如果您希望按钮也可以获得橙色边框，则需要将critical类直接应用于它们。您将要使用and()将特定样式应用于也被声明为critical的按钮。

class MyStyle: Stylesheet() {

    companion object {
        val critical by cssclass()
    }

    init {
        critical {

            borderColor += box(Color.ORANGE)
            padding = box(5.px)

            and(button) {
                backgroundColor += Color.RED
                textFill = Color.WHITE
            }
        }
    }
}

class MyApp: App(MyView::class, MyStyle::class) {
    init {
        reloadStylesheetsOnFocus()
    }
}

class MyView: View() {
    override val root = hbox {
        addClass(MyStyle.critical)

        button("Warning!") {
            addClass(MyStyle.critical)
        }

        button("Danger!") {
            addClass(MyStyle.critical)
        }
    }
}

图6.8

现在你在HBox周围有橙色边框以及按钮。当嵌套样式时，请记住，使用and()包装选择将级联样式到子级控件或类（cascade styles to children controls or classes）。

混入（Mixins）

有时您可能想要重复使用一组样式，并将它们应用于多个控件和选择器。这样就不必冗余地定义相同的属性和值。例如，如果要创建一组称为redAllTheThings的样式，可以将其定义为mixin，如下所示。然后，您可以将其重新使用为redStyle类，以及一个textInput，一个label和一个具有附加样式修改的passwordField （图6.9）。

样式表

import javafx.scene.paint.Color
import javafx.scene.text.FontWeight
import tornadofx.*

class Styles : Stylesheet() {

    companion object {
        val redStyle by cssclass().
    }

    init {
        val redAllTheThings = mixin {
            backgroundInsets += box(5.px)
            borderColor += box(Color.RED)
            textFill = Color.RED
        }

        redStyle {
            +redAllTheThings
        }

        s(textInput, label) {
            +redAllTheThings
            fontWeight = FontWeight.BOLD
        }

        passwordField {
            +redAllTheThings
            backgroundColor += Color.YELLOW
        }
    }
}

应用和视图：

class MyApp: App(MyView::class, Styles::class)

class MyView : View("My View") {
    override val root = vbox {
        label("Enter your login")
        form {
            fieldset{
                field("Username") {
                    textfield()
                }
                field("Password") {
                    passwordfield()
                }
            }
        }
        button("Go!") {
            addClass(Styles.redStyle)
        }
    }
}

图6.9

样式表通过将其作为构造函数参数添加到App类应用于应用程序。这是一个·vararg·参数，因此您可以以逗号分隔的多个样式表列表发送。如果要根据某些条件动态加载样式表，可以从任何地方调用importStylesheet(Styles::class) 。在调用importStylesheet之后打开的任何UIComponent importStylesheet将获取应用的样式表，还可以使用此功能加载基于正常文本的css样式表：

importStylesheet("/mystyles.css")

加载基于文本的CSS样式表

如果您发现自己将相同的CSS属性重新设置为相同的值，则可能需要考虑使用 mixins并在Stylesheet重用它们。

修饰符选择（Modifier Selections）

TornadoFX还通过在选择中利用and()函数来支持修饰符选择。最常见的情况是方便用于“选择”（"selected"）和游标“悬停”（"hover"）上下文的样式。

如果你想创建一个UI，当它被悬停在其上时，任何一个Button上，并且数据控件（如ListView所有选择的Cell都可以定义一个Stylesheet如图6.10所示。

样式表


import javafx.scene.paint.Color
import tornadofx.Stylesheet

class Styles : Stylesheet() {

    init {
        button {
            and(hover) {
                backgroundColor += Color.RED
            }
        }
        cell {
            and(selected) {
                backgroundColor += Color.RED
            }
        }
    }
}

应用和视图

import tornadofx.*

class MyApp: App(MyView::class, Styles::class)

class MyView : View("My View") {

    val listItems = listOf("Alpha","Beta","Gamma").observable()
and
    override val root = vbox {
        button("Hover over me")
        listview(listItems)
    }
}

图6.10 - 选择一个单元格，并且该Button被悬停在上面。现在都是红色的。

图6.10

无论何时需要修饰符，请使用select()函数来进行上下文风格的修改。

控件特定样式表（Control-Specific Stylesheets）

如果您决定创建自己的控件（通常通过扩展现有控件，如Button ），JavaFX允许您将样式表与它进行配对。在这种情况下，仅当加载此控件时，加载此Stylesheet是有利的。例如，如果您有一个DangerButton类扩展Button ，您可以考虑为该DangerButton专门创建Stylesheet 。要允许JavaFX加载它，您需要覆盖getUserAgentStyleSheet()函数，如下所示。这将将您的类型安全的Stylesheet转换为JavaFX本身所理解的纯文本CSS。

class DangerButton : Button("Danger!") {
    init {
        addClass(DangerButtonStyles.dangerButton)
    }
    override fun getUserAgentStylesheet() = DangerButtonStyles().base64URL.toExternalForm()
}

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)
        }
    }
}

DangerButtonStyles().base64URL.toExternalForm()表达式创建一个DangerButtonStyles的实例，并将其转换为包含JavaFX可以使用的整个样式表的URL。

总结

TornadoFX做了一个伟大的工作，执行一个聪明的概念，使CSS类型安全，并进一步展示了Kotlin DSL的力量。通过静态文本文件进行配置是很慢的，但类型安全的CSS使得其流畅且快速，特别是使用IDE自动完成。即使你对UI是务实的，感觉样式是多余的，有时候你需要利用条件格式化和突出显示，以便在UI中弹出规则。至少可以使用内嵌style { }块，以便您可以快速访问无法以其他方式访问的样式属性（例如TextWeight ）。