Style rules
Describes the features related to the definition of style rules.
Presents the content of the Style Rules pane
Lists the options available in the Style Rules pane of the Designer window.
Describes what a data rule (node or link) consists of.
Describes the three levels of detail that you can use to display a diagram.
Lists the interface elements of the Styling Customizer pane and their purpose.
Describes the Styling Properties pane of the Designer which lists the properties associated with the nodes and links of a diagram.
Explains the order of priority in which style rules apply.
Provides hints to understand why a change might not be applied.
Explains that you can revert to the default values of properties.
Style Rules pane
The Style Rules pane displays the options for styling your diagram as a whole and data rules for styling the application data. When you save a diagram as a project, the style rules (options and data rules) are saved in a style sheet (
.css file) with the
CSS for Java syntax. For details of the syntax, see
Using CSS syntax in the style sheet in
Developing with the JViews Diagrammer SDK.
Options
The Options section of the Style Rules pane allows you to enable or disable various facilities at the level of the diagram as a whole. Each diagram you work on has its own style sheet and therefore its own options.
There are options for the following aspects of the diagram:
Background
The Background option allows you to display a color, a pattern, or a graphic in the background of your diagram.
Background Map
The Background Map option allows you to add a background map and to position objects in a georeferenced way (with latitude and longitude). For an example, see
Using background maps. For full details of map styling, see
The Map renderer in
Developing with the JViews Diagrammer SDK.
Blinking
The Blinking option allows you to add blinking to the symbols that make use of this feature. You can define the blinking period. For full details of blinking styling, see
The Blinking renderer in
Developing with the JViews Diagrammer SDK.
Graph Layout
The Graph Layout option handles the relative positioning of the data objects in the diagram. See also
Graph and link layouts. For an example, see
Using the Graph Layout Wizard. For full details of graph layout styling, see The GraphLayout renderer in
Developing with the JViews Diagrammer SDK.
Info Balloons
Info Balloons are text elements attached to a node or link but displayed only when the object is clicked. For full details of Info Balloon styling, see
The InfoBalloon renderer in
Developing with the JViews Diagrammer SDK.
Legend
The Legend option activates an optional legend displayed by default at the lower left of the diagram. The legend provides an explanatory function and a filtering function. For an example, see
Adding and customizing a legend. For full details of legend styling, see
The Legend renderer in
Developing with the JViews Diagrammer SDK.
Label Layout
The Label Layout option allows you to place the labels of the nodes and links so that they do not overlap with the nodes and links.
Link Layout
The Link Layout option handles the positioning of links to avoid them overlapping with one another or with nodes. For full details of link layout styling, see The LinkLayout renderer in Developing with the JViews Diagrammer SDK.
Subgraphs
The Subgraphs option allows you to expand a node by clicking the handle in the corner to display subnodes within it. This option is compatible with XML data only. For full details of subgraph styling, see
The SubGraph renderer in
Developing with the JViews Diagrammer SDK.
Zoom Thresholds
Zoom thresholds prevent the node size from becoming too small or too large when you zoom. They are generally most useful when you have a background map because the map size and the node sizes may be very different.
There is a Styling Customizer for each of these facilities to set the styling properties. The Styling Customizer appears in the lower pane of the Designer when you select the option in the Style rules pane.
Node and link rules
A node or link rule (data rule) consists of an object type and attribute conditions followed by
declarations.
A data rule is defined on a group of
data model objects belonging to the same class, or having a common ascendant class, or belonging to the same user-defined type. It is applied to the graphic objects used to visualize the data model objects in the diagram.
In the Designer, you see the data rules (node and link) in the upper left pane, titled Style Rules, following the Options. This pane shows a hierarchical view of the rules depending on how specific they are.
In the Designer, you see the declarations in terms of property values in the Styling Customizer or the optional list of Styling Properties.
Level of detail
The style rules allow you to define three different levels of detail for displaying the nodes and links in a diagram: high (default), medium, low.
For example, you could define the following information to be displayed for each detail level:
High level: the nodes have a fill and a label
Medium level: the nodes have no fill but they have a label
Low level: the nodes have no fill and no label
A low level of detail allows you to speed the rendering of the diagram.
Once these levels have been defined through the Create Style Rule Wizard and parameterized through the Styling Customizer, you can switch between them in two different ways:
By selecting a different level of detail rule in the Style Rules pane
By choosing a different level of detail in the
View>Level of detail submenu.
Only rules that match the selected level of detail contribute to the customization of the diagram.
A rule that does not define any level of detail matches all levels of detail.
The level of detail can also be specified through the API with the
setDetailLevel method.
Styling customizers
The Styling Customizer is a user-friendly way to see properties and their values, subdivided into categories by different tabs and with explanatory names. You use a Styling Customizer to customize an option or a set of graphic objects by setting property values. The Styling Customizer for the current rule selection is displayed in the lower pane of the Designer.
For each property, the Styling Customizer displays one of the following according to the type of value concerned:
A check box to select or clear
A list of the valid values or items for you to choose from
A step scale for numerical values
A text field for you to enter text
Buttons for you to add or remove values or lines of text
An Ellipsis button to browse in order to select a file name or font
A choice of the following systems for color settings:
JViews color disk
RGBA (Red, Green, Blue, Alpha)
HSB (Hue, Saturation, Brilliance)
Swatches
Styling properties
The Styling Properties list gives a view of properties that is closer to the API; it comprises a single exhaustive list and shows the API (short) names. To open the Styling Properties pane, choose View>Styling Properties.
The list shows the locally set properties (those set in the selected rule), in alphabetical order, followed by the inherited properties (those set in previous rules), in alphabetical order. The status icons next to each property show which property values are local and which are inherited:
Arrow up : value set in a previous rule
Arrow right : value set in the selected rule
Clicking the arrow icon toggles the status.
Warning If you change the status to Inherited from a previous rule, you will lose the value set by the selected rule.
Priority
The principles of inheritance and overriding apply to style rules. This allows you to write default rules for all model objects of a certain type and then to refine the customization with more specific rules that apply to subsets of these model objects.
The priority of a style rule depends on how specific it is and on the order with respect to other style rules of the same specificity. In general, a rule with more components in its
selector has a higher priority because it is more specific. Note that a more specific rule sets property values for some model objects but not for others. When the specificity of two rules is the same, the lowest rule in the tree has priority.
Different rules apply to different groups of objects, but several rules can apply to the same object. If the same property is set on one object in several rules, only the setting in the rule with the highest priority is retained; this rule overrides all the previous ones.
To style a model object, the Designer sorts all rules that match it in priority order, and then applies the settings they contain to the graphic object representing the model object.
Style sheet debugging
If you change a property in a Styling Customizer, and you do not immediately see the effect of the change, this is probably because the selected rule has been overridden by a later rule. You can look at the other rules at the same level in the tree to see if the same property is set in one of these rules.
Resetting of default property values
A graphic object can have default values for its properties, which can be set at creation time.
In a style sheet, some property values may be inherited at all levels and therefore come from the graphic object’s default values. If you change such a property value in a style rule to reflect a temporary state (such as selection), when the temporary state no longer applies (the object is deselected), the property value does not automatically revert to the default value. This situation arises because there is no style rule to set the default value. You therefore need to include this setting explicitly in the general rule for the node or link. For an example, see
Resetting a default value after a state change.
If you do not change such a property value according to a temporary state in a style rule, you can leave the implicit default value and not worry about it.
Copyright © 2018, Rogue Wave Software, Inc. All Rights Reserved.