Java的netbean教程_JavaFX入门：简单Demo-学习NetBeans开发平台

零、 最终目标

通过两种方式(纯代码控制、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());<