PC SOFT

ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Home | Sign in | English EN
New WINDEV Mobile 26 feature!
  • In this lesson you will learn the following concepts
  • Overview
  • Choosing a screen resolution depending on the device
  • Window orientation
  • Practical example
  • Touchscreen management
  • 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 creating a project, you will have to choose the resolution that will be used for 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 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 "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 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. 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 proposed 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 among 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 ( Changing the 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 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. Right-click to open the context menu.
    3. Select "Anchor": the window for defining anchors is displayed:
      Set 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 simulator.
    • The button remains centered in landscape mode.
Touchscreen management
One of the important aspects of a mobile application interface is touchscreen management.
A "multi-touch" feature allows the user to interact with a device with multiple touch points.
Handling images is one of the most common uses of the multi-touch feature. 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 WLanguage events.
For more details, see Managing multi-touch.

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" 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 Context 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. Go to 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 element in the quick access buttons).

      Note

      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.
    11. 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 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 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 26
Comments
Click [Add] to post a comment