JavaFX学习系列文章目录

JavaFX学习系列文章目录

1. JavaFX简介

简介

JavaFX是Java的下一代图形用户界面工具包。JavaFX是一组图形和媒体API，我们可以用它们来创建和部署富客户端应用程序。

JavaFX允许开发人员在单个编程接口中组合图形，动画和UI控件。JavaFX技术主要应用于创建Rich Internet applications（RIAs）。当前的JavaFX包括JavaFX脚本和JavaFX Mobile（一种运营于行动装置的操作系统），今后JavaFX将包括更多的产品。JavaFX Script编程语言（以下称为JavaFX）是一种声明性的、静态类型脚本语言。

JavaFX技术有着良好的前景，包括可以直接调用Java API的能力。JavaFX允许开发人员快速构建丰富的跨平台应用程序。JavaFX通过硬件加速图形支持现代GPU。OpenJFX 是一个开源的下一代客户端应用程序平台，适用于基于Java的桌面、移动端和嵌入式系统。 它是许多个人和公司的共同努力的成果，目的是为富客户端应用程序提供一个现代、高效、功能齐全的工具包。

开发工具

1. 选择IDEA开发,JDK8+1
2. 安装好MAVEN.
3. Scene Builder2.0进行UI设计

插件安装

 <dependency>                            
     <groupId>com.jfoenix</groupId>      
     <artifactId>jfoenix</artifactId>    
     <version>8.0.8</version>            
 </dependency>

可以通过maven导入，增加可用的控件，极大的提升GUI的美感！
也可以将jfoenix导入到到scene builder，点击"Import JAR/FXML file"，选择JFoenix jar文件

开发第一个程序 Hello Word

1.新建JavaFX项目

2.新建项目结构

    @Override
    public void start(Stage primaryStage) throws Exception{
        Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
        primaryStage.setTitle("Hello World");
        primaryStage.setScene(new Scene(root, 300, 275));
        primaryStage.show();
    }
    public static void main(String[] args) {
        launch(args);
    } 
    } 

3.在Main类中运行main方法即可见到第一个程序窗口。

4.通过scene builder增加控件搭建UI框架

如图：增加工具条（Toolbar等控件）

?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.control.ToolBar?>
<?import javafx.scene.control.Tooltip?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.control.ProgressBar?>
<?import javafx.scene.control.TabPane?>
<AnchorPane fx:id="MainView" maxHeight="1.7976931348623157E308" prefHeight="680.0" prefWidth="960.0" xmlns="http://javafx.com/javafx/8.0.172-ea" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
    <children>
        <ToolBar id="tool_bar" fx:id="toolbar" maxHeight="-Infinity" prefHeight="50.0" prefWidth="960.0" >
            <items>
                <Button id="btn_conn" fx:id="btnConn" layoutY="2.0" mnemonicParsing="false"  prefHeight="48.0" prefWidth="48.0" >
                    <tooltip><Tooltip text="资料" /></tooltip>
                </Button>
                <Button id="btn_plan" fx:id="btnPlan" layoutY="2.0" mnemonicParsing="false"   prefHeight="48.0" prefWidth="48.0" >
                    <tooltip><Tooltip text="元数据" /></tooltip>
                </Button>
                <Button id="btn_demain" fx:id="demainConn" layoutY="2.0" mnemonicParsing="false"  prefHeight="48.0" prefWidth="48.0" >
                    <tooltip><Tooltip text="领域" /></tooltip>
                </Button>
                <Button id="btn_schedule" fx:id="btnSchedule" layoutY="2.0" mnemonicParsing="false" prefHeight="48.0" prefWidth="48.0" >
                    <tooltip><Tooltip text="创意" /></tooltip>
                </Button>
                <Button id="btn_execute" fx:id="btnExecute" layoutY="2.0" mnemonicParsing="false" prefHeight="48.0" prefWidth="48.0" >
                    <tooltip><Tooltip text="关系" /></tooltip>
                </Button>
                <Button id="btn_export" fx:id="btnExport" layoutY="4.0" mnemonicParsing="false" prefHeight="48.0" prefWidth="48.0" >
                    <tooltip><Tooltip text="导出" /></tooltip>
                </Button>
                <Button id="btn_log" fx:id="btnLog" layoutY="4.0" mnemonicParsing="false"  prefHeight="48.0" prefWidth="48.0" >
                    <tooltip><Tooltip text="日志" /></tooltip>
                </Button>
                <Button id="btn_config" fx:id="btnConfig" layoutY="4.0" mnemonicParsing="false"  prefHeight="48.0" prefWidth="48.0" >
                    <tooltip><Tooltip text="配置" /></tooltip>
                </Button>
            </items>
        </ToolBar>
        <HBox id="jfxListView" fx:id="listView" layoutY="58.0" prefHeight="642.0" prefWidth="161.0" >
        </HBox>
        <TabPane fx:id="jfxTablePane" layoutX="160.0" layoutY="58.0" prefHeight="661.0" prefWidth="800.0" tabClosingPolicy="UNAVAILABLE">
        </TabPane>
        <HBox fx:id="footerhbox" layoutY="718.0" maxHeight="20.0" minHeight="20.0" prefHeight="20.0" prefWidth="960.0" style="-fx-background-color: #f0f0f0;-fx-border-width: 1px;-fx-border-color: #c0c0c0;" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
            <children>
                <Label fx:id="runStatus" prefHeight="18.0" prefWidth="300.0">
                    <HBox.margin>
                        <Insets left="2" />
                    </HBox.margin>
                </Label>
                <HBox fx:id="progressbox" HBox.hgrow="ALWAYS">
                    <ProgressBar fx:id="progress" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" nodeOrientation="LEFT_TO_RIGHT" prefHeight="6.0" prefWidth="200.0" progress="0.0" />
                </HBox>
                <HBox fx:id="spacebox" prefHeight="20" prefWidth="10.0">
                </HBox>
            </children></HBox>
    </children>
</AnchorPane>

在对应的controller中设置长度自适应
  @Override
    public void initialize(URL location, ResourceBundle resources) {
        toolbar.prefWidthProperty().bind(MainView.widthProperty());
        listView.prefHeightProperty().bind(MainView.heightProperty());
        footerhbox.prefWidthProperty().bind(MainView.widthProperty());
        progressbox.setAlignment(Pos.CENTER_RIGHT);
    }

执行程序,效果如下：

参考文档

BootWiki