Connecting components to signals

A signal and handler mechanism enables components to respond to application events, which are represented by signals. When a signal is emitted, the corresponding signal handler is invoked to respond to the event by using scripts or other operations placed in the handler.

To receive a notification when a particular signal is emitted for a particular component, the component definition should declare a signal handler named on<Signal> where <Signal> is the name of the signal, with the first letter capitalized. The signal handler should contain the JavaScript code to be executed when the signal handler is invoked.

Components have predefined signals that are emitted when users interact with the application. For example, the Mouse Area component has a clicked signal that is emitted whenever the mouse is clicked within the area. Since the signal name is clicked, the signal handler for receiving this signal is named onClicked.

A signal is automatically emitted when the value of a property changes. This type of signal is a property change signal and signal handlers for these signals are written in the form on<Property>Changed, where <Property> is the name of the property, with the first letter capitalized.

For example, the Mouse Area component has a pressed property. To receive a notification whenever this property changes, you would use a signal handler called onPressedChanged.

For more information about signals and signal handlers, see Signal and Handler Event System.

Connecting components to signals in the Connection view

You can connect components to signals that are available to them in Connections. Then define Action for them. You can put logical conditions on this Actions to control them according to your needs.

Initiate a new connection for a component:

1. Select the component you want to connect in the Navigator or 2D view.
2. Go to the Connections tab in the Connections view.
3. Select the (Add) button to add a connection.

Connect component Signal to Action:

1. Select the interaction Signal for the Target component with which you want to connect an Action.
2. Select an Action that you want to implement when the selected Signal for the Target component is initiated.
3. You get different properties or sub-sections associated with the selected Action. Select Item/Method/State/Property/Value from related sub-sections. This way you can formulate changes in the design by manipulating components.
4. Select Add Condition to include a logic to the selected Action. To do this, you can first select the component you want to put logic on, and then select the conditional statements (AND, OR, EQUAL, NOT EQUAL, GREATER, LESS, GREATER OR EQUAL, LESS OR EQUAL) and then select another component to compare between them.
5. Optional. You can include an Else Statement by selecting the Else Statement control and adding components and conditional statements in a similar way to the previous step.
6. Optional. To use complex conditional statements, select the Manual Edit control. After you have entered your JavaScript statements, close the window to apply them.

Actions and conditions

You use the Connection Editor to create the JavaScript expressions for actions with conditions. An action connects a component to a signal, whereas conditions fetch property values from other components and compare them to each other. Based on that, you can later change the components with JavaScript expressions.

For more information about the logical operators that you can use to construct conditional expressions, see Summary of Logical Operators.

Creating JavaScript expressions

To create JavaScript expressions for actions, do one of the following:

• Follow the steps described above in Connect component Signal to Action. For a list of Actions and their properties, see Action Properties.

  

• Open the Manual Code Edit window from the Connections view and write JavaScript expressions with components and logical expressions manually.

  Note: If you create a conditional expression by selecting options from the drop-down menus in the Connection view, you can only create a single level if-else expression. For nested level if-else expressions, use the Manual Code Edit.

  

Action properties

Watch this video for practical examples of the Connection view workflow: