Tornado FX learning notes -- common code snippets

Tornadofx is a kotlin implementation framework based on JavaFx

After that, it depends on the situation

1. Read the files in the resources folder

Pictured

There are two ways to read the config.properties file

In the class file, you can write as follows

//Get input stream
val resourceAsStream = javaClass.classLoader.getResourceAsStream("config.properties")

In MainView.kt file, you can write as follows:

//"/" required
val steam = resources.stream("/config.properties")

2. Set the title, icon and size of the window

Create a new resources folder and set it as the Resources folder

class MainView : View() {
    override val root = vbox {
        //Set title
        title = "This is the title."
        //Set icon
        addStageIcon(Image("img/file.png"))
        //Set window size
         setPrefSize(500.0, 400.0)
    }
}

The developer's recommendation is written in init method:

class MainView : View() {
    init {
        title = "APK Signature verification cracking tool by star-sone"
        setStageIcon(Image("img/file.png"))
    }
    override val root = vbox {
        //Set window size
         setPrefSize(500.0, 400.0)
    }
}

You can also set the title as follows:

class MainView : View("This is the title.") {
    override val root = vbox {
        ...
    }
}

3. button

text button

override val root = vbox {
    button("Button")
}

Button click

override val root = vbox {
    button("Button"){
        //Set the minimum width to use the default, otherwise an ellipsis will appear
        setMinSize(Button.USE_PREF_SIZE, Button.USE_PREF_SIZE)
        action{
            println("Click button")
        }
    }
}

Picture button

override val root = vbox {
    button(){
        graphic = imageview("img/file.png") {
            //Set size
            fitHeight = 30.0
            fitWidth = 30.0
        }
        setOnAction{
            println("Click button")
        }
    }
}

Button style

override val root = vbox {
    button("Button"){
        style {
            //Set background color
            backgroundColor += c("#66bef1")
            //Set button text color
            textFill = c("white")
            //bold
            fontWeight = FontWeight.BOLD
            //Font size, the second parameter is unit, an enumeration type
            fontSize = Dimension(20.0, Dimension.LinearUnits.px)
        }
        setOnAction{
            println("Click button")
        }
    }
}

4. form

Login interface

override val root = vbox {
    form{
        fieldset {
            field("User name") {
                textfield()
            }
            field("Password") {
                passwordfield()
            }
        }
    }   
}

Get the value of the input box

class MainView : View("Hello TornadoFX") {
    //Both of them can be written
    var userTf: TextField by singleAssign()
    var passwordTf by singleAssign<TextField>()

    override val root = vbox {
        form{
            fieldset {
                field("User name") {
                    userTf = textfield()
                }
                field("Password") {
                    passwordTf = passwordfield()
                }
                field(){
                    button("Sign in"){
                        println(usetTf.text)//User name
                        println(passwordTf.text)//Password
                        
                        //Login operation
                    }
                }
            }
        }   
}

Input box unchecked by default

In JavaFx, TextField, the first input box, will be selected by default. Sometimes you don't want to be selected. You can set isFocusTraversable = false. If you want all input boxes not to be selected, all input boxes are set to the above property

class MainView : View("Hello TornadoFX") {
    //Both of them can be written
    var userTf: TextField by singleAssign()
    var passwordTf by singleAssign<TextField>()

    override val root = vbox {
        form{
            fieldset {
                field("User name") {
                    userTf = textfield(){
                        //Set this property
                        isFocusTraversable = false
                    }
                }
                field("Password") {
                    passwordTf = passwordfield()
                }
                field(){
                    button("Sign in"){
                        println(usetTf.text)//User name
                        println(passwordTf.text)//Password
                        
                        //Login operation
                    }
                }
            }
        }   
}

Form Validation

//Create validator
val context = ValidationContext()

//The control to be verified, usually for the input box
val input = TextField()

//Verify whether the conditions are met, the input box cannot be empty
val validator = context.addValidator(input, input.textProperty()) {
    //Here it represents the value of the input box
    if(it.isNullOrBlank()){
        //If the input box is empty, this message will pop up
        error("Input cannot be empty")
    }else{
        null
    }
}
//Return whether the result is verified, which can be triggered by the click event of the button button
val result = context.validtate()

Fixed size text

Sometimes you need fixed size text. If the text is wider than this width, the following will be hidden with ellipsis. You can use Label at this time. However, considering user friendliness, we can add a floating window so that users can view the whole content of the text

label("hello"){
    prefWidth = 100.0
    //Hover the mouse on it to display the prompt box
    tooltip = Tooltip(this.text)
}

5. centered

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

I didn't set the hbox size. All hbox sizes are the same as the button height, achieving horizontal centering

6. single check box

I used Kfoenix here. jfxradiobutton is the control in Kfoenix. jfxradiobutton is the same as radiobutton

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

            }
        }
        jfxradiobutton("Option 2") {
            setOnAction {

            }
        }
        jfxradiobutton("Option 3") {
            setOnAction {

            }
        }
    }
}

7. menu bar

override val root = vbox {
    menubar {
        menu("Help") {
            item("about") {
                //Set click event
                setOnAction { 
                        
                }
            }
        }
        menu("file"){
            
        }
    }
    ...
}

8. Open a new window

Internal window

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

New window

find(AboutView::class).openModal()

9.View transfer data

10. Show hidden

For example, a button is disabled by default. Only when a radio box is selected can this button be enabled

val radiobutton = radiobutton(){
    
}

button{
    disable{
        radiobutton.isSelected
    }
}

11. Real time view

Because we use kotlin to develop the interface, we can not preview the interface directly with fxml as before. However, the development provides a real-time view, so that we can quickly see the interface in debug mode without restarting the application

To configure

There are two configurations
1. Add the following code to myapp

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

2. Add a parameter -- alive views to debug configuration

Use

Modify the View, press Ctrl+F9, wait for the overload to complete, and the application interface will change

PS: in the same way, there is also a -- live stylesheets parameter (corresponding to reloadstylesheets onfocus method) to enable the hot update of styles

12.css style

inline style

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

Define css file

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")
            //Pseudo tag, suspended
            and(hover){
                backgroundColor+=c("#6495ED")
            }

        }
    }
}

Add using the addClass method

button{
    addClass(Styles.MyTab)
}

Tags: Java Steam hot update

Posted on Sun, 19 Jan 2020 22:07:52 -0500 by mr_hacker