TornadoFx學習筆記（1）——經常使用的代碼片斷

Tornadofx是基於JavaFx的一個kotlin實現的框架

以後看狀況補充..

1.讀取resources文件夾中的文件

如圖

想要讀取config.properties文件，有兩種方法

在class文件中，能夠這樣寫

//得到輸入流
val resourceAsStream = javaClass.classLoader.getResourceAsStream("config.properties")

在MainView.kt文件，能夠這樣寫：

//須要 「/」
val steam = resources.stream("/config.properties")

2.設置窗口的標題、圖標、窗口大小

新建一個resources文件夾，將此文件夾設置爲resources文件夾

class MainView : View() {
    override val root = vbox {
        //設置標題
        title = "這是標題"
        //設置圖標
        addStageIcon(Image("img/file.png"))
        //設置窗口大小
         setPrefSize(500.0, 400.0)
    }
}

開發者推薦寫在init方法裏：

class MainView : View() {
    init {
        title = "APK簽名驗證破解工具 by star-sone"
        setStageIcon(Image("img/file.png"))
    }
    override val root = vbox {
        //設置窗口大小
         setPrefSize(500.0, 400.0)
    }
}

設置標題還能夠這樣設置：

class MainView : View("這是標題") {
    override val root = vbox {
        ...
    }
}

3.按鈕

文字按鈕

override val root = vbox {
    button("按鈕")
}

按鈕點擊

override val root = vbox {
    button("按鈕"){
        //設置最小寬度使用默認，否則會出現省略號
        setMinSize(Button.USE_PREF_SIZE, Button.USE_PREF_SIZE)
        action{
            println("點擊按鈕")
        }
    }
}

圖片按鈕

override val root = vbox {
    button(){
        graphic = imageview("img/file.png") {
            //設置大小
            fitHeight = 30.0
            fitWidth = 30.0
        }
        setOnAction{
            println("點擊按鈕")
        }
    }
}

按鈕樣式

override val root = vbox {
    button("按鈕"){
        style {
            //設置背景顏色
            backgroundColor += c("#66bef1")
            //設置按鈕文字顏色
            textFill = c("white")
            //粗體
            fontWeight = FontWeight.BOLD
            //字體大小，第二個參數是單位，一個枚舉類型
            fontSize = Dimension(20.0, Dimension.LinearUnits.px)
        }
        setOnAction{
            println("點擊按鈕")
        }
    }
}

4.表單

登陸界面

override val root = vbox {
    form{
        fieldset {
            field("用戶名") {
                textfield()
            }
            field("密碼") {
                passwordfield()
            }
        }
    }   
}

獲取輸入框的數值

class MainView : View("Hello TornadoFX") {
    //兩種寫法均可以
    var userTf: TextField by singleAssign()
    var passwordTf by singleAssign<TextField>()

    override val root = vbox {
        form{
            fieldset {
                field("用戶名") {
                    userTf = textfield()
                }
                field("密碼") {
                    passwordTf = passwordfield()
                }
                field(){
                    button("登陸"){
                        println(usetTf.text)//用戶名
                        println(passwordTf.text)//密碼
                        
                        //登陸操做...
                    }
                }
            }
        }   
}

輸入框取消默認選中

JavaFx中，第一個輸入框TextField會默認被選中，有時候不但願被選中，能夠設置isFocusTraversable = false，若是但願所有輸入框不被選中，則所有的輸入框都是設置上面的那個屬性

class MainView : View("Hello TornadoFX") {
    //兩種寫法均可以
    var userTf: TextField by singleAssign()
    var passwordTf by singleAssign<TextField>()

    override val root = vbox {
        form{
            fieldset {
                field("用戶名") {
                    userTf = textfield(){
                        //設置此屬性
                        isFocusTraversable = false
                    }
                }
                field("密碼") {
                    passwordTf = passwordfield()
                }
                field(){
                    button("登陸"){
                        println(usetTf.text)//用戶名
                        println(passwordTf.text)//密碼
                        
                        //登陸操做...
                    }
                }
            }
        }   
}

表單驗證

//建立驗證器
val context = ValidationContext()

//須要驗證的控件，通常是對輸入框
val input = TextField()

//驗證是否符合條件，輸入框不能爲空
val validator = context.addValidator(input, input.textProperty()) {
    //這裏的it就是表明了該輸入框的數值
    if(it.isNullOrBlank()){
        //輸入框爲空，則彈出此信息
        error("輸入不能爲空")
    }else{
        null
    }
}
//返回是否經過驗證的結果，這裏能夠在button按鈕的點擊事件觸發
val result = context.validtate()

固定大小的文本

有時候須要固定大小的文本，文字超過此寬度，後面的會以省略號來隱藏，這個時候可使用Label，不過考慮到用戶友好度，咱們能夠加個懸浮窗以便用戶能夠查看文本的所有內容

label("hello"){
    prefWidth = 100.0
    //鼠標懸浮在上面能夠顯示提示框
    tooltip = Tooltip(this.text)
}

5.居中

override val root = vbox {
    hbox{
        alignment = Pos.CENTER
        button("按鈕")
    }
}

我沒有設置hbox大小，全部hbox大小和button高度同樣，實現了水平居中

6.單選框

我這裏用了Kfoenix，jfxradiobutton是Kfoenix中的控件，jfxradiobutton和radiobutton同樣

override val root = vbox {
    togglegroup {
        jfxradiobutton("選項1") {
            isSelected = true
            setOnAction {

            }
        }
        jfxradiobutton("選項2") {
            setOnAction {

            }
        }
        jfxradiobutton("選項3") {
            setOnAction {

            }
        }
    }
}

7.菜單欄

override val root = vbox {
    menubar {
        menu("幫助") {
            item("關於") {
                //設置點擊事件
                setOnAction { 
                        
                }
            }
        }
        menu("文件"){
            
        }
    }
    ...
}

8.打開新窗口

內部窗口

button("Open editor") {
    action {
        openInternalWindow(Editor::class)
    }
}

新窗口

find(AboutView::class).openModal()

9.View傳遞數據

10.顯示隱藏

好比有一個按鈕默認是禁用的，只有當某個單選框被選中的時候，，這個按鈕纔會啓用

val radiobutton = radiobutton(){
    
}

button{
    disable{
        radiobutton.isSelected
    }
}

11.實時視圖

因爲是使用kotlin來開發界面，全部，沒有像以前那樣使用fxml能夠直接預覽界面，可是，開發提供了一個實時視圖，方便咱們在debug模式能夠快速看到界面，無需重啓應用程序

配置

有兩種配置方式
1.MyApp中添加以下代碼

class MyApp: App(MainView::class,Styles::class){
    init {
        reloadViewsOnFocus()
    }
}

2.在debug配置中添加一個參數--alive-views

使用

修改View，以後按下Ctrl+F9，等待重載完成，應用的界面就會發生變化

PS：同理還有個--live-stylesheets參數（對應reloadStylesheetsOnFocus方法），用來開啓樣式的熱更新

12.css樣式

內聯樣式

override val root = vbox {
    button{
       style { 
           backgroundColor += c("blue")
       } 
    }
}

定義css文件

package com.wan.noveldownloader.app

import javafx.scene.text.FontWeight
import tornadofx.*

class Styles : Stylesheet() {
    companion object {
        val MyTab by cssclass()
    }

    init {
        
        MyTab{
            backgroundColor += c("#64b7ea")
            //僞標籤，懸浮
            and(hover){
                backgroundColor+=c("#6495ED")
            }

        }
    }
}

使用addClass方法添加

button{
    addClass(Styles.MyTab)
}