FXML + CSS 开发登陆界面

开发步骤

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