|
|
|
|
|
|
|
|
- In this lesson you will learn the following concepts...
- Overview
- Using anchors
- Testing the application
Lesson 4.3. Managing window orientation using layouts In this lesson you will learn the following concepts... - Advantage of anchors.
- Creating a layout.
- Using a layout.
In most cases, a mobile application can be used in portrait and landscape mode. The interface of a window in portrait mode can be modified to be used in landscape mode. WINDEV Mobile manages changes in the orientation of the device via anchors. Most of the time, you just have to define the anchors to adapt the display to the different orientations. However, if the interface must change according to the orientation (e.g., change the position of the controls in portrait and landscape mode), the anchors are not sufficient. To manage a different interface in portrait and landscape mode, you can use layouts.
- To follow this lesson, open (if necessary) the "WM Product Management" project you worked on in the previous lesson.
- Go to the WINDEV Mobile home page (Ctrl + <).
- On the home page, click "Tutorial", then in "Part 4 - Development of an Android/iOS application", double-click "Android/iOS product management - Exercise".
- A dialogue box prompts you to open the project you worked on in the previous lesson. You can open the local copy or the original project. Select "Open the local copy".
| | |  | Answers | A completed project is available. This project contains the different windows that will be created in this lesson. To open the completed 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". |
- The anchors have already been used in the "WIN_Product_form" window. In test mode, we get the following interfaces:
All controls in portrait mode are also displayed in landscape mode. However, a lot of space is wasted and the window must be scrolled to access all controls. We are going to improve the display in landscape mode via layouts. | | |  | Note | Layouts are used to define several views of a window in the same project without duplicating the window. This allows you to define: - a specific view for portrait mode,
- a specific view for landscape mode,
- a phone-specific view,
- a view specific to the tablet,
- ...
|
- To create a new layout:
- Open the "WIN_Product_form" window if necessary.
- On the "Window" tab, in the "Layouts" group, expand "Layouts" and select "Add layouts".
- The layout creation wizard starts.
- Go to the next step of the wizard.
- The wizard prompts you to select an option to manage the differences between phones and tablets. We will not use tablets in this example. Keep the "This window will be displayed on phone only" option.
- Go to the next step of the wizard.
- The wizard prompts you to select an option to manage the Portrait/Landscape orientation of the application. That's what we are going to do in this example: check "Create layouts".
- Go to the next step of the wizard.
- The wizard lets you choose a layout for each platform used. In this example, we will use the same layout for Android and iOS. Select "No specific layout for each OS".
- Validate the wizard.
- Two layouts have been created in our example. These layouts appear as thumbnails on the right of the "WIN_Product_form" window.
- We will modify the layout of the landscape mode:
- Double-click the thumbnail of the "Landscape - MultiOS Phone" layout: the window corresponding to this layout is displayed in the middle of the editor.
- The
 option (upper-right corner of the main window, in the title bar) indicates if the "Automatic dissociation" mode is enabled. With this mode, when a control is moved or resized in one of the windows in the layout, the changes will not be applied in the other windows. Keep the "Automatic disassociation" mode enabled. - We will change the position of the controls in the layout:
- Select the Image control with the product image and the two Button controls and move them to the left of the window. Move the two Button controls under the Image control.
- Select the "Caption" and "Description" controls and move them to the right of the Image control. Resize the controls if necessary.
- Select the "Price" and "Quantity" controls and move them under the Image control on the left.
- Select the "Bar code" control and the associated Button control and move them under the description.
- Select:
- the "Reference" control and move it to the right of the Caption control.
- the "Reorder" control and move it to the right of "Quantity".
- Reduce the height of the controls if necessary.
- Select the Image control. The Image control as well as the two Button controls are enclosed by a red line. There are anchor conflicts with the Caption control.
- We will change the anchors of these controls:
- Select the Image control and the two Button controls.
- Open the context menu and select "Layouts .. Dissociate anchors".
- Define new anchors for the controls:
- Open the context menu of the controls and select "Anchor".
- In the window that is displayed, select
 .
- You get the following interface:
- To test the project:
- Click
 in the quick access buttons. - Your project starts with the menu window.
- Click the list of products.
- Click a product. The product form appears in portrait mode.
- Change the window orientation by clicking
 in the simulator menu. - The layout defined for the landscape mode is automatically displayed:
- Close the test window of the application.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|