java fxml教程_Javafxml

FXML入门教程

本部分教程包括两部分内容：

为什么使用FXML(基本介绍以及用FXML创建用户界面的好处)；

使用FXML创建用户界面(通过创建简单登录应用来完成本教程部分)。

1.1 为何使用FXML，对比于FX的优势

原来的Javafx界面控制面板都写在同一个类里，代码比较杂揉。现在分为三部分

.fxml配置文件： 面板装饰

controller类 ： 逻辑处理，按钮点击。

主类： 用于启动应用

.fxml配置文件和controller类通过配置建立连接

.fxml配置文件主类通过文件加载建立连接

FXML介绍；

FXML简单示例；

FXML好处。

1.1.1 FXML介绍

FXML没有相应的模式，但有一个基本的预定义结构。用FXML表达什么，如何用它构建场景图，依赖于你构造对象的API。因为FXML直接映射到Java，参照API文档以更好地什么理解元素和属性允许应用。通常，大多数JavaFX类能作为元素使用，大多数Bean的Properties特性可以用作属性。

来源于模型-视图-控制器(MVC)观点，FXML文件包含用户界面描述的部分称之为视图。控制器是可选性实现Initializable类的Java类，这被声明为FXML文件的控制器。模型由定义java端的域对象构成，并通过控制器连接到视图。在“使用FXML创建用户界面”中有一个结构性示例。

使用FXML创建用户界面时，对大而复杂的布景、表单、数据实体或是复杂动画，使用FXML是特别有用的。FXML也是适合定义静态布局结构，诸如表单、控件和表等。另外，通过包含脚本还能使用FXML构建动态布局。

1.1.2 FXML简单示例

最简单展示FXML好处的方法是实例

说明：布局类BorderPane定义两个区域：顶部区域和中部区域。顶部区域包含一个“Page Title”标签，中部区域包含一个“some data here”标签。

首先，看下用户界面结构如何，在源代码中如何直接创建，如下示例1-1所示。

BorderPaneborder = new BorderPane();

Labeltoppanetext = new Label("Page Title");

border.setTop(toppanetext);

Label centerpanetext= new Label ("Some data here");

border.setCenter(centerpanetext);

示例1-1 用户界面的java代码

现在看下示例1-2，展示相同的用户界面，但是用FXML标记的。这儿能看到用户界面的层次结构，这更容易依次添加控件构建用户界面。

示例1-2 FXML标记用户界面

1.1.3 FXML的好处

除了提供给web开发者一个熟悉的用户界面设计方法万，FXML还提供如下好处：

Ø 由于场景图在FXML中更透明，这使开发团队更容易创建和维护一个可测试的用户界面；

Ø FXML是非编译语言，无需重编译就可查看变化；

Ø FXML文件内容可以本地化处理。例如，如果一个FXML文件使用en_US本地化加载，它基于下面资源字符串产生 “First Name” 字符串标签：。如果本地化变为fr_FR，这个FXML文件重新加载，这标签将展示“Prénom”。相同的事情对java代码则不行。因为你需要获得相应引用后，必须手动更新每个用户界面元素内容，并正确调用setter。

Ø 可以和任何JVM语言一起使用FXML，诸如Java、Scale或者Clojure。

Ø FXML不局限与MVC模型的视图部分。你可以构造服务、任务或域对象，并且你可以在FXML中使用javascript或其它脚本语言。关于使用脚本示例，请参考本教程“使用脚本语言”部分。

1.2 创建用户界面

通过前述介绍，现在已经对怎么使用FXML有了一定认知，接下来将在教程实战中更好理解。

图例说明：应用标题为“LoginExample”。标签重叠了一个背景图片。从顶到底，应用程序中的控件是：带文本“Sign In”的标签、带“UserName”的文本框、带“Password”的密码框以及一个提交按钮。

开始前，熟悉下登录界面布局