JavaFX-FXML

FXML Enhancements Made in JavaFX 2.1 and 2.2

JavaFX 2.1和2.2版本中，增加了如下改进：

* 提供前置反斜杠作为转意字符

   JavaFX 2.0使用连续的操作字符作为转意字符，比如$$,%%,@@。在JavaFX 2.1中增加反斜杠作为转意字符，比如\$,\%,\@。这使转意字符再接近统一表达式语言(UEL)，   并且开发人员更熟悉。JavaFX 2.0中的转意字符在JavaFX 2.1中被弃用。

* 控制文档命名空间的隐藏(implicit)变量

   有一个特性双向绑定控件和UI。双向绑定在JavaFX 2.1中被抛弃，但这个特性被保留。

* 简化构建FXMLLoader类

   FXMLLoader类增加了一些新的简单易用的构造函数。

* 可定制控件实例化

   //以待日后补充

* 简化使用样式表(style sheets)

   在JavaFX 2.0中，在FXML中应用样式表并不容易。但在JavaFX 2.1中，已经变得很简单。样式表可以作为属性被特别写到根元素<Scene>：

   <Scene stylesheets="/com/foo/stylesheet1.css, /com/foo/stylesheet2.css"></Scene>

   单个节点可以这样使用样式类型：

   <Label styleClass="heading, firstPage" text="First Page Heading"/>

* 调用具体的无参数(Caller-specified no-arg)控件方法作为事件handler

   在JavaFx 2.0，控件基础事件handler必须接收一个继承自Event类的参数，并返回void。在JavaFX 2.1，参数的限制被取消，我们可以写一个无参数的控件事件handler。

* <fx:constant>标签

   我们可以在FXML中添加<fx:constant>标签来查找常量。比如，我们定义了名为NEGATIVE_INFINITY的Double类，现在引用它：

   <Double fx:constant="NEGATIVE_INFINITY"/>

* FXML中方便访问子控件

   在JavaFX 2.1及之前的版本，从根控件访问子控件并不是一件容易的事。

   JavaFX 2.2映射被嵌套的控件作为成员变量，使用它可以更方便与嵌套控件相互作用。

   <VBox fx:controller="com.foo.MainController">

   ...

<fx:include fx:id="dialog" source="dialog.fxml"/>

   ...

   </VBox>

   public class MainController extends Controller {

    @FXML private Window dialog;

@FXML private DialogController dialogController;

...

   }

Creating an Address Book with FXML

我们接下来创建一个包含名字和邮箱地址的表。并在表中填入数据，在启动时对数据排序，数据在单元格里自动对齐，增加新数据到表中。

在开始这个例子前，一些基础知识我们应该了解：

* FXML工程的基本结构（.java, .fxml, 和controller文件）

* 如何创建并运行FXML工程

* 基本的layout和UI控件

先来看看我们将要实现的工程运行结果是什么样子的

创建启动类----TableViewMain.java

public class TableViewMainextends Application{

@Override

publicvoid start(Stage primaryStage) throws Exception {

primaryStage.setTitle("FXML TableView Example");

Pane myPane = FXMLLoader.load(getClass().getResource("tableview.fxml"));

Scene myScene =new Scene(myPane);

primaryStage.setScene(myScene);

primaryStage.show();

}

publicstatic void main(String args[]){

launch(args);

}

}

建立layout并加入标签和表

<GridPanealignment="CENTER"hgap="10.0"vgap="10.0"

xmlns:fx="http://javafx.com/fxml"

fx:controller="example.fxml.tableview.TableViewController">

<padding>

<Insetsbottom="10.0"left="10.0"right="10.0"top="10.0"/>

</padding>

<Labelstyle="-fx-font: NORMAL 20 Tahoma;"text="Address Book" GridPane.columnIndex="0"GridPane.rowIndex="0">

</Label>

<TableViewfx:id="tableView"GridPane.columnIndex="0"GridPane.rowIndex="1">

<columns>

<TableColumntext="First Name"></TableColumn>

<TableColumntext="Last Name"></TableColumn>

<TableColumntext="Email Address"></TableColumn>

</columns>

</TableView>

</GridPane>

定义数据模型

public class Person {

privatefinal SimpleStringProperty firstName =new SimpleStringProperty("");

privatefinal SimpleStringProperty lastName =new SimpleStringProperty("");

privatefinal SimpleStringProperty email =new SimpleStringProperty("");

public Person() {

this("","", "");

}

public Person(String firstName, String lastName, String email) {

setFirstName(firstName);

setLastName(lastName);

setEmail(email);

}

public String getFirstName() {

returnfirstName.get();

}

publicvoid setFirstName(String fName) {

firstName.set(fName);

}

public String getLastName() {

returnlastName.get();

}

publicvoid setLastName(String lName) {

lastName.set(lName);

}

public String getEmail() {

returnemail.get();

}

publicvoid setEmail(String e) {

email.set(e);

}

}

将数据 与表关联起来

创建ObservableList数组

</columns>

<items>

<FXCollectionsfx:factory="observableArrayList">

<PersonfirstName="Jacob"lastName="Smith"email="[e-mail]"/>

<PersonfirstName="Isabella"lastName="Johnson"email="[e-mail]"/>

<PersonfirstName="Ethan"lastName="Williams"email="[e-mail]"/>

</FXCollections>

</items>

</TableView>

为每一殒指定一个单元格工厂将数据关联起来

<columns>

<TableColumntext="First Name">

<cellValueFactory>

<PropertyValueFactoryproperty="firstName"/>

</cellValueFactory>

</TableColumn>

<TableColumntext="Last Name">

<cellValueFactory>

<PropertyValueFactoryproperty="lastName"/>

</cellValueFactory>

</TableColumn>

<TableColumntext="Email Address">

<cellValueFactory>

<PropertyValueFactoryproperty="email"/>

</cellValueFactory>

</TableColumn>

</columns>

引入所需的包

<?import javafx.scene.control.cell.PropertyValueFactory?>

<?import javafx.collections.*?>

<?import example.fxml.tableview.*?>

设定启动时排序

Add an ID to the First Name column:

<TableColumnfx:id="firstNameColumn"text="First Name">

Specify the sort order

</items>

<sortOrder>

<fx:referencesource="firstNameColumn"/>

</sortOrder>

</TableView>

定义列宽度

<TableColumnfx:id="firstNameColumn"text="First Name"prefWidth="100">