javaFX8初探（使用FXML创建登录表单）

这一节，我们讨论javaFX FXML 给我们带来的好处，FXML是基础xml的标记语言，我们可以使用FXML创建用户界面，这样我们可以把界面从代码中分离出来。如果你从第一篇开始看的话，你已经知道如何来创建一个登陆应用，这里我们使用FXML创建一个相同的登陆用户界面，把用户界面的应用逻辑分离这一节所建立的用户界面如下所示：

创建一个javaFX Project

创建FXMLExample.java
创建FXMLExampleController.java
创建FXMLDocument.fxml

上面建立的文件都放在相同的包下。

 

加载FXML源文件，代码如下（FXMLExample.java）：

package com.chu.helloworld;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{@Overridepublic void start(Stage stage) throws Exception {Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));       Scene scene = new Scene(root, 300, 275);        stage.setTitle("FXML Welcome");        stage.setScene(scene);        stage.show();}public static void main(String[] args) {launch(args);}}

修改导入语句：

修改FXMLDocument.fxml，这个文件定义了我们的界面，首先我们需要修改导入语句，如下：
<?xml version="1.0" encoding="UTF-8"?>
<?import java.net.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>

导入的类，我们就可以使用相对应的标签。

创建GridPane布局：

删除AnchorPane 布局，用GridPane来替代，如下：

<GridPane fx:controller="com.chu.helloworld.FXMLExampleController"
    xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10">
<padding><Insets top="25" right="25" bottom="10" left="25"/></padding>

</GridPane>

在这个应用中，GridPane布局是FXML的根元素，有两个主要的属性：
fx:controller:用来指定元素触发的事件，是事件控制类。
xmlns:fx:指定命名空间，这是必须得属性

剩下的属性指定了gridpane的排列布局信息，包括行列间距，居中。

padding元素指定了gridpane的边缘空隙

因为窗口的大小是可变的，grid面板里的节点应该跟着他们的布局约束来改变。
在这个例子里。当窗口大小改变的时候grid面板会保持在中间。padding属性可以确保党窗口更小的时候grid面板周围依然存在空隙。我们设置场景的大小为300,275。如果不设置这个大小，场景的大小默认是能容纳它的内容的最小尺寸。

 

添加文本和密码域

在GridPane中添加如下代码：

<Text text="Welcome"         GridPane.columnIndex="0" GridPane.rowIndex="0"        GridPane.columnSpan="2"/>     <Label text="User Name:"        GridPane.columnIndex="0" GridPane.rowIndex="1"/>     <TextField         GridPane.columnIndex="1" GridPane.rowIndex="1"/>     <Label text="Password:"        GridPane.columnIndex="0" GridPane.rowIndex="2"/>     <PasswordField fx:id="passwordField"         GridPane.columnIndex="1" GridPane.rowIndex="2"/>

第一行创建了一个Text对象，并且内容为 Welcome，GridPane.columnIndex 和 GridPane.rowIndex属性修正了Text控件在Grid中的位置，
grid中的行列从0开始，这个Text的位置为0,0.也就意味着放到了第一列，第一行的位置。GridPane.columnSpan属性设置的值为2，意思是这个Text对象合并了两列。下面继续创建了Label、TextField、PasswordFiled。如果想看到排列布局的详细信息我们可以加上<gridLinesVisible>true</gridLinesVisible>,运行项目如下所示：

 

添加按钮和文本域

继续在gridpane中添加如下代码：

<HBox spacing="10" alignment="bottom_right"         GridPane.columnIndex="1" GridPane.rowIndex="4">        <Button text="Sign In"             onAction="#handleSubmitButtonAction"/></HBox><Text fx:id="actiontarget"       GridPane.columnIndex="0" GridPane.columnSpan="2" GridPane.halignment="RIGHT" GridPane.rowIndex="6"/>

 

HBox需要设置按钮的对齐方式，这里的设置和gridpane布局的设置方式不同，对齐方式的值是bottom_right.意思是垂直居下，水平居右。然后这个HBox被放到布局的第一列，第四行。

HBox拥有一个子元素Button,内容为 Sign In。并且增加了onAction事件#handleSubmitButtonAction，这个事件会调用gridPane的事件控制类中指定的方法。

然后创建一个Text对象，为这个对象指定了fx：id的属性，这会创建一个变量，并且你可以在代码中的任何位置使用这个变量

 

增加处理事件的代码，如下：

package com.chu.helloworld;import javafx.event.ActionEvent;import javafx.fxml.FXML;import javafx.scene.text.Text;public class FXMLExampleController {@FXMLprivate Text actiontarget;@FXMLprotected void handleSubmitButtonAction(ActionEvent event) {actiontarget.setText("Sign in button pressed");}}

@FXML用于非公共的控制类成员和事件处理方法。当按钮按下的时候handleSubmtButtonAction 方法把actiontarget 变量的值设为Sign in button pressed，运行应用，如下图所示：

 

使用脚本控制事件

1：我们需要删除布局上的事件控制类，也就是fx：controller
2：需要在文档开头加上<?language javascript?>
3：修改按钮的onAction属性为：onAction="handleSubmitButtonAction(event);"
4：添加脚本代码：
 <fx:script>
             function handleSubmitButtonAction() {
                 actiontarget.setText("Calling the JavaScript");
             }
         </fx:script>

我们也可以把脚本放到一个js文件中比如：fxml_example.js然后在文档中引用：<fx:script source="fxml_example.js"/>

运行项目可以看到，可以达到和事件控制类相同的效果

 

使用CSS改变应用的样式

1：创建的login.css,代码如下：

.root {     -fx-background-image: url("background.jpg");}.label {    -fx-font-size: 12px;    -fx-font-weight: bold;    -fx-text-fill: #333333;    -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );}#welcome-text {   -fx-font-size: 32px;   -fx-font-family: "Arial Black";   -fx-fill: #818181;   -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2 );}#actiontarget {  -fx-fill: FIREBRICK;  -fx-font-weight: bold;  -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );  }.button {    -fx-text-fill: white;    -fx-font-family: "Arial Narrow";    -fx-font-weight: bold;    -fx-background-color: linear-gradient(#61a2b1, #2A5058);    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );}.button:hover {    -fx-background-color: linear-gradient(#2A5058, #61a2b1);}

 

 

2：为跟元素添加样式。即为GridPane元素添加属性  styleClass="root"

3：为Welcome添加样式，为welcome的Text添加id属性：id="welcome-text"

运行应用如下图所示：

 

fxml文档全部内容：

<?xml version="1.0" encoding="UTF-8"?><?language javascript?><?import java.net.*?><?import javafx.geometry.*?><?import javafx.scene.control.*?><?import javafx.scene.layout.*?><?import javafx.scene.text.*?><!-- fx:controller="com.chu.helloworld.FXMLExampleController" --><GridPane fx:controller="com.chu.helloworld.FXMLExampleController"xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10"styleClass="root"><padding><Insets top="25" right="25" bottom="10" left="25" /></padding><!-- <gridLinesVisible>true</gridLinesVisible> --><Text id="welcome-text" text="Welcome" GridPane.columnIndex="0"GridPane.rowIndex="0" GridPane.columnSpan="2" /><Label text="User Name:" GridPane.columnIndex="0"GridPane.rowIndex="1" /><TextField GridPane.columnIndex="1" GridPane.rowIndex="1" /><Label text="Password:" GridPane.columnIndex="0"GridPane.rowIndex="2" /><PasswordField GridPane.columnIndex="1"GridPane.rowIndex="2" /><HBox spacing="10" alignment="bottom_right" GridPane.columnIndex="1"GridPane.rowIndex="4"><Button text="Sign In" onAction="#handleSubmitButtonAction" /></HBox><Text fx:id="actiontarget" GridPane.columnIndex="0"GridPane.columnSpan="2" GridPane.halignment="RIGHT" GridPane.rowIndex="6" /><fx:script>function handleSubmitButtonAction() {actiontarget.setText("Calling the JavaScript");}</fx:script><stylesheets><URL value="@Login.css" /></stylesheets></GridPane>