PC SOFT

ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Home | Sign in | English EN
New WINDEV Mobile 26 feature!
  • In this lesson you will learn the following concepts...
  • Overview
  • Using anchors
  • Testing the application
Lesson 4.3. Managing the orientation of windows with 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 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 this window.
This gives you the ability 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" pane, 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 proposes to manage the differences between phone and tablet. The tablets are not used in our example. Keep the option "This window will be displayed on phone only".
      Phone/Tablet differences
    6. Go to the next step of the wizard.
    7. The wizard proposes to manage the Portrait/Landscape orientation of application. That's what we are going to do in this example: check the option "Create layouts".
      Portrait/Landscape differences
    8. Go to the next step of the wizard.
    9. The wizard proposes to use a different presentation for each platform used. In this example, the same presentation will be used for the Android platform and for the iOS platform. Select "No specific layout for each OS".
      Operating system
    10. Validate the wizard.
  • Two layouts are created in our example. These layouts are displayed in thumbnail format, on the right of the "WIN_Product_form" window.
  • We are going to 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. Via this option, any modification made to one of the specific windows of the layout will not be applied to the other windows.
    3. We are going to modify the position of the controls in the layout:
      • Select the Image control corresponding to the product photo as well as 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 "Descr." 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 cod." 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 modify 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 26
Comments
Click [Add] to post a comment