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.

add_element_behavior

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:

behavior_owner_chooser

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:

element_behavior_owner

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.

    add_event_for_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_event_for_buttons

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):

add_control_flow

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):

add_action_list

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 {Button_1.id} is an element property.

elem_behavior_example

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.