Introduction to skinning and styles

This page is intended to provide a general overview of the skinning and styles system of the Razor component framework. Also check out some of the examples linked to from the main page.

StyleSheets and Styles

The controls packaged with the Razor component framework all conform to a system whereby a StyleSheet, or group of StyleSheets, are consulted to determine which classes and styles to use when creating the component parts. With a little bit of work, this enables you to swap out any part of a component, and apply differing styles to them.

The two main classes that control this behaviour are razor.skins.StyleSheet and razor.skins.Style. Styles describe certain visual settings such as font size and colour, roundedness of corners, bevel, etc. StyleSheets describe the structure of a component and certain behaviours.

What can you do with this system?

StyleSheets are structured in such a way that you can nest them hierarchically to provide ultra-specific instructions for a component. For example, you can specify the colour of the arrow in the scroll down button inside a ScrollBar, if you so wished. (Think of this functionality as being similar to the CSS ">" selector)

You can apply a style to a component, and have the properties cascade to subcomponents.

You can assign a 'styleClass' to a component (similar to CSS class selectors), and have that particular StyleSheet applied automatically.

You can 'piggy back' StyleSheets by appending one StyleSheet to another. Properties of the last StyleSheet appended will override properties of the previous StyleSheets. This allows you to override the default behaviour of a skin, which means you could change the skin for all Button instances.

You can apply StyleSheets and Styles to a component at runtime and see your changes immediately.

The root StyleSheet

Initially, all Razor components check a root StyleSheet (Settings.rootStyleSheet) to determine how to construct themselves. This StyleSheet in itself is abstract, meaning that nothing will show up until you append a skin StyleSheet. This should probably be done in the initialization stage of your application. At the time of writing, the framework is packaged with one skin, simply called 'Plastic'.. since it is kind of plasticy looking. You use this skin with the following line:

import razor.skins.plastic.PlasticStyleSheet;

Settings.setSkin(new PlasticStyleSheet());

The setSkin method is a short-cut for appending a StyleSheet to the root StyleSheet instance.. the following code would do the same thing:

Settings.rootStyleSheet.appendStyleSheet(new PlasticStyleSheet());

You can also apply a default Style (a variation of the skin) using the same method call:

import razor.skins.plastic.PlasticStyleSheet;
import razor.skins.plastic.presets.Sharp;

Settings.setSkin(new PlasticStyleSheet(), new Sharp());

If you wish to further customize components, you can append more of your own StyleSheets to the root StyleSheet:

Settings.rootStyleSheet.appendStyleSheet(myStyleSheet);

Example StyleSheet structure

The style rules for a ScrollBar component are contained within the root StyleSheet (or any appended StyleSheets). They are referenced by a property named "ScrollBar", which points to another StyleSheet. This StyleSheet in turn contains styles for all the component parts of a ScrollBar. If you look at the class razor.skins.stylesheets.ScrollBarStyles, you'll see that it extends StyleSheet, and contains five public variables, named "Arrow", "Background", "UpButton", "DownButton" and "Thumb". These variables can point to more StyleSheets to further customize each part of the ScrollBar.

ASCII diagram!

                                                 __________          __________
                                                (Arrow     )        (style     )
                            ___________         (Background) -----> (baseClass )
                           (ScrollBar  ) -----> (UpButton  )        (states    )
   (rootStyleSheet) -----> {Button     )        (DownButton)         """"""""""
                           (ColorPicker)        (Thumb     )
                           (etc...     )         """"""""""
                            """""""""""

Each StyleSheet can also contain a style object, a 'baseClass' (this is the class that will be instantiated), and a set of states (such as Up/Down/Over/Disabled). It would be better to learn about these by looking at the examples, or seeing how the Plastic skin is defined.

If one of these variables is undefined or null, the StyleSheet will automatically fall back on a parent definition. So if we don't define "Background" in the ScrollBar stylesheet above, the framework will go back up the tree until it finds a valid StyleSheet for "Background". This allows us to define a style for all Backgrounds in our application (or a subset of our application).

This might seem complicated, but it is powerful in providing you the flexibility to skin components however you please.

Example: Styling a button

See this page for some simple examples.