TornadoFx - Type-Safe CSS(1)

[출처 - 이 글은 tornadofx-guide르 통해 공부한 내용을 정리한 글입니다. 더 정확한 내용은 여기 에서 확인 하실 수 있습니다.]

Base

TornadoFX에서 글자나 각 component에 css를 사용하여 style을 줄 수 있습니다.

간단한 예를 보겠습니다.

 

class Css_TEST : View(){
    override val root =  vbox {
        button("Press Me") {
            style(append = true) {
                fontWeight = FontWeight.BOLD
                borderColor += box(
                    top = Color.RED,
                    right = Color.DARKGREEN,
                    left = Color.ORANGE,
                    bottom = Color.PURPLE
                )
                rotate = 45.deg
            }

            setOnAction { println("You pressed the button") }
        }
    }
}
class Css_TEST_App:App(Css_TEST::class)
fun main(){
    launch<Css_TEST_App>()
}

 위 코드를 실행하면 

위와 같은 결과를 나타냅니다. 버튼이 45도 기울었고(rotate = 45.deg) 버튼의 둘레에 색이 생겼습니다.(borderColor) 그런데 이상한 점은 font굵기가 변경되지 않는 다는 점입니다.  ( 이부분에 대해서는 계속 확인하고 있습니다.) 이 경우는 버튼의 선언 흐름을 방해하지 않고 컨트롤의 스타일을 지정하려는 경우에 특히 유용해 보입니다. 그러나 선택적 append 인수에 true를 전달하지 않으면 style{}이 해당 컨트롤에 적용된 모든 스타일을 대체합니다.

 

하지만 위같은 방법은 각각의 component에 style을 주기 때문에 먼가 코드가 복잡해질 우려가 있어 보입니다.(동일한 style을 다양한 component에 적용하는 경우). 이런경우에 대하여 style을 주는 방법을 확인해 보겠습니다.

 vbox {
            label("First")
            label("Second")
            label("Third")
            children.style {
                rotate = 45.deg
            }
        }

그럴 경우에는 이렇게 간단하게 children.style로하여 공통된 style을 vbox에 포함된 각 component에 적용 할 수 있습니다.

styleSheet

스타일을 구성, 재사용, 결합 및 재정의하려면 stylesheet를 사용해야합니다. 전통적으로 JavaFX에서 스타일 시트는 프로젝트에 포함 된 일반 CSS 텍스트 파일로 정의됩니다. 하지만 TorandoFX에서는 kotlin code로 stylesheet를 만들 수 있습니다.  이런 방법은 컴파일 검사, 자동 완성 및 정적 유형 코드와 함께 제공되는 기타 특전의 이점이 있습니다.

그럼 stylesheet의 사용 법을 보겠습니다.

class Css_TEST : View() {
    override val root = vbox {
        button("Press Me") {
            addClass(MyStyle.tackyButton)
        }
        button("Press Me Too") {
            addClass(MyStyle.tackyButton)
        }
    }
}

class MyStyle : Stylesheet() {

    companion object {
        val tackyButton by cssclass()

        private val topColor = Color.RED
        private val rightColor = Color.DARKGREEN
        private val leftColor = Color.ORANGE
        private val bottomColor = Color.PURPLE
    }
    init {
        tackyButton {
            fontWeight = FontWeight.BOLD
            rotate = 10.deg
            borderColor += box(topColor,rightColor,bottomColor,leftColor)
            fontFamily = "Comic Sans MS"
            fontSize = 20.px
        }
    }
}

class Css_TEST_App : App(Css_TEST::class,MyStyle::class){
    init{
        reloadStylesheetsOnFocus()
    }
}

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

stylesheet를 만들고, 버튼에 적용한 code 입니다. 위 code에서 color 정의는 위와 같이도 할 수 있고 다음과 같이 c() 함수를 사용하여 만들 수 도 있습니다.

  private val topColor = c("#FF0000")
  private val rightColor = c("#006400")
  private val leftColor = c("#FFA500")
  private val bottomColor = c("#800080")

 

위 code에서 by classless라는 code가 있는데 이 code를 확인해 보니 CSS.kt에서 다음과 같은 code 였습니다

fun cssclass(value: String? = null, snakeCase: Boolean = value == null) = CssClassDelegate(value, snakeCase)

 Cssclass관련 delegate 함수 입니다.

그래서 tackyButton에 style을 주고 그 스타일을 버튼이나 라벨등에 적용할 수 있는 것으로 보입니다. 그리고 이런 stylesheet를 적용하기 위해 App class에 stylesheet class도 적용해주고 reloadStylesheetsOnFocus() 함수를 호출해주어야 사용할 수 있습니다. reloadStylesheetsOnFocus () 함수 호출은 스테이지가 포커스를 얻을 때마다 TornadoFX가 스타일 시트를 다시로드하도록 지시합니다.

그리고 마지막으로 View에 있는 component들에 addclass 함수로 아까 만들었던 tackyButton를 적용해주면 결과를 확인 할 수 있습니다. 그리고 여기서 신기한 점은 stylesheet를 사용하지 않았을 때는 fontWeight가 동작하지 않았는데, stylesheet에서는 동작하는 것을 확인할 수 있습니다. ( 참고, addClass(MyStyle.tackyButton) 말고 addClass(tackyButton)해도 됩니다.)

 

Tageting

style 적용 대상을 선택 할 수 있습니다. 예를 들어 

class MyView: View() {
    override val root = vbox {
        button("Press Me")
        button("Press Me Too")
        label("I'm lonely")

        children.asSequence()
                .filter { it is Button }
                .forEach { it.addClass(MyStyle.tackyButton) }
    }
}

위와 같은 방법을 사용하여 버튼에만 적용할 수 있습니다. (위의 assSequenece 부분을 children.filter { it is Button }.addClass(MyStyle.tackyButton) } 이렇게도 적용할 수 있습니다.)

 

또한 stylesheet에서 

class MyStyle: Stylesheet() {

    companion object {
        val tackyButton by cssclass()

        private val topColor = Color.RED
        private val rightColor = Color.DARKGREEN
        private val leftColor = Color.ORANGE
        private val bottomColor = Color.PURPLE
    }

    init {
        button {
            rotate = 10.deg
            borderColor += box(topColor,rightColor,leftColor,bottomColor)
            fontFamily = "Comic Sans MS"
            fontSize = 20.px
        }
    }
}
class Css_TEST : View() {
    override val root = vbox {
        button("Press Me")
        button("Press Me Too") 
    }
}
class MyApp: App(Css_TEST::class, MyStyle::class) {
    init {
        reloadStylesheetsOnFocus()
    }
}
fun main() {
    launch<Css_TEST_App>()
}

위의 code처럼 tackyButton이 아니라 button으로 style을 주면 모든 button타입에 스타일이 적용 됩니다.

마지막으로 

class Css_TEST : View() {
    override val root = vbox {
        button("Press Me") 
        button("Press Me Too") 
        label ("I'm lonely")
       
    }
}

class MyStyle : Stylesheet() {

    companion object {
        val tackyButton by cssclass()

        private val topColor = Color.RED
        private val rightColor = Color.DARKGREEN
        private val leftColor = Color.ORANGE
        private val bottomColor = Color.PURPLE
    }
    init {
        s(button,label){
            fontSize = 20.px
            fontWeight = FontWeight.EXTRA_BOLD
        }
        button {
            rotate = 10.deg
            borderColor += box(topColor,rightColor,bottomColor,leftColor)
            fontFamily = "Comic Sans MS"

        }
    }
}

class Css_TEST_App : App(Css_TEST::class,MyStyle::class){
    init{
        reloadStylesheetsOnFocus()
    }
}

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

s()함수를 사용하여 복합적으로 선택할 수 있습니다.