6_TornadoFX_使用FXML编写UI，串口助手UI部分

作者: 莫狄 | 来源:发表于2018-09-03 18:39 被阅读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()



    }

编译运行

运行成功

6_TornadoFX_使用FXML编写UI，串口助手UI部分

1_使用FXML编写UI

2_串口助手UI部分

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读