javaFX8初探(登录表单)

本节我们将会创建如下图的登陆表单:

javaFX8初探(登录表单)_第1张图片

创建一个javaFX project

添加代码如下:

package com.chu.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 Form extends Application {

	@Override
	public void start(Stage primaryStage) throws Exception {
		//舞台名称
		primaryStage.setTitle("JavaFX Welcome");

		/*
		 * GridPane
		 * 登陆表单,使用一个GridPane布局,这样就会创建一个灵活的行列表格,我们可以在这些表格里添加控件。 也可以合并行列。
		 * 我们把GridPane的实例赋给grid变量。
		 * 1:改变排列方式为居中。
		 * 2:gap属性控制行和列的间距。
		 * 3:padding属性控制gridpane边缘的空间。Inset的顺序是上,右、下、左,这里都是25像素。
		 * 
		 */
		GridPane grid = new GridPane();
		grid.setAlignment(Pos.CENTER);
		grid.setHgap(10);
		grid.setVgap(10);
		grid.setPadding(new Insets(25, 25, 25, 25));
		

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

		Label userName = new Label("User Name:");
		grid.add(userName, 0, 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);

		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);

		final Text actiontarget = new Text();
		grid.add(actiontarget, 1, 6);

		btn.setOnAction(e -> {
			actiontarget.setFill(Color.FIREBRICK);
			actiontarget.setText("Sign in button pressed");
		});

		
		Scene scene = new Scene(grid, 300, 275);
		primaryStage.setScene(scene);

		primaryStage.show();
	}

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

代码解读:

GridPane
登陆表单,使用一个GridPane布局,这样就会创建一个灵活的行列表格,我们可以在这些表格里添加控件。 也可以合并行列。
创建GridPane:


我们把GridPane的实例赋给grid变量。
 1:改变排列方式为居中。
 2:gap属性控制行和列的间距。
 3:padding属性控制gridpane边缘的空间。Inset的顺序是上,右、下、左,这里都是25像素。

 使用grid面板作为跟节点创建了一个场景,这是非常常见的实践。因为窗口的大小是可变的,grid面板里的节点应该跟着他们的布局约束来改变。
在这个例子里。当窗口大小改变的时候grid面板会保持在中间。padding属性可以确保党窗口更小的时候grid面板周围依然存在空隙。我们设置场景的大小为300,275。如果不设置这个大小,场景的大小默认是能容纳它的内容的最小尺寸。

为面板添加内容:

创建一个不能编辑的Text对象,设置内容为“Welcome”。并把它赋给scenetitle。使用setFont方法设置字体样式。使用内联样式在这里是比较合适的。但是一个更好的技术是使用样式表。后面的学习中,我们会使用样式表来替换内联样式。

grid.add方法把scenetitle添加到布局grid。grid中的行列坐标从0开始, scenetitle添加到0行0列的位置。add最后两个参数是合并2列,合并1行。

在1行 0列 位置创建Label对象,内容为User Name。并在1行 1列的位置创建一个可编辑的文本框。密码框按照相似的方法添加到grid中。

下图,展示了代码的作用:

javaFX8初探(登录表单)_第2张图片

最后两个控件是提交表单的按钮和按下提交按钮时的显示。

首先,创建一个Button 文本为“Sign in”,然后创建了一个HBox布局面板,这是spacing为10像素。并设置HBox的排列位置为右下。
然后把HBox面板添加到grid的4行 1列。

添加一个Text,用来显示按下按钮时的消息。

最后为button这是点击事件。


运行应用,如下所示:

javaFX8初探(登录表单)_第3张图片

你可能感兴趣的:(java,mongodb,JavaFX,图形,多媒体)