PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
New WINDEV Mobile 25 feature!
  • This lesson will teach you the following concepts
  • Overview
  • Choosing the resolution according to the device
  • Window orientation
  • Practical example
  • Touchscreen management
  • Practical example
  • The different types of controls
Lesson 2.2. Interface (UI)
This lesson will teach you the following concepts
  • Choosing the resolution according to the device.
  • Window orientation.
  • Touchscreen management.
Lesson duration

Estimated time: 30 mn
Previous LessonTable of contentsNext Lesson
Overview
The Android system is available on the phones and on the tablets. WINDEV Mobile allows you to easily create interfaces that adapt to the device used.
Choosing the resolution according to the device
When creating a project, you will have to choose the resolution that will be used for the project windows. Two cases may occur:
  • You are using a single target device: in this case, all you have to do is select this device in the list proposed by the wizard.
  • You are using several target devices with different screen resolutions: in this case, you must choose the smallest resolution common to all devices. Via the anchoring of controls in the window, the content will be adapted to the resolution.
Window orientation
In Android, a window can have one of the following orientations:
  • Free: the window follows the orientation of the device,
  • Locked in portrait mode,
  • Locked in landscape mode.
This orientation is defined in the "UI" tab of the window description ("Description" from the window popup menu).
Window description
In the two last cases, no specific operation is required.
For a free window, the organization of controls and their size must adapt to the orientation. The anchoring mechanism must be used to get a proper result.

Practical example

  • Open (if necessary) the "My_Android_Project" project that was created in the previous lesson.

    Answer

    A corrected project is available. To open this project, in WINDEV Mobile's home page (Ctrl + <), click "Tutorial" and select "My Android project (Answer)".
In our example, the project was created for a phone and it was tested in portrait mode in the simulator.
We are now going to run its test in landscape mode in the simulator.
  • Run the project test in simulator mode:
    1. In the quick access button area, expand "GO" if necessary and select the option " Test in simulator mode Debug on Generic Android Phone simulator".
      Test in simulator mode

      Remark

      By default, the project test on a mobile device is proposed among the quick access buttons. After selecting " Debug on simulator Debug on simulator" for the first time, the corresponding icon ( Debug on simulator ) will be automatically proposed among the quick access buttons.
    2. Validate (if necessary) the window that opens up.
    3. The window is displayed in portrait mode.
    4. The simulator shows an icon-based menu: Simulator menu.
    5. Modify the window orientation with the "Rotation" option. Changing the window orientation
    6. The window orientation changes on the screen. In our example, the button location does not change: it does not adapt to the screen orientation.
      Window in portrait mode
      Window in landscape mode
  • We are now going to modify our window in order for the "Display" Button control to be centered and to remain centered regardless of the device orientation.
  • Stop the test and go back to the editor.
  • To center the Button control in the window:
    1. Select the control (click on the Button control).
    2. On the "Alignment" pane, in the "Centering and distribution" group, click "Center in the parent (Horz.)".
  • In order for the Button control to remain centered in the window, we are going to use the control anchoring:
    1. Select the control if necessary.
    2. Open the popup menu (right click).
    3. Select "Anchor": the window for defining anchors is displayed:
      Managing anchors
    4. Select "Horizontally centered" and validate ("OK" button).

      Remark

      In the window displayed in the editor, you will notice the little red arrows in the control. These arrows indicate that the control is anchored.
  • Run the project test on simulator ( Run project test among the quick access buttons):
    • The button is centered in portrait mode.
    • Change the orientation of simulator.
    • The button remains centered in landscape mode.
Touchscreen management
One of the most important aspects of the interface for a mobile application is the touchscreen management.
A "multi-touch" feature is a technique allowing the user to interact with a device via several contact points.
Handling images is one of the most common multi-touch features. The display size on a phone being reduced, it is often necessary to zoom an image and/or to move inside an image.
This allows you to perform a zoom on an image via the contact of 2 fingers moving apart.
To manage the "multi-touch", WINDEV Mobile proposes:
  • Specific options available in the Image control.
  • Specific WLanguage functions.
  • Specific optional processes.
See Managing the multi-touch for more details.

Practical example

  • Open (if necessary) the "My_Android_Project" project that was created in the previous lesson.

    Answer

    A corrected project is available. To open this project, in the WINDEV Mobile home page (Ctrl + <), click "Tutorial" and select "My Android project (Answer)".
  • In the "WIN_Welcome" window, create an Image control:
    1. On the "Creation" pane, in the "Usual controls" group, click "Image".
    2. The Image control appears in creation mode under the cursor.
    3. Move the mouse in the window toward the position where the control will be created. To drop the control in the window, simply click again.
    4. Double-click the Image control: the control description window is displayed.
    5. In the "General" tab, select an image from your disk in the "Image" edit control (via Popup menu of an image, "Browse").
    6. If the image is located in a directory other than the project directory, WINDEV Mobile proposes to copy the image file to the project directory. Accept by clicking "Copy file into the suggested directory".
    7. Display the "Details" tab: the options for multi-touch management are displayed:
      Describing the Image control
    8. Select "Automatic scroll and zoom".
    9. Validate the control description window.
    10. Save the window (click Save the element among the quick access buttons).
    11. A UI error appears in the error pane: the automatic window scrollbars are in conflict with the scrolling features of Image control.
    12. To avoid this UI error, disable the window scrollbars:
      • Open the window description ("Description" in the popup menu).
      • In the "UI" tab, uncheck "Automatic Scrollbars".
      • Validate the description window.
    13. Save the window (click Save the element among the quick access buttons). The UI error disappears.

      Remark

      The multi-touch management cannot be checked in the simulator. To check this feature, the application must be tested (or deployed) on the mobile device.
    14. Close the project.
The different types of controls
WINDEV Mobile proposes several controls. These controls are used to display or enter data. Some controls are specifically intended for a mobile interface.
To develop your applications, you can use the standard controls (edit controls, images, radio buttons and check boxes) but also more specific controls such as:
  • the Multiline Zone control to create interfaces (UI) similar to the native Android windows,
  • the Map control to view a position on a map or an itinerary,
  • the Ad control to display an advertising banner,
  • the menu in the shape of "Action bar".
Some of these controls will be presented in the lesson "Development of an application for Android and iOS".
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 25
Comments
Click [Add] to post a comment