This document describes how to incorporate Niagara Themes into your custom developed widgets.
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>
body.Zebra .myWidget {
background-color: gray;
}
body.Lucid .myWidget {
background-color: beige;
}
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 |
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 |
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
.
Copyright © 2000-2019 Tridium Inc. All rights reserved.