Navigation:  How-To >

Define Element's Behavior

Previous pageReturn to chapter overviewNext page

Each element in the plot can have its behavior. That means you can create fully interactive prototype with ForeUI. The defined behavior will be converted to Javascript when you export the prototype to DHTML or run the simulation.

You need to open the action editor to define the behavior for the certain element. You can select the element, and click the define_action_button button in the floating tool pane or choose the "define action for..." item in context menu to open the action editor. You can also press Ctrl + D to open the action editor.

open_action_editor

The figure below shows the look of action editor window. The window contains two parts: a view to show the behavior flow chart and a toolbar to create / modify the behavior flow chart.

action_editor

With the bottom toolbar's help, you can define one or event handlers to handle certain events for the element. Each event handler can have three kinds of factors: Event, Flow Control and Action. They will be laid out as a tree structure.

Event is the starting point, the event handler will be invoked when the specified event occur.
Flow Control will take charge of the flow direction, it can branch the flow or make the looping. It can be omitted if no branching or looping are needed.
Action is the factor that really do something. There are many kinds of actions available.

When you define behavior for different elements, the events listed in "Add Event" menu may vary since different elements support different events.

Once you add an event and select it in the view, the "Add Flow Control" and "Add Action" buttons will be enabled. Then you can add branching or loop to control the working flow of the event handler, or add action to show message, hide element, move element etc.

Please go though the step-by-step examples below, and you will understand how it works.

Example 1: Hello World Button
Example 2: Branching the Work flow
Example 3: Manipulate Element in Runtime
Example 4: Using Loop