Using Custom Style Sheets

JavaFX's support for Cascading Style Sheets (CSS) enables flexible and powerful styling capabilities for user interfaces. By providing custom style sheet files that override some or all of the default style classes, it is possible to adapt a whole application using special themes.

JGUIraffe supports the integration of an arbitrary number of custom style sheet files. In JavaFX css files are added to Scene objects. The component responsible for the creation of Scene objects in JGUIraffe JavaFX applications is JavaFxWindowManager, the JavaFX-specific implementation of the WindowManager interface. So this is the starting point for customizing style sheets.

JavaFxWindowManager expects an instance of the StyleSheetProvider class to be passed to its constructor. As the name implies, this class is capable of managing style sheets - to be more precise: a set of string URLs pointing to such files. This is exactly the format accepted by a Scene. In order to make custom style sheets available to JavaFX, an application has to create a StyleSheetProvider object and initialize it accordingly.

As usual, the major part of the configuration of a JGUIraffe application is done via the dependency injection framework. The default beans definition file shipped with the JavaFX integration of JGUIraffe contains bean declarations for both the window manager and the style sheet provider. An application can define its own bean definition file in which it overrides beans of the framework. For the purpose of adding specific style sheets the bean with the name jguiraffe.styleSheetProvider has to be overridden. This can be done by declaring a bean of class net.sf.jguiraffe.gui.platform.javafx.builder.window.StyleSheetProvider and passing a comma-separated list of string URLs for the style sheet files to the constructor.

Situation is a bit more complicated because these URLs have to be generated first. Typically, custom style sheets are shipped as resources on the class path of an application. To make sure that they are correctly found by JavaFX, they have to be transformed into URLs. Fortunately, the dependency injection tag library offers a tag for exactly this purpose: <resource>. Using this tag, a number of resource names representing css files can be resolved to string URLs, concatenated, and assigned to a Jelly variable. This variable can then be referenced in the declaration of the style sheet provider bean. This is demonstrated in the following example. We assume that two style sheet files, standard.css, and special.css are to be added:

<j:jelly xmlns:j="jelly:core" xmlns:di="diBuilder" xmlns:f="formBuilder"
  xmlns:a="actionBuilder" xmlns:w="windowBuilder">
  <di:resource resource="standard.css" var="styleSheets"/>
  <di:resource resource="special.css" var="styleSheets" delimiter=","/>

  <di:bean name="jguiraffe.styleSheetProvider"
    beanClassName="net.sf.jguiraffe.gui.platform.javafx.builder.window.StyleSheetProvider">
    <di:constructor>
      <di:param value="${styleSheets}"/>
    </di:constructor>
  </di:bean>
</j:jelly>

This bean definition file (let's assume it is called applicationbeans.jelly) can be executed automatically at application start up as described in the sub section Hooks. Basically, it has to be listed in the <beandefinitions> section of the application's main configuration file framework-config.xml:

<config>
  <framework>
    <builder>
      <mainScript>main.jelly</mainScript>
      <beandefinitions>
        <beandefinition>classpath:applicationbeans.jelly</beandefinition>
      </beandefinitions>
      ...
    </builder>
    ...

That's it! The style sheet classes defined in the two css files are now available.