Theming Custom Widgets Overview

This document describes how to incorporate Niagara Themes into your custom developed widgets.

bajaux Widgets

What theme is being used here?

You can find the theme name currently being applied to an HTML view by looking at the class field of the body tag.

<html>
  <head>
  </head>
  <body class="Zebra">
     ...
  </body>
</html> 

Styling your widgets for different themes

body.Zebra .myWidget {
  background-color: gray;
}
body.Lucid .myWidget {
  background-color: beige;
}

bajaui Widgets

Tags to BValues

The NSS parser will attempt to parse the values depending on the tag’s name. This is done in com.tridium.ui.theme.custom.nss.NSSUtils#makeValueByTag(String, Object).

If your tag name ends with… The value will be parsed as…
color, outline, highlight, shadow BBrush
font BFont
padding BInsets
image BImage
height, width Double
anything else String

Java methods and their corresponding selectors

Below is a listing of some of the available methods from the classes in the com.tridium.ui.theme package and their corresponding NSS selectors. Unless otherwise noted, these methods belong to the WidgetTheme interface and thus are available from all theme classes.

NOTE: In order for a widget to take advantage of the custom theming, it needs to pass itself along to requests for info from the theme. For instance, Theme.label().getTextBrush(myWidget).

Theme method NSS tag
.getBoldText(myWidget) bold-font
.getControlAuxiliary(myWidget) auxiliary-color
.getControlBackground(myWidget) background-color
.getControlForeground(myWidget) outline
.getControlHighlight(myWidget) highlight
.getControlShadow(myWidget) shadow
.getDropOkBackground(myWidget) drop-ok-background-color
.getDropOkForeground(myWidget) drop-ok-color
.getFixedWidthBoldFont(myWidget) fixed-bold-font
.getFixedWidthFont(myWidget) fixed-font
.getFocusBrush(myWidget) focus-color
.getLargeBoldFont(myWidget) large-bold-font
.getLargeFont(myWidget) large-font
.getPlainText(myWidget) font
.getSelectionBackground(myWidget) selection-background-color
.getSelectionForeground(myWidget) selection-color
.getTextBrush(myWidget) color
.getTextDisabled(myWidget) .disabled color
.getTextFont(myWidget) font
.getWindowBackground(myWidget) window-background-color
.getWindowForeground(myWidget) window-color

Mapping NSS to your Widget

Each BWidget has a String method, .getStyleSelector(), that specifies where in the NSS it should look for properties. If it does not have its own .getStyleSelector() method defined (or in the absence of a widget, period), each individual theme has its own default selector to use. NSS tags will still propagate to these nodes as normal.

This provides a simple way for the themes to return common properties for different widgets by using the many methods on com.tridium.ui.theme.custom.CustomWidgetTheme and its subclasses. The .getTextBrush(IStylable) method, for instance, would check the NSS label color when passed in a BLabel and path-bar color when passed in a BPathBar.

Widget-based selection takes into account any style classes or IDs assigned to that widget.

Theme object Default NSS tag
Theme.borderPane() pane border-pane
Theme.button() button
Theme.checkBox() button checkbox
Theme.dropDown() drop-down
Theme.expandablePane() pane expandable-pane
Theme.gridPane() pane grid-pane
Theme.label() label
Theme.menu() menu
Theme.menuBar() menu-bar
Theme.menuItem() menu-item
Theme.pane() pane
Theme.pathBar() path-bar
Theme.progressBar() progress-bar
Theme.propertySheetTree() tree property-sheet
Theme.radioButton() button radio
Theme.scrollBar() scroll-bar
Theme.scrollPane() pane scroll-pane
Theme.separator() separator
Theme.slider() slider
Theme.spinner() button spinner
Theme.splitPane() pane split-pane
Theme.tabbedPane() pane tabbed-pane
Theme.table() table
Theme.textEditor() text-editor
Theme.textEditorPane() text-editor
Theme.textField() text-field
Theme.titlePane() pane title
Theme.toggleButton() button
Theme.toolBar() toolbar
Theme.toolPane() pane tool-pane
Theme.tree() tree
Theme.treeTable() table tree-table
Theme.widget() (none - will always look for properties in NSS root)
Theme.wiresheet() wire-sheet

For example, Theme.treeTable().getTextBrush() would return the results of selector table tree-table color, while Theme.widget().getTextBrush() would return the results of the simple selector color.