6_TornadoFX_使用FXML编写UI，串口助手UI部分
2018-09-03 本文已影响0人
莫狄
1_使用FXML编写UI
参考官方文档（汉化）
新建FXML文件
新建FXML文件
取一个名字，要跟继承View的文件名字相同
取名字
托控件
这段fxml代码是它代码模式代码(可以不用管它)
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.BorderPane?>
<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.121" xmlns:fx="http://javafx.com/fxml/1">
<top>
<Button mnemonicParsing="false" text="Button" BorderPane.alignment="CENTER" />
</top>
</BorderPane>
引入布局
package com.example.demo.view
import javafx.scene.layout.BorderPane
import tornadofx.*
class MainView : View("Hello TornadoFX") {
override val root : BorderPane by fxml()
}
发现运行出错啦!!!这是因为布局文件FXML文件位置不对，应该放置到生成文件里面，我们剪切粘贴一下放到那个位置就可以了。
运行出错
剪切
粘贴
OK就好
编译运行一下
运行成功
2_串口助手UI部分
FXML布局
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.CheckBox?>
<?import javafx.scene.control.ChoiceBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.VBox?>
<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="512.0" prefWidth="625.0" style="-fx-background-color: #2D1F2D;" xmlns="http://javafx.com/javafx/8.0.121" xmlns:fx="http://javafx.com/fxml/1">
<top>
<MenuBar opacity="0.4" BorderPane.alignment="CENTER">
<menus>
<Menu mnemonicParsing="false" text="设置">
<items>
<MenuItem mnemonicParsing="false" text="关于" />
</items>
</Menu>
</menus>
</MenuBar>
</top>
<left>
<VBox prefHeight="516.0" prefWidth="137.0" style="-fx-padding: 5px">
<children>
<Label text="串口设置" textFill="#000000a7" />
<GridPane style="-fx-padding: 5px;-fx-border-color: darkgrey">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="80.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.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="串口号:" textFill="#000000a9" GridPane.columnIndex="0" />
<ChoiceBox fx:id="serPort" opacity="0.4" prefWidth="150.0" GridPane.columnIndex="1" />
<Label text="波特率:" textFill="#000000a8" GridPane.rowIndex="1" />
<ChoiceBox fx:id="serPortSpeed" opacity="0.4" prefWidth="150.0" GridPane.columnIndex="1" GridPane.rowIndex="1" />
<Label text="检验位:" textFill="#000000a8" GridPane.rowIndex="2" />
<ChoiceBox fx:id="serPortCheckBit" opacity="0.4" prefWidth="150.0" GridPane.columnIndex="1" GridPane.rowIndex="2" />
<Label text="数据位:" textFill="#000000a7" GridPane.rowIndex="3" />
<ChoiceBox fx:id="serPortDataBit" opacity="0.4" prefWidth="150.0" GridPane.columnIndex="1" GridPane.rowIndex="3" />
<Label text="停止位:" textFill="#000000a9" GridPane.rowIndex="4" />
<ChoiceBox fx:id="serPortStopBit" opacity="0.4" prefWidth="150.0" GridPane.columnIndex="1" GridPane.rowIndex="4" />
</children>
</GridPane>
<Button fx:id="serPortOpenBtn" minWidth="130" mnemonicParsing="false" opacity="0.4" style="-fx-top-margin: 5px;" text="打开" />
<Label text="接收区设置" textFill="#000000a7" />
<VBox style="-fx-padding: 5px;-fx-border-color: darkgrey">
<children>
<CheckBox fx:id="recvShowHex" minHeight="20" mnemonicParsing="false" opacity="0.6" style="-fx-background-color: #2D1F2D;" text="十六进制显示" textFill="#000000a8" />
<CheckBox fx:id="recvShowTime" minHeight="20" mnemonicParsing="false" opacity="0.6" text="显示时间" textFill="#000000a8" />
<CheckBox fx:id="recvStopShow" minHeight="20" mnemonicParsing="false" opacity="0.6" text="暂停接收" textFill="#000000a9" />
<GridPane>
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
</rowConstraints>
<children>
<Button fx:id="recvClear" mnemonicParsing="false" opacity="0.4" prefWidth="120" text="清除" GridPane.columnIndex="0" />
</children>
</GridPane>
</children>
</VBox>
<Label text="发送区设置" textFill="#000000a7" />
<VBox prefHeight="118.0" prefWidth="130.0" style="-fx-padding: 5px;-fx-border-color: darkgrey">
<children>
<CheckBox fx:id="sendHex" minHeight="20" mnemonicParsing="false" opacity="0.6" text="十六进制发送" textFill="#000000a8" />
<CheckBox fx:id="sendCycle" minHeight="20" mnemonicParsing="false" opacity="0.6" text="循环发送" textFill="#000000a9" />
<GridPane>
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="30" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="50.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="50.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
</rowConstraints>
<children>
<Label text="间隔" textFill="#000000a8" />
<TextField fx:id="sendCycleRap" opacity="0.4" text="1000" GridPane.columnIndex="1" />
<Label text="毫秒" textFill="#000000a7" GridPane.columnIndex="2" />
</children>
</GridPane>
<GridPane>
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
</rowConstraints>
<children>
<Button fx:id="sendClear" mnemonicParsing="false" opacity="0.4" prefWidth="120" text="清除" GridPane.columnIndex="0" />
</children>
</GridPane>
</children>
</VBox>
</children>
</VBox>
</left>
<bottom>
<GridPane style="-fx-padding: 5px;-fx-border-color: darkgrey;-fx-padding: 5px" BorderPane.alignment="CENTER">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="20.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="20.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="10.0" prefHeight="15.0" vgrow="SOMETIMES" />
</rowConstraints>
<children>
<Label text="发送统计：" textFill="#000000a8" />
<Label fx:id="sendCount" text="0" textFill="#000000a7" GridPane.columnIndex="1" />
<Label text="接收统计" textFill="#000000a8" GridPane.columnIndex="2" />
<Label fx:id="recvCount" text="0" textFill="#000000a7" GridPane.columnIndex="3" />
<Button fx:id="CountReset" mnemonicParsing="false" style="-fx-background-color: #2D1F2D;" text="重置统计" textFill="#000000a7" GridPane.columnIndex="4" />
</children>
</GridPane>
</bottom>
<center>
<VBox prefHeight="453.0" prefWidth="468.0" style="-fx-padding: 5px;" BorderPane.alignment="CENTER">
<children>
<Label text="接收区" textFill="#000000a8" />
<TextArea fx:id="recvTextAear" editable="false" opacity="0.4" prefHeight="320.0" prefWidth="200.0" style="-fx-background-color: #2D1F2D;" />
<Label text="发送区" textFill="#000000a7" />
<GridPane style="-fx-background-color: #2D1F2D;">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="350.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="20.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="10.0" prefHeight="100.0" vgrow="SOMETIMES" />
</rowConstraints>
<children>
<TextArea fx:id="sendTextAear" opacity="0.38" prefHeight="127.0" prefWidth="402.0" style="-fx-background-color: #2D1F2D;" />
<Button fx:id="sendBtn" maxWidth="70" mnemonicParsing="false" opacity="0.4" prefHeight="100" text="发送" GridPane.columnIndex="1" />
</children>
</GridPane>
</children>
</VBox>
</center>
</BorderPane>
引入布局
package com.example.demo.view
import javafx.scene.layout.BorderPane
import tornadofx.*
class MainView : View("串口助手") {
override val root : BorderPane by fxml()
}
编译运行
运行成功
