TornadoFx - How Builders Work

[출처 - 이 글은 tornadofx-guide르 통해 공부한 내용을 정리한 글입니다. 더 정확한 내용은 https://edvin.gitbooks.io/tornadofx-guide/part1/4.%20Basic%20Controls.html 에서 확인 하실 수 있습니다.]

 

kotlin에서 제공하는 block function을 이용하여 button이 있는 vbox를 작성해 보겠습니다.

 

class with_apply_view : View(){

    override val root = vbox()
    init {
        with(root){
            this += Button("Press Me").apply {
                textFill = Color.RED
                action { println("Button pressed!") }
            }
        }
    }
}

위 code를 보면 

button을 생성 -> button 변형 (text 색깔 및 action) -> 부모에 추가(여기서는 vbox 입니다.) 순으로 동작을 하게됩니다.

 

위의 3단계는 TornadoFX의 가장 일반적인 단계인데 이 단계를 button으로 간략하게 할 수 있습니다. (Button과 button은 다릅니다. Button은 import javafx.scene.control.Button 이고 button은 import tornadofx
import tornadofx.Stylesheet.Companion.button 입니다.)

 

class with_apply_view : View(){

    override val root = vbox()
    init {
        with(root){
            button("Press Me"){
                textFill = Color.RED
                action { println("Button pressed!") }
            }
        }
    }
}

button을 씀으로써 this+=와 apply가 사라졌습니다.

어떻게해서 Button대신 button을 사용하면 이렇게 간략해지는 걸까요?

vBox(또는 다른 targetable component)에는 button이라는 확장 요소가 있고, 이 요소는 텍스트 인수와 버튼을 대상으로하는 optional closure 를 허용합니다.

(code 상으로는 source code에서 확인 할 수 있습니다.)

 

이런 방식으로 code를 작성하면

class with_apply_view : View(){

    override val root = vbox {
        button("Press Me") {
            textFill = Color.RED
            action { println("Button pressed!") }
        }
    }
}

그 결과는 다음과 같습니다.

Press Me를 누르면 console에 

라는 결과가 나옵니다.

 

이런 방식을 이용하여 hbox를 이용한 vbox를  생성할 수 있습니다.

class login_vbox_view : View(){
    var firstNameField: TextField by singleAssign()
    var lastNameField: TextField by singleAssign()

    override val root = vbox {
        hbox {
            label("First Name")
            firstNameField = textfield()
        }
        hbox {
            label("Last Name")
            lastNameField = textfield()
        }
        button("LOGIN") {
            useMaxWidth = true
            action {
                println("Logging in as ${firstNameField.text} ${lastNameField.text}")
            }
        }
    }
}

위 code는 First Name과 Last Name을 입력하면 그 입력값이 console에 나타나느 code 입니다. 

결과는 다음과 같습니다.