ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

New WINDEV Mobile 2024 feature!
Help / WINDEV Mobile Tutorial / Tutorial - Developing an Android and iOS application
  • Lesson 3 - Defining the window orientation using layouts
  • Overview
  • Using anchors
  • Using layouts
  • Creating layouts
  • Modifying layouts
  • Testing the application
  • To sum up

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.
Durée de la leçon 15 mn
Overview
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.
Using anchors
The anchors have already been used in the "WIN_Product_form" window. In test mode, we get the following interfaces:
Portrait Mode
Landscape Mode
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.
Using layouts
Layouts 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,
  • etc.

Creating layouts

We will use a wizard to create a layout in our window:
  1. Open the "WIN_Product_form" window in the editor.
  2. On the "Window" tab, in the "Layouts" group, expand "Layouts" and select "Add layouts".
    Add layouts
    The layout creation wizard opens.
  3. Proceed to the next step of the wizard.
  4. 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.
    Phone/Tablet differences
  5. Proceed to the next step of the wizard.
  6. 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".
    Portrait/Landscape differences
  7. Proceed to the next step of the wizard.
  8. 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".
    Operating system
  9. 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 will modify the layout of the landscape mode:
  1. Double-click the thumbnail of the "Landscape - MultiOS Phone" layout: the window corresponding to this layout is displayed in the middle of the editor.
  2. The Automatic dissociation 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.
  3. 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.
      Moving controls
    • Select the "Caption" and "Description" controls and move them to the right of the Image control. Resize the controls if necessary.
      Moving controls
    • Select the "Price" and "Quantity" controls and move them under the Image control on the left.
      Moving controls
    • Select the "Bar code" control and the associated Button control and move them under the description.
      Moving controls
    • 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.
      Moving controls
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.
We will change the anchors of these controls:
  1. Select the Image control and the two Button controls.
  2. Open the context menu and select "Layouts .. Dissociate anchors".
    Menu option
  3. Define new anchors for the controls:
    • Open the context menu of the controls and select "Anchor".
    • In the window that is displayed, select Anchors.
You get the following interface:
Final interface
Testing the application
To test the project:
  1. Click Test project in the quick access buttons.
  2. Your project starts with the menu window.
  3. Click the list of products.
  4. Click a product. The product form appears in portrait mode.
  5. Change the window orientation by clicking Rotate simulator in the simulator menu.
  6. The layout defined for the landscape mode is automatically displayed:
    Layout in landscape mode
  7. Close the test window of the application.
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 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.
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