開發步驟

ps: 首先宣告我使用的是Eclipse開發工具

1. 建立一個JavaFX專案
2. 建立一個FXML介面佈局檔案
3. 建立一個FXML檔案的java控制器類，實現Initializable介面

Main類程式碼

package application;

import java.io.IOException;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

 
public class Main extends Application {

    @Override
    public void start(Stage stage) {
        try {

            //載入fxml檔案
            Parent root = FXMLLoader.load(
                    getClass().
                        getResource("fxml.fxml"));
            //建立場景
            Scene scene = new
 
 Scene(root, 300 , 275);

            //場景 新增到 舞臺
            stage.setTitle("FXML Welcome");
            stage.setScene(scene);
            stage.show();



        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }



    }

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

FXML檔案控制器

package application;

import java.net.URL;
import java.util.ResourceBundle;

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.text.Text;

public class fxmlController implements Initializable{

    //實現 Initializable介面方法
    @Override
    public void initialize(URL location, ResourceBundle resources) {
        // TODO Auto-generated method stub

    }

    //宣告提示text元件
    @FXML private Text actiontarget;

    //登陸按鈕點選事件
    @FXML protected void handleSubmitButtonAction(ActionEvent event) {
        actiontarget.setText("Sign in button pressed");
    }

}

FXML佈局檔案程式碼

<?xml version="1.0" encoding="UTF-8"?>

<?import java.net.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.layout.GridPane?>

<GridPane fx:controller="application.fxmlController"
          xmlns:fx="http://javafx.com/fxml" 
          alignment="center" hgap="10" vgap="10"
>
    <padding>
        <Insets top="25" right="25" bottom="10" left="25"/>
    </padding>

    <!-- 窗體標題 -->
    <Text text="Welcome" 
        GridPane.columnIndex="0" GridPane.rowIndex="0"
        GridPane.columnSpan="2"/>

    <!-- 使用者名稱標籤 -->
    <Label text="User Name:"
        GridPane.columnIndex="0" GridPane.rowIndex="1"/>
    <!-- 使用者名稱輸入框 -->
    <TextField 
        GridPane.columnIndex="1" GridPane.rowIndex="1"/>
    <!-- 密碼標籤 -->
    <Label text="Password:"
        GridPane.columnIndex="0" GridPane.rowIndex="2"/>
    <!-- 密碼輸入框 -->
    <PasswordField 
        GridPane.columnIndex="1" GridPane.rowIndex="2"/>
    <!-- 登陸按鈕 使用hbox佈局面板 以及新增事件 -->
     <HBox spacing="10" alignment="bottom_right" 
        GridPane.columnIndex="1" GridPane.rowIndex="4">
        <Button text="Sign In"     
        onAction="#handleSubmitButtonAction"/>
    </HBox>
    <!-- 文字提示 -->
    <Text fx:id="actiontarget"
       GridPane.columnIndex="0" GridPane.columnSpan="2"
       GridPane.halignment="RIGHT" GridPane.rowIndex="6"/>  

    <!-- 引入css檔案 --> 
    <stylesheets>
        <URL value="@Login.css"
         />
    </stylesheets>    
</GridPane>

CSS檔案

/**
 * 設定舞臺背景圖片
 */
.root {     -fx-background-image: url("1.jpg");}

/** 
 * 設定風格標籤
 * */
 .label{
    -fx-font-size: 12px;
    -fx-font-weight: bold;
    -fx-text-fill: #333333; 
    -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );
 }

 /*
  *設定標題文字樣式
  */
 #title{
    -fx-font-size: 32px;
    -fx-font-family: "Arial Blackt";
    -fx-fill: #818181;
    -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2 );
 }

 /** 
  * 設定提示文字樣式
  * */ 
 #actiontarget {
  -fx-fill: FIREBRICK;
  -fx-font-weight: bold;
  -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );  
}

/**
 * 設定登陸按鈕樣式
 */
 .button {
    -fx-text-fill: white;
    -fx-font-family: "Arial Narrow";
    -fx-font-weight: bold;
    -fx-background-color: linear-gradient(#61a2b1, #2A5058);
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );
}

/*設定登陸按鈕懸停樣式 */
.button:hover {    -fx-background-color: linear-gradient(#2A5058, #61a2b1);}