JavaFX, GUI库初识

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

3. 入门实例

效果图

3.1. 项目构建

视图层 + 控制层

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