Themes

The widget framework has been designed using OOP concepts. Specifically each Widget is part of a "Class" hierarchy, so taking the chart/Column widget as an example, its inheritance hierarchy looks like this:

• common_Class
• common_PropertyExt
• common_Widget
• common_SVGWidget
• chart_XYAxis
• chart_Column

IOW chart/Column is a "specialized" instance of a chart/XYAxis, which in turn is is a "specialized" instance of a common_SVGWidget and so on.

Published properties are assigned at any level of this hierarchy, for example "chart_XYAxis" would have a bunch of properties about the Axis. While "chart_Column" will have properties about the columns (if they are "stacked" or not for example).

The "theming" concept allows you to override the default property values at any level in the hierarchy - even if that property was not explicitly declared at that level. This "new themed" default value will then become "the" default value for all widgets which are derived from that class.
For example, I could create a new theme which:

• Defaults the "PalleteID" to "Dark2" for "chart_Column": Now all instances of chart_Column would default to the "Dark2" palette.

But had I created the theme so that it:

• Defaulted the "PalleteID" to "Dark2" for "common_Widget": Then all widgets which happen to derive from "common_Widget" will also default to the "Dark2" palette (which is basically all the widgets).

Here is an example of a theme:

    var myTheme = {
        "common_Widget": {
            "surfaceTitleFontSize": 16, 
            "surfaceTitleFontColor": "#5a6b92",
            ...
        }, "other_Table": { 
            "theadRowBackgroundColor": "#5a6b92", 
            "theadFontColor": "#FAFAFA",
            ...
        }
    };

And it can be applied to any instance of a Widget (typically a Grid or Marshaller):

    Persist.applyTheme(widget, myTheme);

And they also can be removed:

    Persist.removeTheme(widget);

You can see the theming in action on the dermatology page (there is a theme drop down on the top right).