Navigation:  How-To >

Define Element's Behavior

Previous pageReturn to chapter overviewNext page

In ForeUI, behavior is defined as one or more event handlers, which consist of Event, Flow Control and Action.  You can define the behavior for element by assigning the element as the owner of the event handlers.  To do so, you can follow these steps:

1.Open the behavior editor view.
2.Click the "Add Behavior" button in the toolbar and then select "For Elements..."
3.Select the element(s).  You can select multiple elements if you want to define behavior for them together.


The step 1 and step 2 can also be achieved by pressing Ctrl+D (Command + D in Mac OS X).

In step 3, you will see the element chooser window:


If you have any element selected before opening the element chooser window, the selection will be listed by default.  So you can also select element first, and then press Ctrl+D (or do step 1 and 2), you can finish step 3 by directly click the "Select ? Elements" button.  Then you will see the behavior owner in the behavior editor:


After that you can define the event handler by adding event, flow control or/and action.

Add Event

The "Add Event" button is enabled when you select the behavior (node with red flag icon).  That means you can continue defining the behavior by adding events into it.  All available events (according to owner type, you can find all available events in Events Reference) will be listed in a popup menu when you click the "Add Event" button.


.After adding the event, it will be selected by default and the "Add Flow Control" and "Add Action" buttons will be enabled now.


Add Flow Control or/and Action

Defining the behavior is quite similar with defining flowchart.  The selected event is the start point, and you can append flow controls (looping, branching, delay etc.) and actions under it.

If you click the "Add Flow Control" button, all available flow controls will be listed in a popup menu (more details can be found in Flow Control Reference):


If you click the "Add Action" button, all available flow controls will be listed in a popup menu (more details can be found in Action Reference):


Here is an example.  When clicking on Button_1 or Button_2 element, a message box will pop up and tell you which button is clicked.  Here the {FOCUSED_ELEMENT_ID} is a system property, and {} is an element property.


You can add as much events as you need, and define handlers for them, thus your plot can have very complex behavior/interaction.  When running HTML5 simulation, all your defined behaviors will be converted to Javascript.