DOC-01-04 在JavaFX中创建一个表单

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

在本教程中,你将会使用JavaFX来创建如图4-1所示的登录表单。

图4-1 登录表单

4_1 login

在本教程中使用的工具是NetBeans IDE。在你开始之前,请确保你使用的NetBeans IDE支持JavaFX 8。参考Java SE 下载页面中的”Certified System Configurations”部分来了解更多信息。

创建工程

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

1. 从”File”菜单中选择”New Project”。

2. 在”JavaFX”应用程序分类中,选择”JavaFX Application”。单击”Next”按钮。

3. 将Project命名为Login并且单击”Finish”。

当你创建一个JavaFX工程时,NetBeans IDE提供了一个Hello World应用程序作为起始点,如果你根据前面的Hello World教程进行操作过那么你已经见到过它了。

4. 移除NetBeans IDE自动生成的start()方法并且使用例4-1中的代码替换之。

例4-1 应用程序的Stage

小窍门:在你将样例代码添加到NetBeans Project之中后,按下Ctrl(或Cmd)+Shift+I来导入所需的包。当存在多个import元素的选择时,选择其中以javafx开头的元素。

创建一个GridPane Layout

在登录表单中可以使用GridPane布局,因为它允许你创建一个灵活的行列网格来对控件进行布局。你可以将控件放到网格中的任意一个单元格,也可以设置控件根据需要跨单元格(span)摆放。

用于创建GridPane的代码如例4-2所示。在代码行primaryStage.show()之前增加如下代码:

例4-2 带有Gap和Padding属性的GridPane

例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对象,将其文本设置为”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 带有网格线的登录表单

4_2 login_gridlines_co

增加Button和Text

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

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

例4-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 文本

图4-3展示了现在的表单。你目前还无法看到文本消息,在学完本教程的下一部分”增加事件处理代码”后才可以看到。

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

4_3 login

增加事件处理代码

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

例4-6 按钮事件

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

运行程序

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

图4-4 最终的登录表单

4_4 login_final

了解更多

本章节总结了基本的表单教程,但是你可以继续阅读更多关于JavaFX应用程序开发的教程:

● “使用JavaFX CSS美化表单”章节中提供了简单的样式技巧来改进你的应用程序,包括增加背景图、样式化按钮和文本。

● “使用FXML进行用户界面设计”章节中展示了另外一种创建登录用户界面的方法。FXML是一种基于XML的语言,它提供了将用户界面代码与应用程序逻辑代码分离的结构。

● “使用JavaFX布局”解释了JavaFX内置的布局面板以及使用它们的一些技巧。

你可以从Java SE 下载页面的JDK Demos and Samples部分下载JavaFX样例,网址为:http://www.oracle.com/technetwork/java/javase/downloads/。样例Ensemble中包含了布局相关的示例及其源码。

打赏一下
支付宝
微信
除非注明,博客文章均为原创,转载请标明文章地址
本文地址: http://www.javafxchina.net/blog/2015/06/doc01_form/
百度已收录