PC SOFT

ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Home | Sign in | English EN
This page concerns the 270056D version of WINDEV Mobile 27. Update your version.
  • 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.
Lesson duration

Estimated time: 15 mn
Previous LessonTable of contentsNext Lesson
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 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.
    1. Go to the WINDEV Mobile home page (Ctrl + <).
    2. On the home page, click "Tutorial", then in "Part 4 - Development of an Android/iOS application", double-click "Android/iOS product management (Exercise)".
    3. 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 corrected project is available. This project contains the different windows that will be created in this lesson. To open the corrected 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)".
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 display in landscape mode via layouts.

Note

Layouts are used to define several views of a window in the same project without duplicating it.
This allows you to define:
  • a specific view for portrait mode,
  • a specific view for landscape mode,
  • a view specific to the phone,
  • a view specific to the tablet,
  • ...


  • To create a new layout:
    1. Open the "WIN_Product_form" window if necessary.
    2. On the "Window" tab, in the "Layouts" group, expand "Layouts" and select "Add layouts".
      Add layouts
    3. The layout creation wizard starts.
    4. Go to the next step of the wizard.
    5. 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
    6. Go to the next step of the wizard.
    7. 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
    8. Go to the next step of the wizard.
    9. 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
    10. 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:
    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. Click Automatic dissociation (in the upper-right corner of the main window, in the title bar) to enable the "automatic dissociation" mode. With this option, the changes made to a specific window in the layout will not be reflected in the other windows.
    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
  • 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 anchor".
      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 Anchor.
  • 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.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 27
Comments
Click [Add] to post a comment