Style Sheets

Style sheets allow you to set the values for object properties in your displays from one or more external (.rts) files. You can choose from a number of built-in style sheets or create your own or append your custom style sheets to built-in files in order to adjust the properties you want to change. See “Built-In Style Sheets” and “Creating Style Sheets” for more information.

You can also use style sheets to set the values of properties for your navigation controls, which makes it possible to standardize a default look and feel for all RTView applications or enable the deployment of several completely different look and feel styles that may be applied from the command line when starting RTView applications. See“Configuring Multiple Display Panels” for more information.

“Application Options Style Sheets”

Select Tools>Options>General>Style Sheets to manage style sheet (.rts) files applied to all displays in your applications.

Note: When multiple style sheet (.rts) files are applied, they are processed in the order specified. Therefore if the same property is specified in multiple style sheets, the value in the last style sheet applied will take precedence.

“Display-Specific Style Sheets”

In addition to application level style sheets, select Tools>Style Sheet to apply specific style values to individual displays.

Note: Display-specific style sheets are applied after application level styles sheets. Therefore if the same property is specified in both, the display-specific style sheet value will take precedence.

Disabling and Overriding Style Sheet Values

Style sheets are applied to the main Display Builder window (a.k.a Working Area) and in the Object Palette. To prevent display (.rtv) files from being saved with unwanted style values applied go to Tools>Options>General>Style Sheet and deselect the Apply Style Sheets to Main Builder Window check box.

In some cases, you might want to use a property value from your display (.rtv) file instead of the style sheet value. If a property value is set to apply a style sheet, then the property name is in italic. If you change that property (either by entering a value in the Object Properties dialog or by pasting properties onto the object) and save your display, the style sheet will no longer be applied to those properties. Property names with values that override the value set in the style sheet are in bold italic.

It is also possible to override the style sheet value without changing the property value by right-clicking on the property in the Object Properties dialog and selecting Override Style Sheet. To go back to using the style sheet value, right-click on the property and select Use Style Sheet.

To override all properties for an object defined in a style sheet, right-click on the object and select Override Style Sheet. To go back to using the style sheet values, right-click on the object and select Use Style Sheet.

Note: The options Use Style Sheet and Override Style Sheet are not applied immediately. You must save and reopen the display to accurately determine how style sheet properties are being applied.

Creating Style Sheets

Style sheets allow you to set the values for object properties in your displays from one or more external (.rts) files. You can choose from a number of built-in style sheets or create your own. See “Built-In Style Sheets” for more information.

Note: Style sheet file names must use a .rts extension.

Note: File names starting with rtv_ are reserved for SL use only.

The syntax of an .rts style sheet is very similar to that of a .css file:

styleClassName {

           propertyName:propertyValue;

           propertyName2:propertyValue2;

}

styleClassName2 {

           propertyName:propertyValue;

}

styleClassName3,styleClassName4,styleClassName5 {

           propertyName:propertyValue;

}

If a property value contains any of the following characters, the entire value must be enclosed in quotations:  

{} ; :

For example:

obj_bargraph {

       barProperties:"228,;46,;53,;101,;118,;161,;18,";

}

To add a comment to your style sheet, start the line with a #. For example:

# this is a comment

Style Class Names

By default, an object's style class name is it's object class name. The object class name is noted at the top of the Object Properties dialog.

Note: You must add an object to a display to view it's Object Properties.

Note: Specify m_basemodel as the style class name to set style values for the background model.

For example, look at style values set on an object from the General tab with the object class name obj_rect_il:

obj_rect_il  {

bgColor: 1;

bgGradientMode:0;

}

All obj_rect_il objects will have a red background and no gradient.

To apply a variety of styles to different instances of the same object class, edit the object's styleClass property in the Object Properties dialog. The value entered for styleClass must not contain spaces and must not start with rtv-.

For example, suppose you want a few instances of the obj_rect_il to have a different background (bgColor). For those objects, you can enter a styleClass value of specialRect and add it to your style sheet as follows:

specialRect  {

           bgColor: 7;

}

Objects with styleClassName set as specialRect will use bgColor 7, all other obj_rect_il objects will use bgColor 1.

Style Groups

In addition to style classes, there are three style groups which allow you to set properties on a group of objects:

•        rtv-all -- Includes all objects (except the background model)

•        rtv-graphs -- Includes all objects on the Graphs and Fx Graphs tabs of the Display Builder Object Palette

•        rtv-controls -- Includes all objects on the Controls tabs of the Display Builder Object Palette

If an object is in one or more style groups, styles are applied in order of the most specific reference. For example, suppose you have a bar graph with the styleClassName set to special_bar.

rtv-all {

           bgColor:7;

           labelTextColor:1;

           labelTextFont:2;

}

rtv-graphs {

           bgColor:2;

           labelTextColor:0;

}

obj_bargraph {

           bgColor:10;

           labelTextFont:7;

}

special_bar {

           labelTextColor:9;

}

All non-graph objects will use bgColor 7, labelTextColor 1 and labelTextFont 2. All graphs, except the bar graphs, will use bgColor 2, and labelTextColor 0. All bar graphs, except the special_bar graphs, will use labelTextFont 9, and all bar graphs, including the special_bar graphs, will use bgColor 10. The special_bar graphs will use labelTextColor 9. 

If the same styleClassName or style group is specified more than once, or appears in more than one style sheet, the properties are merged. If the same property on the same object is specified more than once, the last reference takes precedence. For example, the following two style sheets end up applying the same style:

Object Properties

To view available properties for a particular object, add that object to a display in the Display Builder and look at the Object Properties list.

Some object properties are only available if others are selected. For example, bgColor is only available if the bgVisFlag check box is selected. When including properties like this in a style sheet, always include the controlling property (bgVisFlag) before the dependent property (bgColor).

The following Object Properties are not supported in style sheets:

–      anchor

–      command

–      commandCloseWindowOnSuccess

–      commandConfirm

–      commandConfirmText

–      dock

–      drillDownTarget

–      historyTableName

–      historyTableRowNameFlag

–      objName

–      objX

–      objY

–      styleClassName

–      varToSet

–      all properties in the Composite category on the composite object (i.e. obj_composite)

Many property values are not formatted in style sheets as they are displayed in the Object Property list or require a dialog in the Display Builder to configure.

To determine the correct method of formatting of a property value within a style sheet, do one of the following:

§        For color properties, add the object in the Display Builder and edit the selected color property. In the Color Dialog, hover the mouse over the color you want to use to see the tool tip. The first item in the tool tip is the color index number. This color index number should be used in the style sheet. For example if you hover over the first color (white), you will see it's index number is 0. Use a value of 0 to specify white.

§        For properties where the Display Builder presents a list of options, such as bgGradientMode, add the object in the Display Builder and edit the selected property. The list will show the index number as well as the option, as follows:

0 - None

1 - Diagonal Edge

2 - Diagonal Center

3 - Horizontal Edge

4 - Horizontal Center

5 - Vertical Edge

6 - Vertical Center

The index number listed should be used in the style sheet. For example, use a value of 1 to specify a Diagonal Edge on the bgGradientMode property. NOTE: If the list does not show an index number, use the text value from the list.

§        For properties where the Display Builder presents a dialog, add the object in the Display Builder and edit the selected property. Use the dialog to configure the property the way that you want it in your style sheet. Click OK to close the dialog, then select the text from the Property Value field in the Object Properties dialog and copy (Ctrl+C ). For example if you select to edit barProperties on the Bar Graph, a dialog will open. If you choose white with the first fill pattern for the first bar and click OK, the Property Value field will contain the following text: 0,1;;;;;;. Paste this value into your style sheet.

§        For properties where the Display Builder presents a check box, use 0 for false (deselected) and 1 for true (selected).

§        For properties where the Display Builder allows you to type in a value, enter the same value in your style sheet.

§        For properties that end in Height or Width that are specified in the Display Builder as pixels, but stored using internal coordinates, divide the pixel value by 8. The following properties are exceptions to this rule:

a. If a Width property name includes one of the following, do NOT divide by 8:

EdgeWidth e,g, bgEdgeWidth

edgeWidth e.g. edgeWidth

MinLabelWidth e.g. yAxisMinLabelWidth

MeterMinWidth e.g. vuMeterMinWidth

MinTabWidth e.g. labelMinTabWidth

b. If a Height property name includes the following, do NOT divide by 8:

MinLabelHeight e.g. horizAxisMinLabelHeight

Application Options Style Sheets

Select Tools>Options>General>Style Sheet to add, remove or reorder style sheets applied to your applications. It is also possible to apply specific style sheets to a single display. See “Display-Specific Style Sheets” for more information.

Note: In the Display Builder, style values are also applied to the Object Palette as well as objects added from the Display Builder toolbar.

Application level style sheets are read once, at startup, and applied when display (.rtv) files are opened. If you edit a style sheet, then you need to restart to see those changes. If you add, remove or re-order style sheets, changes will not be applied to open displays. To see these changes, close and reopen your displays. To see changes in the Object Palette you must always restart.

Note: In the following cases, style changes are applied immediately:

§        Objects added from the Display Builder toolbar

§        Objects added to Object Grids

§        Objects added to Composites

Display-Specific Style Sheets

Select Tools>Style to apply specific style sheets to a single display. To select style sheets to apply to all displays in your applications, select Tools>Options>General>Style Sheet. See “Application Options Style Sheets” for more information.

Display-specific style sheets are read once, the first time they are referenced in a display, and applied as subsequent display (.rtv) files are opened. If you edit a style sheet, then you need to restart to see those changes. If you add, remove or re-order style sheets, changes will not be applied to open displays. To see these changes, close and reopen your displays.

Note: In the following cases, style changes are applied immediately:

§        Objects added from the Display Builder toolbar

§        Objects added to Object Grids

§        Objects added to Composites

Built-In Style Sheets

Instead of modifying built-in style sheets, it is recommended that you append custom style sheets to them and adjust the properties you want to change. For example, rtv_darkstyles.rts specifies a color scheme and sets the background style (bgStyle) to (flat) Rectangle. The rtv_3d.rts style sheet sets the bgStyle to 3D Rectangle, but specifies no color scheme. Since rtv_3d.rts does not specify colors, it can be appended to rtv_darkstyles.rts to apply the 3D Rectangle background style to all objects.

Note: When multiple style sheet (.rts) files are applied, they are processed in the order specified. Therefore if the same property is specified in multiple style sheets, the value in the last style sheet applied will take precedence.

The following style sheets are included with RTView:

Note: Copies of these style sheet (.rts) files can be found in demos/features.