|
|
|
|
|
- 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 by refactoring.
- Changing the window content with a swipe gesture.
20 mn 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: - Click in the quick access buttons.
- When the new element window appears, click "Window" then "Window".
- In the wizard, select the "Standard" tab, choose "Blank" and validate.
- In the window for saving an element, specify:
- the window title: "Product form".
- window name: "FEN_Advanced_FICHE_Product".
- 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: - On the "Creation" tab, in the "Containers" group, expand "Internal window" and select "Swipe area (internal window)".
- Click at the desired location to create the control in the window (upper-left corner).
- Resize the Internal Window control so that it occupies the entire available space in the window.
- Modify the anchoring of the Internal Window field ("Anchor" option in the context menu): anchor the field in height and width ().
- Validate.
Creating the internal window To easily create the internal window, we will create it from the "WIN_Product_form" window of our project: - If necessary, open "WIN_Product_form" in the editor (double-click its name in the "Project explorer" pane).
- Select all controls in the portrait layout (Ctrl + A).
- Open the context menu and select "Refactoring .. Create an internal window from the selection".
- The internal window is automatically created and the save window is displayed. Name the window "IW_Product" and validate.
- Display the internal window that has been created in the editor: click on the "FI_Product" button in the open items bar.
- Open the description of the internal window. In the "UI" tab, modify the window width: 360. This width corresponds to the width of the Internal Window control that we created in "WIN_Advanced_FORM_Product".
- Validate.
Swipe gesture in the Form window To associate the internal window with the Form window: - Open the "WIN_Advanced_FORM_Product" window in the editor (click on it in the open document tabs).
- Select the Internal Window control and open its description ("Description" in the context menu).
- On the "General" tab, select the internal window that was just created ("IW_Product").
- On 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.
- On 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.
- 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: - Open the WLanguage events of the Internal Window control located inside "WIN_Advanced_FORM_Product".
- Write the following code in the "Selection by swipe ..." WLanguage event:
- Close the code editor.
- Select the Action Bar (at the top of the window).
- Open the Action Bar description window.
- Click number 2. The interface for editing options in the Action Bar appears.
- Click the "+" button to add an option. A new option is created at the top right.
- Modify the characteristics of this option:
- In the "Caption" area, type "Done".
- In the "Preset image" area, expand the list and select "Done".
- Confirm changes and close the description window.
- 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()
- Save changes by clicking in the quick access buttons.
- Close the code window.
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: - Open the "WIN_Advanced_LIST_Products" window in the editor (click on it in the open document tabs).
- Open the WLanguage events related to the Looper control.
- 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: - Click in the quick access buttons.
- In the Looper control that is displayed, click a product to see the details.
- Click the product form and move the mouse to the right or to the left. The product form automatically changes.
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 corrected project, on the home page, click on "Tutorial", then in the "Tutorial - Application with data" area, click on the "Open corrected project" link. 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.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|