1. 介绍

曾以为java不适合桌面应用程序的开发, 直到遇到JavaFX
它采用MVC的设计模式, 有过web开发经验的人极易上手

JavaFX is an open source, next generation client application platform for desktop, mobile and embedded systems built on Java.

2. Scene Builder

可视化页面设计, 让元素布局不再复杂
下载地址: JavaFX Scene Builder Information (oracle.com)

IDE集成SceneBuilder

image.png

3. 入门实例

效果图

image.png

3.1. 项目构建

视图层 + 控制层

image.png

3.2. 画布局

直接使用Scene Builder生成

RootLayout.fxml文件

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

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>


<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
   <top>
      <MenuBar BorderPane.alignment="CENTER">
        <menus>
          <Menu mnemonicParsing="false" text="File">
            <items>
              <MenuItem mnemonicParsing="false" text="Close" />
            </items>
          </Menu>
          <Menu mnemonicParsing="false" text="Edit">
            <items>
              <MenuItem mnemonicParsing="false" text="Delete" />
            </items>
          </Menu>
          <Menu mnemonicParsing="false" text="Help">
            <items>
              <MenuItem mnemonicParsing="false" text="About" />
            </items>
          </Menu>
        </menus>
      </MenuBar>
   </top>
</BorderPane>

PersonView.fxml文件

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

<?import javafx.geometry.*?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>


<AnchorPane prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.leon.controller.PersonController">
   <children>
      <SplitPane dividerPositions="0.48494983277591974" layoutX="214.0" prefHeight="400.0" prefWidth="600.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
        <items>
          <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0">
               <children>
                  <TableView layoutX="-27.0" layoutY="-37.0" prefHeight="398.0" prefWidth="173.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
                    <columns>
                      <TableColumn prefWidth="138.0" text="Firtst Name" />
                      <TableColumn minWidth="7.0" prefWidth="145.0" text="Last Name" />
                    </columns>
                  </TableView>
               </children>
            </AnchorPane>
          <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0">
               <children>
                  <GridPane layoutX="75.0" layoutY="101.0" prefHeight="277.0" prefWidth="283.0" AnchorPane.bottomAnchor="91.0" AnchorPane.leftAnchor="10.0" AnchorPane.rightAnchor="10.0" AnchorPane.topAnchor="20.0">
                    <columnConstraints>
                      <ColumnConstraints hgrow="SOMETIMES" maxWidth="136.0" minWidth="10.0" prefWidth="112.0" />
                      <ColumnConstraints hgrow="SOMETIMES" maxWidth="187.0" minWidth="10.0" prefWidth="171.0" />
                    </columnConstraints>
                    <rowConstraints>
                        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                      <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                      <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                      <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                    </rowConstraints>
                     <children>
                        <Label text="FirstName" />
                        <Label text="Label" GridPane.columnIndex="1" GridPane.rowIndex="1" />
                        <Label text="Label" GridPane.columnIndex="1" />
                        <Label text="Address" GridPane.rowIndex="4" />
                        <Label text="Gender" GridPane.rowIndex="3" />
                        <Label text="Age" GridPane.rowIndex="2" />
                        <Label text="LastName" GridPane.rowIndex="1" />
                        <Label text="Label" GridPane.columnIndex="1" GridPane.rowIndex="2" />
                        <Label text="Label" GridPane.columnIndex="1" GridPane.rowIndex="3" />
                        <Label text="Label" GridPane.columnIndex="1" GridPane.rowIndex="4" />
                     </children>
                  </GridPane>
                  <HBox layoutX="3.0" layoutY="332.0" prefHeight="36.0" prefWidth="245.0" spacing="10.0" AnchorPane.bottomAnchor="5.0" AnchorPane.rightAnchor="5.0">
                     <children>
                        <Button layoutX="27.0" layoutY="332.0" mnemonicParsing="false" text="Delete" />
                        <Button layoutX="37.0" layoutY="342.0" mnemonicParsing="false" text="Edit..." />
                        <Button layoutX="47.0" layoutY="352.0" mnemonicParsing="false" text="Add..." />
                     </children>
                  </HBox>
               </children>
            </AnchorPane>
        </items>
      </SplitPane>
   </children>
</AnchorPane>

3.3. 项目启动

启动项目前, 需要各组件拼接起来

package com.leon;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

import java.io.IOException;

public class App extends Application {
    private Stage primaryStage;
    private BorderPane rootLayout;

    @Override
    public void start(Stage primaryStage) throws Exception {
        this.primaryStage = primaryStage;
        this.primaryStage.setTitle("Person APP");

        initLayout();
        showPersonLayout();
    }

    public void initLayout() {
        try {
            FXMLLoader loader = new FXMLLoader();
            loader.setLocation(App.class.getResource("view/RootLayout.fxml"));
            rootLayout = loader.load();

            Scene scene = new Scene(rootLayout);
            primaryStage.setScene(scene);
            primaryStage.show();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    public void showPersonLayout() {
        try {
            FXMLLoader loader = new FXMLLoader();
            loader.setLocation(App.class.getResource("view/PersonView.fxml"));
            AnchorPane personLayout = loader.load();

            rootLayout.setCenter(personLayout);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

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