零、 最终目标
通过两种方式(纯代码控制、FXML),实现一个简单的登录界面:
Paste_Image.png
涉及到的控件:
文本(Text,动态显示内容)、标签(Label,显示文本)、文本域(TextField,用户交互输入)、按钮(Button,登录点击)
一、 控件通过Code动态添加实现方法
1、 新建项目
新建JavaFXLoginDemo项目,具体新建方法参见前篇:
JavaFX开发环境:NetBeans开发环境搭建
完成项目新建后,进入开发正题。
入口参数:
public class JavaFXLoginDemo extends Application {
@Override
public void start(Stage primaryStage) {
}
/**
* @param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}
}
2、 布局方式
JavaFX的UI控件均摆放在Scene上,一般通过增加控制布局的Panel,并将实际的UI摆放在布局Panel上,有点类似于Android的布局方式。Panel有多种样式,包括了行、列、栈等等,如BorderPane、GridPane、Hbox、VBox等等。
本文将使用GridPane进行布局。
GridPane grid = new GridPane();//网格式布局,由行列网格控制
grid.setAlignment(Pos.CENTER);//对齐方式,默认靠左对齐,当前设置居中对齐
grid.setHgap(10);//设置水平间隔
grid.setVgap(10);//设置垂直间隔
grid.setPadding(new Insets(25, 25, 25, 25));//设置Padding,顺序是:上、右、下、左
Scene scene = new Scene(grid, 300, 275);//新建Scene,并将网格式Panel置于其中
primaryStage.setScene(scene);//设置场景
primaryStage.show();
3、 添加控件
Text scenetitle = new Text("欢迎标题");
//scenetitle.setFont(Font.font("Times New Roman", FontWeight.NORMAL, 20));
grid.add(scenetitle, 0, 0, 2, 1);
//创建Label对象,放到第0列,第1行
Label userName = new Label("用户名:");
grid.add(userName, 0, 1);
//创建文本输入框,放到第1列,第1行
TextField userTextField = new TextField();
grid.add(userTextField, 1, 1);
Label pw = new Label("密 码:");
grid.add(pw, 0, 2);
PasswordField pwBox = new PasswordField();
grid.add(pwBox, 1, 2);
Button btn = new Button("登录");
HBox hbBtn = new HBox(10);
hbBtn.setAlignment(Pos.BOTTOM_RIGHT);
hbBtn.getChildren().add(btn);//将按钮控件作为子节点
grid.add(hbBtn, 1, 4);//将HBox pane放到grid中的第1列,第4行
final Text actiontarget = new Text();//增加用于显示信息的文本
grid.add(actiontarget, 1, 6);
4、 添加处理事件
只有一个按钮需要事件处理:
btn.setOnAction(new EventHandler() {//注册事件handler
@Override
public void handle(ActionEvent e) {
actiontarget.setFill(Color.FIREBRICK);//将文字颜色变成 firebrick red
actiontarget.setText("登录中...");
}
});
5、 添加样式CSS
步骤一:新建CSS文件:
在包上右击:
Paste_Image.png
Paste_Image.png
输入文件名Login.css,完成样式表文件的创建:
Paste_Image.png
样式表中定义的内容,主要用在控件的样式控制上,需要在UI中应用。样式表需要应用到Root容器中:
scene.getStylesheets().add(JavaFXLoginDemo.class.getResource("Login.css").toExternalForm());
设置后,将会在JavaFXLoginDemo.class相对路径下寻找给出的样式表Login.css,并应用到scene中。
步骤二:添加一张背景图,到