TornadoFx - replaceView , passParameter

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

TornadoFx에서는 손 쉽게 View를 변경할 수 있습니다. 바로 code를 보면서 설명해 드리겠습니다.

class ReplaceView_1 : View(){
    override val root = vbox {
        button("Go to replaceView_2") {
            action {
                replaceWith<ReplaceView_2>()
            }
        }
        button("Go to replaceView_2 by slide"){
            action {
                replaceWith(ReplaceView_2::class, ViewTransition.Slide(0.3.seconds, ViewTransition.Direction.LEFT))
            }
        }
    }
    override fun onDock() {
        println("Docking ReplaceView_1!")
    }
    override fun onUndock() {
        println("Undocking ReplaceView_1!")
    }
}
class ReplaceView_2 : View(){
    override val root = vbox {
        button("Go to replaceView_1") {
            action {
                replaceWith<ReplaceView_1>()
            }
        }
        button("Go to replaceView_1 by slide"){
            action {
                replaceWith(ReplaceView_1::class, ViewTransition.Slide(0.3.seconds, ViewTransition.Direction.RIGHT))
            }
        }
    }
    override fun onDock() {
        println("Docking ReplaceView_2!")
    }
    override fun onUndock() {
        println("Undocking ReplaceView_2!")
    }
}

class ReplaceApp: App(ReplaceView_1::class)

fun main() {
    launch<ReplaceApp>()
}

ReplaceView_1 과 ReplaceView_2는 똑같은 코드입니다.( View에서 사용되는 버튼이 1인지 2인지와 slide가 왼쪽인지 오른쪽인지만 다릅니다.)

그럼 View의 변경은 단순하게 replaceWith에 변경할 view를 적용하면됩니다. (위의 code에서는 replaceWith<ReplaceView_2>() 또는 replaceWith<ReplaceView_1>() 부분이 됩니다.)

그 결과를 보면  

Go to replaceView1을 누르면 아래가 Go to replaceView2를 누르면 위의 모습으로 변경이 됩니다.

replaceWith에는 option을 너어서 변경될때 동작성을 줄 수 있습니다. 위 코드에서는 silde를 너어서 Go to replcaeView2 by slide를 누르면 오른쪽에서 왼쪽으로 Go to replaceView1 by slide를 누르면 왼쪽에서 오른쪽으로 뷰가 변경이 됩니다.

그리고 각 View에는 onDock와 onUnDock를 override 할 수 있는데, 이 function들은 뷰가 나타날 때 그리고 사라질 때 호출 이됩니다.

 

Go to replaceView2관련 버튼을 누르면 위의 결과 처럼 ReplaceView_1의 onUnDock가 호출 된 다음 ReplaceView_2의 onDock가 호출 됩니다.

반대로 Go to replaceView1 관련 버튼을 누르면 위의 결과 처럼 ReplaceView_2의 onUnDock가 호출 된 다음 ReplaceView_1의 onDock가 호출 됩니다.

 

그리고 새로운 View 또는 Fragment를 호출 할때 parameter를 전달 할 수 있습니다. code를 보면서 설명 드리겠습니다.

class passParameterView: View() {
    var passdata:String = ""
    override val root = vbox {
        label("pass")
        passdata = "parametor"
        callPopup(passdata)
    }
}
fun callPopup(parameter:String) {
    find(type = testPopup::class, params = mapOf(testPopup::content to parameter)).openWindow()
}
class testPopup:Fragment() {
    val content: String by param()
    override val root = vbox {
        label(content)
    }
}

class passParameterApp:App(passParameterView::class)

fun main() {
    launch<passParameterApp>()
}

passParameterApp을 실행하면 passParameterView가 호출됩니다. 그리고 callPopup funtion을 통하여 testPopup을 호출합니다. 이때 전달받은 parameter를 testPopup의 content에 적용하여 popup이 호출 됩니다. 결과 GUI를 확인하면 다음과 같습니다.