- This lesson will teach you the following concepts
- Necessary configuration for Android
- My first project
- Creating the project
- My first window
- Creating the window
- Displaying a message
- First test
- First deployment on the device
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.
Estimated time: 1 h
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 (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.
We advise you to restart the computer once JDK and SDK have been installed.
Creating the project
We are now going to create our first project for Android.
|A corrected project is available. To open this project: |
- Display the WINDEV Mobile home page (Ctrl + <).
- Click "Tutorial" and select "My Android project (Answer)".
- To create a project:
- Start WINDEV Mobile 25 (if necessary).
- Display the WINDEV Mobile home page if necessary (Ctrl + <).
- On the home page, click "Create a project" then "Android or iOS application".
- The project creation wizard starts. The different steps of the wizard help you create your project. The information specified in this wizard can be modified later.
|Tip: Other method for creating a project:|
- Click among the quick access buttons of WINDEV Mobile menu.
- The element creation window appears: click "Project".
- The first step of the wizard allows you to define the project execution platform:
In our case, select "Android only" and go to the next step of the wizard.
- 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.
- 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.
- Generate an application for tablets.
- Generate an application for a specific device.
|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 example, we are going to generate an application for phones. Select "Generate an application for phones" and go to the next step.
|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 next step of the wizard allows selecting the desired device.|
- The wizard proposes to type the name of project, 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.
- Go to the next step.
- The wizard proposes to add documents. Go to the next step.
- 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.
|Remark: The Source Code Manager (SCM) is not available in Express version.|
- This step is used to define the code style. Don't modify the suggested options. Go to the next step.
- This step is used to define the style book of application. We will keep "Material Design Blue 2".
- The other steps of the wizard are not important for our first project. Click "Finish" directly. The project is automatically created.
- The element creation window appears. This window is used to create all elements that can be associated with a project.
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:
- In the window for creating a new element, click "Window" then "Window".
|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
among the quick access buttons of WINDEV Mobile:
- The window creation wizard starts.
- 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 that was selected when creating the project is selected by default.
|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, there is no risk of obtaining an ugly interface.|
- 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.
- Specify the title of the element: "Welcome". The name of the element is automatically proposed: "WIN_Welcome".
|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_",
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".
- Save the window by clicking "OK".
Displaying a message
You are now going to create a Button control used to display a message.
- To create the "Display" Button control:
- On the "Creation" pane, in the "Usual controls" group, click . The control appears in creation mode under the mouse pointer.
- 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, simply click on the window.
- Right-click 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 entering the following information:
- This control is named: "BTN_Display".
- The control caption is: "Display".
|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:
- Click the control to select it.
- Press the Enter or Space key: the caption becomes editable.
- Type the new caption and validate.
- Validate the control description window ("OK" button). The new control caption appears in the window editor.
Note about the assisted input
- We are going to display a message in a dialog box (a small window proposed by the system). To do so, we will use our first WLanguage function: Info.
|The programming language supplied with WINDEV Mobile is named WLanguage. It is a 5th-generation language (5GL) that includes highly sophisticated commands.|
- Select the control if necessary.
- 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.
- Display the popup menu of control (right mouse click).
- Select "Code". This option opens the code editor of WINDEV Mobile, in which all WLanguage statements can be typed.
|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 control.
Remark: Additional events can be added if necessary.
- Write the following WLanguage code In the "Click" event of the "BTN_Display" control:
: 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 mistakes when entering the name of an element: 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.
|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:|
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").
- the WLanguage functions are colored in blue,
- the character strings (between quotes) are colored in purple,
- the names of controls are colored in cyan.
displays the message passed as parameter.
- Save the modifications by clicking 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.
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, ...).
|WINDEV Mobile also allows you to run a test of the application via the Android emulator (AVD) supplied with the SDK.|
- We will now run the window test in simulation mode.
- Click among the quick access buttons (or press F9).
- Validate (if necessary) the information message regarding the simulator mode.
- Choose (if necessary) the management mode of editor during the test (editor minimized or not).
- The created window is started in execution.
- Click the "Display" button.
- Validate the system window that is displayed.
- 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 "x" in the menu above the simulator box to close the window.
- The WINDEV Mobile editor appears again.
First deployment on the device
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.
|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:
Remark: 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.
- On the phone, select the "Parameters" menu.
- Select "About the device".
- Click "Build number" several times to enable the developer mode.
- Move one level up.
- The "Development option" choice appears. Select this option.
- Check "USB debugging".
- To generate the Android application:
- On the "Project" pane, in the "Generation" group, click "Generate" (you can also click among the quick access buttons).
- WINDEV Mobile proposes to select the first project window. In our example, select "WIN_Welcome" and validate ("OK" button).
- The Android application generation wizard starts.
- The first step of wizard allows selecting the application generation mode. Indeed, the generation format may change depending on the mode selected.
For this tutorial, select "Generate for free deployment (private store, corporate fleet, etc.)". Go to the next step.
- The next step of the wizard is to check the tools needed to generate the Android application.
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.
- Select the option corresponding to your configuration and go to the next step.
Remark: If you have chosen to download and install the tools, the next step may be relatively long and require validating the license.
- The next step of the wizard allows you 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.
- Go to the next step. This step is used to define:
- the application splash screen,
|Remark: 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).
- Go to the next step. The wizard allows you to define the version number of the application.
- Go to the next step. This step is used to sign the application. The wizard proposes:
- to sign the application.
Remark: A specific signature is required to distribute the application.
- to use a generic signature that can be used for testing the application.
|Remark: The application signature is not available in Express version.|
- Select "Use a generic signature".
- Go to the next step. As we have chosen to generate the application for a fleet of devices, the wizard proposes to choose the type of devices. Keep the default options.
|If you have a device connected to the PC, use "Detect hardware automatically". Thus, next time an application is generated, this type of device will be automatically selected. |
- 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.
- Go to the next step. The wizard allows you to include specific libraries. Keep the default options.
- Go to the next step. The wizard allows you to include remote dependencies used by the project. Keep the default options.
- Go to the next step. The wizard allows you to define the application permissions. By default, according to the WLanguage functions used in the application, WINDEV Mobile detects the necessary permissions.
- 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.
- Go to the next step. The wizard allows you to configure the options of the Android SDK. Keep the default options.
- Go to the next step.
- End the wizard. The generation is automatically performed in background task. The icon indicates that the generation is in progress.
- When the generation is ended, a popup window is displayed in the editor:
|This window can be displayed at any time by clicking the icon.|
- To copy and run the application on the device linked to the computer or on an emulator, click “Deploy”.
- 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.
Click [Add] to post a comment