Navigation:  GUI Introduction >

Behavior Editor View

Previous pageReturn to chapter overviewNext page

Behavior editor can define the behavior of certain element(s) or page(s) in an intuitive way.

You can open the behavior editor view by clicking the "Behaviors" button in the bottom toolbar, or press Ctrl + D (Command + D in Mac OS).

toggle_behavior_editor

The behavior editor view looks like this:

behavior_editor_overview

You can show/hide the text on toolbar button in the "Display" tab in the settings window. The text on toolbar are visible by default, you can hide it to save some space on the toolbar.

Add Behavior

To add a behavior, you should start with clicking on the "Add Behavior" button in the toolbar.  A menu will popup and ask if the new behavior is for page or element:

add_behavior

If you choose "For Pages...", a window will show up and prompt you to choose the page(s) as the owner of new behavior. You can choose multiple pages here, then those page will have the same behavior you define later.

choose_page_for_new_behavior

If you choose "For Elements...", an "Element Chooser" window will be displayed and you can then select any element in your plot as the owner of new behavior. If you want, you can choose multiple elements here, then they will have the same behavior you define later.

choose_elements_for_new_behavior

After selecting the owner of new behavior, you will see a new node created in the behavior editor, like this:

behavior_owner_page     or     behavior_owner_element

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_page     or     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_flow_or_action

Add Flow Control or/and Action

Defining the behavior is just like creating flowchart.  The 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_flow_control

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

You can define "behavior tree" by adding Event, Flow Controls and Actions.  Here is an example of finished behavior flow chart:

behavior_tree_example

Quick Define Behavior

After selecting one or more elements in the working area, you will notice the "Quick Define..." button in behavior editor become enabled. Clicking on this button you will see a list of wizards that could quickly create a set of behavior for the selected element(s).

If needed, you will be asked to input some parameters, then the entire behavior will be generated automatically.

quick_behavior_menu

Edit Behavior Node

When adding behavior node (event, flow control or action), an editor window of corresponding node will show up and you can input some parameters for the node.  Below is the editor for "Delay" flow control, you will see various editors when adding different nodes.

edit_delay_window

After adding the behavior node, you can double click or press the edit_behavior_node_button button in toolbar to edit it.

Move Behavior Node

You can move the selected node via the behavior_up_button and behavior_down_button buttons in toolbar.  It is also possible to move the selected node with drag and drop.  If you have the Ctrl key pressed during the drag and drop, you will perform a copy of the selected node.

dnd_behavior_node

Remove Behavior Node

You can press Delete or Backspace key to remove the current selected behavior node.  You can also click the remove_behavior_button button to do the same.

Filter Behavior

On the right of the toolbar, you can see auto_filter_on or auto_filter_off button.  It is a toggle button that control how to show defined behaviors in the behavior editor.  If the button is selected (auto_filter_on), only the behaviors for current selected elements (or current page) will be listed.  If the button is unselected (auto_filter_off), all behaviors will be listed.

Remarks: when toggle button is selected (auto_filter_on), behaviors for current page will not be listed until the element selection is cleared.

On the right of the toggle button, there is a filter box that accept keyword to filter the listed behaviors further on.  When filtering the behavior by keyword, the keyword will be highlighted with bold and italic style in the behavior view.

filtered_behavior

Use Context Menu

You can click right mouse button in the behavior view or note view to call out the context menu.  In behavior view, the context menu allows you to cut, copy, paste and add note to the current selected behavior node.  In the note view, you can add note for selected behavior node.

behavior_context_menu

Also you can see the "Diagnose Off" and "Diagnose On" options. They are used to turn on/off the expression diagnosing on the node. If you define an expression and don't want ForeUI to check if it is correct, you can turn off the diagnose here.

Enable/Disable Behavior

You can disable/enable part of behaviors with a single click on the left of the row. Please see the demonstration below:

disable_behavior

Once you disable an item, all its descendants will also get disabled (displayed in light green), and they will not get exported to the HTML5 simulation. If you doubt a part of behaviors cause problem, you could disable them and run simulation to see if the problem gets disappeared.

Clicking again on the same place can enable the item and its ancestors (if they get disabled already).