PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
  • This lesson will teach you the following concepts
  • Overview
  • Necessary configuration for Android
  • My first project
  • Creating the project
  • My first window
  • Overview
  • Creating the window
  • Displaying a message
  • First test
  • First deployment on the device
  • Principle
  • Implementation
Lesson 2.1. My first Android project
This lesson will teach you the following concepts
  • Required configuration.
  • Creating an Android project.
  • My first window.
  • My first test.
  • First deployment.
Duration

Estimated time: 1 h
Previous LessonTable of contentsNext Lesson
Overview
To start developing with WINDEV Mobile for an Android platform, we are going to create a first project. This project will contain a window used to display a message.
This first example will present the main concepts of development for Android with WINDEV Mobile.
Before creating our first project for Android, the development computer must be configured.
Necessary 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 Android SDK of Google: 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 (4, 5, 6, 7, ...).
    The download and the setup of 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, ...).
We advise you to restart the computer once JDK and SDK have been installed.
My first project

Creating the project

We are now going to create our first project for Android.

Answer

A corrected project is available. To open this project:
  1. Display the WINDEV Mobile home page (Ctrl + <).
  2. Click "Tutorial" and select "My Android project (Answer)".
  • To create a project:
    1. Start WINDEV Mobile 24 (if not already done).
    2. Display the WINDEV Mobile home page if necessary (Ctrl + <).
    3. In the home page, click "Create a project" then "Android application".
      Home page
    4. The wizard for project creation starts. The different wizard steps help you create your project. The information specified in this wizard can be modified later.

      Note

      Tip: Other method for creating a project:
      1. Click New among the quick access buttons of WINDEV Mobile menu.
      2. The window for creating a new element is displayed: click "Project".
    5. The first wizard step is used to type the project name, its location and its description. In our case, this project will be named "My_Android_Project". WINDEV Mobile proposes to create this project in the "\My Mobile projects\My_Android_Project" directory. You can keep this location or modify it via the [...] button.
      Project creation
    6. Go to the next step via the arrows found at the bottom.
    7. The wizard proposes to add documents. Go to the next step via the arrows found at the bottom.
    8. 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.
    9. The wizard proposes to choose the type of Android devices affected by the project:
      • Generate an application for phones and tablets.
      • Generate an application for phones only.Generate an application for phones.
      • Generate an application for tablets only.Generate an application for tablets.
      • Generate an application for a specific device.

        Note

        If the application is intended to operate on several Android devices (phones with different sizes or resolutions for example), we advise you to use one of the following options: "Generate an application for phones and tablets", "Generate an application for phones only" or "Generate an application for tablets only".If the application is intended to operate on several Android devices (phones with different sizes or resolutions for example), we advise you 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 application windows. Using anchors (see Lesson 2.2 Interface (GUI) and Lesson 5.2 Developing the application) will allow the application to operate on all devices.
        Choosing devices
    10. In this example, we are going to generate an application for phones. Select "Generate an application for phones only" and go to the next stepIn this example, we are going to generate an application for phones. Select "Generate an application for phones" and go to the next step.

      Note

      You own an Android device and you want to run the application test on this device? Select "Generate an application for a specific device". The wizard next step is used to select the requested device.
    11. 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.
    12. This step is used to define the programming charter. Don't modify the suggested options. Go to the next step. This step is used to define the code style. Don't modify the suggested options. Go to the next step.
    13. This step is used to define the style book of application. We will keep "Material Design Blue Grey".
      Choosing the style book
    14. The other wizard steps not being important for our first project, click "End" in the left section of wizard.
    15. Click the validation button at the bottom of wizard. The project is automatically created.
    16. The window for creating a new element is displayed. 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 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 display the window for creating a new element, all you have to do is click New among the quick access buttons of WINDEV Mobile:
      New element
    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. The "Material Design Blue Grey" skin template that was selected when creating the project is selected by default.

      Note

      The 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. No ugly interface anymore.
    4. Validate. The window is automatically created in the editor. The window for saving an element is displayed. This window is used to specify:
      • the element title. For a window, this title will be displayed in the Action Bar of window.
      • 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".
      Save 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 is using a programming charter.
      The programming charter 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.
      You have the ability to disable this charter if you don't want to use it: on the "Project" pane, in the "Other actions" group, expand "Charter" and uncheck "Use the charter".
      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 is using 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. Click on the green button to save the window.

Displaying a message

You are now going to create a button used to display a message.
  • To create the "Display" button:
    1. On the "Creation" pane, in the "Usual controls" group, click Creating a button. The button appears in creation under the mouse.
    2. Move the mouse toward the position where the control will be created in the window (at the top of window for example). To drop the control in the window, all you have to do is perform a click in the window.
    3. Perform a right mouse click on the control that was just created. The popup menu of control is displayed. Select "Description" from this popup menu. The description window of the Button control appears.
  • Modify the control characteristics by typing the following information:
    Describing a button
    1. This control is named: "BTN_Display".
    2. The control caption is: "Display".

Note

To modify the button name and caption, we have been using the description window of control (also called "7-tab window").
The button name and caption can also be modified from the window currently in edit:
  1. Click the control to select it.
  2. Press the Enter or Space key: the caption becomes editable.
  3. Type the new caption and validate.
  • Validate the description window of control (green button). 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 be using our first 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 the edit control, all you have to do is click it with the mouse.
    2. Display the popup menu of control (right mouse 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 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 button.
      Note: Additional events can be added if necessary.
    4. Write the following code In the "Click" event of the "BTN_Display" control:
      Info("Hello")
Note about the assisted input: As soon as the first two characters are typed, WINDEV Mobile proposes all words of WLanguage vocabulary containing these characters. The assisted development is a very powerful feature. No more mistake when typing an element name: the syntax errors are reduced. All you have to do is select the requested word and press Enter to validate. You can focus on the algorithm.

Note

When typing this code in the code editor, you have noticed that different colors are used by the different elements. This is the syntactic coloring. 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 code editor (on the "Home" pane, in the "Environment" group, expand "Options" and select "Options of the code editor").
Info displays the message passed in parameter.
  • Save the modifications by clicking Save among the quick access button or by pressing Ctrl + S.
  • Close the code editor (cross at the top right of code editor). The window editor is redisplayed.
First test
For an Android application, WINDEV Mobile allows you to run the application test on the development computer via the simulation mode. This test simulates an Android device on the development computer. This test is useful when no Android device can be used by the developer. However, this test does not allow you to use the hardware components of device (GPS, SMS, camera, ...).

Note

WINDEV Mobile also allows you to run a test of the application via the Android emulator (AVD) supplied with the SDK.
See Test with Android emulator for more details.
  • We will now run the window test in simulation mode.
    1. Click Window Go among the quick access buttons (or press F9).
    2. Validate (if necessary) the information message regarding the simulator mode.
    3. Choose (if necessary) the management mode of editor during the test (editor minimized or not).
    4. The created window is started in execution.
    5. Click the "Display" button.
    6. Validate the system window that is displayed.
      Window test
  • Any developer knows that running a program test can be a long and tiresome job. In WINDEV Mobile, a SINGLE CLICK allows you to run the test of window, report or procedure while you are creating it. This is both simple and fast!
  • Click the "x" button found in the simulator shell to close the window.
  • The WINDEV Mobile editor is redisplayed.
First deployment on the device

Principle

To run the application in stand-alone mode on the Android device, you must:
  • Connect the device via a USB port.
  • Generate the application. An "apk" file will be created. This file contains all elements required to run the application on an Android device.
  • Select your device at the end of generation. Copying the application ("apk" file) can take several seconds.
Let's take a look at these different steps.

Note

Caution: Enabling the USB debugging is required to run tests on the phone. If this operation is not performed, the phone will not be detected by WINDEV Mobile.
To enable the USB debugging:
  1. On the phone, select the "Parameters" menu.
  2. Select "About the device".
  3. Click "Build number" several times to enable the developer mode.
  4. Move one level up.
  5. The "Development option" choice appears. Select this option.
  6. Check "USB debugging".
Note: The operations to perform may change according to the phone version and to its make. For example, for a Samsung Galaxy Notes 3, you must "tap" several times the "Version number" control found in the "About the device" option in order to enable "Development option". In any case, a Google search with "usb debugging <device name>" allows you to get the operating mode adapted to the device used.

Implementation

  • To generate the Android application:
    1. On the "Project" pane, in the "Generation" group, click "Generate" (you also have the ability to click Android generation among the quick access buttons).
    2. WINDEV Mobile proposes to select the first project window. In our example, select "WIN_Welcome" and validate (green button).
      First window
    3. The wizard for generating an Android application starts.
    4. The first wizard step consists in checking the tools required to generate the Android application.
      Generation tools
      The wizard proposes to:
      • Download and automatically install the Android SDK and Gradle: in this case, you will only have to validate the license. WINDEV Mobile takes care of everything. If an update is available, the generation wizard will automatically propose to perform the necessary updates. Only an Internet connection is required. This option is available only if Gradle was not downloaded and installed beforehand.
      • Use the tools automatically installed. This option is available if the tools have been downloaded and installed during a previous generation.
      • Specify the location of tools already installed on your computer. In this case, all you have to do is specify the setup paths of Gradle and Android SDK.
    5. Select the option corresponding to your configuration and go to the next step.
      Note: If you have chosen to download and install the tools, going to the next step may be quite long and you may have to validate the license.
    6. The next wizard step is used to:
      • define the application name (displayed below the icon used to start the application) and the corresponding package.
      • select the application icon in the image catalog of WINDEV Mobile.
        General information
    7. Go to the next step by clicking the arrow keys at the bottom of window. This step is used to define:
      • the application splash screen,

        Express

        Note: The application splash screen is not available in Express version.
      • the information saved in the manifest,
      • the options of the application:
        • the start mode of application (when starting the device or not).
        • the management of maximized windows (multi-window management or not).
    8. Go to the next step. The wizard is used to define the version number of application.
    9. Go to the next step. This step is used to sign the application. The wizard proposes a generic signature that can be used for the application tests. A specific signature is required to distribute the application.

      Express

      Note: The application signature is not available in Express version.
    10. Go to the next step. The wizard allows you to include specific files (data files, images, ...). This possibility will not be used in our example. Keep the default options.
    11. Go to the next step. The wizard allows you to include specific libraries. Keep the default options.
    12. Go to the next step. The wizard is used to include remote dependencies used by the project. Keep the default options.
    13. Go to the next step. The wizard is used to define the application permissions. By default, according to the WLanguage functions used in the application, WINDEV Mobile detects the necessary permissions.
    14. Go to the next step. You have the ability to restrict the download of the application on Google Play Store to the devices equipped with the features used. Keep the default options.
    15. Go to the next step. The wizard is used to configure the options of Android SDK. Keep the default options.
      Advanced configuration
    16. Go to the next step.
    17. End the wizard. The generation is automatically performed in background task. The Generating icon indicates that the generation is in progress.
    18. When the generation is ended, a popup window is displayed in the editor:
      Completed generation

      Note

      This window can be displayed at any time by clicking the Generation icon.
    19. To copy and run the application on the device linked to the computer or on an emulator, click “Deploy”.
    20. A new window is displayed, allowing you to select the runtime device. If you own an Android device connected to the development computer, select the device connected to the PC.
That's it, our first application is generated and run on the Android device.

Note

In this lesson, we ran a window test in the simulator. WINDEV Mobile allows you to run several types of tests of the entire application.
You can test your application:
  • in the simulator proposed by WINDEV Mobile: select " Debug on Generic Android Phone Simulator" among the quick access options. This option allows you to quickly test the project on the PC. This is the option we use in this tutorial.
  • directly on the mobile phone (default option): select " Test on mobile device" among the quick access options: the generation will be performed and the application will be copied and run on the cell phone connected to the current computer. You can test the application directly on your device.
  • in an Android SDK emulator: select " Test on Android SDK emulator" among the quick access options: the generation will be performed and the application will be copied and run in an emulator of the Android SDK.
Run project test
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 24
Comments
Click [Add] to post a comment