Customizing the diagram dynamically

Style Rules change the aspect of a node or link when one of the data properties attains a specific value. In Linking predefined interactors to parameters, you connected the state of a button to the @status data property.

To add dynamic customization to a diagram using the Designer, you will use a style rule to change the aspect of a node as the @status property changes, that is, when a user clicks a node:

Open the diagram you created in Linking predefined interactors to parameters.
Right-click node in the Style Rules pane and click Create Style Rule in the pop-up menu.

Create Style Rule command

The Create Style Rule Wizard appears.
In the Create Style Rule Wizard, click Next.
In the Style Rule tab, set the following condition:

status does not equal BUTTON_DOWN

Creating a new style rule
Click Finish.
Click Assign Symbol in the Styling Customizer.

The Assign Symbol dialog opens.
Select the Rectangular symbol.

Assigning the rectangular symbol to the style rule
Click Apply.
Select the status does not equal BUTTON_DOWN rule in the Style Rules pane.
Set the value of the push_state field in the Styling Customizer to @status for this rule.

You have created a style rule that ensures the normal node symbol is displayed when a node is not being pressed. To verify that this rule has been correctly applied, validate the CSS.

To validate the CSS:

Right-click the status does not equal BUTTON_DOWN rule and select View in the pop-up menu.

The View as CSS dialog appears.

Viewing the CSS of a style rule
When you have validated the CSS rule, click OK.

To display a different symbol when a node is pressed down:

Right-click node in the Style Rules pane and select Create Style Rule in the pop-up menu.

The Create Style Rule Wizard appears.
Click Next.
In the Style Rule tab, select status equals BUTTON_DOWN.
Click Finish.
Select the status equals BUTTON_DOWN rule in the Style Rules pane.
Click the Assign symbol button in the Styling Customizer.

The Assign Symbol dialog opens.

Assigning the Oval symbol to the style rule
Select the Oval symbol.
Click Apply.
Set the value of the push_state field in the Styling Customizer to @status for this rule.

The symbol used to represent a node now changes when any of the nodes in the diagram is clicked.

Current section

Customizing interactors