Home | Sign in | English UK
New WINDEV Mobile 25 feature!
  • This lesson will teach you the following concepts
  • Overview
  • Creating the Form window with swipe
  • Creating the Form window
  • Creating the internal window
  • Managing the swipe in the form window
  • Window test
  • Conclusion
Lesson 5.5. Window with scroll
This lesson will teach you the following concepts
  • Creating an internal window by refactoring.
  • Changing the window content by swipe.
Lesson duration

Estimated time: 20 mn
Previous LessonTable of contentsNext Lesson
In the Windows applications, all the operations are performed via the mouse or the keyboard.
In mobile, the interfaces must be configured differently. With the touchdown screens, all the operations are performed with the fingers.
In the applications for mobile devices, WINDEV Mobile proposes several features to manages the specific moves of fingers (pull to refresh, double touch, sliding, ...).
In this lesson, we are going to create a new form window, used to view the products.
In this window, you will have the ability to go from a product form to another one by swipe.


If the "WM Managing Products" application was not created in the previous part, a corrected project is available. This project contains all windows created in this part and it allows you to check your operations.
To open this corrected project, in WINDEV Mobile's home page (Ctrl + <), click "Tutorial" and select "iOS/Android application (Answer)".
Creating the Form window with swipe

Creating the Form window

  • To create the form window:
    1. Create a new blank window.
      • Click Creating an element among the quick access buttons.
      • The element creation window appears: click "Window" then "Window".
      • In the wizard, select the "Standard" tab, choose "Blank" and validate.
    2. In the window for saving an element, specify:
      • the window title: "Product form".
      • the window name: "WIN_Product_form_Advanced".
    3. Validate.
We are now going to create an Internal Window control in the "WIN_Product_form_Advanced" window. This control will host an internal window that will display the data to scroll.
  • To create the Internal Window control:
    1. On the "Creation" pane, in the "Containers" group, expand "Internal window" and select "Swipe area (internal window)".
    2. Click the position where the control will be created in the window (top left corner).
    3. Resize the Internal Window control so that it occupies the entire available space in the window.
    4. Modify the anchor of Internal Window control ("Anchor" option from the popup menu): anchor the control in height and in width ( Anchor in height and width ).
    5. Validate.

Creating the internal window

  • To simplify the creation of internal window, we are going to create it from the "WIN_Product_form" window found in our project:
    1. If necessary, open "WIN_Product_form" in the editor (double-click its name in the "Project explorer" pane).
    2. Select all controls found in the portrait layout (Ctrl + A).
    3. Display the popup menu and select "Refactoring .. Create an internal window from the selection".
    4. The internal window is automatically created and the save window is displayed. Give the "IW_Product" name and validate.
    5. Display the created internal window in the editor: click the "IW_Product" button in the bar of opened elements.
    6. Open the description of the internal window. In the "UI" tab, modify the window width: 320. This width corresponds to the width of Internal Window control that was created in the "WIN_Product_form_Advanced" window.
    7. Validate.

Managing the swipe in the form window

  • To associate the internal window with the Form window:
    1. Display the "WIN_Product_form_Advanced" window in the editor (click its name in the bar of opened elements).
    2. Select the Internal Window control and open its description ("Description" in the popup menu).
    3. In the "General" tab, select the internal window that was just created ("IW_Product").
    4. In the "UI" tab, in "Changing content by swipe":
      • The option "Allow the change of content by swipe" is already checked because we have chosen the Internal Window control for swipe.
      • Check "Position on the current record when opening the internal window.".
      • The swipe orientation is "Horizontal" by default.
        Swipe settings
    5. In the "Content" tab, we are going to configure the mode for filling the internal window. This window will display the data of the Product data file:
      • Click "File/Query".
      • In the source, for the "Browsed file" option, select the "Product" data file.
        Internal window source settings
    6. Validate the description window.
The swipe is implemented.
  • To prevent the keyboard from appearing during the swipe, we will use SIPVisible:
    1. Display the WLanguage events of the Internal Window control in "WIN_Product_form_Advanced".
    2. Write the following code in the WLanguage event "Selection by swipe ...":
    3. Close the code editor.
  • To finish this window, we are going to add the validation option into the Action Bar of the window. We already did this in the lesson 5.2 ("Managing the product creation and modification"). Here, we will only present the main points:
    1. Select the Action Bar (at the top of window).
    2. Open the Action Bar description window.
    3. Click number 2. The interface for typing an option in the Action Bar appears.
    4. Click the "+" button to add an option. A new default option is created at the top right.
    5. Modify the characteristics of this option:
      • In the "Caption" area, type "Done".
      • In the "Preset image" area, expand the list and select "Done".
      • Validate the description window.
    6. To enter the code used to save the modifications performed in the "WIN_Product_form_Advanced" window:
      • Select (if necessary) the Action Bar control of window.
      • Click on "OK".
      • A drop-down menu with the "Done" option is displayed.
      • Right-click the option.
      • Select "Code" from the popup menu that is displayed.
      • Write the following WLanguage code in the event "Selecting the menu":
    7. Save the modifications by clicking Save the element among the quick access buttons.
    8. Close the code window (click X at the top right corner of code editor).
Window test
Before running the window test, we are going to modify the "WIN_List_of_products_Advanced" window to directly open the from window that was just created.
  • To open the window with swipe from the list of products:
    1. Display the window "WIN_List_of_products_Advanced" in the editor (click its name in the bar of opened documents).
    2. Display the WLanguage events related to the Looper control.
    3. In the event "Selecting a row ... ", replace the WLanguage code:
  • We are going to test the operating mode of project in the simulator:
    1. Click Run project test among the quick access buttons.
    2. In the Looper control that is displayed, click a product to display its form.
    3. Click the product form and move the mouse to the right or to the left. The product form automatically changes.
      Window swipe
This part explained the main concepts for developing Android or iOS applications.
Several themes have not been presented in this part:
  • managing emails,
  • managing notifications,
  • using the visualization panel,
  • using the debugger,
  • ...
Don't hesitate to see the online help to discover and check new features.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 25
Click [Add] to post a comment