Using the Object Palette

This section contains the following:

§        “Add/Edit Objects” on page 32

§        “Object Properties” on page 36

§        “Object Descriptions” on page 41

Add/Edit Objects

RTView features a wide variety of objects accessible through the Object Palette or from the Add Objects toolbar at the top of the Display Builder.

Adding an Object

Open the Object Palette by clicking on the Open Object Palette button or by selecting Edit>Add.

Choose a tab from the Object Palette and click on an object. When an object is selected, a black border outlines the object and the class name of that object appears in the status bar at the bottom left of the palette.

Move the cursor into the Working Area. A + symbol appears next to the cursor, indicating that the application is in Add mode.

Click in the Working Area to place the object. To cancel Add mode, press the <Esc> key.

For more detailed information on each type of object, see “Object Descriptions”.

Connecting Objects (applies to Links only)

With two objects in your Working Area, choose the Links tab from the Object Palette and click on a link. A rectangle appears on the link when it is selected and the class name of the link appears in the status bar at the bottom left of the palette.

Move the cursor into the Working Area. An arrow appears next to the cursor, indicating that the application is in Connect mode.

Click on the two objects in your display to connect them. To cancel Connect mode, press the <Esc> key.

Working with Objects

Set Location

Set the position in pixels of the objects in the display area with the objX and objY properties.

Move Objects

Click-and-drag to move objects within the Working Area or use the keyboard arrows to nudge objects. Select Tools>“Builder Options” to set the Keyboard Arrow Movement Amount. Click on the Grid button in the toolbar to toggle grid visibility. When the Snap to Grid  button is selected, objects align to the grid while being dragged. See the Grid tab in the Builder Options dialog for additional settings.

Select Objects

Hold down <Ctrl> or <Shift> on your keyboard to select or deselect objects in the Working Area or click-and-drag to select multiple objects.

Note: The first object selected and objects not entirely included in the Select by Extent rectangle will not be selected.

Select by Extent replaces any current selection, unless you hold down <Ctrl> or <Shift> on your keyboard while performing the operation. You can also click on the Select by Extent button in the toolbar to enter Select by Extent mode. Select Edit>Select All (or Ctrl-A) to select all objects.

Note: When selecting multiple objects, object properties and scaling only apply to the last object selected.

For a list of all objects currently in the Working Area, select Tools>Object List. Within the Object List hold down the <Ctrl> or <Shift> key to select or deselect objects in the list, which will be simultaneously selected in the Working Area.

Copy and Paste Objects

Select one or more objects from the Working Area and click the Copy button  in the toolbar (or right-click on an object). Then click the Paste button . This will put you in Add or Connect mode depending on the object you have selected. If you are in Add mode, click in the Working Area to paste the object. If you are in Connect mode, click on two objects in your display to paste the link. When copying and pasting nodes with their links, select all nodes connected to the links in order to include them.

Copy and paste are also available via keyboard shortcuts:

•        Ctrl-C to Copy

•        Ctrl-V to Paste

Scale Objects

To resize an object, click and drag one of the green selection handles on the object.

Order Objects

Right-click on an object and choose Order (or select Edit>Order), then select Move to Front or Move to Back to move the selected object in front of or behind other objects in the Working Area.

Note: Objects are always drawn in front of links.

Align Objects

Hold down the <Ctrl> or <Shift> key and select at least two objects. Right-click on an object and choose Align from the popup menu (or select Edit>Align) and one of the following options. The alignment is based on the first object you select.

•        Top - To align the tops of all objects against the first object selected.

•        Bottom - To align the bottoms of all objects against the first object selected.

•        Left - To align the left sides of all objects against the first object selected.

•        Right - To align the right sides of all objects against the first object selected.

•        Center Horizontal - To align the objects along their horizontal centers.

•        Center Vertical - To align the objects along their vertical centers.

Distribute Objects

Hold down the <Ctrl> or <Shift> key and select at least two objects. Right-click on an object and choose Distribute from the popup menu (or, select Edit>Distribute) and one of the following options. The alignment is based on the first object you select.

•        Horizontally - To put equal amounts of horizontal space between the objects without changing their vertical location.

•        Vertically - To put equal amounts of vertical space between the objects without changing their horizontal location.

Preview Control Objects

Control objects are not active in the Display Builder main editing window. This enables you to setup a control objects without activating their associated action commands. To preview a control object in the Display Builder, save your file and click the Preview button  in the toolbar. Your display opens in a Preview Window that allows you to activate control objects. The Preview button becomes disabled when you edit your display. Save the display again to enable it.

Delete Objects

Click on the object and click the Delete button  in the toolbar or press <Delete> on your keyboard to remove an object from the Working Area.

Edit Object Properties

See the “Object Properties” section for information on how to edit objects from the Object Properties window.

Undo / Redo

Click the Undo / Redo button  in the toolbar to cancel or reapply up to one thousand consecutive actions. Select Tools>“Builder Options” to set the History List Size. Default setting is 20 consecutive actions.

Object Properties

RTView features a wide variety of objects. The Object Properties window lists attributes of the selected object and lets you edit property values. (See “Object Descriptions” section for descriptions of each object.)

To open the Object Properties window, select an object and click the Object Properties button on the toolbar. In the Object Properties window, you can view and/or edit the property values of the object selected in the Working Area.

Editing Property Values

Property Names listed in the first column cannot be changed. Property Values, listed in the second column, can be set to static values or attached to dynamic data.

•        Blue text signifies that a Property Value is static and cannot be attached to a dynamic data source.

•        Green text signifies that a Property Value is currently attached to a dynamic data source and therefore it is no longer possible to edit this value from the Object Properties window. See the Attach to Data section specific to your data source for information on attaching dynamic data.

To remove a data attachment and resume editing capabilities from the Object Properties window, right-click on the Property Name (e.g., value) and select Detach from Data from the popup menu. An object property has been detached from the data source when the Property Name and Value are no longer green.

Copying Property Values

Copying and pasting makes it easy to transfer property values from one object to another.

There are two options for copying object properties:

•        Copy All Properties - To copy all object properties, both static properties and data attachments, select an object and click the Copy button  on the toolbar.

•        Copy Single Property - To copy an individual property from the Object Properties window, right-click on the Property Name and select Copy. To copy a property from the Edit Function dialog, right-click in a text field and select Copy.

There are four options for pasting object properties:

•        Paste Data Attachments - To paste only data attachments, select one or more objects and click on the Paste Data Attachments button  on the toolbar or use the keyboard shortcut Ctrl+Shift+V. Note: Only properties common to both objects will be pasted onto the selected object(s).

•         Paste Static Properties - To paste only the static properties, select one or more objects and click on the Paste Static Properties button  on the toolbar. Note: Only properties common to both objects will be pasted onto the selected object(s).

•         Paste All Properties - To paste all properties, select one or more objects and click on the Paste All Properties button  on the toolbar. This will paste all static properties as well as all data attachments. Note: Only properties common to both objects will be pasted onto the selected object(s).

•         Paste Single Property - To paste an individual property into the Object Properties window, right-click on the Property Name and select Paste. The Paste option will only be enabled if the copied attribute can be set on the selected property (e.g., data attachments cannot be pasted onto static properties). To paste a property in the Edit Function dialog, right-click in a text field and select Paste.

Column Format Properties

In the Object Properties window, double-click on columnFormat in the Property Name field to bring up the Column Format Properties dialog. In the Column Format Properties dialog you can assign numerical and date formats to columns.

Image Property

Click in the image Property Value field and type the name of the image or select the  button to open the Select Image dialog containing up to three directories:

•        Current Directory - Contains images in the current directory and one level of subdirectories.

•        Custom Image Library - If you have specified a custom image library, this directory contains those images. See the “Creating a Custom Image Library” section for details.

•        Symbol Library - Contains symbolic images (for example, symbols for various types of hardware, shapes, lights, arrows, etc.).

Navigate to the image you want to use and select it. A preview of the image appears in the pane to the right. Click OK or Apply to set the image on your object. If an image is not listed, enter the name of the file, including the relative path.

To scale your image to the size of the object, check the imageScaleFlag. The visFlag property controls the visibility of the object. The transparencyPercent property controls the transparency of the object.

The sample display file general_objects.rtv (located in demos/tutorials) features information on working with objects from the General tab.

Creating a Custom Image Library

The custom image library enables you to make your own images available in the Select Image dialog. To add your own image library, perform the following steps.

1.     Place your images in a .jar file and add it to the “RTV_USERPATH” environment variable.

Note: The images must be in a directory and not at the top level of the .jar file. They can be organized into subdirectories of one top level directory.

2.     In the Display Builder, select Tools>Builder Options and, in the Custom Image Library Path field, set the path to the directory containing your .jar file.

For example, suppose you have a .jar file with the following directory structure:

com/mycompany/Images

com/mycompany/Images/Blue Images

com/mycompany/Images/Red Images

com/mycompany/Images/Green Images

In the Custom Image Library Path field you would enter com/mycompany/Images to add a directory named Images to the tree in the Select Image dialog. The Images directory will have three subdirectories: Blue Images, Red Images, and Green Images.

Note: Only directories containing images will be added to the Select Image dialog.

To access your custom image library, edit any property that allows you to set an image on an object (e.g. image, barImage, and filterProperties properties) or select File>“Background Properties” and edit the Image Name field.

webLabelFlag

In a Display Server deployment when the webLabelFlag property is selected, the object will be rendered as an HTML element in the thin client rather than rendered in the image by the Display Server. This allows the Display Server to update the individual object (if necessary) when the display is refreshed, instead of regenerating the entire display image. In some cases, this can improve the performance of the Display Server and thin client.

The webLabelFlag property also enables you to select an object's text and copy it to the clipboard.

General objects that support webLabelFlag are:

obj_rect

obj_rect_il

obj_rect_ilv

obj_rect_ilvs

obj_rect_ilvx_da3

obj_rect_ilvx_ra4

obj_circ2d

obj_circ2d_il

obj_circ2d_ilv

obj_circ2d_ilvs

obj_circ2d_ilvx_da3

obj_circ2d_ilvx_ra4

Use the following entry to set webLabelFlag in an rtview stylesheet (.rts) file:

rtv-all {

 webLabelFlag: 1;

}

Limitations

In the following situations, an object with webLabelFlag selected will still be rendered in the image by the Display Server:

§        Display is opened in Internet Explorer 8 or older.

§        Display Server is run with the -nohtml5 option set on the command line.

§        labelTextPosY is set to "Tab Top" (obj_rect*)

§        labelTextPosY is set to "Title Top" and bgBorderFlag is set to "true" (obj_rect*)  

§        obj_rect* with non-html object above it in Z-order which overlaps (e.g. obj_rect* used as a background behind several meter objects)

§        Object is inside an object grid, and is not inside a composite object in that grid.

In other cases, an object may have a slightly different appearance in the thin client when it is rendered as HTML:

§        bgGradientMode property set to "Diagonal Edge" or "Diagonal Center" is treated as "Vertical Edge" (Only vertical and horizontal gradients are supported on HTML objects in the thin client.)

§        bgShadowFlag property is ignored

Object Descriptions

RTView objects are categorized in the Object Palette according to the appearance and behavior of each type of object. This section describes how to work with each type of object and assumes you have already reviewed the following: “Add/Edit Objects”, “Object Properties”, and the Attach To Data section for your data source.

To view sample displays with tutorials, product features, and data source specific examples go to the demos directory, run the data simulators that apply to your “RTView Data Sources” and start the Display Builder. Open the file alldisplays.rtv and double-click on your selection.

Note: To learn how to start the Display Builder and run the data simulators refer to the “Quick Start Tutorial”.

Object Palette

Graphs

Graphs are useful for comparing data. Trend graphs are used to display a single variable per trace over time. Bar, pie, radar, and XY graphs are designed to display information returned by a tabular element in your data attachment. See “Graph Objects” for details.

Tables

Tables offer the ability to display large amounts of data. See “Table Objects” for details.

General

The General tab contains flexible objects that can be used to display data and images in addition to executing commands either manually or based on thresholds. To display values on these objects, attach the value property to numeric data or the valueString property to text data, and the label property to text data.

If you have a very long label or valueString and do not want to have the label/valueString extend past the edges of the rectangle, you can select the bgClipTextFlag option in the Background category in Object Properties to clip the edges of the text so that only that portion within the rectangle displays. Note: The bgVisFlag must be enabled for bgClipTextFlag to work.

General objects that feature the image property can be customized to display your image (.gif, .jpg, or .png) file.

The styleClass property allows you to enter the style class name for this object as defined in your “Style Sheets”. If not specified, the object class name is used.

Note: The value entered must not contain spaces and cannot start with rtv-.

The “webLabelFlag” property allows select objects to be rendered as HTML elements in a thin client deployment.

Threshold Objects

Objects labeled Range Dynamic and Discrete Dynamic on the General tab support threshold functionality, allowing you to change the image and color of the object as well as execute a threshold command from the object based on the current value of the value property. Both the range dynamic and the discrete dynamic objects have the thresholding functionality turned off by default. In the descriptions below, the object's value is the current value of the value property. See “Threshold Commands” for more information.

Range Dynamic 

Range dynamic objects allow you to setup your threshold so that if the object's value is within a range of numbers, the threshold functionality executes. To enable the high alarm threshold, check the valueHighAlarmEnabledFlag. This will enable several related properties. When the object's value is greater than or equal to the valueHighAlarm property, the background of the object will change to the valueHighAlarmColor, the bitmap on the image will change to the valueHighAlarmImage and the valueHighAlarmCommand will be executed. To enable the high warning threshold, check the valueHighWarningEnabledFlag. When the object's value is greater than or equal to the valueHighWarning, but less than the valueHighAlarm, the background of the object will change to the valueHighWarningColor, the bitmap on the image will change to the valueHighWarningImage and the valueHighWarningCommand will be executed. The low alarm and low warning threshold properties work the same way, but activate when the object's value is less than or equal to the valueLowAlarm or valueLowWarning properties.

For both the discrete dynamic and range dynamic objects, threshold commands will only execute if the number of seconds specified in the valueCommandTimeout has elapsed since the previous threshold command was executed and the value has changed to another threshold. For example, if the high warning threshold range is between 40 and 50, when object's value enters this range, the valueHighWarningCommand will be executed. The valueHighWarningCommand will not be executed again until the object's value leaves the high warning threshold range and then re-enters it. If this occurs in less time than is specified in the valueCommandTimeout property, it will not be executed until that time elapses. If the valueCommandTimeout is set to 0, the internal default, 5 seconds, is used.

Discrete Dynamic 

Discrete dynamic objects are similar to range dynamic objects, except that the threshold functionality is executed when the object's value equals the threshold value instead of when it is within the range of threshold values. To enable the high alert threshold, check the valueHighAlertEnabledFlag. When the value property equals the valueHighAlert, the background of the object will change to the valueHighAlertColor, the bitmap on the image will change to the valueHighAlertImage and the valueHighAlertCommand will be executed. To enable the medium alert threshold, check the valueMediumAlertEnabledFlag. When the value property equals the valueMediumAlert, the background of the object will change to the valueMediumAlertColor, the bitmap on the image will change to the valueMediumAlertImage and the valueMediumAlertCommand will be executed. The low alert threshold property works the same way, but activates when the object's value is less than or equal to the valueLowAlert property.

For both the discrete dynamic and range dynamic objects, threshold commands will only execute if the number of seconds specified in the valueCommandTimeout has elapsed since the previous threshold command was executed and the value has changed to another threshold. For example, if the high warning threshold range is between 40 and 50, when object's value enters this range, the valueHighWarningCommand will be executed. The valueHighWarningCommand will not be executed again until the object's value leaves the high warning threshold range and then re-enters it. If this occurs in less time than is specified in the valueCommandTimeout property, it will not be executed until that time elapses. If the valueCommandTimeout is set to 0, the internal default, 5 seconds, is used.

Labels

The Labels tab includes several types of labels. All of the labels have at least one of the following properties: value, valueString, and label. The value property used to display numeric data, either from a data attachment or static values. Some labels can be designed to change color according to value property or feature vu meters to dynamically display that data. The valueString and label properties are both used to display text data, either from a data attachment or static values.

Meters

Meters are useful for displaying data that falls within a known range. You can control the range of data displayed in the meter by setting the valueMax and valueMin properties. Attach your data to the value property.

The styleClass property allows you to enter the style class name for this object as defined in your style sheet. If not specified, the object class name is used. See “Creating Style Sheets” for more information.

Note: The value entered must not contain spaces and cannot start with rtv-.

Scales

Scales are useful for displaying data that falls within a known range. You can control the range of data displayed in the scale by setting the valueMax and valueMin properties. Attach your data to the value property. All of the scales, except the pie scale, support a variety of axis styles and can be oriented vertically or horizontally. See “Scale Objects” for details.

Indicators

The Object Palette features four types of “Indicator Objects”:

•        Discrete - Supports 3 discrete comparisons.

•        Limits - Supports 2 high and 2 low thresholds.

•        Multi - Supports an unlimited number of comparison values.

•        Panel - Panel of 2 or 3 indicator lights, each supports a discrete comparison.

For all indicators, attach your data to the value property and setup comparisons using the properties in the Alert category. Indicators that feature the “Image Property” can be customized to display your image (.gif, .jpg or .png) file.

Note: Objects previously featured on the Indicators tab will continue to function in existing displays, but are no longer available in the Object Palette.

Controls

Controls allow you to issue action “Commands” and update variables (see “Add/Edit Variables”) that may be used to control other objects in the display. The visFlag property controls the visibility of the object. See “Control Objects” for details.

Links

The Links tab features three objects. The Direct link draws a straight line between the objects it connects. The Direct Offset link attaches to objects at a right angle, but draws a diagonal line for the remainder of the link. The Orthogonal link draws a line at right angles between the objects it connects. See “Link Objects” for details.

Composite

The Composite tab features pre-configured composite objects. The composite object allows you to show a display (.rtv) file within an object. This is useful for creating groups of objects that you want to use multiple times, either directly in your display, or in an object grid. See “Composite Object” for details.

Fx Graphs

Our Adobe® Flash graphs have been designed specifically for use in a Thin Client deployment. These graphs are similar to objects featured on the Graphs tab, but support additional interactivity. See the “Fx Graphs” page for details.

Composite Object

The composite object (class name: obj_composite) allows you to show a display (.rtv) file within an object. This is useful for creating groups of objects that you want to use multiple times, either directly in your displays or in the “Object Grid”.

Creating Composite Displays

First, create the display that you want to use inside of a composite object. This display is referred to as the composite display. While any display (.rtv) file can be used as a composite display, there are some rules about constructing that display:

•        Property names for composite objects cannot be used as variable names, in the Composite section this only includes rtvName and substitutions.

•        Only public variables that are not mapped to data or substitutions will show up as properties on the composite object.

•        Names of all public variables used for tabular data must have Data Type set to Tabular. See “Add/Edit Variables” for more information.

•        Composite displays can use any object from the Object Palette, except the composite object.

•        Nested composite objects are not supported.

Next, open new display and add a composite object. On the composite object, set the rtvName property to the name of the composite display you just created.

Note: The rtvName property should be set before any other properties.

Once you have set rtvName, all public unmapped variables in the composite display will show up as properties on the composite object. Like any other property, you can attach those properties to data or set them to static values. See “Add/Edit Variables” for more information.

Note: If you do not want a variable to be exposed as a property, mark it as private.

For example, you can create a display (.rtv) file with two meters that are attached to two public variables: value1 and value2. When you enter the name of that display (.rtv) file in the rtvName property of the composite object, then value1 and value2 will show up in the Composite section of the Object Properties list. These properties can be set to static data or attached to data to drive the values in the composite display. When the composite object is used in an “Object Grid”, these properties will also show up in the iconProperties dialog, which allows you to assign them to either values or data columns.

Note: Composite objects used in Object Grids must have their bgOpaqueFlag property selected.

Use the tabcomposites property to enable the Tab key to switch focus to controls that are inside composite objects. See “Command Line Options: Display Builder and Display Viewer” for more information.

Using Interaction Properties

The specified drillDownTarget or command for objects in the composite display will take precedence over the drillDownTarget or command set on the composite object when it is instanced directly in a display. When the composite object is used in an Object Grid, the specified drillDownTarget or command for objects in the composite display will take precedence over the drillDownTarget or command set on the Object Grid.

For example, let's say you have a composite display with an object that drills down to display A and you set a drillDownTarget on the composite object to display B. When you click on the composite object, if you click directly on the object that drills down to display A, then display A is opened. If you click anywhere else in the composite display, then display B is opened.

A similar thing happens when you use that composite object in an Object Grid. However, in this case, you can't set a drillDownTarget on the composite object, you can only set the drillDownTarget on the Object Grid. So, let's say you set the Object Grid to drill down to display B. Again when you click directly on the object in the composite display that drills down to A, display A is opened. When you click anywhere else in the composite or in the Object Grid, display B is opened.

Commands

To assign a command, right-click in the Property Value field of the command property and select Define Command. Commands can be set up to execute when you click on an object or automatically execute the command when the value of an object reaches a specified threshold. See “Define/Execute Command” for information on how to set up commands.

Drill Down Displays

To specify a drill down display, double click on the drillDownTarget property. Any display (.rtv) file can be targeted as a drill down. Once a drill down target has been set, double-click to activate the drill down. Drill down displays can be activated in the same window or opened in a separate window. This allows you to build a customizable hierarchy of displays. See “Drill Down Displays” for more information.

Background Properties

Composite Properties

There are two standard properties in the Composite section: rtvName and substitutions. Once you have set the rtvName property, the composite display will show up in your composite object and all of the public variables from the composite display that are not mapped to data or substitutions will be added as Composite properties. See “Add/Edit Variables” for more information.

Historian Properties

Interaction Properties

Label Properties

Object Properties

Control Objects

The Controls tab features objects that allow you to issue commands and update variables that may be used to control other objects in the display. The sample display file controls.rtv (located in demos/tutorials) features information on working with objects from the Controls tab.

The value, valueString, and selectedValue properties allow you to set the value for the controls. The varToSet property allows you to update the attached variable with the value from the control.

The actionCommand property allows you to set up a command which will be executed from the control. This actionCommand can reference the value from the control by using the keyword $value. To enable selecting, moving and editing the controls without activating the associated action command, the controls are not active in the main window of the Display Builder.

The tabIndex property allows you to define the order in which table and control objects will receive focus when navigated from your keyboard. Initial focus is given to the object with the smallest tabIndex value, from there the tabbing order proceeds in ascending order. If multiple objects share the same tabIndex value, then initial focus and tabbing order are determined by the alpha-numeric order of the object names. Objects with a tabIndex value of 0 are last in the tabbing order.

Note: The tabIndex property does not apply to Slider objects or objects that are disabled, invisible, or have a value of less than 0.

To preview a control object in the Display Builder, save your file and click the Preview button  in the toolbar. Your display opens in a Preview Window that allows you to activate control objects. The Preview button becomes disabled when you edit your display. Save your display again to enable it.

Some control object properties cache their colors and therefore do not update when a custom color definition changes. You will need to either to restart RTView or reload the display to see the color change for these objects.

The Controls tab features the following objects:

Navigation Controls

Navigation controls allow you to create a rich and compact visual presentation of hierarchical data. Navigation controls are most often used in a multi-panel application for display navigation. Typically, the navigation control is shown in one panel and another panel contains the displays which you drill-down to by selecting items in the navigation control. Navigation controls can also be used in any application where hierarchical data is most effectively displayed using expandable/collapsible nodes.

You can optionally configure status icons for navigation controls, using images of your choice, to visually indicate whether an element is in a critical state, and to also propagate the status of elements to the top of the navigation control (see the tree control, for example, below).

Tree Control 

With the tree control (class name: obj_c1tree), multiple nodes can expand at a time. The tree control not only allows you to configure status icons and to propagate the status up to parent nodes - you can also configure type icons. Type icons are static images you assign to tree nodes to visually indicate the element type (for example, Production or Sales) or the node depth.    

For details, see “Tree Control”.

Accordion Control

With the accordion control (class name: obj_c1accordion), nodes appear as pushbuttons and a single node expands at a time. The accordion control visually indicates whether an element in the accordion is closed or open. As with the tree control, the accordion control allows you to configure status icons and to propagate the status up to parent nodes. The accordion control does not display type icons (as the tree control can).   

For details, see “Accordion Control”.

Text Entry Fields

There are three text entry fields to choose from:

•        obj_c1textedit: Allows you to enter numeric or text information. Attach your data to valueString to update the value shown in this text entry field from your data.

•        obj_c1textedit_i: Accepts only numbers without decimal points.

•        obj_c1textedit_d: Allows numbers with decimal points.

Attach your data to value to update the values shown in these text entry fields from your data.

Note: To get initial values from an internal RTView variable and base those values on user interaction, you must attach the value and varToSet properties to the same variable.

The actionCommand is executed and the variable attached to varToSet is updated with the data you typed into the text entry field when you press <Enter> and, if the executeOnFocusLostFlag is selected, when the text entry field loses focus. To disable text entry, deselect the editableFlag check box. If the editableFlag is off and enabledFlag is on, the mouse and arrow keys can still be used to move the cursor. If the executeOnKeystrokeFlag check box is selected, then each keystroke that modifies the text field will set the varToSet variable and execute the actionCommand, if applicable, using the modified text.

Note: In a Thin Client deployment there may be a delay between the keystroke and the response, depending on the speed of your network and server.

The following properties support input validation. Attach inputValidVarToSet to a local variable and this variable will be updated when the control executes with a value of 1 if the input is valid or a value of 0 if the input is invalid. Attach invalidInputMsgVarToSet to a local variable and this variable will be updated when the control executes with an error message if the input is invalid or an empty string if the input is valid. If validation fails, the actionCommand will not be executed. By default, input validation occurs whenever a control executes (i.e. when you press <Enter>). If executeOnFocusLostFlag is selected, then the control will also execute whenever the object loses focus. If executeOnKeyStrokeFlag is selected, the control will also execute whenever a key is pressed while the object has focus. For numeric validation, set valueMax and valueMin to specify the maximum or minimum valid values. If left blank, there will be no maximum or minimum value validation. Additionally, the following properties apply for text string validation:

•        characterCase - Select from the following options: Mixed Case, Upper Case, or Lower Case.

•        minCharacters - Specify minimum number of characters allowed in the field. If left blank, there will be no validation of minimum number of characters.

•        maxCharacters - Specify maximum number of characters allowed in the field. If left blank, there will be no validation of maximum number of characters.

To set the bgColor and fgColor properties of a text entry field, click on the  button and choose a color from the palette. The bgColor property sets the color of the object's background area and the fgColor property sets the color of the text. When bgColor and fgColor properties are set to Default, then the text entry field will adopt default settings for background and foreground colors. For example, in the Display Viewer the text entry field in your display will adopt a standard Java appearance. When that same display is viewed via Thin Client Browser, the text entry field will conform to that browser's color preferences.

Use the valueTextAlignX property to set text alignment: Left, Center, or Right.

Note: The selected alignment can only be applied if the length of the text is less than the length of the text entry field.

Use the mouseOverText property to enter a tool tip for this control. To display the tool tip, move your mouse over the object. To enter a multi-line tool tip, use \n to delimit the lines (e.g. control\nobject).

Note: The object must be visible (i.e. visFlag property is selected), in order for the tool tip to be visible.

The styleClass property allows you to enter the style class name for this object as defined in your style sheet. If not specified, the object class name is used. NOTE: The value entered must not contain spaces and cannot start with rtv-.

The numeric text entry controls (obj_c1textedit_i and obj_c1textedit_d) support a validation option for blank entries. To enable this feature, select the validateBlankValuesFlag property. If selected and a blank string is entered, the actionCommand will not execute and invalidInputVarToSet and invalidInputMsgVarToSet will indicate an invalid entry.

Set the executeOnlyIfChangedFlag property to true to have the control's command execute only when the text in the control is changes. The text control's varToset and valueString or value property must be attached to the same local variable. By default, executeOnlyIfChangedFlag is false. When false, the control's command is executed when the control loses focus (if executeOnFocusLostFlag = true or the control is a text area), or when the user presses the Enter key in the control (if the control is not a text area), regardless of whether the text in the control was changed. (This matches the text control behavior in all previous releases.)

Text Area Object

The text area control supports display and entry of multi-line text with optional word wrap. Scrollbars will appear as needed. Attach your data to valueString to update the value shown in this text area from your data.

The actionCommand is executed and the variable attached to varToSet is updated with the data you typed into the text area control when the text area control loses focus. To disable text entry, deselect the editableFlag check box. If the editableFlag is off and enabledFlag is on, the mouse and arrow keys can still be used to move the cursor. If the executeOnKeystrokeFlag check box is selected, then each keystroke that modifies the text area will set the varToSet variable and execute the actionCommand, if applicable, using the modified text.

Note: In a Thin Client deployment there may be a delay between the keystroke and the response, depending on the speed of your network and server.

To set the bgColor and fgColor properties of a text area object, click on the  button and choose a color from the palette. The bgColor property sets the color of the object's background area and the fgColor property sets the color of the text. When bgColor and fgColor properties are set to Default, then the text area control will adopt default settings for background and foreground colors. For example, in the Display Viewer the text area control in your display will adopt a standard Java appearance. When that same display is viewed via Thin Client Browser, the text area control will conform to that browser's color preferences.

Use the mouseOverText property to enter a tool tip for this control. To display the tool tip, move your mouse over the object. To enter a multi-line tool tip, use \n to delimit the lines (e.g. control\nobject).

Note: The object must be visible (i.e. visFlag property is selected), in order for the tool tip to be visible.

The styleClass property allows you to enter the style class name for this object as defined in your style sheet. If not specified, the object class name is used.

Note: The value entered must not contain spaces and cannot start with rtv-.

maxCharacters - The maximum number of characters that is submitted to the control's actionCommand. The default value is blank (no limit). The limit does not restrict the length of the text in the control, instead the limit is checked before the command is executed and if the limit is exceeded, the command is not executed.

inputValidVarToSet - Attach to a local variable. This variable is updated with a value of 1 if the maxCharacters limit is blank or the text is less than or equal to the maxCharacters limit, or updated with a value of 0 if the text length exceeds the maxCharacters limit.

invalidInputMsgVarToSet - Attach to a local variable. This variable is updated with an error message if the text length exceeds the maxCharacters limit, or updated with an empty string if the text length is less than or equal to the maxCharacters limit.

In the Display Viewer, pressing the <Tab> key inside a text area control inserts a tab character in the text. To move the keyboard focus away from a text area control, either click outside of the control or press <Ctrl-Tab>. In the Display Viewer Applet, pressing the <Tab> key inside a text area will move the keyboard focus.

Button 

The actionCommand is executed and the variable attached to varToSet is updated with the value from the valueToSet property when you click on the button.

Use the hotKey property to enable keyboard activation on a button. Assign an alphanumeric value (A-Z or 0-9) to be used on the keyboard with the Alt key. The button is activated when the panel it resides in has focus and the user holds down the Alt key and simultaneously selects the assigned value on the keyboard. For example, Alt+B, where B is the assigned key.

When keyboard activation is enabled and the defaultButtonFlag is selected, a button can be activated by pressing the <Enter> key. In the display, the activated button will be highlighted with an extra border. While multiple objects in the display can have the defaultButtonFlag selected, it will only apply to first one added to the display.

Note: The defaultButtonFlag property does not apply to objects that are disabled or invisible. If you are viewing the Display Server in Firefox, another control object must have focus when the <Enter> key is pressed in order for the button to be activated.

To set the bgColor and fgColor properties of a button, click on the  button and choose a color from the palette. The bgColor property sets the color of the object's background area and the fgColor property sets the color of the text. When bgColor and fgColor properties are set to Default, then the button will adopt default settings for background and foreground colors. For example, in the Display Viewer the button in your display will adopt a standard Java appearance. When that same display is viewed via Thin Client Browser, the button will conform to that browser's color preferences.

Use the mouseOverText property to enter a tool tip for this control. To display the tool tip, move your mouse over the object. To enter a multi-line tool tip, use \n to delimit the lines (e.g. control\nobject).

Note: The object must be visible (i.e. visFlag property is selected), in order for the tool tip to be visible.

The styleClass property allows you to enter the style class name for this object as defined in your style sheet. If not specified, the object class name is used.

Note: The value entered must not contain spaces and cannot start with rtv-.

Use the menuItemIndex, menuItemGroup and menuItemSubmenu properties with the button to extend the RTView context menu. For details, see “Extending the Context Menu”.

The image property enables you to customize a button to display your image (.gif, .jpg or .png) file. Click in the Property Value field and type the name of your image. Or, click on the  button to open the Select Image dialog.

A button can display an image, a label, or both. If both the image and label properties are set, the image will be to the left of the label. It is best to leave several pixels of padding between the image and/or label of a button to avoid wrapping or clipping of text.

The appearance of a button with an image and/or label can vary slightly between the Display Viewer and supported browsers. You may notice the following variations:

•        Alignment of the image inside the button: The image may be somewhat closer to the top or bottom edge of the button.

•        Vertical alignment (if any) of the image with the button's label: The center of the image may be somewhat lower or higher than the center of the label.

•        Appearance of the image and label if they don't fit inside the button: In some cases the label may be clipped with an ellipsis (...) replacing the clipped text, or the label may be clipped with no indication, or the label may wrap and may extend below the button.

Note: In Firefox a button with an image will not depress when it is clicked, however the button's command will still be executed.

Check box

Attach your data to the value property to update the value displayed by the check box. Note: To get initial values from an internal RTView variable and base those values on user interaction, you must attach the value and varToSet properties to the same variable.

If the value of your data attachment equals the valueToSetChecked property, the check box will be selected. Default values for valueToSetChecked is 1 (On) and for valueToSetUnchecked is 0 (Off).

The actionCommand is executed and the variable attached to varToSet is updated when you click on the check box. If clicking on the check box selects it, then varToSet will be updated with the value of valueToSetChecked. If you click on the check box and it does not become selected, varToSet will be updated with the value of valueToSetUnchecked.

Use the mouseOverText property to enter a tool tip for this control. To display the tool tip, move your mouse over the object. To enter a multi-line tool tip, use \n to delimit the lines (e.g. control\nobject).

Note: The object must be visible (i.e. visFlag property is selected), in order for the tool tip to be visible.

The styleClass property allows you to enter the style class name for this object as defined in your style sheet. If not specified, the object class name is used.

Note: The value entered must not contain spaces and cannot start with rtv-.

Radio Button Group 

Use the radioListValues property to specify the labels and values for each radio button (e.g., Low,25;Medium,50;High,75), or make a data attachment to a two-column table. When attaching to a table, the first column is used for the radio button labels, the second column is used for radio button values. If only labels are specified, they will also be used as values. Specify which radio button is selected using the selectedValue property.

The orientationMode property specifies how radio buttons are populated, horizontally (by row) or vertically (by column). Specify the width, in pixels, of the space between radio buttons using the horizontalGap and verticalGap properties.

The actionCommand is executed and the variable attached to varToSet is updated with the selected value when you select a previously unselected radio button from the group.

Use the mouseOverText property to enter a tool tip for this control. To display the tool tip, move your mouse over the object. To enter a multi-line tool tip, use \n to delimit the lines (e.g. control\nobject). The object must be visible (i.e. visFlag property is selected), in order for the tool tip to be visible.

Note: In a Thin Client deployment, multi-line and non-static tool tips are not supported.

The styleClass property allows you to enter the style class name for this object as defined in your style sheet. If not specified, the object class name is used.

Note: The value entered must not contain spaces and cannot start with rtv-.

Slider 

The valueMin and valueMax properties control the range of values for the slider. Attach your data to the value property to update the value displayed by the slider from a data attachment.

Note: To get initial values from an internal RTView variable and base those values on user interaction, you must attach the value and varToSet properties to the same variable.

The actionCommand is executed and the variable attached to varToSet is updated with the value from the slider when you release the slider thumb after dragging it or when you click on the slider to advance the thumb one unit. Select the updateWhileAdjustingFlag to receive updates while dragging the slider thumb.

The fgColor property sets the tick mark color. Click on the  button to select a color or select Default to use the best color for your look and feel. The fgColor is only applied when the Slider control is enabled, so tick marks on sliders in the Display Builder's Working Area are not visible. Select Tools>Preview Window to see the fgColor applied.

Note: In the Thin Client deployment, Slider controls do not have tick marks and therefore the fgColor property does not apply.

Use the mouseOverText property to enter a tool tip for this control. To display the tool tip, move your mouse over the object. To enter a multi-line tool tip, use \n to delimit the lines (e.g. control\nobject).

Note: The object must be visible (i.e. visFlag property is selected), in order for the tool tip to be visible.

The styleClass property allows you to enter the style class name for this object as defined in your style sheet. If not specified, the object class name is used.

Note: The value entered must not contain spaces and cannot start with rtv-.

The axisDirection property allows you to set the axis direction of the scale. Select from the following options:

Bottom to Top - Vertical orientation with min on bottom and max on top.

Left to Right - Horizontal orientation with min on left and max on right.

Top to Bottom - Vertical orientation with min on top and max on bottom.

Right to Left - Horizontal orientation with min on right and max on left.

List Box

Use the listValues property to:

•        Specify the labels and values for each radio button (e.g. Low,25;Medium,50;High,75),

•        Make a data attachment to a single cell table containing a semicolon (;) delimited list of values, or

•        Make a data attachment to a two-column table, where the first column is used for the radio button labels, the second column is used for radio button values. NOTE: If only labels are specified, they will also be used as values.

To set the selected list item from a data attachment, attach your data to the selectedValue property.

The actionCommand is executed and the variable attached to varToSet is updated with the selectedValue when you chose a previously unselected item from the list box.

To set the bgColor and fgColor properties of a list box, click on the  button and choose a color from the palette. The bgColor property sets the color of the object's background area and the fgColor property sets the color of the text. When bgColor and fgColor properties are set to Default, then the list box will adopt default settings for background and foreground colors. For example, in the Display Viewer the list box in your display will adopt a standard Java appearance. When that same display is viewed via Thin Client Browser, the list box will conform to that browser's color preferences.

Use the mouseOverText property to enter a tool tip for this control. To display the tool tip, move your mouse over the object. To enter a multi-line tool tip, use \n to delimit the lines (e.g. control\nobject).

Note: The object must be visible (i.e. visFlag property is selected), in order for the tool tip to be visible.

The styleClass property allows you to enter the style class name for this object as defined in your style sheet. If not specified, the object class name is used.

Note: The value entered must not contain spaces and cannot start with rtv-.

Combo Box

Use the listValues property to:

•        Specify the labels and values for each radio button (e.g. Low,25;Medium,50;High,75),

•        Make a data attachment to a single cell table containing a semicolon (;) delimited list of values, or

•        Make a data attachment to a two-column table, where the first column is used for the radio button labels, the second column is used for radio button values. NOTE: If only labels are specified, they will also be used as values.

To set the selected menu item from a data attachment, attach your data to the selectedValue property. Check the textEditEnabledFlag to allow the user to type a selection in addition to selecting from the drop down menu.

The actionCommand is executed and the variable attached to varToSet is updated with the selectedValue when you choose a previously unselected item from the drop down menu or type a new item into the text entry area of the combo box.

To set the bgColor and fgColor properties of a combo box, click on the  button and choose a color from the palette. The bgColor property sets the color of the object's background area and the fgColor property sets the color of the text. When bgColor and fgColor properties are set to Default, then the combo box will adopt default settings for background and foreground colors. For example, in the Display Viewer the combo box in your display will adopt a standard Java appearance. When that same display is viewed via Thin Client Browser, the combo box will conform to that browser's color preferences.

Use the mouseOverText property to enter a tool tip for this control. To display the tool tip, move your mouse over the object. To enter a multi-line tool tip, use \n to delimit the lines (e.g. control\nobject).

Note: The object must be visible (i.e. visFlag property is selected), in order for the tool tip to be visible.

The styleClass property allows you to enter the style class name for this object as defined in your style sheet. If not specified, the object class name is used.

Note: The value entered must not contain spaces and cannot start with rtv-.

Date Chooser 

Use the selectedValue property to specify an initial date value. The maximumDate and minimumDate properties control the selectable dates in the popup calendar. It is recommended that initial date you specify is within the maximumDate/minimumDate value range so that the user will not have to navigate to a valid date.

The actionCommand is executed and the variable attached to varToSet is updated with the selectedValue when either the user selects an date from the popup calendar or, if the date is typed in, when the user presses <Enter> or clicks out of the field.

The dateFormat property controls both the input of a date typed into a field, as well as the output to a local variable or action command. If dateFormat is not specified, then a locale dependent format will be used. When users mouse-over the text entry field, a tooltip will display the specified dateFormat so they will know which format to enter.

Since the dateFormat controls both the input and the output of the Date chooser, information not included in the dateFormat will be lost. For example, if the date format is MMMM dd, yyyy (e.g. January 01,2000), and the timeEntryEnabledFlag is selected, even if you enter a time it will not be stored since it was not included in the specified dateFormat. Or, if the specified dateFormat does include the time (e.g. MM/dd/yyyy hh:mm) and the time you entered was PM, it would be stored in the AM since am/pm was not specified in the dateFormat and AM is the default.

The dateFormat should be specified using format specifiers from the SimpleDateFormat class. The dateFormat property does not support backslashes (\). In the Display Viewer Applet, the text entry field validates the date string as you enter it. It is very strict about allowing only dates in the format specified. In the Display Server the parsing is more flexible, but not guaranteed unless the date entered is in the same format as the specified dateFormat.

Note: In the Display Server, the text entry field is not validated and the following format specifiers are not supported: G, w, W, D, F, E, k, K, S, z, Z.

The timeEntryEnabledFlag property controls the visibility of the Time field in the popup calendar. Times entered into this field must be in the following format: hh:mm:ss a. When timeEntryEnabledFlag is selected, an OK and Cancel button are added to the popup calendar, so you can select a date and enter a time before closing the popup. If the timeEntryEnabledFlag is deselected, the popup calendar closes as soon as you select a date.

The validColor property sets the font color to use while editing in the text entry area if the entered value uses the correct format. The default validColor is green. The invalidColor property is the font color used during and after editing in the text entry area if the entered value does not use the correct format. The default invalidColor is red. The fgColor property sets the color of the text entry area. The default fgColor is black.

Note: The validColor and invalidColor properties are not supported in the Thin Client deployment.

The styleClass property allows you to enter the style class name for this object as defined in your style sheet. If not specified, the object class name is used.

Note: The value entered must not contain spaces and cannot start with rtv-.

Localization:

•        The Time field, OK and Cancel buttons are localized by SL, currently only English and Japanese are available.

•        In the Display Builder, Display Viewer Application and Display Viewer Applet the month and day names will use the language settings on the client system.

•        In the Display Server, the month and day names can be localized by replacing the date.js file in the Display Servlet with a localized version.

Note: The Display Viewer Applet uses JCalendar 1.3.2 which is distributed under Lesser GPL and can be downloaded from www.toedter.com/en/jcalendar. The Display Server uses the Datejs date library for parsing and formatting dates and times.

Password Field

The Password Field control object works just like Text Entry Fields except that instead of displaying entered text, it displays asterisks (*).

Tab Control Object

The tab control (obj_c1tabs) has two temporary tabs labeled A and B when initially drawn on the palette, and also when the user places an instance on a display. The temporary tabs are replaced with the actual tabs when you attach the tab control's valueTable property to a data table containing one row for each tab.

The size given to the control in the Builder determines the space available for tabs. The tabs are drawn horizontally with the first tab at the left edge of the control. If the control is not wide enough to show all of the tabs, the tabs wrap vertically. If the control is not tall enough to show all of the tabs, some of the tabs might be clipped or invisible.

Changing the control's labelTextSize property changes the size of the tab label text, which also affects the size of the tabs.

The tab control is populated from a data table attached to its valueTable property, with one tab created for each row in the table. The following tab control properties are used to map the columns of the data table to each tab:

•        labelColumnName: The value from this column is used as the tab label. If labelColumnName does not specify a column in the valueTable or contains an empty string, then the tab for row N in the valueTable is labeled "Tab N". The labelColumnName property appears in the Label category.

•        valueColumnName: The value from this column is assigned to the variable (if any) attached to the tab control's varToSet property when the corresponding tab is selected by the user. If valueColumnName does not specify a column in the valueTable, then the tab's index (0 through N - 1, for a table with N rows) is used as the tab value. The valueColumnName property appears in the Data category.

•        imageColumnName: The value from this column is used to load an icon image, shown to the left of the tab's label. If imageColumnName does not specify a column in the valueTable, or if the column is empty, or if the image cannot be found, the tab does not contain an icon. An icon affects the size of the tab. The imageColumnName property appears in the Image category.

•        mouseOverColumnName: The value from this column is used as the tooltip for each tab. If mouseOverColumnName does not specify a column in the valueTable, or if the column is empty, the tab does not display a tooltip. The mouseOverColumnName property appears in the Interaction category.

The tab control supports the drillDownColumnSubs property, which can be useful in cases where the tab's command is a drilldown. As with other objects that support drillDownColumnSubs, it can be used to set the values for substitutions and local variables from columns in the row of the valueTable that corresponds to the selected tab.

The control's visFlag property can be used to toggle the control's visibility. Unlike the other control objects, the tab control does not support the enabledFlag property so it is always enabled.

The selectBgColor and selectTextColor fields in the Interaction region in Object Properties allow you to specify the background and text colors for the selected tab. To set the colors, click in the field in the Interaction region, click on the  button, and select a color from the Color Chooser palette that displays. When selectBgColor and selectTextColor properties are set to Default, then the tab will adopt default settings for the background and text colors. Both options are set to Default initially.

The paddingVertical and paddingHorizontal options in the Label category in Object Properties provide extra padding, in pixels, above and below (paddingVertical) and left and right (paddingHorizontal) of the label of each tab. These options enable you to make the tabs taller and wider without increasing the font size. The default value for both options is zero.

The webHoverTabColor and webHoverTextColor options in the Interaction category in Object Properties define the background color and text color for an unselected tab when the cursor is positioned over the tab. The default values are the same as the normal tab background and text colors. This property only affects the thin client and is ignored in the builder/viewer.

As on other control objects, the predefined substitution named $value can be used in the control's command. The value of the selected tab is substituted for $value when the command is executed. (See the valueColumnName property for a description of how a tab's value is determined).

If a tab control has a command defined and the commandConfirm property is checked, the user is asked to confirm the command when a tab is clicked, but the clicked tab becomes the selected tab regardless of the user's response.

Limitations / Differences:

•        In the Thin Client, the tab control is not supported in IE version 8 or older and will not appear in displays opened in those versions.

•        The tab sizes and appearance may differ somewhat when viewed in the Builder/Viewer versus the Thin Client.

•        In the Thin Client, the background color of the selected tab is brighter than the unselected tabs, while in the Builder/Viewer the selected tab is darker than the other tabs. (This difference is intentional, to conform with the standard appearance of tabs in Swing versus a browser.)

webLabelFlag

In a Display Server deployment when the webLabelFlag property is selected, the object will be rendered as an HTML element in the thin client rather than rendered in the image by the Display Server. This allows the Display Server to update the individual object (if necessary) when the display is refreshed, instead of regenerating the entire display image. In some cases, this can improve the performance of the Display Server and thin client.

The webLabelFlag property also enables you to select an object's text and copy it to the clipboard.

Use the following entry to set webLabelFlag in an rtview stylesheet (.rts) file:

rtv-all {

 webLabelFlag: 1;

}

Limitations 

In the following situations, an object with webLabelFlag selected will still be rendered in the image by the Display Server:

•        Display is opened in Internet Explorer 8 or older.

•        Display Server is run with the -nohtml5 option set on the command line.

•        Object is inside an object grid, and is not inside a composite object in that grid.

In other cases, an object may have a slightly different appearance in the thin client when it is rendered as HTML:

•        bgGradientMode property set to "Diagonal Edge" or "Diagonal Center" is treated as "Vertical Edge" (Only vertical and horizontal gradients are supported on HTML objects in the thin client.)

•        bgShadowFlag property is ignored

Navigation Control Objects

Display your data in navigation controls by attaching it to the valueTable property. The input of tabular data determines the content of the navigation control, as well as the appearance of each object in the navigation control. As with other controls, to configure a drill-down, set substitutions, or execute a command when a user clicks an navigation control node, use the actionCommand property. As with other table-driven objects, the drillDownColumnSubs property can be configured to set substitutions to column values from the row in the valueTable that corresponds to the selected navigation control node. If the navigation control is not large enough to display all of the data, scroll bars are automatically added.

You can configure user access control for nodes in navigation controls based on user roles. For example, the specified displays are not visible (nor accessible) to users with the associated role.

There are two types of navigation controls: the tree control (class name: obj_c1tree) and the accordion control (class name: obj_c1accordion). Both controls allow you to configure status icons and to propagate the status up to parent nodes.

Tree Control

Multiple nodes can expand at a time and you can configure type icons for tree nodes (static images that visually indicate the element type, such as Production or Sales, or the node depth).

To configure, see “Tree Control”.

Accordion Control

A single node expands at a time and icons visually indicate whether an element in the accordion is closed, open, or a leaf node.

To configure, see “Accordion Control”.

Table Formats for Navigation Controls

There are two table format options for navigation controls, each with their own requirements:

§        Row-Leaf: This format is intended for use when the valueTable property is attached to an indexed table and all leaves in the navigation control are at the same depth. For example, where the navigation control is attached to the current table of an indexed cache.

Typically, the RTView cache data source is indexed. That is, the cache indexColumnNames property specifies the columns to index. If those index columns represent a hierarchy (for example, server, application, process or country, state, city), the cache current table could be used as the valueTable property of a control in the Row-Leaf format. In other cases, a table in the Row-Node format might be required.

To configure, see Creating a Row-Leaf Format Table (below).

§        Row-Node: If the Row-Leaf format is not suitable for your data, use the Row-Node format. This format is intended for use when the valueTable property is attached to an un-indexed table. Your data table must also contain a row for each node in the navigation   control, including the top-level node (rather than just the leaf nodes, as with the Row-Leaf format), as well as a column for the node and a column for the parent node. The Row-Node format allows each leaf of the navigation control to have a different depth.

To configure, see Creating a Row-Node Format Table (below).

Note: If you have an XML file that has the navtree.xml format you can convert it into a row-node format. For details, see “navtree.xml For Navigation Control Objects”.

The default table format is Row-Leaf. The following are examples of the Row-Leaf and Row-Node table formats which both produce the tree control below the table:

Creating a Row-Leaf Format Table

In the Row-Leaf table format, there is one row in the table for each leaf node in the navigation  control. A leaf node is added to the navigation control for each row in the valueTable. The path to a leaf node (that is, the ancestor nodes of the leaf) is determined by the values in each of the table columns specified by the nodeIndexColumnNames property. When the valueTable property is attached to the current table of an indexed RTView cache, the navigation   control nodeIndexColumnNames property is typically set to the same columns that are specified for the cache index columns.

To illustrate how to create a navigation control using the Row-Leaf format, let us say we have a cache named Applications that has two index columns, App Name and PID, and the current table in that cache has the following rows:   

We set the navigation control valueTable property to attach to the cache data, with the following fields specified in the Attach To Cache Data dialog:

Cache: Applications

Table: Current

Specify Row-Leaf format for the valueTableFormat property, and App Name;PID for the nodeIndexColumnNames property. The following figure illustrates the structure of the navigation control. There are two nodes labeled App0 and App1. Node App0 has three child nodes labeled 1000, 1004, 1008. Node App1 has two child nodes, labeled 1001 and 1005.

We add another index column, AgentName, to the Applications cache, so that the current table now has the following rows:

We also update the navigation control nodeIndexColumnNames property to AgentName;App Name;PID. The following figure illustrates the new structure of the navigation control: two top-level nodes labeled Agent1 and Agent2, each with two child nodes, app0 and app1.

As illustrated above, the label string for a node at depth N is taken from the Nth column in nodeIndexColumnNames property. Therefore, the labels for the top-level nodes come from the first column in the nodeIndexColumnNames property (AgentName), the labels for the second-level nodes come from the second column in nodeIndexColumnNames property (App Name), and so forth.

To specify node labels from a different set of valueTable columns, use the nodeLabelColumnNames property. Enter a semicolon-separated list of column names in the nodeLabelColumnNames property, one for each level in the navigation control, where the Nth column name in the list contains the labels for navigation control nodes at depth N.

Return to “Tree Control”.

Return to “Accordion Control”.

Creating a Row-Node Format Table

In the Row-Node table format, there is one row in the table for each node in the navigation control, including the top-level node (rather than just the leaf nodes, as with the Row-Leaf format).

Note: For a demo of an tree control that uses a data table in the row-node format, see the treecon.rtv display, located in the RTV_HOME/demos/features directory. The tree in that display is attached to an XML file (navtree_rownode.xml) that defines a navigation tree containing display titles and filenames in the row-node format. To view the demo: in an initialized command window, navigate to the RTV_HOME/demos/features directory, and type: run_viewer -panelconfig:PANELS_treecon.ini. See “Initializing a Command Prompt or Terminal Window” for more information on initializing a command window.

There are two columns in the table that help define the navigation control structure:

§        One of the table columns contains a node ID string and is identified by the nodeIdColumnName property. By default, the node ID string is used as the node label in the navigation control. The node ID string must be unique among all nodes with the same parent. Or, if the uniqueNodeIdFlag property is checked, each node ID string must be unique in the entire navigation control.

§        Another table column contains the ID of the parent node, which is identified by the parentIdColumnName property.

To create the same navigation control as with our Row-Leaf format example, a table representation of the navigation control using the Row-Node format would be as follows:

The <blank> entries represent an empty string, which indicates that nodes app0 and app1 have no parent, making them top-level nodes in the navigation control.

We set the navigation control:

•        valueTable property to attach to the unindexed table

•        valueTableFormat property to the Row-Node format

•        nodeIdColumnName property to Node

•        parentIdColumnName property to Parent

We then have the following navigation control structure. There are two top-level nodes labeled App0 and App1. Node App0 has three child nodes labeled 1000, 1004, 1008. Node App1 has two child nodes, labeled 1001 and 1005.

To add another navigation control level for the AgentName, as we did with the Row-Leaf format example, we modify our table as follows:

We also uncheck the uniqueNodeIdFlag property to allow for node IDs that are not unique, such as the app0 and 1000 nodes in our example which are used in multiple navigation control levels. Because some of the rows are also identical, the order of the table rows is important. For example, this row appears twice in the table: 1000 app0. In each case the row comes after a unique parent row: first under app0 Agent1 and then under app0 Agent2. The navigation control uses this information to determine where to place the node for 1000 in each case.

The following figure illustrates the new structure of the navigation control. The navigation control now has two top-level nodes labeled Agent1 and Agent2, each with two child nodes, app0 and app1.

By default, the node ID string is used as the node label in the navigation control. If a different column in the table must provide the label, specify the name of that column in the nodeLabelColumnName property.

Note that in the Row-Node format each branch of the navigation control can have a different depth, while in the Row-Leaf format all branches typically have the same depth (the number of columns specified in the nodeIndexColumnNames property).

Return to “Tree Control”.

Return to “Accordion Control”.

Status Icons

Status icons indicate the current state of a node. You can optionally configure status icons by assigning images that are used when an element in the navigation control has a specified value. You can also configure the status in order of priority so that the most critical status is propagated up to ancestor nodes. The status icon shown for an ancestor node corresponds to the current highest status priority of all of its descendants. By default, no status icons appear in navigation controls.

The status icon for a node is determined by the discrete value of a specified column in the valueTable. The values can be strings or numbers. The comparison is done for an exact match. If the current status value for a navigation control node does not match any of the values you specify in the nodeStatusProperties property, no status icon is displayed for that node.

When a status icon is configured for the tree control, by default the status icon appears on the left of the node label. The value, Left or Right, is specified in the nodeStatusIconPos property. If a node has both a type icon and a status icon, the type icon always appears to the left of the status icon. By default, no status icons appear in the tree.

When a status icon is configured for the accordion control, by default the status icon appears inside the node button, either to the left or right of the button label, according to the value of the nodeStatusIconPos property.

Configuring Status Icons

This section describes how to configure status icons for the navigation controls using the Node Properties dialog.

Note: Status icons can also be configured by Attaching a Status Icon To Data (see below).

To configure the Status Icon

To configure the status icon, specify the status table column name in the nodeStatusColumnName property, then use the nodeStatusProperties property to define a three-column table of data and configure icon behavior.

Note: The nodeStatusProperties property is only visible if the nodeStatusColumnName property is non-blank.

Select the nodeStatusProperties property in the property sheet, then click the  button to open the Node Properties dialog.

To map an image to a node status

Click New, then click in the Status Value column. A drop-down list appears containing all values in the node status column of the valueTable (which you previously specified in the nodeStatusColumnName property). Select a value from the drop-down list.

Click the  button in the Image column for the node and choose an icon from the Select Image dialog. The icon is used as the status icon for all nodes that match the value selected in the Status column.

Click the  button in the Priority column for the node and assign a integer value: 0, 1, 2, 3, 4, 5, or a higher number (there is no upper limit on the number), where the largest number is the highest priority and propagated up the navigation control first, and a value of zero (0) is not propagated. A value of zero (0) can be assigned to multiple nodes (so that they do not propagate up the navigation control). Non-zero values must be assigned only once.

For example, if we set the nodeStatusColumnName property to our Application Status table column of our valueTable, and define the mapping for the nodeStatusProperties as follows:

Status Value	Image	Priority
blocked		2
running		1

The values in the Application Status column of each row in the valueTable is compared to the two values listed in the Status Value column (blocked and running). If the Application Status value in one of the rows is blocked, the  status icon is displayed as the status icon for that row. If there is no match (for example, the Application Status value in one of the rows is unknown), no status icon is displayed in the navigation control node for that row. Because the  status icon is assigned the highest priority, the  status icon is always propagated up the navigation control first. If none of the rows has a blocked status, the  status icon is propagated up the navigation control.

For example, in the following illustration the priority status of a single node, app3/1003, is propagated up to its parent, app3, and also to the top-level ancestor, Agent1.

For details about creating an application with multiple panels, see “Multiple Display Panels”.

Attaching a Status Icon To Data

For convenience, the status icon can be attached to data. Typically, an attachment to a static XML file containing the appropriate tables is used. To attach the status icon to data, use the nodeStatusProperties property. The data attachment must be a three-column table. Typically, a static XML file containing the table is used. The first column must contain string values that match values from the column in valueTable specified by the nodeStatusColumnName property. The second column must be the path to the .png, .gif, or .jpg image. The third column must contain the non-negative integer priority value.

Note: A static XML file is only read once each time you run RTView. If you specify (or modify) an XML source using the Application Options dialog, you may specify whether that XML source is static. For details, see “Creating XML Sources”.

navtree.xml For Navigation Control Objects

This section describes how to populate a navigation control object from an XML data source using the navtree.xml format. Using the navtree.xml format enables the XML data source to parse the navtree.xml content and convert it into a table in the row-node format, which is a format accepted by “Navigation Control Objects”. A navigation control--the tree control (class name: obj_c1tree) or the accordion control (class name: obj_c1accordion)--can then be used on an RTView display.

When the XML data source parses the navtree.xml file it creates a table and gives it the data key navtree. When you use the Builder Attach to XML Data dialog, enter navtree in the Data Key field. The table has one row for each node that is defined in the navtree.xml file. The table contains the following columns:

Typically, you attach the valueTable property of a navigation control object to the navtree table, and the navigation control object's valueTableFormat property is set to Row-Node. Subsequently, the column names listed above are specified as values for other properties on the navigation control as follows:

nodeIdColumnName = Node ID   

nodeLabelColumnName = Label   

parentIdColumnName = Parent ID   

uniqueNodeIdFlag = <checked>

valueColumnName = Display   

To see an example of an accordion control configured in this manner, use the Builder to examine the display named accordcon.rtv, located in the RTV_HOME/demos/features directory. The XML file used by the example is demos/features/navtree.xml. To see the working example, type the following commands in an RTView command prompt:

cd %RTV_HOME%\demos\features

run_viewer -panelconfig:PANELS_accordcon.ini

In addition to the columns mentioned above, the navtree table's Subs column can also be used to configure the drilldownColumnSubs property of a navigation control. In the “Drill Down Column Substitutions Dialog”, find the row for Column Name = Subs, and in the Substitution String column enter the string __parse (there are two underscores in the prefix), that is:

This tells RTView to parse the string found in the Subs column for the node selected in the navigation control, which is expected to contain one or more sub:value pairs, separated by spaces. For example, if the Subs column contains this string:

$sub1:abc $sub2:xyz

and if the navigation control's drilldownColumnSubs property is configured as described, a drilldown from the navigation control the $sub1 and $sub2 substitutions is assigned the values abc and xyz, respectively.

Tree Control

This section describes how to create a tree control (class name: obj_c1tree).

There are two methods for creating a tree-driven multi-panel application: the static tree navigation panel and the tree control. Use the static tree navigation panel method if you know the specific sources that are to populate the tree and they remain constant for the life of the application. For example, if you know all the displays that compose your application and the static representation of a tree will only be used for navigating those displays, the static tree navigation panel is suitable (and is easier to configure). To configure the static tree navigation panel, add the tree using the rtvTreePanel tag to the PANELS.ini file. For details about configuring the tree, see “Multiple Display Panels”.

Use the tree control method if the number of nodes or leaves, labels or icons of the tree change during the lifetime of the application. Data can be provided that will change the nodes and leaves of the tree and also change the labels, and icon representations on the tree with dynamic data.

When constructing an application with multiple panels using the tree control, one panel displays an RTView file that has instanced the tree control and the other contains the displays which are drilled down to by selecting items on the tree. The following illustrates a two-panel application in which the tree control in the left panel updates the display in the right panel:

To see an example of a multi-panel layout that uses a tree control to display live status information (based on alerts) and perform navigation via drill-down in another panel, see the “Navigation Control Demo”.

For details about creating an application with multiple panels, see “Multiple Display Panels”.

Creating a Tree Control

To create a tree control:

1.     Attach tabular data to the tree control valueTable property.

2.     Specify the table format for the tree in the valueTableFormat property. There are two table format options for navigation controls. The Row-Leaf format is intended for use when the valueTable property is attached to an indexed table and all leaves in the navigation control are at the same depth. Otherwise, the Row-Node format is used. See “Navigation Control Objects” for details.

3.     Optionally, configure type icons.

4.     Optionally, configure status icons.

Type Icons

Type icons indicate the type of node in the tree. The type icon for each node is determined either by the value of a column in the valueTable property, or by the node position in the tree. By default, the type icon appears to the left of the node label. Also by default, a folder image is used for all non-leaf nodes, and a document image is used for all leaf nodes. If a node has a type icon and a status icon, the type icon appears to the left of the status icon.

You can optionally   assign images for type icons. For example, if you have groups of elements based on geographic location, you could assign an icon for the country, state and city (for example, US, California, San Francisco). Or, if you have groups of elements based on their function, you could assign an icon for each function (Purchases, Operations, Sales, and so forth). You can also assign images for each depth in the tree for a visual indication of where you are while navigating within the tree.

Configuring Type Icons

This section describes how to configure status icons for the navigation controls using the Node Properties dialog.

Note: Status icons can also be configured by Attaching a Status Icon To Data.

Use the nodeTypeProperties property to define a two-column table of data. Select the nodeTypeProperties property in the property sheet, then click the  button to open the Node Properties dialog.

In the Node Properties dialog, the Node Depth or Type column lists the available nodes. The first two rows, non-leaf node and leaf node, indicate the default settings: non-leaf nodes in the tree use a folder image and leaf nodes use a document image. To change the default setting, click the  button in the Image column for the node and choose an icon from the Select Image dialog.

The next five rows, numbered 0 - 4, represent the node depth or level, zero (0) being the root node. The Image column lists the icons being used for each node. By default, the Image column for all of those rows is <blank>, indicating that the non-leaf node and leaf node icon assignments are used. Icon assignments override non-leaf node and leaf node assignments.

Mapping an Image to a Node Level

You can assign an image icon based on node level. The icon provides a visual indication of where you are while navigating in the tree. To assign an image to a specific node level in the tree, click the  button for one of the rows numbered 0 - 4 in the Image column and choose an icon from the Select Image dialog. Repeat for each node level.

Mapping an Image to a Node Type

You can assign an image icon based on node labels you create that describe the nodes as a group. For example, in the following illustration the Node Depth or Type column contains the string PRODUCTION with the  image selected, and the string DEVELOPMENT with the  image selected.

This means that all nodes whose label matches the PRODUCTION string display the  image in the tree, and all nodes whose label matches the DEVELOPMENT string display the  image in the tree.

To assign an image to a specific node type in the tree, assign a column name in the nodeTypeColumnName property. Select the nodeTypeProperties property in the property sheet, then click on the  button to open the Node Properties dialog. Click New to add a custom row to the table. A drop-down list of values for the column assigned to the nodeTypeColumnName property appears in the Node Depth or Type column. Select a column name from the drop-down list. Click the  button in the Image column and choose an icon (to use for all nodes that have that column name in the valueTable row that corresponds to the node) from the Select Image dialog.

You can also type a string in the Node Depth or Type column and the Image column.

To not use an icon, in the Node Properties dialog, select the icon in the Image column, then click Clear.

Note: The root node is invisible if the rootNodeLabel property is blank.

For details about type icon determination, see Logic for determining type icon (below).

For details about creating an application with multiple panels, see “Multiple Display Panels”.

Attaching an Icon To Data 

For convenience, the type icon can be attached to data. Typically, an attachment to a static XML file containing the appropriate tables is used. To attach the type icon to data, use the nodeTypeProperties property. The data attachment must be a two-column table. The first column must contain string values of _node (for non-leaf nodes), _leaf (for leaf nodes), numeric values for depth, or string values that match the node labels, or the values from the column in valueTable specified by the nodeTypeColumnName property. The second column must be the path to the .png, .gif, or .jpg image. The default assignments are _node, rtvTreeNode16.png and _leaf, rtvTreeLeaf16.png. The column names are not important.

Note: A static XML file is only read once each time you run RTView. If you specify (or modify) an XML source using the Application Options dialog, you may specify whether that XML source is static. For details, see “Creating XML Sources”.

Background Properties

Specify how the background is displayed in the tree control.

Data Properties 

Specify how data is displayed in the tree control.

Interaction Properties

Specify interactions in the tree control.   

Label Properties 

Specify the label in the tree control.

Node Properties 

Specify the node structure in the tree control.

Object Properties 

Specify the layout in the tree control.   

Unique Behavior

The following describes properties that behave uniquely with the tree control.

valueColumnName: This property specifies the name of the column whose value should be assigned to the $value variable when a node in the tree is clicked. If not specified, the label string of the selected node is assigned to $value. Note the $value is the only substitution that can be used in the Display Name field of a drill-down command.

mouseOverFlag: If this property is checked, a tooltip appears when the cursor is positioned over a leaf node. The tooltip shows the node path (the node label preceded by the labels of all of its ancestors), the node status (if the nodeStatusColumnName property is specified), and its value (if the valueColumnName property is specified).

execOnLeafOnlyFlag: If this property is checked, the tree actionCommand property executes only when a leaf node is clicked (a click on a non-leaf node expands only the node). If unchecked, the tree actionCommand property executes on all nodes, not just the leaf.

rootNodeLabel: This property specifies the tree root node (of which there is only one). By default, this property is blank and the root node is not visible.

Limitations 

§        In the Display Viewer, mouseover text is displayed only if the tree has focus.

§        If the valueTableFormat property for the tree control is Row-Leaf, the context menu feature applies to a right-click or a double-click on leaf nodes only. That is, a right-click on a non-leaf node does not add items to the menu and a double-click on a non-leaf node simply expands or collapses the tree node, it does not invoke the double-click action.

In the Thin Client: 

§        The tree node appearance, such as spacing and fonts, might vary slightly as compared to the Display Viewer, and also may vary slightly between different browsers.

§        A tree node cannot expand/collapse by double-clicking on it. The +/- icon must be clicked.

§        In Internet Explorer, nodes expand/collapse even if the tree enabledFlag property is unchecked. (However, the tree actionCommand cannot be invoked).

§        In Mozilla Firefox, the horizontal scrollbar might appear and disappear after each mouse click in the tree.

§        In iOS Safari (iPad), if the tree mouseOverFlag property is checked, a user must click a tree node twice to invoke the tree command. The first click only displays the node mouseover text.

§        In iOS Safari (iPad), scrollbars will not appear in a tree control. If the tree contains more nodes than are visible, use a two-finger drag gesture inside the tree area to scroll.

§        In iOS Safari, a click on the +/- icon expands/collapses the node as expected. However, if the execOnLeafOnlyFlag property is unchecked, the tree command is also executed.

§        In Internet Explorer, if you double-click directly on a leaf node the node is selected but the double-click action is NOT invoked. The double-click action is invoked only if you click on the empty space in the tree to the left or the right of the leaf node, or in the small hollow square located to the left of the leaf node.

Accordion Control

This section describes how to create an accordion control (class name: obj_c1accordion).

There are two methods for creating an accordion-driven multi-panel application: the static accordion navigation panel and the accordion control. Use the static accordion navigation panel method if you know the specific sources that are to populate the accordion and they remain constant for the life of the application. For example, if you know all the displays that compose your application and the static representation of an accordion will only be used for navigating those displays, the static accordion navigation panel is suitable (and is easier to configure). To configure the static accordion navigation panel, add the accordion using the rtvAccordionPanel tag to the PANELS.ini file. For details about configuring the accordion, see “Multiple Display Panels”.

Use the accordion control method if the number of nodes or leaves, labels or icons of the accordion change during the lifetime of the application. Data can be provided that will change the nodes and leaves of the accordion and also change the labels, and icon representations on the accordion with dynamic data.

When constructing an application with multiple panels using the accordion control, one panel displays an RTView file that has instanced the accordion control and the other contains the displays which are drilled down to by selecting items on the accordion. The following illustrates a two-panel application in which the accordion control in the left panel updates the display in the right panel:

To see an example of a multi-panel layout that uses an accordion control to display live status information and perform navigation via drill-down in another panel, see the “Navigation Control Demo”.

For details about creating an application with multiple panels, see “Multiple Display Panels”.

Creating an Accordion Control

To create an accordion control:

1.     Attach tabular data to the accordion control valueTable property.

2.     Specify the table format for the accordion in the valueTableFormat property. There are two table format options for navigation controls. The Row-Leaf format is intended for use when the valueTable property is attached to an indexed table and all leaves in the navigation control are at the same depth. Otherwise, the Row-Node format is used. See “Navigation Control Objects” for details.

3.     Optionally, configure accordion icons.

4.     Optionally, configure status icons.

Accordion Icons 

Nodes in an accordion control appear as pushbuttons and a single branch is expanded at a time. Accordion control icons indicate whether an element is closed, open, or a leaf node.

Each node in an accordion is either a parent node or a leaf node. A parent node has one or more child nodes that are visible when the node is expanded (opened) and are invisible when the node is collapsed (closed). When a parent node is expanded, a small down arrow icon is displayed near the left edge of the button. When a parent node is collapsed, a small right arrow icon is displayed.

A leaf node has no children and thus cannot be expanded or collapsed.

Configuring Accordion Icons 

The images used for these icons are specified by the accordionOpenImage and accordionClosedImage properties, respectively. Note that a leaf node never displays either of these icons.

The color of accordion node buttons that are not selected is specified by the accordionColor property, the color of the accordion node button that is selected is specified by the accordionSelectColor property, the text color for the accordion node that is selected is specified by the accordionSelectTextColor property and the width for each accordion button is specified by the accordionWidth property.

Background Properties

Specify how the background is displayed in the accordion control.

Data Properties 

Specify how data is displayed in the accordion control.

Interaction Properties

Specify interactions in the accordion control.

Label Properties

Specify the label in the accordion control.

Node Properties 

Specify the node structure in the accordion control.

Object Properties

Specify the layout in the accordion control.   

Unique Behavior

The following describes properties that behave uniquely with the accordion control.

valueColumnName: This property specifies the name of the column whose value should be assigned to the $value variable when a node in the accordion is clicked. If not specified, the label string of the selected node is assigned to $value. Note the $value is the only substitution that can be used in the Display Name field of a drill-down command.

mouseOverFlag: If this property is checked, a tooltip appears when the cursor is positioned over a leaf node. The tooltip shows the node path (the node label preceded by the labels of all of its ancestors), the node status (if the nodeStatusColumnName property is specified), and its value (if the valueColumnName property is specified).

execOnLeafOnlyFlag: If this property is checked, the accordion actionCommand property executes only when a leaf node is clicked (a click on a non-leaf node expands only the node). If unchecked, the accordion actionCommand property executes on all nodes, not just the leaf.

rootNodeLabel: This property specifies the accordion root node (of which there is only one). By default, this property is blank and the root node is not visible.

Limitations 

 In the Display Viewer, mouseover text is displayed only if the accordion has focus.

In the Thin Client: 

§        The accordion node appearance, such as spacing and fonts, might vary slightly as compared to the Display Viewer, and also may vary slightly between different browsers.

§        In iOS Safari (iPad), if the accordion mouseOverFlag property is checked, a user must click an accordion node twice to invoke the accordion command. The first click only displays the node mouseover text.

§        In iOS Safari (iPad), scrollbars will not appear in an accordion control. If the accordion contains more nodes than are visible, use a two-finger drag gesture inside the accordion area to scroll.

Extending the Context Menu

This section describes how to extend items in the RTView context menu. The context menu appears when you right-click on an object. The context menu can be extended for a table object (obj_table02), heatmap object (obj_heatmap), grid object (obj_objectgrid) or tree control (obj_c1tree). Configure the context menu if you want to click an element on a tabular object (for example, a row in a table, a cell in a heatmap or grid, or a node in a tree control) and then choose one of several possible actions from a menu. The context menu appears when you right-click on an object (illustrated in the following figure).

The extended context menu is not supported in the Thin Client in iOS Safari (iPad/iPhone).

To configure the context menu, you create a button for each of the possible actions (for example, an Ack button, an Unack button, and an Own button) and edit button control properties (menuItemIndex, menuItemGroup, and menuItemSubmenu). You also edit properties on the table, heatmap or grid object (menuItemGroup and rightClickActionFlag), which are referred to as the target object. The buttons in the menuItemGroup define the items that are added to the context menu, when the target object with the same menuItemGroup value on the same display is right-clicked. The context menu items are, effectively, shortcuts to the buttons. The buttons are not affected by the properties of the associated target object.

Context menu items can be organized into submenus. The target object can be configured to invoke the first associated menu item when the user double-clicks on the object.

Summary of Steps

1.     Verify that the following is your desired outcome: When a user selects an element on a tabular object (for example, a row in a table), several possible actions are available and the user can choose one to execute.

2.     Configure the target object to set drillDownColumnSubs as necessary to record the selected row. Typically, the rightClickActionFlag property is checked, too.

3.     Configure buttons on the display to perform each of the possible actions, using the drillDownColumnSubs set in step 2.

4.     Choose a name for the menuItemGroup property and specify that name on the target object and all of the buttons.

5.     Set the other menuItem* properties on each of the buttons as appropriate.

Example

To illustrate the how to configure the context menu, consider a display containing a table object.

Note: A heatmap object is configured similarly to a table object, and has the same behavior when a cell in the heatmap is right-clicked or double-clicked.

In our example, the table object shows the RTView AlertTable. A list of actions (Ack, Unack, and Own) are associated with each row in the table. The display also contains three buttons labeled Ack, Unack, and Own which execute different alert commands. A single left-click on a row could select the corresponding alert, or be followed by a click on the Ack (or Unack) button to acknowledge (or unacknowledge) the selected alert, or a click on the Own button could set the alert's owner to the current RTView username.

To configure the above described behavior, the table object's drillDownColumnSubs property is configured to set a substitution variable, $alertID, that is equal to the value of the ID column for the selected row. The table object's command property is configured to drill-down to the current display window. This simply means that each click on a row stores the ID of the selected alert in the $alertID substitution variable. Also, the actionCommand property of the Ack button is configured to execute an Acknowledge Alert on ID = $alertID. The actionCommand for the Unack and Own buttons is configured similarly. If necessary, the enabledFlag of each button is attached to a function that determines whether the button's action is appropriate for the current selection.

When an extended context menu is configured on the display:

•        In addition to clicking on the button to execute an action, each action can also be executed from an item in the RTView context menu (selecting an extended context menu item is equivalent to clicking on the corresponding button.).

•        By double-clicking on a row in a table (or a cell in a heatmap or grid), the object's drill-down can be executed or, if the object has no drill-down, the first action in the list can be executed.

The extra menu items appear at the top of the menu. One extra item appears in the menu for each button object (obj_c1button) on the display that meets these requirements:

•        The button's visFlag property is set to 1.

•        The button's menuItemIndex property has a nonzero value.

•        If the menuItemGroup property of the currently selected table or heatmap object is set, it matches the menuItemGroup property of the button.

If multiple buttons meet the requirements above, they also appear in the context menu, ordered by the menuItemIndex property in increasing order.

Continuing with our example, let us assume we want context menu items for the Ack, Unack, and Own actions to appear in the context menu when the alert table object is selected, and in that order. To accomplish this, the menuItemIndex property of the Ack, Unack, and Own buttons is set to 1, 2, and 3 respectively. Also, to ensure that the menu items only appear when the alert table object is selected, the menuItemGroup property of the table object and all three buttons is set to the same string, for example "alert_group".

The extra menu items are added to the context menu by increasing order of their menuItemIndex property values. That is, if button X has its menuItemIndex set to a value that is less than the menuItemIndex of button Y, the item for X is situated above (nearer the top of the menu) the item for Y. Note that menuItemIndex can be assigned a value less than or greater than 0 (zero), but a value of 0 (zero) means that no item is added to the menu for that button.

The final required configuration step is to check the rightClickActionFlag property on the table object. This accomplishes two things:

1.     Ensures that the substitutions for the right-clicked row are set before the menu is opened.

2.     Enables the following double-click behavior on a table row:

•        The table's command, if one is specified, is executed. Typically this sets substitutions on the current display for the selected row.

•        The table's drill-down is executed. If the table has no drilldownTarget, the first enabled button on the display with the same menuItemGroup value is activated.

To summarize, configuring the table and buttons as described in our example, the table object behaves as follows:

•        A single left-click or right-click on a row in the alert table executes the table's command, setting the $alertID substitution variable to the ID of the alert in that row.

•        A right-click on a row in the alert table opens the context menu, in which the Ack, Unack, and Own menu items appear below the Drill Down item. (These menu items are either enabled or disabled, according to the state of the corresponding button).

•        A double-left click on a row executes the Ack command on that row's alert, because the Ack button is the first button in the table's menuItemGroup property (it has the smallest menuItemIndex value in the group, 1 in this example).

Optionally, the extra menu items on the context menu can be organized into one or more submenus. This is done by assigning the same value to the menuItemSubmenu property of each button whose item is to appear in the same submenu. For example, to have the Ack, Unack, and Own menu items appear in a submenu (rather than the top-level context menu), we set the menuItemSubmenu property of the Ack, Unack, and Own buttons to (for example) "Alerts". This adds an item labeled "Alerts ->" to the top-level of the context menu, and selecting that item opens a cascading submenu with the Ack, Unack, and Own menu items.

If multiple submenus are defined, they are ordered by increasing value of the lowest menuItemIndex of the all the buttons in each submenu.

If a grid object is configured to use the context menu and the grid's cells contain a composite display, the behavior is as described above except when a user right-clicks or double-clicks an object in the composite display that has its own drillDownTarget or command property configured. In that case, the click is processed by the object inside the composite and not by the grid.

Limitations

The extended context menu is not supported in the Thin Client in iOS Safari (iPad/iPhone). All of the new properties (rightClickActionFlag, menuItemIndex, menuItemGroup, menuItemSubmenu) are ignored by the Thin Client on iOS Safari, therefore no menu items are added to the context menu and no double-click actions are supported. In particular, if a button is configured on the display so that it is off-screen but has a nonzero menuItemIndex, the button's command is not accessible on iOS Safari.

Extra menu items do not appear in the context menu in the main editing panel of the Builder. (They do appear in the Builder's preview window).

The double-click feature on the obj_table02, obj_heatmap, and obj_objectgrid objects does not work in any window in the Builder.

In the Thin Client, a double-click on a table, heatmap, or grid object that performs the first action in the menu group is sometimes ignored instead. This happens if the Display Server is slow to respond to the first click (which might enable the first button in the menu group), so the button is still disabled when the second click occurs. Its most likely to occur if the user double-clicks on several different cells in quick succession.

Fx Graphs

The Fx Graphs tab of Object Palette features Adobe® Flash graphs designed specifically for use in a Thin Client deployment. There are three Fx graphs available: Trend, Bar and Pie. Due to the fact that these objects use Adobe® Flash, they have additional requirements and limitations.

To enable developers to build displays using Flex objects without having to allow for deployment situations where Flex is unacceptable, it is possible to replace Fx graphs with corresponding standard graphs.

Note: In the Thin Client, Fx graphs are acceptable in any supported browser that has the Flash Player installed. If a display containing an Fx graph is loaded into the Thin Client and the Flash Player is not installed, a link to the Flash Player download page will appear.

Fx graphs are automatically replaced with standard graphs if:

§        A PDF file is generated from a display (.rtv) file using the Export menu or the RTView reporting tool. (Fx graphs do not support PDF generation.) Fx graphs are replaced and then restored to the display after the PDF file is generated.

§        The Flash player (or wrapper) is unavailable when a display (.rtv) file is opened in the:

–      Display Viewer Application 

–      Display Builder Preview Window: Fx graphs are only automatically replaced in the Preview window of the Display Builder in order to avoid inadvertently saving a file with replacement graphs.

–      Display Viewer Applet: In order to replace unsupported Fx graphs with standard graphs, the applet's ARCHIVE parameter must include gmsjflash.jar.

To replace Fx graphs with standard graphs in all display (.rtv) files opened in the in the Display Builder, Display Viewer Application or Display Server, set the fxreplace option via the command line or in your OPTIONS.ini file.

Note: Once Fx graphs have been replaced, a file saved in the Display Builder will be saved with replacement (i.e. standard) graphs.

“Fx Trend Graph” The Fx trend graph (obj_fxtrend) is generally used for tracing two types of data in one graph: real-time (i.e. live data) and archived data. Displaying these two types of traces in conjunction is useful for comparing data trends.
“Fx Bar Graph” The Fx bar graph (class name: obj_fxbar) is useful for comparing columns or rows of numeric data from a tabular data element returned by your data attachment.
“Fx Pie Graph” The Fx pie graph (class name: obj_fxpie) is useful for comparing values from a single column or a single row of the tabular data element returned by your data attachment.

Requirements and Limitations

Requirements

§        The Fx graphs require version 9.0 or newer of the Adobe® Flash Player.

§        In the Thin Client, the Fx graphs are supported in any supported browser that has the Flash Player installed. If a display containing an Fx graph is loaded into the Thin Client and the Flash Player is not installed, a link to the Flash Player download page will appear on the display.

§        In the Display Viewer Applet, the ARCHIVE parameter must include gmsjflash.jar in order to replace unsupported Fx graphs with standard graphs.

Limitations

§        In the Display Builder and Display Viewer Application, Fx graphs are supported on Windows platforms only. In the Display Builder, the Fx Graphs tab will still be visible.

§        Fx graphs are not supported in the Display Viewer Applet on any platform.

§        Fx graphs can be resource intensive during display loading and updating. This should be kept in mind when designing displays. A display containing several Fx graphs may load slowly.

§        The Fx graphs are drawn inside a Flash Player window. This means that Fx graphs will be drawn above all other objects in a display, except other Fx objects, regardless of the object order. The Move to Front and Move to Back operations have no effect on Fx graphs. Also, in the Display Builder, if an Fx graph extends beyond the edges of the display, it will obscure other panels in the Display Builder, such as the object palette, property sheet, etc. When zooming or scrolling in the Display Builder or Display Viewer, Fx graphs will obscure any portion of the vertical and horizontal scrollbars that they overlap.

§        In the Thin Client, if the context menu is opened near an Fx graph, the menu will be partially hidden by the Fx object. Also, a right-click inside an Fx graph will open the Flash Player menu, not the Thin Client's context menu.

§        When moving an Fx graph in the Display Builder, it is best to grab and drag the object by one of its edges, just inside the selection highlight rectangle. The graph can't be dragged from within the plot area, since that will initiate a zoom. It can be dragged by other interior areas, but it may not move smoothly.

§        Fx graphs store RGB values for all colors, this causes two problems:

–       If you assign a custom color to a Fx graph and then change the custom color definition, the Fx graph will not update since it stored the RGB value of the custom color instead of the Color Index number. The only way to update it is to manually pick a new color in the Display Builder. See “Custom Colors Tab” for more information.

–       If you apply a custom color to the Fx graph with the same RGB value as a standard color, when you close and re-open the standard color will be selected not the custom color. Because Fx graphs store RGB values, the corresponding color in the standard palette will be selected first.

§        Replacement (i.e. standard) graphs do not exactly match the Fx graphs in appearance. There are minor differences in colors, gradients, fonts for legends/axis labels, tick marks, axis line style/thickness, spacing/placement of graph components, etc.

§        The following object properties of the Fx Trend Graph (obj_fxtrend) are not available in the standard Trend Graph (obj_trendgraph02): legendPosition, logAxisFlag, alarmGlow, traceNShadowFlag. Therefore, the replacement will always have a linear y-axis and its legend, if visible, will be on the right.

§        Interactive changes made to an Fx graph's scrollbar knob position, legend size, or time range are not applied to the replacement.

§        Current data applied to an Fx trend graph is not re-applied to the replacement. So, the trace data, legend position, scrollbar position, and time range will appear as though the display was opened.

§        The Fx pie graph (obj_fxpie) appears as a circle, the replacement (obj_pie) is drawn as an ellipse that fills the available rectangular area.

§        Custom Fx graphs cannot replaced by a standard graph.

Fx Trend Graph

The Fx trend graph (obj_fxtrend) is generally used for tracing two types of data in one graph: real-time (i.e. live data) and archived data. Displaying these two types of traces in conjunction is useful for comparing data trends. The Fx trend graph supports up to eight traces, set the traceCount to control the number of traces.

Using Trace* Properties 

The Display Builder automatically creates a set of trace* properties according to the number you specify using the traceCount object property. Attach your data to trace*Value or trace*ValueTable, where * is the trace number. For example if you set the traceCount to three (3), you will have three traces in your graph (Trace01, Trace02 and Trace03) and a corresponding trace*Value (trace1Value, trace2Value and trace3Value) for each.   

All traces in the Fx trend graph have the option to display historical or current data:

Historical Data

To display historical data, attach to trace*ValueTable, where * is the trace number, and include two columns in your attachment. The first column must be the time value and the second column the value to plot.

Optionally, include a third (string) column in your attachment if you want to display a data label for each corresponding data value. See the Attach to Data section specific to your data source for details on how to use the Select Columns dialog.

Current Data

To display current data, attach to trace*Value, where * is the trace number. When you attach data to the trace*Value property, the time displayed on the Fx trend graph is automatically updated each time data is received. Your data attachment can contain either a single point of data or two columns of data. See the Attach to Data section specific to your data source for details on how to use the Select Columns dialog.

If your attachment contains a single point of data, RTView assigns a time stamp when the graph receives the data.

If your attachment contains two columns of data, the first column must be the time value and the second column the value to plot. Optionally, include a third (string) column in your attachment if you want to display a data label for each corresponding data value.

Supported formats for the time value column are: mm/dd/yyyy hh:mm:ss (e.g., 01/16/2004 12:30:03), yyyy-mm-dd hh:mm:ss (e.g., 2004-01-16 12:30:03), and the number of milliseconds since midnight, January 1, 1970 UTC. In order to view all available data, you must set the properties timeRange to -1 and timeShift to a negative value. This negative value will be used to round the start and end times for the y-axis. For example, if you specify -15 for the timeShift property, the start and end times for the y-axis will be rounded to the nearest 15 seconds.

Data labels will be displayed (enclosed in parentheses) in the fixed legend and in the popup legend, between the trace value and the trace label. If the cursorFlag property is selected, then the data label in the popup legend is for the data value that is directly under or to the left of the cursor.   

Alert Properties 

To set trace marker colors and styles based on a threshold value, select the corresponding value alarm or value warning flags.

Background Properties 

Specify how the background is displayed in your graph.

Data Properties 

Specify how data is displayed in your graph.

Data Format Properties

Interaction Properties

Specify how you interact with the data in your graph. See the “Thin Client Deployment - Additional Interactivity” section for more information on how to interact with this graph at runtime.

Label Properties

Legend Properties 

Specify the way the legend is displayed in your graph. Click and press a trace's entry in the legend to temporarily hide all other traces in the graph.

Marker Properties 

Specify the way markers are displayed in your trend graph.

Object Properties

Plot Area Properties 

Specify the way the plot area is displayed in your graph.

Trace Groups

Specify trace groups displayed in your trend graph. The Display Builder automatically creates a set of traceGroup* properties (where * is the trace group number) according to the number of trace groups specified in the traceGroupCount property. A trace group is a collection of two or more traces. Trace groups are useful for identifying multiple traces sharing the same vertical axis (when yAxisMultiRangeMode is set to Strip Chart or Multi-Axis) or for identifying three traces combined as a banded trace.

Trace Properties 

Specify how traces are displayed in your graph.

Trace* Properties

The Display Builder automatically creates a set of trace* properties (where * is the trace number) according to the number of traces specified in the traceCount property. Attach your data to trace*Value or trace*ValueTable, see the Using Trace* Properties section for details.

Web Chart Properties

X-Axis Properties

Specify the way the x-axis is displayed in your graph.

Y-Axis Properties 

Specify the way the y axis is displayed in your graph.

Fx Graph Colors

Color properties are treated differently on Fx graphs than on other objects. In the Display Builder, the Fx graphs color chooser dialog has five tabs:

Standard Colors - Traditional palette of 252 indexed colors

Custom Colors - To define custom colors, select Tools>Options and click on the Custom Colors tab.

Swatches - Standard Java color palette

HSB - Color selection by hue, saturation, and brightness

RGB - Color selection by red, green, and blue intensity

The color chooser also has a button for selecting a properties Default color, which is described separately for each color property above.

Internally, all color properties on Fx graphs are stored as a 24-bit integer RGB value in the range of zero (black) to 16,777,215 (white). Therefore if a color property on an Fx graph is attached to data, you must provide an integer value in that range (not a color index between 0 and 252 as with other objects). A value of -1 indicates the default property color.

Note that the Default color and colors selected from the Swatches, HSB, and RGB tabs are only supported on Fx graphs. If a color is selected from one of those tabs and then copied and pasted to a color property on any other object, white will be used instead.

Thin Client Deployment - Additional Interactivity

The following additional interactivity is supported in a Thin Client deployment:

Zoom

§        Zoom-in by dragging in trace area, zoom-out by Shift+Click.

Note: Zooming out is not enabled in the main window of the Display Builder.

Scrolling

§        Live scrolling through time range

Cursor

§        Slide horizontally to see interpolated data values in legend

Data Tips

§        Text boxes with data info popup when the mouse is over a data point.

Legend

§        Position above, below, right, or left of trace area

§        Resize interactively

§        Click on trace entry in the legend to toggle the visibility of that trace in the display.

Fx Bar Graph

Bar graphs are useful for comparing columns or rows of numeric data from a tabular data element returned by your data attachment. The Fx bar graph (class name: obj_fxbar) has many features that standard bar graphs do not, such as:

§        Data tips that display detailed information about associated column data

§        Graph background with alternating row colors and a configurable grid color

§        Multi-position legend that can be resized interactively

Using Data Properties 

To attach data to your graph, right-click in the Property Value field of the valueTable property. It is possible to graph multiple columns or rows of numeric data. If you include a label column in your data attachment for valueTable, it can be used to label either the x-axis or the legend, depending on whether the rowSeriesFlag is selected or deselected.   

The rowSeriesFlag controls how row and column data populate the graph:

If the rowSeriesFlag check box is selected, one group of bars will be shown for each numeric column in your data attachment. Within the group for each numeric column, there will be a bar for each row in that column. Column names will be used for the x-axis labels.

If the rowSeriesFlag check box is not selected, one group of bars will be shown for each row in your data attachment. Within the group for each row, there will be a bar for each column in that row. Column names will appear in the legend.

Using Interaction Properties

Commands

To assign a command to your graph, right-click in the Property Value field of the command property and select Define Command. Commands can be set up to execute when you click on an object or automatically execute the command when the value of an object reaches a specified threshold. See “Define/Execute Command” for information on how to set up commands.

Drill Down Displays

To specify a drill down display, double click on the drillDownTarget property. Any display (.rtv) file can be targeted as a drill down. Based on your data attachment, substitutions are created that will be passed into drill down displays. To customize which substitutions will be passed into drill down displays, double-click on drillDownColumnSubs in the Object Properties window to open the “Drill Down Column Substitutions Dialog”. Once a drill down target has been set, double-click on the bar or trace marker in the graph to activate the drill down. Drill down displays can be activated in the same window that contains the graph or open in a separate window. This allows you to build a customizable hierarchy of displays.

Use drillDownSelectMode to control how a drill down display is activated. Set to Anywhere to activate a drill down display by double-clicking anywhere on the graph. Set to Element Only to enable a drill down display only when you double-click on a bar in the graph. See “Drill Down Displays” and “Drill Down Substitutions” for more information.

Tool Tips

Select the mouseOverFlag to enable tool tips for your bar graph. To display a tool tip, select the graph and point to a bar with your mouse. The tool tip will contain information from your data attachment about that bar.

Alert Properties 

To set bar colors based on a threshold value, select the corresponding value alarm or value warning flags.

Background Properties 

Specify how the background is displayed in your bar graph.

Bar Properties 

Specify the way the bars are displayed in your graph.

Data Properties 

Data Format Properties 

Specify the data format for your bar graph.

Data Label Properties 

Historian Properties 

Interaction Properties

Specify how you interact with the data in your graph. See the “Thin Client Deployment - Additional Interactivity” section for more information on how to interact with this graph at runtime.

Label Properties

Layout Properties 

Specify how the background is displayed in your bar graph.

Legend Properties 

Specify the way the legend is displayed in your bar graph.

Object Properties

Plot Area Properties 

Transition Properties 

X-Axis Properties 

Specify how the x-axis is displayed in your bar graph.

Y-Axis Properties 

Specify how the y-axis is displayed in your bar graph.

Fx Graph Colors

Color properties are treated differently on Fx graphs than on other objects. In the Display Builder, the Fx graphs color chooser dialog has five tabs:

Standard Colors - Traditional palette of 252 indexed colors

Custom Colors - To define custom colors, select Tools>Options and click on the Custom Colors tab.

Swatches - Standard Java color palette

HSB - Color selection by hue, saturation, and brightness

RGB - Color selection by red, green, and blue intensity

The color chooser also has a button for selecting a properties Default color, which is described separately for each color property above.

Internally, all color properties on Fx graphs are stored as a 24-bit integer RGB value in the range of zero (black) to 16,777,215 (white). Therefore if a color property on an Fx graph is attached to data, you must provide an integer value in that range (not a color index between 0 and 252 as with other objects). A value of -1 indicates the default property color.

Note that the Default color and colors selected from the Swatches, HSB, and RGB tabs are only supported on Fx graphs. If a color is selected from one of those tabs and then copied and pasted to a color property on any other object, white will be used instead.

Thin Client Deployment - Additional Interactivity

The following additional interactivity is supported in a Thin Client deployment:

Data Tips

§        Text boxes with data info popup when the mouse is over a data point.

Legend

§        Position above, below, right, or left of trace area

§        Resize interactively

Bar Properties Window

In the Object Properties window, double-click on barProperties in the Property Name field to display the Bar Properties dialog. In the Bar Properties dialog you can assign a Color and Fill Pattern to each bar in the graph.

Note: Before assigning attributes to bars in your bar graph, it is recommended that you first attach the graph to data.

The following describes the Bar Properties dialog commands:

Fx Pie Graph

The pie graph (class name: obj_fxpie) is useful for comparing values from a single column or a single row of the tabular data element returned by your data attachment.

Using Data and Data Label Properties 

Attach your data to the valueTable property. If you include a label column in your data attachment for valueTable, it can be used to label the legend if the rowSeriesFlag is selected. The rowSeriesFlag controls whether row or column data populates the graph:

When the rowSeriesFlag check box is not selected, the first numeric column from your data attachment will be used to populate the wedges in the pie. Each wedge will correspond to a row in that column and will display that row's relative value. If your data attachment has a label column, data from that column will be used in the legend.

If the rowSeriesFlag check box is selected, the first numeric row from your data attachment will be used to populate the wedges in the pie. Each wedge will correspond to a column in that row and will display that column's relative value. Column names will be used in the legend.

If your data attachment has no label column, select rowNameVisFlag to use row names in the legend when the rowSeriesFlag is not selected. By default, the label column is the first non-numeric text column in your data. Specify a column name in the labelColumnName property to set the label column to a specific column.

Using Interaction Properties

Commands

To assign a command to your graph, right-click in the Property Value field of the command property and select Define Command. Commands can be set up to execute when you click on an object or automatically execute the command when the value of an object reaches a specified threshold. See “Define/Execute Command” for information on how to set up commands.

Drill Down Displays

To specify a drill down display, double click on the drillDownTarget Property Name. Any display (.rtv) file can be targeted as a drill down. Based on your data attachment, substitutions are created that will be passed into drill down displays. To customize which substitutions will be passed into drill down displays, double-click on drillDownColumnSubs in the Object Properties window to open the “Drill Down Column Substitutions Dialog”. Once a drill down target has been set, double-click on the pie wedge to activate the drill down. Drill down displays can be activated in the same window that contains the graph or open in a separate window. This allows you to build a customizable hierarchy of displays.

Use drillDownSelectMode to control how a drill down display is activated. Set to Anywhere to activate a drill down display by double-clicking anywhere on the graph. Set to Element Only to enable a drill down display only when you double-click on a wedge in the pie graph. See “Substitutions” and “Drill Down Substitutions” for more information.

Tool Tips

Select the mouseOverFlag to enable tool tips for your pie graph. To display a tool tip, select the graph and point to a pie wedge with your mouse. The tool tip will contain information from your data attachment about that pie wedge.

Background Properties 

Specify how the background is displayed in your pie graph.

Data Properties 

Data Format Properties 

Specify the format to display values in your pie graph.

Data Label Properties 

Historian Properties 

Interaction Properties 

Label Properties

Legend Properties 

Specify the way the legend is displayed in your pie graph.

Object Properties 

Transition Properties 

Wedge Properties

Specify the way wedges are displayed in your pie graph. Click on any wedge to explode that wedge. Click on the exploded wedge again to collapse it.

Fx Graph Colors

Color properties are treated differently on Fx graphs than on other objects. In the Display Builder, the Fx graphs color chooser dialog has five tabs:

Standard Colors - Traditional palette of 252 indexed colors

Custom Colors - To define custom colors, select Tools>Options and click on the Custom Colors tab.

Swatches - Standard Java color palette

HSB - Color selection by hue, saturation, and brightness

RGB - Color selection by red, green, and blue intensity

The color chooser also has a button for selecting a properties Default color, which is described separately for each color property above.

Internally, all color properties on Fx graphs are stored as a 24-bit integer RGB value in the range of zero (black) to 16,777,215 (white). Therefore if a color property on an Fx graph is attached to data, you must provide an integer value in that range (not a color index between 0 and 252 as with other objects). A value of -1 indicates the default property color.

Note that the Default color and colors selected from the Swatches, HSB, and RGB tabs are only supported on Fx graphs. If a color is selected from one of those tabs and then copied and pasted to a color property on any other object, white will be used instead.

Thin Client Deployment - Additional Interactivity

The following additional interactivity is supported in a Thin Client deployment:

Wedge Selection

§        Click on a wedge to highlight by isolating it from the rest of the pie.

Data Tips

§        Text boxes with data info popup when the mouse is over a data point.

Legend

§        Position above, below, right, or left of trace area.

§        Resize interactively.

Column Display Names 

In many objects that display tabular data, it is possible to change the name that is displayed for a column in your data. In the Object Properties window, double-click on columnDisplayNames in the Property Name field to bring up the Column Display Name Properties dialog.

Graph Objects

The Object Palette features several types of graph objects -- trend, bar, pie, radar, and XY graphs-- that are useful for comparing data. Trend graphs are used to display a single variable per trace over time. Bar, pie, radar, and XY graphs are designed to display information returned by a tabular element in your data attachment. Based on your data attachment, substitutions are created that will be passed into drill down displays. See “Drill Down Substitutions” for more information.

Note: Some graph objects (e.g.: the bar graph legend, pie wedges and legend) cache their colors and therefore do not update when a custom color definition changes (see “Custom Colors Tab” for more information). You will need to either to restart RTView or reload the display to see the color change for these objects.

“Trend Graphs”  Trend graphs (class name: obj_trendgraph02) are useful for plotting a single value per trace over time and for displaying historical data stored by the “Historian”.
“Bar Graphs” Bar graphs (class name: obj_bargraph) are useful for comparing columns or rows of numeric data from a tabular data element returned by your data attachment.
“Pie Graphs” Pie graphs (class name: obj_pie) are useful for comparing values from a single column or a single row of the tabular data element returned by your data attachment.
“Radar Graphs” Radar graphs (class name: obj_radar) are useful for comparing columns or rows of numeric data from a tabular data element returned by your data attachment.
“XY Graphs” XY graphs (class name: obj_xygraph) are useful for comparing pairs of values from a tabular data element returned by your data attachment.
“Stock Chart” Stock charts (class name: obj_stockchart) are useful for displaying live and archived stock data.
“Legend” This object (class name: obj_legend) is useful for displaying a legend that is too lengthy for the built-in legends of the graph objects. The legend is easily resizable and can be used in conjunction with any object on the Graphs tab, excluding the Heatmap.
“Heat Maps” Heatmaps (class name: obj_heatmap) display indexed hierarchical data as a set of nested rectangles. A rectangle exists for each index and, when attached to data, each is filled with smaller rectangles representing sub-indexes, known as nodes.
“Sparkline” Sparkline graphs (class name: obj_sparkline) are generally used to present trends and variations in a simple and condensed way.
“Status History” Status History charts (class name: obj_statushistory) show discrete status values as horizontal bars drawn against a horizontal time axis. A label appears at the right edge of each bar along with a circular indicator displaying that bar's most recent status.
“Map Object” The map object (class name: obj_gmap) is useful for showing a Google map with dynamically populated objects, navigation and drilldowns for the Thin Client.

Trend Graphs

Trend graphs (class name: obj_trendgraph02) are generally used for tracing two types of data in one trend graph: real-time, or live data, and archived data. Displaying these two types of traces in conjunction is useful for comparing data trends. The trend graph supports up to ten traces, set the traceCount to control the number of traces.

Using Trace* Properties - Trend Graphs

The Display Builder automatically creates a set of trace* properties according to the number you specify using the traceCount object property. Attach your data to trace*Value or trace*ValueTable, where * is the trace number. For example if you set the traceCount to three (3), you will have three traces in your graph (Trace01, Trace02 and Trace03) and a corresponding trace*Value (trace1Value, trace2Value and trace3Value) for each.   

All traces in the trend graph have the option to display historical and/or current data:

Supported formats for the time value column are: mm/dd/yyyy hh:mm:ss (e.g., 01/16/2004 12:30:03), yyyy-mm-dd hh:mm:ss (e.g., 2004-01-16 12:30:03), and the number of milliseconds since midnight, January 1, 1970 UTC. In order to view all available data, you must set the properties timeRange to -1 and timeShift to a negative value. This negative value will be used to round the start and end times for the y-axis. For example, if you specify -15 for the timeShift property, the start and end times for the y-axis will be rounded to the nearest 15 seconds.

Data labels will be displayed (enclosed in parentheses) in the fixed legend and in the popup legend, between the trace value and the trace label. If the cursorFlag property is selected, then the data label in the popup legend is for the data value that is directly under or to the left of the cursor.

Alert Properties 

To set trace marker colors and styles based on a threshold value, select the corresponding value alarm or value warning flags.