《javafx2.0的fxml语言》由会员分享，可在线阅读，更多相关《javafx2.0的fxml语言（10页珍藏版）》请在金锄头文库上搜索。
1、FXML是JavaFX 2.0新引入的。你可能会问What is FXML? 和Is FXML for me? FXML 是基于XML的一种声明性标记语言，用来定义应用的用户接口。FXML对于定义静态的布局很便利，诸如form, control, 和table。使用FXML也可以动态构造布局，不过要结合脚本。FXML是一个优势是基于XML，所以多数开发者，尤其是web开发者和其他RIA平台的开发者会很熟悉它。另一个优势是FXML不是编译型语言，不需要编译后才能看出变化。第三个好处是可以很简单的看到应用场景的结构。反过来，也就很简单地可以在组内进行合作开发用户接口。要对比JavaFX和FXML,
2、看图Figure 1.构成该应用的场景包括一个边框布局，在它的顶部和中间各有一个标签。Figure 1 Border Pane Simple ExampleDescription of Figure 1 Border Pane Simple ExampleExample 1是相应的JavaFX代码.Example 1 JavaFX Scene GraphBorderPane border = new BorderPane();Label toppanetext = new Label(Page Title);border.setTop(toppanetext);Label centerpane
3、text = new Label (Some data here);border.setCenter(centerpanetext);Example 2是相应的FXML.Example 2 FXML Scene Graph 展示FXML优势的最好方法是例子。本指南讲解如何创建Figure 2中的登陆界面 .Figure 2 Login User InterfaceDescription of Figure 2 Login User Interface开始之前先熟悉一下Figure 3中的用户接口. 该接口使用了一个包含两部分的边框布局。顶区域包括一个堆栈布局，里面是用文本Label Examp
4、le覆盖一副图片。中部区域是一个网格布局，有标签、文本框、密码框和按钮。Figure 3 Layout of Login User InterfaceDescription of Figure 3 Layout of Login User Interface要创建该界面，我们需完成以下任务: Prepare for This Tutorial Set Up the Project Set Up the Application Basics Create the Properties File Create the FXML File Define a Border Pane Layout St
5、ack Text Over an Image Add a Grid Layout and Controls Add a Button Event Use a Scripting Language Use a Style Sheet准备本指南使用NetBeans IDE.请确保NetBeans IDE的版本支持JavaFX 2.0。要完成本文，应熟悉用JavaFX编用户接口。尤其要知道场景的知识，因为FXML的语法结构和JavaFX的场景很像。建立工程第一步是建立JavaFX工程。1. 从File菜单选择New Project.2. 在JavaFXapplication category中，选择
6、JavaFX FXML Application，点Next.3. 输入名称 FXMLExample点击Finish. NetBeans IDE打开了工程。有三个文件：FXMLExample.java, Sample.fxml, and Sample.java.4. 下载浅蓝色渐变的fx_boxback.jpg图片到桌面，用来当背景。然后把它拖到fxmlexample文件夹下。建立基础每个 FXML 应用必须包含一些JavaFX代码，最少也有创建舞台和场景还有启动的代码。打开FXMLExample.java,删除NetBeans IDE生成的代码，用下面的代码代替。Example 3.Examp
7、le 3 FXMLExample.javapackage fxmlexample; import java.util.ResourceBundle;import javafx.application.Application;import javafx.fxml.FXMLLoader;import javafx.scene.Parent;import javafx.scene.Scene;import javafx.stage.Stage; public class FXMLExample extends Application Override public void start(Stage
8、stage) throws Exception stage.setTitle(FXML Example); Parent root = FXMLLoader.load(getClass().getResource(fxml_example.fxml), ResourceBundle.getBundle(fxmlexample.fxml_example); Scene scene = new Scene(root, 226, 264); stage.setScene(scene); stage.show(); public static void main(String args) launch
9、(args); 作为一个JavaFX编程者，应该很熟悉创建舞台和场景。而然，这一行是FXML特有的:Parent root = FXMLLoader.load(getClass().getResource(fxml_example.fxml), ResourceBundle.getBundle(fxmlexample.fxml_example);FXMLLoader.load()方法从文件fxml_example.fxml加载了目标层次并分配给变量root。getResources参数增加了一个资源束来为用户接口具体化，使得诸如定位任务更简单。后面将使用一个配置文件回到资源束并创建FXML源文
10、件。 总之，场景已经创建，root变量是场景根元素。FXML的根元素标记为场景的根。创建配置文件最佳实践是将字符串外部化，把它们放进配置文件。按照以下步骤创建用户登录界面的配置文件。1. 在Projects窗口，右击 fxmlexample文件夹，选择New,然后是Other.2. 在New File对话框，点击Other,然后是Properties File,点Next.3. 输入fxml_example作为名称，点Finish。IDE打开了该文件，其扩展名是.properties。4. 输入资源名称和值，如Example 4.Example 4 Resource names in fxml
11、_example.propertiesloginExample=Login ExamplesignIn=Sign in:userName=Username:password=Password:submit=Submit创建FXML文件现在创建fxml_example.fxml文件并插入XML声明和导入语句。1. 在Projects窗口，右击Sample.fxm，选择Rename.2. 输入fxml_example后点OK.3. 打开fxml_example文件，删除自动生成代码，用下面的取代Example 5.Example 5 Declaration and Import Statement
12、s所有FXML文件必须以XML声明开始。它定义了XML版本(1.0)和编码类型(UTF-8).在JavaFX中，类名称可以被完整描述（包括包名），或者是使用导入语句，见Example 5.只要你喜欢，你可以完整导入所以相关类。定义边框布局下面开始构建用户界面。在导入语句后面插入下面代码Example 6.Example 6 Border Pane Layout 本例中，场景根是BorderPane布局类，定义了两快区域，顶部和中部。fx:controller属性定义了控制器文件，必须要声明在FXML根元素中。后面还会更多的了解控制器。xmlns:fx=http:/ API相关的FXML标签。在图像上覆盖文字现在，在边框布局的顶区域放置一个堆栈布局。该布局包括一个标签和被覆盖的图片，见Figure 4.Figure 4 Top Region of Border Pane, Including Stack PaneDescription of Figure 4 Top Region of Border Pane, Including Stack Pane堆栈布局的代码是Example 7.把它们插入在和标签之间。Example 7 Stack Text Over an Image ImageV
