PC SOFT

AYUDA EN LÍNEA
DE WINDEV, WEBDEV Y WINDEV MOBILE

Inicio | Iniciar sesión | Español ES
  • This lesson will teach you the following concepts
  • Overview
  • The FOR statement
  • The LOOP statement
  • The WHILE statement
  • Practical example: Using loops
  • Project used
  • Creating the page
  • Creating controls
  • Page test
Appendix 4. The loops
This lesson will teach you the following concepts
  • The FOR statement.
  • The LOOP statement.
  • The WHILE statement.
  • Practical example.

Estimated time: 30 mn
Lección anteriorTabla de contenidoSiguiente lección
Overview
The loop statements are used to run a process in a recurring way. A specific loop statement is used according to the number of occurrences. Several statements can be used to perform loops:
  • FOR...
  • LOOP...
  • WHILE...

The FOR statement

The FOR statement is used when the number of occurrences to process is known. This statement is used to manage the number of occurrences via a variable in which the passages performed in the loop will be counted.
The syntax of FOR statement is as follows:
FOR Subscript = Start Value TO End Value
Process to run
END
For example, the following code runs the process 2000 times:
FOR nCnt = 1 TO 2000
// Process to run
END
Note: An increment step of subscript can be defined via the STEP keyword. For example, the following code executes the process 200 times and the variable nCnt decreases by 10 each time:
FOR nCnt = 2000 TO 1 STEP -10
// Process to run
END

The LOOP statement

The LOOP statement is used to perform loops when the number of occurrences to process is unknown. In this case, a test must be used to exit from the loop.
The syntax of LOOP statement is as follows:
LOOP
Process to run
IF <Expression> THEN BREAK
END
For example:
Counter is int
Counter = 10
LOOP
// Process to run
Counter = Counter - 1
IF Counter = 0 THEN BREAK
END

Tip

The LOOP statement and the FOR statement can have the same behavior: all you have to do is use the syntax with exit according to the number of iterations:
LOOP (<Number of iterations>)
...
END
Example:
LOOP(10)
// Process to run
END

The WHILE statement

The WHILE statement and the LOOP statement operate according to the same principle. The difference is that the test of exit condition is performed BEFORE running the loop code. This test is used to compare a variable. This variable starts from a start value and it is modified in the loop until it reaches the value that triggers the exit from the loop.
The syntax of WHILE statement is as follows:
<Initialize the variable to its start value>
WHILE <Compare the variable to its end value>
Process to run
<Modify the variable>
END
For example:
Counter is int
Counter = 0
WHILE Counter<10
// Process to run
Counter = Counter + 1
END
Practical example: Using loops
To check the use of loops, we are going to create a page into which an Image control will be moved.

Project used

To handle the different concepts of this lesson, we are going to create different pages. These pages will be created in the "My_First_Pages" project.
  • Open the "My_First_Pages" project if necessary.
    1. Display the WEBDEV home page (Ctrl + <).
    2. Click "Tutorial" and select the project named "My first pages (Exercise)".

Creating the page

  • Create a new blank page:
    1. Click Creation among the quick access buttons. The window for creating a new element is displayed: click "Page" then "Page". The wizard for page creation is displayed.
    2. Select "Blank".
    3. Validate. The page is automatically created in the editor. The window for saving an element is displayed.
    4. Specify the page title: "Loops". The page name ("PAGE_Loops") is automatically proposed.
    5. Click on the green button to validate the information displayed in the save window.

Creating controls

We are going to create the Image control then the buttons used to handle this image.
  • To create an Image control:
    1. On the "Creation" pane, in the "Usual controls" group, click "Image". Position the control in the page.
    2. Right-click the control and select "Description".
    3. In the "General" tab, modify the control name: this control is named IMG_Animal.
    4. We are going to associate an image to the tab via the image catalog of WEBDEV.

      Note

      		As soon as an image can be displayed in a control or page, WEBDEV proposes to use the image catalog. This image catalog is started via the "Catalog" option (available by clicking the Drop-down menu button). This catalog contains hundreds of images, cliparts, ...
    5. Click the Drop-down menu button on the right of "Image" control. Select "Catalog" from the popup menu that is displayed. The window of image catalog is displayed.
    6. Type "Animal" in the search area. Click the magnifier to start the search.
      Image catalog
    7. Select the Image image and validate (green button).
    8. A window used to configure the image is displayed.
      Image settings
    9. Keep the default options and validate.
    10. The image path is displayed in the description window of Image control.
    11. In the "GUI" tab, in the "Overlay and move" area, check "The control can be overlaid".
    12. Validate the description window of control.
    13. Position the Image control at the top left of the page.
    14. Save the page (press Ctrl + S or click Save among the quick access buttons).
  • We are now going to create a button in order for the image to be moved by 300 pixels to the right in the page. to do so, we will be using the FOR statement of WLanguage.
    1. On the "Creation" pane, in the "Usual controls" group, click Button control.
    2. Click the location where the button will be created (below the Image control for example).
    3. Click the button that was just created. The text displayed in the button becomes editable. Type the caption: "FOR statement".
    4. Press Enter to validate the input.
    5. Display the description window of control (press Alt + Enter).
    6. In the "General" tab, in the "Button action" area:
      • for the "Type" option, select "Run browser codes only".
      • for the "During the action" option, select "Do not send anything to the server".
    7. Validate the description window of control.
    8. Display the processes associated with the button (F2 key).
    9. Type the following browser click code:
      // Moves the image horizontally by 300 pixels
      FOR i = 1 TO 300
      IMG_Animal..X++
      END
      This code is used to modify the X coordinate of Image control (..X) in a loop from 1 to 300. At each loop turn, the X coordinate is increased by one pixel.

Note

When typing conditional statements in the code editor, the different possible syntaxes are proposed in a list by the code editor.
If you select one of these syntaxes, the statement structure is automatically inserted into the code editor. All you have to do is type the code corresponding to each part of the statement.
  • Let's now create a button used to move the image until the image border is positioned at 1200 pixels. To do so, we will be using the WHILE statement of WLanguage.
    1. On the "Creation" pane, in the "Usual controls" group, click Button control.
    2. Click the location where the button will be created (on the right of FOR button for example).
    3. Click the button that was just created. The text displayed in the button becomes editable. Type the caption: "WHILE statement".
    4. Press Enter to validate the input.
    5. Display the description window of control (press Alt Enter).
    6. In the "General" tab, in the "Button action" area:
      • for the "Type" option, select "Run the browser click code only".
      • for the "During the action" option, select "Do not send anything to the server".
    7. Display the processes associated with the button (F2 key).
    8. Type the following browser click code:
      WHILE IMG_Animal..X < 1200
      IMG_Animal..X++
      END
      This code is used to modify the X coordinate of Image control (..X) until a condition is true. In our case, this condition is as follows: the image position (..X) must correspond to 1200.

      Tip

      		When a code line is too long to be displayed in the window of code editor, you have the ability to cut it in 2 by using a carriage return.
  • Let's now create a last button used to move the image until it reaches the left border of page. To do so, we will be using the LOOP statement of WLanguage.
    1. On the "Creation" pane, in the "Usual controls" group, click Button control.
    2. Click the location where the button will be created (on the right of WHILE button for example).
    3. Click the button that was just created. The text displayed in the button becomes editable. Type the caption: "LOOP statement".
    4. Press Enter to validate the input.
    5. Display the description window of control (press Alt + Enter).
    6. In the "General" tab, in the "Button action" area:
      • for the "Type" option, select "Run the browser click code only".
      • for the "During the action" option, select "Do not send anything to the server".
    7. Validate the description window of control.
    8. Display the processes associated with the button (F2 key).
    9. Type the following browser click code:
      // Moves the image to the left
      LOOP
      IMG_Animal..X--
      IF IMG_Animal..X <= 0 THEN BREAK
      END

      This code is used to modify the X coordinate of Image control (..X). At each turn, a condition is checked. If this condition is true, the program exits from the loop. In our case, the condition is as follows:
      • the image position is set to 0,
      • the image position is less than 0 (used to manage the case where the user presses the button several times).

Note

When typing this code, the LOOP statement may be underlined by a green line and a warning may appear in the pane of compilation errors.
This warning reminds you that an exit statement must be found in the loop code to avoid an infinite loop.

Page test

  • Let's now run the page test:
    1. Click Page Go among the quick access buttons (or press F9).
    2. The created page is started in execution.
    3. Click the different buttons.
      Page test
    4. Close the test page.
Lección anteriorTabla de contenidoSiguiente lección
Versión mínima requerida
  • Versión 24
Comentarios
Haga clic en [Agregar] para publicar un comentario