PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
  • 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 (GUI)
This lesson will teach you the following concepts
  • Choosing the resolution according to the device.
  • Window orientation.
  • Touchscreen management.

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 device orientation,
  • Locked in portrait mode,
  • Locked in landscape mode.
This orientation is defined in the "GUI" tab of the description window of window ("Description" from the popup menu of window).
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, on the "Home" pane, in the "Online help" group, expand "Tutorial" and select "My Android project (Answer)".
In our example, the project was created for a phone and its test was run in portrait mode in the simulator.
We are now going to run its test in landscape mode in the simulator.
  • Run the project test ( among the quick access buttons).
    1. The window is displayed in portrait mode.
    2. In the simulator, click the menu in the shell ( ).
    3. A popup menu is displayed. Modify the window orientation with the "Rotation" option.
    4. The window orientation changes on the screen. In our example, the button location does not change: it does not adapt to the screen orientation.
  • We are now going to modify our window in order for the "Display" button to be centered in the window and to remain centered regardless of the device orientation.
  • Stop the test and go back to the editor.
  • To center the button in the window:
    1. Select the button (click the button).
    2. On the "Alignment" pane, in the "Centering and distribution" group, click "Center in the parent (horz)".
  • In order for the button to remain centered in the window, we are going to use the control anchoring:
    1. Select the button (click the button).
    2. Display the popup menu (right mouse click).
    3. Select "Anchor": the window for defining anchors is displayed:
    4. Select "Horizontally centered" and validate (green button).

      Note

      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 ( 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 "multitouch" 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, on the "Home" pane, in the "Online help" group, expand "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 under the mouse.
    3. Move the mouse in the window toward the position where the control will be created. To drop the control in the window, all you have to do is perform a new left mouse click.
    4. Double-click the Image control: the description window of control is displayed.
    5. In the "General" tab, select an image found on your disk in the "Image" edit control (via the button).
    6. If the image is found in a directory other than the project directory, WINDEV Mobile proposes to copy the image file into the project directory. Accept by clicking the "Copy the file into the suggested directory" button.
    7. Display the "Details" tab: the options for multi-touch management are displayed:
    8. Select "Automatic scroll and zoom".
    9. Validate the description window of control.
    10. Save the window (click among the quick access buttons).
    11. A GUI error appears in the error pane: the automatic window scrollbars are in conflict with the scrolling features of Image control.
    12. To avoid this GUI error, disable the window scrollbars:
      • Display the description window of window ("Description" from the popup menu).
      • In the "GUI" tab, uncheck "Automatic scrollbars".
      • Validate the description window.
    13. Save the window (click among the quick access buttons). The GUI error disappears.

      Note

      The multi-touch management cannot be checked in the simulator. To check this feature, the application must be 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 zones to create GUI 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 "Developing an Android and iOS application" lesson.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 23
This page is also available for…
Comments
Click [Add] to post a comment