2 Creating a Form in JavaFX

创建一个Form，是开发应用程序时，一个共同的活动。在本教程中，您将使用JavaFX建立如图2-1所示的登录表单。本教程教你的屏幕布局的基础知识，如何将控件添加到布局窗格，以及如何创建输入事件。

图2-1登录表

“图2-1登录表格”的说明


这个入门教程中所使用的工具是NetBeans IDE中。开始之前，请确保您正在使用该版本的NetBeans IDE支持JavaFX2。有关详情，请参阅系统需求。

创建项目
你的首要任务是在NetBeans IDE中创建一个JavaFX项目，将其命名为登录：

从文件菜单中，选择“新建项目”。

在JavaFX应用程序类别，选择JavaFX应用程序。单击“下一步”。

将项目命名为用户名，并单击Finish。

当你创建一个JavaFX项目，NetBeans IDE提供了一个Hello World应用程序作为一个起点，你已经看到，如果你跟着Hello World教程。

删除NetBeans IDE中产生，并在例2-1中的代码替换它的start（）方法。

public void start(Stage stage) {
        stage.setTitle("JavaFX WelCome!");
        stage.show();
    }

//stage:舞台的意思；stage.show();开始秀啦。

创建GridPane布局
登录Form，使用GridPane布局，因为它使您能够创建一个灵活的网格的行和列在其中进行布局控制。你可以在控制在网格中的任意单元格，并根据需要，可以使控制细胞跨度。

例2-2代码创建GridPane的布局。在stage.show()代码之前插入以下代码;

GridPane grid = new GridPane();
        grid.setAlignment(Pos.CENTER);
        grid.setHgap(10);
        grid.setVgap(10);
        
        grid.setPadding(new Insets(25,25,25,25));
        Scene scene = new Scene(grid,300,275);
        stage.setScene(scene);

 

GridPane奠定了其灵活的网格内的行和列,一个控件可能会被放置在网格内的任何地方，可能跨越多个行/列。GridPane可使用CSS背景和边界的样式。

grid.setAlignment(Post.CENTER);设置对齐方法为中心。

gird.setHgap(10);列之间的水平差距的宽度为10

grid.setVgap(10);行与行之间的垂直间距的高度为10。

grid.setPadding(new Insets(25,25,25,25));顶，右，底部，左侧周围地区的内容填充。这将包括在该地区的最低和首选大小的计算空间。默认情况下填充是Insets.EMPTY，不能设置为null。Insets();一组4方的一个矩形区域内偏移.

Scene:我理解为场景，舞台上所布置的场景。stage.setScene();把舞台布置为grid布局，300，275大小的场景。

 

添加文本，标签和文本字段
在图2-1中，你可以看到，表格要求的标题是“欢迎”和文字和密码字段收集来自用户的信息。创建这些控件的代码示例2-3。加入此代码在setPadding之前。

        Text scenetitle = new Text("Welcome");
        scenetitle.setFont(Font.font("Tahoma", FontWeight.NORMAL, 20));
        grid.add(scenetitle,0,0,2,1);
        
        Label userName = new Label("User Name:");
        grid.add(userName, 0, 1);
        
        TextField userTextField = new TextField();
        grid.add(userTextField,1,1);
        
        Label pw = new Label("Passworld:");
        grid.add(pw, 0, 2);
        
        PasswordField pwBox = new PasswordField();
        grid.add(pwBox, 1, 2);

第一行创建一个文本对象，不能编辑，设置文本的欢迎，并赋予它一个变量命名scenetitle。下一行使用setFont（）方法来设置字体系列，重量，大小的scenetitle变量。使用内联样式是适当的风格绑定到一个变量，但更好的技术为你的用户界面元素的造型是通过使用样式表。在接下来的教程中，花式形式与JavaFX CSS，你将取代同一个样式表内联样式。

grid.add（）方法添加scenetitle的变量布局网格。在网格的列和行的编号从零开始，在0行0列，添加scenetitle。最后两个参数的grid.add（）方法设置2列跨度和行跨度为1。

下一行创建一个文本用户名，第1行0列和可编辑的文本字段对象的标签对象。 1，行1列添加到网格窗格中的文本字段。密码字段和标签的创建和以类似的方式添加到“网格”窗格。

当工作与网格窗格，可以显示网格线，这是非常有用的用于调试目的。在这种情况下，可以设置为true gridLinesVisible。然后，当你运行应用程序时，您会看到网格的列和行以及差距属性的线条，如图2-2所示。

 

添加一个按钮和文本
最后两个应用程序所需的控制是一个Button控件提交的数据和显示消息的文本控件，当用户按下按钮。

首先，创建按钮，定位在右下角，这是一种共同执行的行动影响整个表格的按钮位置。代码示例2-4。现场的代码前添加此代码。

 

        Button btn = new Button("Sign in");
        HBox hbBtn = new HBox(10);
        hbBtn.setAlignment(Pos.BOTTOM_RIGHT);
        hbBtn.getChildren().add(btn);
        grid.add(hbBtn, 1, 4);

第一行创建了一个按钮，命名标签标志BTN在第二行创建一个HBox布局窗格中名为hbBtn10个像素的间距。了HBox窗格中设置一个不同的是，从应用到网格窗格中的其他控件的对齐按钮对齐。 Alignment属性值的Pos.BOTTOM_RIGHT，它定位在底部的垂直空间，在空间水平的右边缘节点。作为一个子控件HBox窗格按钮添加了HBox窗格添加到网格中的第1列，第4行。

 

现在，添加一个显示消息的文本控制，如示例2-5所示。现场的代码前添加此代码。

 

final Text actiontarget = new Text();
        grid.add(actiontarget, 1, 6);

运行你的程序会得到下图，但按钮是没有反应的。

现在添加按钮的响应事件

btn.setOnAction(new EventHandler<ActionEvent>(){
            public void handle(ActionEvent e){
                actiontarget.setFill(Color.FIREBRICK);
                actiontarget.setText("Sign in button pressed!");
            }
        });

运行应用程序
运行应用程序并单击“登录”按钮。图2-4显示的结果。如果你遇到的问题，然后在看看在Login.java文件的代码