Interaction Definition

No Coding

We can define the element behavior (which will work during the simulation) without coding.

All interactions will be defined as event handlers. Each event handler will be a flow chart that contains branching and actions.

Open Action Editor

We can define the event handler with the Action Editor. We can open the Action Editor via the button with small red flag, or via the context menu. We can also use the Ctrl+D (CMD+D in Mac) hotkey to open the Action Editor.

Behavior Flow Chart

There are three factors for the flow chart: event, flow control and action. They will be layed out as a tree structure that represent the flow chart.

Event is the starting point, the event handler will be invoked when the event occur.

Flow control will take charge of the flow direction, it can branch the flow or make the looping.

Action is the factor that really do something. There are many kinds of actions available.

Here's how a behavior flow chart looks like:

The Action Editor provides some facilities to help defining the event handlers, drag and drop and copy/cut/paste are all supported.

Run Simulation in Web Browser

After defining the behavior, we can run the simulation in web browser. To launch the simulation, just go to menu "Prototype->Run Simulation", or press the "Run Simulation" button in the tool bar. ForeUI will generate the DHTML code for the prototype and run it in a popup browser window.

Interactive Simulation Example

Here are some examples created with ForeUI, you can click the thumbnail to launch the simulation in web browser.