Tuto WEBDEV 25

Part 13: The WLanguage basics 455 ▶ We will now create a Button control to allow the image to move 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 . 2. Click the location where the Button control will be created (below the Image control for example). 3. Click the control that was just created. The text displayed in the control 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 events associated with the control (F2). 9. Enter the following code in the "Click (browser)" event: // 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. Remark 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. Simply write the code that corresponds to each part of the statement. 10. Close the code window (click X at the top right corner of code editor). ▶ Now let’s create a Button control 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 . 2. Click the location where the control will be created (for example, to the right of the "FOR statement" Button control). 3. Click the control that was just created. The text displayed in the control 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 events associated with the control (F2).