TornadoFX编程指南,第10章,FXML和国际化

译自《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如何工作

如前所述, Viewroot属性表示包含子节点的 “最顶层父(most parent)” 节点(Node),构成用户界面。 当您使用FXML时,您不直接实例化该根节点,而是要求TornadoFX从相应的FXML文件加载它。 默认情况下,TornadoFX将在与View类相同的package下查找与你的视图相同名称且以.fxml结尾的文件。 如果您想将所有的FXML文件放在一个文件夹中,或者其他不直接对应于您的View位置的其他组织方式,也可以用参数覆盖FXML位置。

一个简单的例子

我们创建一个基本的用户界面,显示一个Label和一个Button。 我们将添加功能到这个视图,当Button被点击时, Label将更新它的textButton的次数被点击。

创建一个名为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)。

图9.1

接下来我们将这个FXML加载到TornadoFX中。

将FXML加载到TornadoFX中

我们创建了一个包含我们的UI结构的FXML文件,但现在我们需要将它加载到TornadoFX的View,使其可以使用。 逻辑上,我们可以将此Node层次结构加载到Viewroot。 定义以下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值绑定到Labeltext属性。 为此,我们需要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值绑定到counterLabeltext属性。 我们的整个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)。

图9.2

国际化与类型安全构建器

国际化不限于与FXML一起使用。 您也可以在类型安全构建器中使用。 按照前面的方法设置.properties文件。 但是,不是在FXML文件中使用嵌入的%clickToIncrement文本,而是使用messages[]访问器查找ResourceBundle的值。 将此值作为Buttontext传递。

 button(messages["clickToIncrement"]) {
     setOnAction { increment() }
 }

总结

了解FXML对于JavaFX开发人员是有助的,但如果您对TornadoFX类型安全的构建器的感到满意,并且没有任何现有的JavaFX应用程序需要维护,这绝对不是必需的。 类型安全构建器具有使用纯Kotlin的优点,允许您在结构性声明中对任何您想要的代码进行编码。 FXML的优点主要是分离UI和功能之间的关注,但即使这样也可以通过类型安全的构建器实现。 它也可以通过拖放通过Scene Builder工具来构建,这对于那些努力以其他方式构建UI的人来说可能更为可取。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,064评论 5 466
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,606评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,011评论 0 328
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,550评论 1 269
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,465评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 47,919评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,428评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,075评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,208评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,185评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,191评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,914评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,482评论 3 302
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,585评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,825评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,194评论 2 344
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,703评论 2 339

推荐阅读更多精彩内容