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.


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.


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...":


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


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


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


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


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.


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


We need to choose the target element first:


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


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


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


The final behavior looks like this:


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.