New WINDEV Mobile 2024 feature!
Help / WINDEV Mobile Tutorial / Tutorial - My first Android/iOS application
  • Lesson 1 - My first Android/iOS project
  • Cross-platform project
  • Creating the project
  • First window: display a message
  • How to create the window?
  • Displaying a message
  • To sum up

Tutorial - My first Android/iOS application

Lesson 1 - My first Android/iOS project
We will cover the following topics:
  • My first Android/iOS project.
  • My first window.
Durée de la leçon 1 h
Cross-platform project
To start developing with WINDEV Mobile, we will create our first project. It will be a cross-platform project intended for Android and iOS. This project will only contain a window to display a message.
The platforms will be differentiated only when the application is generated and deployed.
We will see how to deploy an application in the following tutorials:
Creating the project
To start developing with WINDEV Mobile, we need to create a project. We will create our first project for Android and iOS.
This project will be used in the different lessons of this tutorial.
Caution: The project creation method was simplified in version 2024 Update 2. This page has been adapted to cover the new method.
To create a project, simply follow the steps of the project creation wizard:
  1. Start WINDEV Mobile if necessary.
  2. Go to the WINDEV Mobile home page (Ctrl + <).
  3. Click "Create a project" ( icon), then select "Android or iOS application".
    Home page
  4. The project creation wizard starts.
    The information specified in this wizard can be modified later.
  5. The first step of the wizard allows you to define the project execution platform:
    Execution platform
    We will create a cross-platform application. Select "Android and iOS cross-platform" and proceed to the next step.
  6. The wizard prompts you to choose the type of devices the project is intended for:
    Device selection

    If the application will run on different types of Android and/or iOS devices (e.g. phones of different sizes or resolutions), it is recommended to use one of the following options:
    • "Generate an application for phones and tablets",
    • "Generate an application for phones".
    In this case, WINDEV Mobile proposes the smallest resolution to create the windows of the application. Using anchors will allow the application to run on all devices.
  7. In this example, we are going to generate an application for phones. Select "Generate an application for phones" and go to the next step.
  8. The wizard then allows you to choose the style book. Select "Phoenix".
    Style book selection

    The style book is defined based on skin templates. Skin templates allow you to quickly create outstanding interfaces. A skin template defines the window style as well as the style of all the controls that will be used in the window. Thus, the interface will always be cohesive and beautiful.
  9. Go to the next step.
  10. The wizard prompts you to enter the project name and location. We will name our project "My_iOS_Android_Project". By default, WINDEV Mobile creates the project in ".\My projects\My_iOS_Android_Project". You can keep this location or change it via the [...] button.
    Project creation wizard
  11. Click "Done".
The following actions are automatically performed:
  • The project is automatically created.
  • Two project configurations are also created:
    • an "iOS application" configuration, which is automatically selected.
    • an "Android application" configuration.
    We will take a closer look at these project configurations later in this tutorial.
  • The new element window appears. It allows you to create all the elements that can be associated with a project. Don't close this window, we will use it to create the first window of the application.
First window: display a message
The first window allows the user to display a welcome message via the "Display" button.

How to create the window?

To create the window, we will use the window for creating new elements:
  1. In the "New" window, click "Window", then "Window". The window creation wizard opens.
  2. In the list of windows, select "Blank". Since the "iOS" configuration is selected by default, the wizard will prompt you to create a window for iPhone. The name of the skin template used is displayed at the lower-right section of the wizard.
  3. Confirm.
The window is automatically created in the editor. The save window appears. This window is used to specify:
  • the element title. This title will be displayed in the Action Bar of the window.
  • the element name (window name in this case). This name will be used programmatically.
  • the element location. This location is the directory where the element will be saved (by default, the project directory)
In this example:
  1. Specify the title of the element: "Welcome". The name of the element is automatically completed: "WIN_Welcome".
    Save an element
  2. Confirm.
    Key information:
    The window name (that will be used in the code) is created automatically from the element title. If you want, you can simply write a name different from the element title.
The window is displayed in the window editor. This window is composed of multiple areas:
  1. The system bar, which shows the time.
  2. The Action Bar. Action Bars replace the title bar of a window and display different types of information: the application icon, the window title, some menu options and the window drop-down menu.
  3. The content area of the window, which will contain the different controls of the application.

Displaying a message

The first window has now been created. We will now create a Button control to display a message.

To create the "Display" Button control:
  1. On the "Creation" tab, in the "Usual controls" group, click Create a Button control. The control appears in creation mode under the mouse pointer.
  2. Move the cursor to the position where you want to create the control (e.g. at the top of the window). To drop the control, simply click the window. The control appears with a box and sizing handles to indicate that it is selected.

    How to select a control?
    Simply click a control to select it. Selection handles then appear around the control. If the control is already selected, you can click the control again to edit the caption.
We will change the characteristics of this control:
  1. Right-click the control previously created. The context menu of the control appears. Select "Description" in this context menu. The Button control description window appears.
  2. Enter the following control details:
    Description of the Button control
    • The control name: "BTN_Display".
    • The control caption: "Display".
  3. Click OK to confirm changes in the control description window. The new control caption appears in the window editor.
To improve the UI of our first window, we will center the Button control in the window:
  1. Click the Button control to select it.
  2. On the "Alignment" tab, in the "Centering and distribution" group, click "Center in the parent (Horz.)".
  3. The result appears immediately.
If you don't know which alignment to choose, hover over the different options available in the "Alignment" tab. When you hover the mouse over an option, the controls selected in the window are automatically positioned and/or resized according to the hovered option.
To apply the alignment, click the option.
If you don't want to apply the alignment, simply exit the alignment options: the controls move back to their initial position.

In this lesson, we will display a message in a dialog box when the button is clicked. To do so, we will use the Info WLanguage function.
  1. Select the control (when the control is selected, sizing handles appear around it).
  2. Right-click the control to open its context menu.
  3. Select "Code". This option opens the WINDEV Mobile code editor, in which all WLanguage statements can be typed.
    The code editor lets you write all WLanguage instructions, organized in events associated with controls.
  4. Write the following WLanguage code in the "Click BTN_Display" event:
    Info displays the message passed as parameter.

Save the changes by clicking Save element in the quick access buttons or by pressing Ctrl + S.
Close the code editor (click the "X" icon in the upper-right corner of the code editor). The window editor appears again.
To sum up
In this lesson, we saw how to create a project, a window and a control: the main elements of an application.
In the next lesson, we will test the window.
Completed project:
If you want to check the end result of the steps described here, you can open a completed version of the project. This project contains the window we created in this lesson. To open the completed project, go to the home page and click "Tutorial", then in "Tutorial - My first Android/iOS application", double-click "My Android/iOS project - Answers".
Table of contentsNext Lesson
Minimum version required
  • Version 2024
Click [Add] to post a comment

Last update: 03/29/2024

Send a report | Local help