在JAVAFX中创建一个表单

在开发应用程序时,创建一个表单是一种很常见的活动。本教程介绍屏幕布局(Layout)的基本信息,指导你如何添加控件到Layout面板( Pane)中,如何创建输入事件。
在本教程中,你将会使用JavaFX来创建如图4-1所示的登录表单。


创建工程

你的第一个任务是在IDE中创建一个JavaFX Project并且将其命名为Login:

  1. 从”File”菜单中选择”New Project”。
  2. 在”JavaFX”应用程序分类中,选择”JavaFX Application”。单击”Next”按钮。
  3. 将Project命名为Login并且单击”Finish”。
    当你创建一个JavaFX工程时,IDE提供了一个Hello World应用程序作为起始点,如果你根据前面的Hello World教程进行操作过那么你已经见到过它了。
  4. 移除IDE自动生成的start()方法并且使用例4-1中的代码替换之。
    例4-1 应用程序的Stage
@Override
public void start(Stage primaryStage) {
    primaryStage.setTitle(“JavaFX Welcome”);
    primaryStage.show();
}

创建一个GRIDPANE LAYOUT

在登录表单中可以使用GridPane布局,因为它允许你创建一个灵活的行列网格来对控件进行布局。你可以将控件放到网格中的任意一个单元格,也可以设置控件根据需要跨单元格(span)摆放。
用于创建GridPane的代码如例4-2所示。在代码行primaryStage.show()之前增加如下代码:
例4-2 带有Gap和Padding属性的GridPane

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);
primaryStage.setScene(scene);

例4-2创建了一个GridPane对象并将其分配给了名为grid的变量。alignment属性将grid的默认位置从靠左上角对齐改为居中显示。gap属性管理行列之间的间隔,padding管理grid 面板边缘周围的间隔,insets分别指定了上、右、下、左四边的间隔,在本例中每边都设置了25像素的padding。
例4-2中,scene被创建并使用grid pane作为root节点,这在使用layout容器构建界面时是一种常见用法。因此当窗口的大小改变时,在gird pane中的节点也将随之根据布局的约束而改变。在本例中无论你怎样对窗体进行缩放操作,grid 面板将始终居中显示。padding属性将确保在窗口被缩小时gird 面板周围仍能留有间隔。
这段代码将scene的大小设置为了300*275。如果你没有设置scene的大小,默认情况下scene将使用能将其内部组件全部显示的最小大小。

增加文本(TEXT)、标签(LABLE)和文本域(TEXT FIELD)
观察图4-1,你会看到表单具有一个”Welcome”标题,并且还有用于收集用户信息的文本框和密码框。用于创建这些控件的代码如例4-3所示。将这些代码添加到设置grid的padding属性的代码行之后。
例4-3 创建控件

       Text scenetitle = new Text(“Welcome”);
       scenetitle.setFont(Font.font(“Tahoma”, FontWeight.NORMAL, 20));                
       grid.add(scenetitle, 0, 0, 2, 1);

       //创建Label对象,放到第0列,第1行
       Label userName = new Label(“User Name:”);
       grid.add(userName, 0, 1);

       //创建文本输入框,放到第1列,第1行
       TextField userTextField = new TextField();
       grid.add(userTextField, 1, 1);

       Label pw = new Label(“Password:”);
       grid.add(pw, 0, 2);

       PasswordField pwBox = new PasswordField();
       grid.add(pwBox, 1, 2);

第一行代码创建了一个创建不可编辑的Text对象,将其文本设置为”Welcome”,并且将其分配给了一个名为scenetitle的变量。第二行代码使用setFont方法来设置了scenetitle变量的字体、字重(粗细)和字号。当样式被绑定到一个变量上时使用内联样式是合适的,但更好的用户界面样式化技术是使用样式表。在下一章教程”使用JavaFX CSS美化表单”中,你将会使用样式表来替换内联样式。

grid.add()方法将scenetitle变量添加到grid布局之中。在grid中的行列号均从0开始,而scenetitle被添加到第0列、第0行。grid.add()方法的最后两个参数分别表示列跨度为2、行跨度为1。

下面代码行创建了一个带有”User Name”文本的Label对象,它被放到了第0列、第1行,还创建了一个可以编辑的Text Field对象。TextField被添加到grid面板中,放在第1列,第1行。另外以类似的方式创建了一个PasswordField和Label并将它们添加到grid面板中。

当使用GridPane时,为了便于调试,你可以显示网格线。在这种情况下你可以将代码grid.setGridLinesVisible(true)添加到增加了PasswordField的代码行之后。这样当你运行程序时,你将会看到网格的行列线和gap属性,如图4-2所示。

图4-2 带有网格线的登录表单!

屏幕快照 2016-09-22 18.11.07.png

增加BUTTON和TEXT

样例应用程序最后需要添加的两个控件是用于提交数据的Button控件和用于在用户点击按钮后显示信息的Text控件。

首先创建按钮并将其放到右下角,通常那些用于触发影响整个表单的事件的按钮都会放在这个位置。相关的代码如例4-4所示。将这些代码添加到创建scene的代码之前。

例4-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);//将HBox pane放到grid中的第1列,第4行

第一行代码创建了一个名为btn的按钮,并带有”Sign in”标签。第二行代码创建了一个名为hbBtn的HBox 布局面板,它的spacing被设置为10像素。HBox面板为按钮设置了与grid面板中其它控件不同的对齐方式。alignment属性值为Pos.BOTTOM_RIGHT,表示将对应的节点设置为靠右下对齐。按钮被添加为HBox面板的子节点,而HBox面板被添加到grid中的第1列,第4行。
现在,添加一个Text控件用于显示消息,如例4-5所示。将这些代码添加到创建scene的代码之前。

例4-5 文本

       final Text actiontarget=new Text();//增加用于显示信息的文本
       grid.add(actiontarget, 1, 6);

图4-3 带有按钮的登录表单


增加事件处理代码

最后,增加代码使得用户点击按钮时显示文本信息。在创建scene的代码之前添加如例4-6所示的代码。

例4-6 按钮事件

       btn.setOnAction(new EventHandler<ActionEvent>() {//注册事件handler
          @Override
          public void handle(ActionEvent e) {
              actiontarget.setFill(Color.FIREBRICK);//将文字颜色变成 firebrick red
              actiontarget.setText(“Sign in button pressed”);
          }
       });

setOnAction()方法用于注册一个事件处理器(Event Handler),当用户点击按钮时会将actiontarget对象的文本设置为”Sign in button pressed”,颜色设置为砖红色。

运行程序

在IDE的Projects窗口中右键选择Login工程,选择”Run”,然后点击”Sign in”按钮。图4-4展示了运行结果。如果在你运行时遇到了问题,可以看看Login.zip下载包中的Login.java文件。

图4-4 最终的登录表单


了解更多
本章节总结了基本的表单教程,但是你可以继续阅读更多关于JavaFX应用程序开发的教程:
● “使用JavaFX CSS美化表单”章节中提供了简单的样式技巧来改进你的应用程序,包括增加背景图、样式化按钮和文本。
● “使用FXML进行用户界面设计”章节中展示了另外一种创建登录用户界面的方法。FXML是一种基于XML的语言,它提供了将用户界面代码与应用程序逻辑代码分离的结构。
● “使用JavaFX布局”解释了JavaFX内置的布局面板以及使用它们的一些技巧。
你可以从Java SE 下载页面的JDK Demos and Samples部分下载JavaFX样例,网址为:http://www.oracle.com/technetwork/java/javase/downloads/。样例Ensemble中包含了布局相关的示例及其源码。


扫描二维码,在手机上阅读!
最后由 BF 编辑于2017年03月20日 20:20