PC SOFT

ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Home | Sign in | English EN
This page concerns the 270056D version of WINDEV Mobile 27. Update your version.
  • In this lesson you will learn the following concepts
  • Overview
  • Creating a Form window with swipe gesture support
  • Creating the Form window
  • Creating the internal window
  • Swipe gesture in the Form window
  • Window test
  • Conclusion
Lesson 4.5. Enable swipe gesture on a window
In this lesson you will learn the following concepts
  • Creating an internal window via a refactoring process.
  • Changing the window content with a swipe gesture.
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 navigate between product forms with a simple swipe gesture.

Answers

If you have not created the "WM Product Management" application, you can use the corrected project. This project contains all the windows created in this part 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 a Form window with swipe gesture support

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 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 the user can navigate through.

  • To create the Internal Window control:
    1. On the "Creation" tab, 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. Change the anchors of the Internal Window control (select "Anchor" in the context menu): anchor the control vertically and horizontally ( Width and height ).
    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. Name the window "IW_Product" and validate.
    5. Open the internal window that we have just created in the editor: click "IW_Product" in the open document tabs.
    6. Open the description of the internal window. In the "UI" tab, change 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 ("Description" in the context menu).
    3. In the "General" tab, select the internal window ("IW_Product").
    4. In the "UI" tab, in the "Change content by swipe" section:
      • The "Allow the change of content by swipe" option 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 will set how the internal window will be populated. 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.
We have completed the swipe gesture configuration.
  • To prevent the keyboard from appearing during the swipe gesture, we will use SIPVisible:
    1. Open the WLanguage events of the Internal Window control located inside "WIN_Advanced_FORM_Product".
    2. Write the following code in the "Selection by swipe ..." WLanguage event:
      SIPVisible(False)
    3. Close the code editor.
  • To finish this window, we are going to add the validation option to the Action Bar. We have already done this in 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 editing options in the Action Bar appears.
    4. Click the "+" button to add an option. A new option is created at the top right.
    5. Change 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 that saves the changes made to the "WIN_Advanced_FORM_Product" window:
      • Select the Action Bar control.
      • 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 "Selecting the menu" event:
        ScreenToFile()
        Product.Save()
        Close()
    7. Save the changes by clicking Save element in the quick access buttons.
    8. Close the code window (click the "X" icon 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 form window 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 "Selecting a row ... " event, replace the following WLanguage code:
      Product.ReadSeek(ProductID,QRY_Products.ProductID)
      WIN_Product_form.OpenMobileWindow()
      with
      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 details.
    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 27
Comments
Click [Add] to post a comment