Add Border Styling to VBox in TornadoFX - tornadofx

Question

In a view for my TornadoFX app, I have a borderpane that has a VBox on the left and right sides of the view (nothing in the center). As of right now, each VBox has the same background color so they kinda blend together. I would like to show some sort of separation between the two VBoxes (i.e. either one VBox has a slightly darker tint, a border color, or both). Would anyone happen to know how to add border styling to a vbox? Or add a background color?
For clarification, I'm looking for a way to do this inside the body of my View class definition so I'm not using a CSS or FXML for styling.

Answer 1

The best way to do this is to create a type safe style sheet where you define a class for each vbox and assign those classes to the vbox. Here is a complete app with the stylesheet, app definition and main view:
class MyApp : App(MainView::class, MyStyles::class)
class MyStyles : Stylesheet() {
companion object {
val leftBox by cssclass()
val rightBox by cssclass()
}
init {
leftBox {
backgroundColor += c("#cecece")
borderColor += box(c("#a1a1a1"))
minWidth = 200.px
}
rightBox {
backgroundColor += c("#fefefe")
borderColor += box(c("#222222"))
minWidth = 200.px
}
}
}
class MainView : View("My View") {
override val root = borderpane {
setPrefSize(800.0, 600.0)
left {
vbox {
addClass(MyStyles.leftBox)
}
}
right {
vbox {
addClass(MyStyles.rightBox)
}
}
}
}
If you're allergic to stylesheets you could set these properties inline or use an inline stylesheet as well:
class MainView : View("My View") {
override val root = borderpane {
setPrefSize(800.0, 600.0)
left {
vbox {
style {
backgroundColor += c("#cecece")
borderColor += box(c("#a1a1a1"))
minWidth = 200.px
}
}
}
right {
vbox {
style {
backgroundColor += c("#fefefe")
borderColor += box(c("#222222"))
minWidth = 200.px
}
}
}
}
}
Lastly, you can configure the corresponding properties of the nodes instead of applying styles. I won't give an example of that as you really shouldn't do it :)