在本教程中，我將使用JavaFX 2和CSS設計漂亮的Login Form 。 它是經典的登錄表單，帶有用戶名和密碼以及登錄按鈕。 為了遵循本教程，我強烈建議您查看以下這些教程：

• Eclipse IDE中的JavaFX 2入門
• JavaFX 2：HBox
• JavaFX 2：GridPane
• JavaFX 2：樣式按鈕
• JavaFX 2：使用文本和文本效果

用戶名： JavaFX2 密碼：密碼

您可以在上方輸入此信息，然后單擊“登錄”按鈕。 它會提示您登錄成功，但是如果輸入錯誤信息，則會提示您登錄不成功。
本教程的最終輸出屏幕截圖如下圖所示。

JavaFX 2登錄表單

這是我們示例的Java代碼：

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
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.effect.DropShadow;
import javafx.scene.effect.Reflection;
import javafx.scene.layout.BorderPane;
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;/**** @web http://zoranpavlovic.blogspot.com/*/
public class Login extends Application {String user = "JavaFX2";String pw = "password";String checkUser, checkPw;public static void main(String[] args) {launch(args);}@Overridepublic void start(Stage primaryStage) {primaryStage.setTitle("JavaFX 2 Login");BorderPane bp = new BorderPane();bp.setPadding(new Insets(10,50,50,50));//Adding HBoxHBox hb = new HBox();hb.setPadding(new Insets(20,20,20,30));//Adding GridPaneGridPane gridPane = new GridPane();gridPane.setPadding(new Insets(20,20,20,20));gridPane.setHgap(5);gridPane.setVgap(5);//Implementing Nodes for GridPaneLabel lblUserName = new Label("Username");final TextField txtUserName = new TextField();Label lblPassword = new Label("Password");final PasswordField pf = new PasswordField();Button btnLogin = new Button("Login");final Label lblMessage = new Label();//Adding Nodes to GridPane layoutgridPane.add(lblUserName, 0, 0);gridPane.add(txtUserName, 1, 0);gridPane.add(lblPassword, 0, 1);gridPane.add(pf, 1, 1);gridPane.add(btnLogin, 2, 1);gridPane.add(lblMessage, 1, 2);//Reflection for gridPaneReflection r = new Reflection();r.setFraction(0.7f);gridPane.setEffect(r);//DropShadow effect DropShadow dropShadow = new DropShadow();dropShadow.setOffsetX(5);dropShadow.setOffsetY(5);//Adding text and DropShadow effect to itText text = new Text("JavaFX 2 Login");text.setFont(Font.font("Courier New", FontWeight.BOLD, 28));text.setEffect(dropShadow);//Adding text to HBoxhb.getChildren().add(text);//Add ID's to Nodesbp.setId("bp");gridPane.setId("root");btnLogin.setId("btnLogin");text.setId("text");//Action for btnLoginbtnLogin.setOnAction(new EventHandler() {public void handle(ActionEvent event) {checkUser = txtUserName.getText().toString();checkPw = pf.getText().toString();if(checkUser.equals(user) && checkPw.equals(pw)){lblMessage.setText("Congratulations!");lblMessage.setTextFill(Color.GREEN);}else{lblMessage.setText("Incorrect user or pw.");lblMessage.setTextFill(Color.RED);}txtUserName.setText("");pf.setText("");}});//Add HBox and GridPane layout to BorderPane Layoutbp.setTop(hb);bp.setCenter(gridPane);  //Adding BorderPane to the scene and loading CSSScene scene = new Scene(bp);scene.getStylesheets().add(getClass().getClassLoader().getResource("login.css").toExternalForm());primaryStage.setScene(scene);primaryStage.titleProperty().bind(scene.widthProperty().asString().concat(" : ").concat(scene.heightProperty().asString()));//primaryStage.setResizable(false);primaryStage.show();}
}

為了正確設置此應用程序的樣式，您需要在項目的/ src文件夾中創建login.css文件。 如果您不知道該怎么做，請查看JavaFX 2：樣式按鈕教程 。

這是我們示例CSS代碼：

#root {-fx-background-color:  linear-gradient(lightgray, gray);-fx-border-color: white;-fx-border-radius: 20;-fx-padding: 10 10 10 10;-fx-background-radius: 20;}#bp {-fx-background-color:  linear-gradient(gray,DimGrey );}#btnLogin {-fx-background-radius: 30, 30, 29, 28;-fx-padding: 3px 10px 3px 10px;-fx-background-color: linear-gradient(orange, orangered );
}#text {-fx-fill:  linear-gradient(orange , orangered);
}

多數民眾贊成在本教程中，如果您有任何意見或問題，請隨時發表評論。 如果您喜歡本教程，則可以在此博客上查看更多JavFX 2教程。

您可能想看一下下面的這些教程：

• JavaFX 2：使用CSS設置按鈕樣式
• JavaFX 2：使用CSS設置文本樣式

參考： JavaFX 2：在Zoran Pavlovic博客博客上，從我們的JCG合作伙伴 Zoran Pavlovic 創建尼斯登錄表單 。