PC SOFT

ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Home | Sign in | English EN
This page concerns the 270056D version of WINDEV Mobile 27. Update your version.
  • In this lesson you will learn the following concepts
  • Overview
  • Choosing a screen resolution depending on the device
  • Window orientation
  • Practical example
  • Touch gestures
  • Practical example
  • The different types of controls
Lesson 2.3. Interface (UI)
In this lesson you will learn the following concepts
  • Choosing a screen resolution depending on the device.
  • Window orientation.
  • Touchscreen management.
Lesson duration

Estimated time: 30 mn
Previous LessonTable of contentsNext Lesson
Overview
WINDEV Mobile allows you to easily create interfaces that adapt to the device used:
  • For Android, applications can be used both on phones and tablets.
  • For iOS, applications can be used on phones (iPhone), tablets (iPad) and iPods.
Choosing a screen resolution depending on the device
When you create a project, you will need to choose the resolution of the project windows. There are several cases:
  • You are using a single target device: in this case, you can simply create a specific iOS or Android project for the target device. You will be able to select the desired target device in the project creation wizard. The window creation wizard will propose windows for this device only.
  • You don't know the target device: in this case, select "Generate an application for phones and tablets" in the project creation wizard. When creating the windows, you can:
    • develop your windows for phones. The content will adapt to tablets thanks to the anchors set on the controls in the window (recommended).
    • use layouts to create different interfaces depending on the runtime platform and its resolution.
    • develop 2 sets of windows, one for phones, one for tablets.
Window orientation
In Android or iOS, windows 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 can be set in the "UI" tab of the window description ("Description" in the context menu of the window).
Window description
In the two last cases, no specific operation is required.
For a free window, the layout and size of the controls must adapt to the orientation. It is recommended to use anchors to get the desired result.

Practical example

  • Open "My_iOS_Android_Project" (the project we created in lesson 2.1):
    1. Go to the WINDEV home page (Ctrl + <).
    2. On the home page, click "Open a project", then in "Recent projects", double-click "My_iOS_Android_Project".

      Answers

      A corrected project is available. This project allows you to follow this lesson. To open the corrected project, go to the home page and click "Tutorial", then in "Part 2 - Lesson 2.1 - My first Android/iOS application", double-click "My Android/iOS project (Answers)".
In our example, the project was created for a phone and was tested in portrait mode in the simulator.
We will test it in landscape mode in the simulator.
  • Test the project in simulator mode:
    1. Select the Android or iOS configuration (the images in this lesson were taken in Android configuration).
    2. In the quick access button area, expand "GO" if necessary and select " Test in simulator mode Debug on XXX simulator".
      Test in simulator mode

      Note

      By default, the project test on a mobile device is available in 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 in the quick access buttons.
    3. Validate (if necessary) the window that opens up.
    4. The window is displayed in portrait mode.
    5. The simulator shows an icon-based menu: Simulator menu.
    6. Change the window orientation with the "Rotation" option ( Change window orientation ).
    7. 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 will make changes to our window to center the "Show" Button control and keep it 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" tab, in the "Centering and distribution" group, click "Center in the parent (Horz.)".
  • To keep the Button control centered in the window, we will set anchors:
    1. Select the control if necessary.
    2. Right-click to open the context menu.
    3. Select "Anchor": the anchor selection window appears:
      Anchors
    4. Select "Horizontally centered" and validate ("OK" 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.
  • Test the project on the simulator (click Test project in the quick access buttons):
    • The button is centered in portrait mode.
    • Change the orientation of the simulator.
    • The button remains centered in landscape mode.
Touch gestures
One of the important aspects of a mobile application interface is touch gesture support.
The "multi-touch" technology allows users to interact with a device via multiple touch points.
Handling images is one of the most common uses of the multi-touch technology. Since mobile devices usually have smaller screens, sometimes it is necessary to zoom and move images.
This technology allows you to zoom images with a pinch gesture.
To use "multi-touch" gestures, WINDEV Mobile includes:
  • Specific options available in the Image control.
  • Specific WLanguage functions.
  • Specific optional WLanguage events.
For more details, see Multi-touch support.

Practical example

  • Open "My_iOS_Android_Project" (the project we created in lesson 2.1):
    1. Go to the WINDEV home page (Ctrl + <).
    2. On the home page, click "Open a project", then in "Recent projects", double-click "My_iOS_Android_Project".

      Answers

      A corrected project is available. This project allows you to follow this lesson. To open the corrected project, go to the home page and click "Tutorial", then in "Part 2 - Lesson 2.1 - My first Android/iOS application", double-click "My Android/iOS project (Answers)".
  • In the "WIN_Welcome" window, create an Image control:
    1. On the "Creation" tab, in the "Usual controls" group, click "Image".
    2. The Image control appears in creation mode under the cursor.
    3. In the window, move the cursor to the position where you want to create the control. 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 Image context menu, "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 to the suggested directory".
    7. Go to the "Details" tab: the available multi-touch options appear:
      Image control description
    8. Select "Automatic scroll and zoom".
    9. Validate the control description window.
    10. Save the window (click Save element in the quick access buttons).

      Note

      Multi-touch support cannot be tested in the simulator. To check this feature, the application must be tested (or deployed) on the mobile device.
    11. Close the project.
The different types of controls
WINDEV Mobile offers multiple controls. These controls allows you 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 or iOS windows,
  • the Map control to view a position on a map or an itinerary,
  • the Ad control (Android only) to display an ad banner,
  • the menu as an "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 27
Comments
Click [Add] to post a comment