Navigation:  Examples >

Example 4: Using Loop

Previous pageReturn to chapter overviewNext page

Example 4: Using Loop

Run This Example in New Window

Sometimes we need to execute some tasks for multiple times, we will need to use loop in this case.

ForeUI supports two kinds of loop:

Loop Multiple Times: will loop for certain times.
Loop While Condition is Satisfied: will keep looping as long as the condition is satisfied.

loops

Now let's make such an example that make use of loop: when you click the button, the button will keep moving to the left, until its x coordinate is less or equals than 100.

The first step is to place a button on somewhere, for example, at (400, 100).  After defining the behavior and create the "Element Clicked" event for it, we can add the loop by selecting the "Loop While Condition is Satisfied..." item under the "Add Flow Control" button in toolbar.

example4_add_loop

In the popup window we can specify the condition.  Since we expect the button to move to left until x <= 100, we need to specify a condition like "Button's x coordinate is greater than 100" for looping.  So we need to insert the property that represent button's x coordinate, just click the insert_prop_button button and choose "Insert Element Property...":

example04_choose_x

The element chooser will show up and we choose our only button (Button_1):

example04_choose_button

Then in the property chooser window, we choose "The X coordinate of Element" and click "Ok" button:

example04_choose_button_x

Then you will see how the property looks like in the expression:

example04_cond_x

To finish the condition, please choose "greater than" comparator and input value "100" as the expression 2, then click "Add Condition" button:

example04_choose_comparator

You can change the "Loop Interval" to smaller value if you want the button move faster.  After clicking the "Ok" button, the conditional loop is created.

example04_cond_loop

Now we can add the action to move button.  Click the "Add Action" button and choose "Operate on Element...":

example04_add_action

We need to choose the target element first:

example04_choose_target

Here just choose the only button (Button_1) as the target element:

example04_choose_button_as_target

Then we can choose "Change Location" action for moving the button:

example04_choose_action

Input the new x value as "-=10", which means moving button to left for 10 pixels a time:

example04_action_move

The final behavior looks like this:

example04_final_behavior

We can run it now. When we click the button, it keeps moving left a little until its x position equal or less than 100. You can view this online example to see the result, or download the plot file.