JavaFX文档(4)开始JavaFX之旅——2 JavaFx中的表单设计

声明:如需转载,请注明出处:http://blog.csdn.net/originer

原文地址:http://docs.oracle.com/javase/8/javafx/get-started-tutorial/form.htm

本节将介绍如何使用基本的布局、如何增加控件到layout pane,如何创建输入事件。

在本节将会使用JavaFX来创建下面的表单:


创建工程

在IDE中创建工程,如果是NetBeans则会给出类似Hello World中的样例代码:

@Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("JavaFX Welcome");
        
        primaryStage.show();
    }

创建GridPane 布局

使用GridPane来布局允许使用行列网格来对控件布局。可以将控件放到网格之中,也允许设置控件跨网格(span)摆放。
在代码primaryStage.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);
primaryStage.setScene(scene);
上面的代码先创建了一个GridPane对象grid。alignment属性将控件原来靠左上角对齐改为居中显示。gap属性管理行列之间的间隔,padding管理grid 面板周围的间隔,insets分别制定了上、右、下、左四边的间隔,在本例中都是25像素。

创建scene时,如果使用layout容器,我们经常利用grid pane作为root节点。因此当窗口的大小改变时,在gird pane中的节点也将随之改变。在本例中所有的控件均将居中显示。padding属性将确保在窗口被缩小时,使得gird pane周围仍能留有间隔。

这段代码将scene的大小设置为了300*275。如果不设置scene的大小,默认情况下将使用能将其内部组件全部显示的最小面积。

增加文字、标签和文本框

下面的代码将创建上面的表单,其中包括一个“Welcom”文字、用户名、密码域:
Text scenetitle = new Text("Welcome");//创建不可编辑的文本对象
		scenetitle.setFont(Font.font("Tahoma", FontWeight.NORMAL, 20));//使用内联方式设置字体、字重、字号;将来使用CSS是更好的选择
		grid.add(scenetitle, 0, 0, 2, 1);//添加到第到第0列、第0行,最后两个参数分别表示跨列和跨行数目

		
		//创建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);
		
		//如果将网格线显示出来,在调试时会看得更为清晰
		grid.setGridLinesVisible(true);



增加按钮和文字

最后添加一个Button控件用于提交数据、Text控件用于在用户点击按钮后显示信息。
		Button btn = new Button("Sign in");//创建按钮,其上显示文字
		HBox hbBtn = new HBox(10);//创建一个HBox布局pane
		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);


运行后界面如下图,后面的章节将讲述如何将文本消息显示出来:


增加事件处理代码

增加代码使得用户点击按钮时显示文本信息:
		btn.setOnAction(new EventHandler<ActionEvent>() {//注册事件handler
		    @Override
		    public void handle(ActionEvent e) {
		        actiontarget.setFill(Color.FIREBRICK);//将文字颜色变成 firebrick red
		        actiontarget.setText("Sign in button pressed");
		    }
		});


运行后界面如下:

整个代码如下,你也可以从官网自行下载:
package helloworld;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.HBox;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class HelloWorld extends Application {

	@Override
	public void start(Stage primaryStage) throws Exception {
		GridPane grid = new GridPane();
		grid.setAlignment(Pos.CENTER);
		grid.setHgap(10);
		grid.setVgap(10);
		grid.setPadding(new Insets(25, 25, 25, 25));
		createContent(grid);
		Scene scene = new Scene(grid);
		primaryStage.setScene(scene);
		primaryStage.setTitle("Login");
		primaryStage.show();
	}

	private void createContent(GridPane grid) {
		Text scenetitle = new Text("Welcome");//创建不可编辑的文本对象
		scenetitle.setFont(Font.font("Tahoma", FontWeight.NORMAL, 20));//使用内联方式设置字体、字重、字号;将来使用CSS是更好的选择
		grid.add(scenetitle, 0, 0, 2, 1);//添加到第到第0列、第0行,最后两个参数分别表示跨列和跨行数目

		
		//创建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);
		
		//如果将网格线显示出来,在调试时会看得更为清晰
		grid.setGridLinesVisible(true);
		
		Button btn = new Button("Sign in");//创建按钮,其上显示文字
		HBox hbBtn = new HBox(10);//创建一个HBox布局pane
		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);

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

		
	}

	public static void main(String[] args) {
		launch(args);
	}
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值