PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

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 3.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: 20 mn
Previous LessonTable of contentsNext Lesson
Overview
The iOS system is available on the phones (iPhone), on the tablets (iPad) and on the iPod. 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 must choose the device on which the application will be deployed:
  • iPhone,
  • iPad,
  • iPhone and iPad.
Two cases may occur:
  • You know the target device: in this case, all you have to do is select it. The wizard for window creation will allow you to create windows for this target device.
  • You don't know the target device: in this case, in the wizard for project creation, select "iPhone and iPad". When creating the windows, you can:
    • develop your windows for iPhone. Via the anchoring of controls in the window, the content will be adapted to the iPad (recommended solution).
    • use the layouts to create different interfaces according to the runtime platform and to its resolution.
    • develop 2 sets of windows, one for iPhone, one for iPad.
Window orientation
In iPhone or iPad, 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 "UI" tab of the description window of window ("Description" from the popup menu of window).
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_iOS_Project" project that was created in the previous lesson.

    Answer

    A corrected project is available. This project contains the different windows created in this lesson. To open the corrected project, in WINDEV Mobile's home page (Ctrl + <), click "Tutorial" and select "My iOS project (Answer)".
In our example, the project was created for a phone, and we have tested it 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 (if necessary) " Run project test " and select " Debug on iPhone xxx simulator Debug on iPhone xxx simulator".
      Test modes

      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 Button control (click on the 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. Display the popup menu (right mouse click).
    3. Select "Anchor": the window for defining anchors is displayed:
      Anchor management window
    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 in simulator mode ( 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 events.
See Managing the multi-touch for more details.

Practical example

  • Open (if necessary) the "My_iOS_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 iOS 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, simply click again.
    4. Double-click the Image control: the description window of control is displayed.
    5. In the "General" tab, select an image from your disk in the "Image" edit control (via Popup menu, "Browse").
    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:
      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 controls.
    12. To avoid this UI error, disable the window scrollbars:
      • Display the description window of window ("Description" from 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 deployed on the mobile device. We will see how to proceed in the "Android and iOS: Deploying an application" section.
    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 iOS windows.
  • the Map control to view a position on a map or an itinerary.
Some of these controls will be presented in the "Android and iOS: Developing an application" lesson.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 25
Comments
Click [Add] to post a comment