译自《FXML and Internationalization》
FXML和国际化
TornadoFX的类型安全构建器提供了一种快速,简单和声明性的方式来构建UI。 我们鼓励这种DSL方法,因为它更灵活,更可靠,更简单。 然而,JavaFX还支持一种称为FXML的基于XML的结构,也可以构建UI布局。 对于需要此功能的人,TornadoFX具有简化FXML用法的工具。
如果您不熟悉FXML,并且对类型安全的构建器非常满意,请随时跳过本章。 如果您需要使用FXML或感觉您应该学习,请继续阅读。 您还可以查看官方的FXML文档(official FXML documentation )来了解更多信息。
考虑FXML的原因
虽然TornadoFX的开发人员强烈建议使用类型安全构建器,但有一些情况和因素可能会导致您考虑使用FXML。
关注点分离(Separation of Concerns)
使用FXML可以轻松地将UI逻辑代码与UI布局代码分开。 通过使用MVP或其他分离模式,类型安全构建器也可以实现这种分离。 但有些程序员发现FXML迫使他们保持这种分离,并且因此而更为喜欢。
所见即所得编辑(WYSIWYG Editor)
FXML文件也可以由 Scene Builder 编辑和处理,这是一种可视化布局工具,可通过拖放功能构建界面。 Scene Builder中的编辑将立即在编辑器旁边的WYSIWYG(What You See is What You Get,所见即所得)窗格中呈现。
如果您喜欢通过拖放进行界面编程,或者用纯代码构建UI有困难,则可以考虑使用FXML,仅仅是因为可以利用场景生成器(Scene Builder)。
场景生成器工具由Oracle/Sun创建,现在由Gluon维护(maintained by Gluon) ,该公司是一家投资JavaFX技术的创新公司,特别是在移动市场。
与现有代码库的兼容性
如果您将现有的JavaFX应用程序转换为TornadoFX,那么您的UI就很有可能是用FXML构建的。 如果您不愿意将传统的FXML转换为TornadoFX产品,或者希望尽可能长时间地使用,TornadoFX可以至少简化FXML的处理。
FXML如何工作
如前所述, View
的root
属性表示包含子节点的 “最顶层父(most parent)” 节点(Node
),构成用户界面。 当您使用FXML时,您不直接实例化该根节点,而是要求TornadoFX从相应的FXML文件加载它。 默认情况下,TornadoFX将在与View
类相同的package下查找与你的视图相同名称且以.fxml
结尾的文件。 如果您想将所有的FXML文件放在一个文件夹中,或者其他不直接对应于您的View
位置的其他组织方式,也可以用参数覆盖FXML位置。
一个简单的例子
我们创建一个基本的用户界面,显示一个Label
和一个Button
。 我们将添加功能到这个视图,当Button
被点击时, Label
将更新它的text
与Button
的次数被点击。
创建一个名为CounterView.fxml
的文件,内容如下:
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>
<BorderPane xmlns="http://javafx.com/javafx/null" xmlns:fx="http://javafx.com/fxml/1">
<padding>
<Insets top="20" right="20" bottom="20" left="20"/>
</padding>
<center>
<VBox alignment="CENTER" spacing="10">
<Label text="0">
<font>
<Font size="20"/>
</font>
</Label>
<Button text="Click to increment" />
</VBox>
</center>
</BorderPane>
您可能会注意到,您必须import
您在FXML中使用的类型,就像Java或Kotlin中的编码一样。 Intellij IDEA应该有一个插件来支持使用ALT + ENTER
来生成import
语句。
如果在Scene Builder
中加载该文件,您将看到以下结果(图9.1)。
接下来我们将这个FXML加载到TornadoFX中。
将FXML加载到TornadoFX中
我们创建了一个包含我们的UI结构的FXML文件,但现在我们需要将它加载到TornadoFX的View
,使其可以使用。 逻辑上,我们可以将此Node
层次结构加载到View
的root
。 定义以下View
类:
class CounterView : View() {
override val root : BorderPane by fxml()
}
请注意, root
属性由fxml()
委托定义。fxml()
委托负责将相应的CounterView.fxml
加载到root
属性中。 如果我们将CounterView.fxml
放在不同于CounterView
文件所在位置的不同位置(例如/views/
),我们将添加一个参数。
class CounterView : View() {
override val root : BorderPane by fxml("/views/CounterView.fxml")
}
我们已经布局了UI,但它还没有功能。 我们需要定义一个变量,它保存Button
被点击的次数。 添加一个名为counter
的变量,并定义一个将增加其值的函数:
class CounterView : View() {
override val root : BorderPane by fxml()
val counter = SimpleIntegerProperty()
fun increment() {
counter.value += 1
}
}
我们希望在点击Button
时调用increment()
函数。 返回到FXML文件中,将onAction
属性添加到按钮中:
<Button text="Click to increment" onAction="#increment"/>
由于FXML文件自动绑定到我们的View
,我们可以通过#functionName
语法引用函数。 请注意,我们不会在函数调用中加括号,并且不能直接传递参数。 但是,如果要检查动作的源Node
或检查什么样的动作触发按钮,则可以向increment
函数添加类型为javafx.event.ActionEvent
的参数。 对于这个例子,我们不需要它,所以我们保持没有参数的increment()
函数。
FXML文件位置
默认情况下,构建工具Maven和Gradle等将忽略放入源代码根文件夹的任何额外资源,因此如果您将FXML文件放在其中,那么在运行时将不可用,除非特别告诉您的构建工具来包含它们。 这可能仍然是有问题的,因为IDEA可能无法从构建文件中获取您的自定义资源位置,从而在运行时再次导致失败。 对于该资源,我们建议您将FXML文件放在src/main/resources
并遵循与您的软件包相同的文件夹结构,或将它们全部放在一个views
文件夹或类似的文件夹中。 后者要求您将FXML位置参数添加到fxml
委托中,如果您有大量视图,则可能会发生混乱,因此使用默认设置是一个好主意。
使用fxid访问节点
只需使用FXML,我们已经将Button
绑定到每次点击的时候就调用increment()
。 我们仍然需要将counter
值绑定到Label
的text
属性。 为此,我们需要Label
的标识符,因此在我们的FXML文件中,我们添加了fx:id
属性。
<Label fx:id="counterLabel">
现在我们可以将这个Label
注入我们的View
类:
val counterLabel : Label by fxid()
这告诉TornadoFX在我们的结构中使用与我们定义的属性(即“counterLabel
”)名称相同的fx:id
属性来查找一个Node
。 还可以在View
使用其他属性名称,并向fxid
委托添加名称参数:
val myLabel : Label by fxid("counterLabel")
现在我们拥有了Label
,我们可以使用TornadoFX的绑定快捷方式将counter
值绑定到counterLabel
的text
属性。 我们的整个View
现在应该是这样的:
class CounterView : View() {
override val root : BorderPane by fxml()
val counter = SimpleIntegerProperty()
val counterLabel: Label by fxid()
init {
counterLabel.bind(counter)
}
fun increment() {
counter.value += 1
}
}
我们的应用程序现已完成。 每次点击按钮时, label将增加其计数。
国际化
JavaFX对多语言UI有很强的支持。 为了支持FXML中的国际化,您通常必须使用FXMLLoader
注册资源包,并且将返回用其特定于语言环境的值替换资源名称的实例。 以%
开头的资源名称(resource name)是资源包(resource bundle)的关键。
TornadoFX通过支持资源包(resource bundle)的约定使此更容易:创建与View
相同的基本名称的资源包,并将自动加载,这两者都可以在View
和FXML文件中以编程方式使用。
让我们在UI中将按钮文本进行国际化。 创建一个名为CounterView.properties
的文件并添加以下内容:
clickToIncrement=Click to increment
如果要支持多种语言,请创建一个具有相同基本名称,后跟下划线的文件,然后创建语言代码。 例如,要支持法语创建文件CounterView_fr.properties
。 将使用与当前区域设置最接近的地理位置匹配。
clickToIncrement=Cliquez sur incrément
现在我们用FXML文件中的资源键(resource key)切换按钮文本。
<Button text="%clickToIncrement" onAction="#increment"/>
如果要测试此功能并强制使用不同的Locale
,切无论您当前处于哪个FX.local
,可以在App
类初始化时赋值FX.local
覆盖它。
class MyApp: App() {
override val primaryView = MyView::class
init {
FX.locale = Locale.FRENCH
}
}
你应该可以看到你的Button
使用法语文本(图9.2)。
国际化与类型安全构建器
国际化不限于与FXML一起使用。 您也可以在类型安全构建器中使用。 按照前面的方法设置.properties
文件。 但是,不是在FXML文件中使用嵌入的%clickToIncrement
文本,而是使用messages[]
访问器查找ResourceBundle
的值。 将此值作为Button
的text
传递。
button(messages["clickToIncrement"]) {
setOnAction { increment() }
}
总结
了解FXML对于JavaFX开发人员是有助的,但如果您对TornadoFX类型安全的构建器的感到满意,并且没有任何现有的JavaFX应用程序需要维护,这绝对不是必需的。 类型安全构建器具有使用纯Kotlin的优点,允许您在结构性声明中对任何您想要的代码进行编码。 FXML的优点主要是分离UI和功能之间的关注,但即使这样也可以通过类型安全的构建器实现。 它也可以通过拖放通过Scene Builder
工具来构建,这对于那些努力以其他方式构建UI的人来说可能更为可取。