PC SOFT

WINDEV, WEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
  • This lesson will teach you the following concepts...
  • Overview
  • Using anchors
  • Running the application test
Lesson 5.3. Managing the orientation of windows with the layouts
This lesson will teach you the following concepts...
  • The benefit of anchors.
  • Creating a layout.
  • Using a layout.

Estimated time: 15 mn
Previous LessonTable of contentsNext Lesson
Overview
In most cases, an application for mobile can be used in portrait mode and in landscape mode.
The interface of a window used in portrait mode can be changed to be used in landscape mode.
WINDEV Mobile manages the change of device orientation via anchors.
Most of the time, the anchors are sufficient to adapt the display to the different orientations.
However, if the interface must change according to the orientation (different positioning of controls in portrait mode and in landscape mode for example), the anchors are not sufficient.
To manage a different interface in portrait mode and in landscape mode, WINDEV Mobile gives you the ability to use layouts.
  • To follow this lesson, open (if necessary) the "WM Managing Products" project that was created in the previous lesson.

Answer

If the "WM Managing Products" application was not created, a corrected project is available. This project allows you to follow this lesson.
To open this intermediate project, in the WINDEV Mobile home page (Ctrl + <), click on "Tutorial" and select "iOS/Android application (with windows)".
A corrected project is also available. This project groups all windows developed in this lesson.
To open this corrected project, in the WINDEV Mobile home page (Ctrl + <), click on "Tutorial" and select "iOS/Android application (Answer)".
Using anchors
  • The anchors have already been used in the "WIN_Product_form" window. In test mode, we get the following interfaces:
All controls found in portrait mode are also displayed in landscape mode but a lot of space is not used and the window must be scrolled to access all controls.
We are going to improve the display in landscape mode via layouts.

Remark

The layout is 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 the portrait mode,
  • a specific view for the 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".
    3. The wizard for creating a layout starts.
    4. Go to the next wizard step.
    5. The wizard proposes to manage the differences between the phone and the tablet. The tablets are not used in our example. Keep "This window will be displayed on phone only".
    6. Go to the next wizard step.
    7. The wizard proposes to manage the Portrait/Landscape orientation of application. That's what we are going to do in this example: check "Create layouts. I need to modify the layout of controls according to the orientation".
    8. Go to the next wizard step.
    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".
    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 landscape mode:
    1. Double-click the thumbnail of "Landscape - MultiOS Phone" layout: the window corresponding to this layout is displayed in the middle of the editor.
    2. Click (top right corner of main window, in the title bar) to enable the "automatic dissociation" mode. Via this option, any modification performed on one of the specific windows of layout will not be applied to the other ones.
    3. We are going to modify the position of controls in the layout:
      • Select the control corresponding to the product photo as well as the two buttons and move them to the left of window.
      • Select the "Name" and "Reorder date" controls and position them on the right of photo and buttons. Resize the controls if necessary.
      • Select the "Price" and "Quantity" controls and move them below the product photo on the left.
      • Select the "Bar code" control as well as its button and position them on the right of price.
      • Select the "Description" control and position it on the right of quantity. Reduce the control height if necessary.
  • Select the Image control. The Image control as well as the two buttons are enclosed by a red line. Indeed, an anchoring conflict occurs with the Name control.
  • Therefore, we are going to modify the anchor of these controls:
    1. Select the Image control and the two buttons.
    2. Display the popup menu and select "Layouts .. Dissociate the anchor".
    3. Define the new anchor that will be applied to the controls:
      • Display the popup menu of the controls and select "Anchor".
      • In the window that is displayed, select .
  • You get the following interface:
Running the application test
  • To run the project test:
    1. Click on among 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 in the simulator, then by selecting the "Rotation" option from the popup menu.
    6. The layout that was defined for the landscape mode is automatically displayed:
    7. Close the test window of application.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 24
Comments
Click [Add] to post a comment