PC SOFT

ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Home | Sign in | English EN
New WINDEV Mobile 26 feature!
  • In this lesson you will learn the following concepts
  • Overview
  • Creating the Form window with swipe
  • Creating the Form window
  • Creating the internal window
  • Swipe gesture in the Form window
  • Window test
  • Conclusion
Lesson 4.5. Window with scroll
In this lesson you will learn 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
Overview
In Windows applications, all operations are performed with the mouse or keyboard.
In mobile devices, interfaces must be designed differently. In touch screens, all operations are performed with the fingers.
In applications for mobile devices, WINDEV Mobile offers multiple features to manage specific touch gestures (e.g., pull to refresh, double tap, sliding, etc.).
In this lesson, we will create a new form window to view products.
In this window, you will be able to go from one product form to another by a simple swipe.

Answers

If the "WM Product Management" application was not created in the previous lesson, a corrected project is available. This project contains all windows created in this lesson and allows you to check your operations.
To open the corrected project, go to the home page and click "Tutorial", then in "Part 4 - Development of an Android/iOS application", double-click "Android/iOS product management (Answers)".
Creating the Form window with swipe

Creating the Form window

  • To create the form window:
    1. Create a new blank window.
      • Click Create an element in 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_Advanced_FORM_Product".
    3. Validate.
We will now create an Internal Window control in the "WIN_Advanced_FORM_Product" window. This control will contain an internal window that will display the data to be scrolled.

  • 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 the Internal Window control (select "Anchor" in the context menu): anchor the control in height and in width ( Anchor in height and width ).
    5. Validate.

Creating the internal window

  • To easily create the internal window, we will create it from the "WIN_Product_form" window of 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 in the portrait layout (Ctrl + A).
    3. Open the context 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. Open the internal window that we have just created in the editor: click "WI_Product" in the open document tabs.
    6. Open the description of the internal window. In the "UI" tab, modify the window width: 320. This width corresponds to the width of the Internal Window control that we created in "WIN_Advanced_FORM_Product".
    7. Validate.

Swipe gesture in the Form window

  • To associate the internal window with the Form window:
    1. Open the "WIN_Advanced_FORM_Product" window in the editor (click on it in the open document tabs).
    2. Select the Internal Window control and open its description (select "Description" in the context menu).
    3. In the "General" tab, select the internal window that we have just created ("IW_Product").
    4. In the "UI" tab, in the "Change content by swipe" section:
      • "Allow the change of content by swipe" is already checked because we have chosen the Internal Window control to swipe the content.
      • 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. Open the WLanguage events of the Internal Window control in "WIN_Advanced_FORM_Product".
    2. Write the following code in the WLanguage event "Selection by swipe ...":
      SIPVisible(False)
    3. Close the code editor.
  • To finish this window, we are going to add the validation option to the Action Bar of the window. We already did this in the lesson 4.2 ("Creating and modifying a product"). Here, we will only present the main points:
    1. Select the Action Bar (at the top of the 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 to save the changes made in the "WIN_Advanced_FORM_Product" window:
      • Select (if necessary) the Action Bar control of the window.
      • Click on "OK".
      • A drop-down menu with the "Done" option is displayed.
      • Right-click the option.
      • Select "Code" in the context menu that appears.
      • Write the following WLanguage code in the event "Selecting the menu":
        ScreenToFile()
        Product.Save()
        Close()
    7. Save the changes by clicking Save the element in the quick access buttons.
    8. Close the code window (click the "X" in the upper-right corner of the code editor).
Window test
Before testing the window, we are going to modify the "WIN_Advanced_FORM_Product" window to directly open the form window that we have just created.

  • To open the window with swipe from the list of products:
    1. Open the "WIN_Advanced_LIST_Products" window in the editor (click on it in the open document tabs).
    2. Open the WLanguage events related to the Looper control.
    3. In the event "Selecting a row ... ", replace the WLanguage code:
      Product.ReadSeek(ProductID,QRY_Products.ProductID)
      WIN_Product_form.OpenMobileWindow()
      by
      Product.ReadSeek(ProductID,QRY_Products.ProductID)
      WIN_Advanced_FORM_Product.OpenMobileWindow()
  • We are going to test the project in the simulator:
    1. Click Test project in the quick access buttons.
    2. In the Looper control that is displayed, click a product to see the product details form.
    3. Click the product form and move the mouse to the right or to the left. The product form automatically changes.
      Window swipe
Conclusion
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,
  • ...
See the online help to discover and check new features.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 26
Comments
Click [Add] to post a comment