- This lesson will teach you the following concepts
- Creating the Form window with swipe
- Creating the Form window
- Creating the internal window
- Managing the swipe in the form window
- Window test
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.
Estimated time: 20 mn
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 the WINDEV Mobile 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:
- Create a new blank window.
- Click among the quick access buttons.
- The window for creating a new element is displayed: 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".
- the window name: "WIN_Product_form_Advanced".
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:
- On the "Creation" pane, in the "Containers" group, expand "Internal window" and select "Swipe area (Internal window)".
- Click the position where the control will be created in the window (top left corner).
- Resize the Internal Window control so that it occupies the entire available space in the window.
- Modify the anchor of Internal Window control ("Anchor" option from the popup menu): anchor the control in height and in width ( ).
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:
- Open (if necessary) the "WIN_Product_form" window in the editor (double-click its name in the project explorer for example).
- Select all controls found in the portrait layout (Ctrl + A).
- Display the popup menu and select "Refactoring .. Create an internal window from the selection".
- The internal window is automatically created and the save window is displayed. Give the "IW_Product" name and validate.
- Display the created internal window in the editor: click the "IW_Product" button in the bar of opened elements.
- Display the description window of internal window. In the "GUI" 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.
Managing the swipe in the form window
- To associate the internal window with the Form window:
- Display the "WIN_Product_form_Advanced" window in the editor (click its name in the bar of opened elements).
- Select the Internal Window control and display its description ("Description" from the popup menu).
- In the "General" tab, select the internal window that was just created ("IW_Product").
- In the "GUI" tab, in the "Changing content by swipe" area:
- The option "Allow the change of content by swipe" is already checked because the Internal Window control was chosen for swipe.
- Check "Position on the current record when opening the internal window".
- The swipe orientation is "Horizontal" by default.
- 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.
- Validate the description window.
The swipe is implemented.
- To avoid being bothered by the keyboard appearance during the swipe, we are going to use SIPVisible:
- Display the events of the Internal Window control in "WIN_Product_form_Advanced".
- Write the following code in the event "Selection by swipe ...":
- 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:
- Select the Action Bar (at the top of window).
- Display the description window of Action Bar.
- Click number 2. The interface for typing an option in the Action Bar appears.
- Click the "+" button to add an option. A new default 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".
- Validate the description window.
- 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 code in the event "Selecting the menu":
- Save the modifications by clicking among the quick access buttons.
- Close the code window (click the cross in the top right corner of code editor).
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:
- Display the "WIN_List_of_products_Advanced" window in the editor (click its name in the bar of opened elements).
- Display the events related to the Looper control.
- In the event "Selecting a row ... ", replace the code:
- We are going to test the operating mode of project in the simulator:
- Click on among the quick access buttons.
- In the Looper control that is displayed, click a product to display its form.
- Click the product form and move the mouse to the right or to the left. The product form automatically changes.
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.
Click [Add] to post a comment