|
|
|
|
|
|
|
|
|
|
- Lesson 3 - Defining the window orientation using layouts
- Overview
- Using anchors
- Using layouts
- Creating layouts
- Modifying layouts
- Testing the application
- To sum up
Tutorial - Developing an Android and iOS application
Lesson 3 - Defining the window orientation using layouts We will cover the following topics: - Advantages of using anchors.
- Creating a layout.
- Using a layout.
 15 min In most cases, a mobile application can be used in portrait and landscape mode. The interface of a window in portrait mode can be changed to landscape mode. In WINDEV Mobile, you can use anchors to define how controls behave when the device orientation changes. Most of the time, you just have to set anchors to adapt the screen to 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), anchors are not sufficient. In WINDEV Mobile, you can use layouts to adapt the interface to portrait and landscape modes.
 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.
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 UI in landscape mode using layouts. Layouts define several views of a window in the same project without duplicating the window. You can define: - a specific view for portrait mode,
- a specific view for landscape mode,
- a phone-specific view,
- a view specific to the tablet,
- etc.
Creating layouts We will use a wizard to create a layout in our window: - Open the "WIN_Product_form" window in the editor.
- On the "Window" tab, in the "Layouts" group, expand "Layouts" and select "Add layouts". The layout creation wizard opens.
- Proceed 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.
- Proceed to the next step of the wizard.
- The wizard prompts you to select an option to manage the Portrait/Landscape orientation of the application. This is what we'll do in this example: check the "Create layouts" option.
- Proceed 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".
- Finish the wizard.
Two layouts have been created in our example. These layouts appear as thumbnails on the right of the "WIN_Product_form" window.
Modifying layouts We are going to modify the layout of landscape mode: - Double-click the thumbnail of "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. - 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.
Image control
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. Therefore, we are going to modify the anchor 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.
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 - Complete application with data" area, click on the "Open corrected project" link. In this lesson, we saw the advantages of using layouts compared to anchors. In the next lesson, we will see how to add a search feature in the application's Action Bar. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|