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
  • Required configuration
  • Required configuration for Android
  • Required configuration for iOS
  • My first project
  • Creating the project
  • My first window
  • Overview
  • Creating the window
  • Displaying a message
Lesson 2.1. My first Android/iOS project
In this lesson you will learn the following concepts
  • Required configuration.
  • Creating an Android/iOS project.
  • My first window.
Duration

Estimated time: 1 h
Previous LessonTable of contentsNext Lesson
Overview
To start developing with WINDEV Mobile, we will simply create our first project. It will be a cross-platform project intended for Android and iOS. Most of the time, when developing an application for Mobile, this application must operate both on Android and on iOS.
With WINDEV Mobile, there is no need to develop two different projects, to maintain them and to make them evolve in parallel. All you have to do is create a single project associated with several platforms, e.g., Android and iOS: it is a cross-platform project. The platforms will be differentiated only when the application is generated and deployed.

Note

In this tutorial, we have chosen to create a cross-platform project. WINDEV Mobile also allows you to create:
  • A project only for Android,
  • A project only for iOS.
The creation of Android or iOS-only projects is similar to the process presented in this lesson.
We will create a project containing a window used to display a message.
But before creating our first project, let's take a look at the configuration required to develop an Android and/or iOS application.
Required configuration

Required configuration for Android

To develop an application for the Android platform, the following elements must be installed on the development computer:
  • The JDK: The JDK (Java Development Kit) distributed by Oracle is used to compile the generated Java files.
  • The Google Android SDK: The Android SDK (Software Development Kit) is a set of files and applications distributed by Google in order to allow the compilation of applications for the Android operating system.
    Caution: The Android SDK includes sections corresponding to the versions of device platforms (5, 6, 7, ...).
    The download and setup of the Android SDK are proposed if necessary when generating the Android application from WINDEV Mobile.
  • Gradle tool: This tool is required to compile and generate Android applications. Gradle can be downloaded and installed if necessary when generating the Android application from WINDEV Mobile.
See Installing tools for Android development for more details (download addresses, etc.).
We advise you to restart the computer once JDK and SDK have been installed.

Required configuration for iOS

To develop a WINDEV Mobile application for iPhone/iPad, you need:
  • 1 PC
  • 1 Mac
  • 1 iPhone and/or iPad (optional)

Why a PC?
WINDEV Mobile 26 is a Windows application that runs on Windows Vista, 7, 8, 10.
The application will be created on PC before it is compiled on Mac (project, analysis, windows, etc.).
You don't need to install any Mac/Apple tool.

Why a Mac?
A Mac is required because the project generated on PC must be compiled in a specific compiler to generate iOS applications. The minimum operating system version required is MacOs Catalina.
Xcode is the Mac compiler for generating programs that run on iOS (i.e. on iPhone and iPad).
The minimum recommended version of Xcode is version 11.
See Compiling a WINDEV Mobile project in Xcode for more details (download addresses, etc.).
My first project

Creating the project

We will create our first project for Android and iOS.

Answers

A corrected project is available. To open this project:
  1. Go to the WINDEV Mobile home page (Ctrl + <).
  2. Click "Tutorial", then in "Part 2 - Lesson 2.1 - My first Android/iOS application", double-click "My Android/iOS project (Answers)".
  • To create an Android / iOS cross-platform project:
    1. Start WINDEV Mobile 26.
    2. Go to the WINDEV Mobile home page (Ctrl + <).
    3. On the home page, click "Create a project" then "Android or iOS application".
      Home page
    4. The project creation wizard starts. The different steps of the wizard will help you create your project. The information specified in this wizard can be modified later.

      Note

      Tip: Another method for creating a project:
      1. Click Create an element in the quick access buttons of the WINDEV Mobile menu
      2. The element creation window appears: click "Project".
    5. The first step of the wizard allows you to define the project execution platform:
      Execution platform
      In our case, select "Android and iOS cross-platform" and go to the next step.
    6. The wizard proposes to create a blank project or a project based on an example. Choose "Create a blank project" and go to the next step.
    7. The wizard proposes to choose the type of target devices of the project:
      • Generate an application for phones and tablets.
      • Generate an application for phones.
      • Generate an application for tablets.

        Note

        If the application is intended to operate on several Android and/or iOS devices (e.g. phones of different sizes or different 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 (see Lesson 2.2 Interface (UI) and Lesson 5.2 Developing the application) will allow the application to operate on all devices.
        Choosing devices
    8. In this example, we are going to generate an application for phones. Select "Generate an application for phones" and go to the next step.
    9. The wizard prompts you to enter the project name, location and description. We will name our project "My_iOS_Android_Project". WINDEV Mobile proposes to create this project in "\My Mobile projects\My_iOS_Android_Project". You can keep this location or modify it via the [...] button.
      Project creation wizard
    10. Go to the next step.
    11. The wizard proposes to add documents. Go to the next step.
    12. This step allows you to use the Source Code Manager (SCM). We will not use it in this example. Select "No, do not use SCM". Go to the next step.

      Express

      Remark: The Source Code Manager (SCM) is not available in Express version.
    13. This step is used to define the code style. Don't modify the suggested options. Go to the next step.
    14. This step allows you to define the style book of the application. We will choose "Material Design Blue 2".
      Style book selection
    15. The other steps of the wizard are not important for our first project. Click "Finish" directly. The project is automatically created.
    16. The element creation window appears. This window is used to create all elements that can be associated with a project.
My first window

Overview

The first window allows the user to display a welcome message via the "Display" button.
You may think this is too basic but we advise you to create this window. You may be surprised by how intuitive and how easy it is to use the editor of WINDEV Mobile. Furthermore, this window will allow you to discover concepts that are fundamental for the rest of this tutorial and to see the entire process for developing an Android/iOS application with WINDEV Mobile.

Creating the window

  • To create the window:
    1. In the window for creating a new element, click "Window" then "Window".

      Note

      As a new project was created, the window for creating a new element is automatically displayed.
      To open the element creation window, simply click Create a new element among the WINDEV Mobile quick access buttons:
      Quick access buttons
    2. The window creation wizard starts.
    3. In the list of proposed windows, select "Blank". The skin template used is displayed at the bottom right of wizard. "Material Design Blue 2", the skin template selected during the project creation is selected by default.

      Note

      Skin templates allow you to quickly create outstanding interfaces. A skin template defines the window style as well as the style of all controls that will be used in this window. Thus, the interface will always be cohesive and beautiful.
    4. Validate. The window is automatically created in the editor. The save window appears. This window is used to specify:
      • the element title. For a window, this title will be displayed in the Action Bar.
      • the element name that corresponds to the window name. This name will be used in programming.
      • the element location. This location corresponds to the directory in which the physical file corresponding to the element is saved. The window is a "WDW" file, saved in the project directory.
    5. Specify the title of the element: "Welcome". The name of the element is automatically proposed: "WIN_Welcome".
      Saving an element

      Note

      Let's take a look at the window name proposed by WINDEV Mobile: this name starts with the letters "WIN_". This prefix is automatically added because the project uses a code style.
      The code style is used to define a prefix for each type of object, allowing you to quickly identify the element:
      • a window starts with "WIN_",
      • a button starts with "BTN_",
      • etc.
      If you do not want to use this code style, you can simply disable it: on the "Project" pane, in the "Other actions" group, expand "Code style" and uncheck "Use code style"
    6. Save the window by clicking "OK".
    7. The window is displayed in the window editor. This window is composed of multiple areas:
      • The system bar, which shows the time.
      • The Action Bar. The "Actions Bars" replace the title bar of a window and are used to display multiple information: the application icon, the window title, some menu options, the window drop-down menu.
      • The content area of the window, which will contain the different controls of the application.

Displaying a message

You are now going to create a Button control used to display a message.

  • To create the "Display" Button control:
    1. On the "Creation" pane, in the "Usual controls" group, click Create a Button control. The control appears in creation mode under the mouse pointer.
    2. Move the mouse to the position where the control is to be created (e.g. at the top of the window). To drop the control in the window, simply click on the window.
    3. Right-click the control that was just created. The context menu of the control appears. Select "Description" in this context menu. The Button control description window appears.
  • Enter the following control details:
    Description of the Button control
    1. The control name: "BTN_Display".
    2. The control caption: "Display".

Note

To modify the name and caption of the Button control, we have used the control description window (also called "7-tab window").
The control name and caption can also be modified from the window currently being edited:
  1. Click the control to select it.
  2. Press the Enter or Space key: the text can be edited.
  3. Type the new caption and validate.
  • Validate the control description window ("OK"). The new control caption appears in the window editor.
  • We are going to display a message in a dialog box (a small window proposed by the system). To do so, we will use a WLanguage function: Info.

    Note

    The programming language supplied with WINDEV Mobile is named WLanguage. It is a 5th-generation language (5GL) that includes highly sophisticated commands.
    1. Select the control if necessary.
      Remarks:
      • When the control is selected, several handles appear around the control.
      • To select a control, simply click on it.
    2. Open the context menu of the control (right click).
    3. Select "Code". This option opens the code editor of WINDEV Mobile, in which all WLanguage statements can be typed.

      Note

      The code editor proposes different events for each type of control. These are the WLanguage events related to the control.
      Therefore, two events are displayed for the "Button" control:
      • "Initializing", run when the window is displayed.
      • "Click", run when the user clicks on the control.
      Remark: Additional events can be added if necessary.
    4. Write the following WLanguage code In the "Click" event of the "BTN_Display" control:
      Info("Hello")
Remark on the assisted input: When the first two characters are typed, WINDEV Mobile opens a list with all the WLanguage elements that contain these characters. The assisted development is a very powerful feature. No more mistakes when entering the name of an element: the syntax errors are reduced. Simply select the desired word and press Enter to validate. You can focus on the algorithm.

Note

When typing this WLanguage code in the code editor, you probably noticed that the different elements use different colors. This is called syntax highlighting. The code editor allows you to easily identify the different elements handled by the code:
  • the WLanguage functions are colored in blue,
  • the character strings (between quotes) are colored in purple,
  • the names of controls are colored in cyan.
These colors can be modified element by element in the options of the code editor (on the "Home" pane, in the "Environment" group, expand "Options" and select "Options of the code editor").

Info displays the message passed as parameter.

  • Save the changes by clicking Save the element in the quick access buttons or by pressing Ctrl + S.
  • Close the code editor ("X" in the upper-right corner of the code editor). The window editor is redisplayed.
We will test this project in the following lesson.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 26
Comments
Click [Add] to post a comment