Stylesheet not applying to button control

I have gone through the page on how to apply css classes programmatically by extending the Stylesheet class. The problem I am having, and I’m sure the solution to correct this is simple, is that when applying the stylesheet to the app, like so:

open class MainApp : App() {
    private var mainWindow: MainWindow? = null
    private lateinit var springContext: AnnotationConfigApplicationContext

    init {
        importStylesheet(Styles::class) // <---- HERE
        reloadStylesheetsOnFocus()
    }
    ...
    private fun showMain() {
        try {
            this.mainWindow = springContext.getBean(MainWindow::class.java)
        } catch (e: BeansException) {
            if (mainWindow == null) {
                LOG.error("Failed to instantiate main window.", e)
                stop()
            }
        }
        val stage = Stage()
        stage.title = "Eve Ore Bust"
        stage.scene = Scene(this.mainWindow?.root)
        stage.isMaximized = true
        stage.isResizable = true
        stage.show()
        stage.toFront()
    }
}

With my style class:

class Styles : Stylesheet() {

    companion object {
        val navigation by cssclass()
    }

    init {
        navigation {
            button {
                backgroundColor += Color.RED
                textFill = Color.GREEN
                selected {
                    backgroundColor += Color.BLUE
                }
            }
        }
    }
}

And attempt to apply the navigation reverence to a button:

class NavMenu : View("Navigation View") {

    override var root = vbox()

    private val btnGeneral = button {
        addClass(Styles.navigation) // <---- HERE
        padding = Insets(5.0, 10.0, 5.0, 10.0)
        imageview("/images/icons/gear.png") {
            fitHeight = 25.0
            fitWidth = 25.0
        }
        alignment = Pos.CENTER_LEFT
        useMaxWidth = true
        graphicTextGap = 20.0
        text = "General"
    }

    init {
        with(root) {
            maxWidth = 150.0
            minWidth = 150.0
            add(btnGeneral)
    }
}

The style does not get applied to the button. However, the style properties will display when I apply those style properties directly in the button body.

The NavMenu is being added to my main view by:

@Component
class MainWindow @Autowired constructor(
    private val viewModel: MainWindowViewModel
) : View("Main Window") {
    override val root = vbox()

    @PostConstruct
    fun postConstruct() {
        ...
        with(root) {
            ...
            gridpane {
                visibleWhen { loggedIn }
                row {
                    constraintsForRow(0).apply {
                         percentHeight = 100.0
                    }
                    add(NavMenu()) // <---- HERE
                }
            }
        }
    }
}

[edvin]

Give me some time and I’ll go through your examples and highlight the issues I see (hopefully later today), and explain what should be done differently. Almost every line in your code examples are sub optimal, except for the stylesheet which looks fine 😃 I figured you hadn’t looked much at the guide since it shouldn’t contain any code like this and on the contrary provides plenty of best practice examples.

[edvin]

Thank you, Dallas 😃 I’m closing the issue for now. Will be good to get some fresh eyes on the guide!