ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / WINDEV Mobile Tutorial / Tutorial - Developing an Android and iOS application
  • Lesson 5 - Swipe gestures in a window
  • Overview
  • Creating a Form window with swipe gesture support
  • Principle
  • Creating the window and Internal Window control
  • Creating the internal window
  • Swipe gesture in the Form window
  • Window test
  • Opening the form from the list of products
  • Test
  • To sum up

Tutorial - Developing an Android and iOS application

Lesson 5 - Swipe gestures in a window
We will cover the following topics:
  • Creating an internal window via a refactoring process.
  • Changing the window content with a swipe gesture.
Durée de la leçon 20 mn
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.). We covered them in the previous lesson.
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.
Warning
This lesson is based on the WM Product Management example used in Lesson 1. To follow this lesson, you must have completed the steps from the previous lessons.
Creating a Form window with swipe gesture support

Principle

A form window that supports swipe gestures uses internal windows. Each piece of information the user swipes through is integrated into an internal window. Then, you can simply define the swipe gesture options.
In our example, we will:
  • create a new window. This window will contain an Internal Window control.
  • create an internal window containing the information to be displayed (in our case, the "product form").
  • configure the swipe gestures in the window.

Creating the window and Internal Window control

First, let's create a blank window. This window will contain an Internal Window control.
To create a blank window:
  1. Click Create an element in the quick access buttons.
  2. The new element window appears: click "Window" then "Window".
  3. In the wizard, select the "Standard" tab, choose "Blank" and validate.
  4. In the window for saving an element, specify:
    • the window title: "Product form".
    • the window name: "WIN_Advanced_FORM_Product".
  5. 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 at the desired location to create the control in the window (upper-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: 360. 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 "Swipe to change content" section:
    • The "Allow swipe to change content" 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 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 option characteristics:
    • In the "Caption" area, type "Done".
    • In the "Preset image" area, expand the list and select "Done".
    • Confirm changes and close 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 "OK".
    • A drop-down menu with the "Done" option appears.
    • Right-click the option.
    • Select "Code" in the context menu that appears.
    • Write the following WLanguage code in the "Select a menu" event:
      Product.FromWindow()
      Product.Save()
      Close()
  7. Save changes by clicking Save element in the quick access buttons.
  8. Close the code window.
Window test

Opening the form from the list of products

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 "Select 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()

Test

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
To sum up
Completed project
Do you want to check the end result of the steps described here? A completed project is available. This project contains the different windows created in this lesson. To open the completed project, go to the home page and click "Tutorial", then in "Tutorial - Develop an Android/iOS application", double-click "Android/iOS product management - Answers".
In this lesson, we discovered how to enable swipe gestures in a window.
In the next lesson, we will take a look at how to print content to PDF from mobile devices.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 2024
Comments
Click [Add] to post a comment

Last update: 12/04/2023

Send a report | Local help