WINDEV Mobile 25

Documentation version 25 - 1 0320

Summary
Introduction
Preliminary points...................................................................................................................................................9
Tutorial overview......................................................................................................................................................9
Legend of the symbols in this tutorial................................................................................................................. 10
How to access the online help ............................................................................................................................ 11
If you are familiar with WINDEV Mobile 24........................................................................................................ 13
What is WINDEV Mobile used for?...................................................................................................................... 13

Part 1 - Overview of WINDEV Mobile

Lesson 1.1. Discover WINDEV Mobile

Overview................................................................................................................................................................ 18
Starting WINDEV Mobile...................................................................................................................................... 18
Development environment.................................................................................................................................. 19
The editor................................................................................................................................................19
The menu bar (ribbon) in details............................................................................................................20
The environment colors.........................................................................................................................21

Part 2 - Android application

Lesson 2.1. My first Android project

Overview................................................................................................................................................................ 26
Necessary configuration for Android.................................................................................................................. 26
My first project...................................................................................................................................................... 26
Creating the project................................................................................................................................26
My first window .................................................................................................................................................... 30
Don't forget to visit our site (www.windev.com) on a regular basis to find out whether upgraded
Overview .................................................................................................................................................30
versions are available.
Creating the window...............................................................................................................................30
Displaying a message............................................................................................................................ 31
First test................................................................................................................................................................. 33
First deployment on the device........................................................................................................................... 34
Email address of Free Technical Support: [email protected]
Principle .................................................................................................................................................34
Implementation......................................................................................................................................35

Lesson 2.2. Interface (UI)

This documentation is not contractually binding. PC SOFT reserves the right to modify or delete Overview................................................................................................................................................................ 40
any topic dealt with in this document. Choosing the resolution according to the device............................................................................................... 40
Window orientation.............................................................................................................................................. 40
Practical example................................................................................................................................... 41
All product names or other trademarks mentioned in this publication are registered trademarks of their respective owners.
© PC SOFT 2020: This publication may not be reproduced in part or in full without the express consent of PC SOFT.

Summary 3
 Touchscreen management.................................................................................................................................. 43 Part 4 - Programming concepts
Practical example...................................................................................................................................44
The different types of controls............................................................................................................................. 45
Lesson 4.1. Concepts and terminology
Lesson 2.3. Distributing the application Overview................................................................................................................................................................ 78
Overview................................................................................................................................................................ 47 Main concepts....................................................................................................................................................... 78
Deployment via Google Play................................................................................................................................ 47 Terminology............................................................................................................................................79
Deployment via a Web server.............................................................................................................................. 47
Deployment from the PC via ADB (advanced mode)......................................................................................... 48 Lesson 4.2. The WLanguage basics
Copying the application onto Mobile device....................................................................................................... 48
The variables......................................................................................................................................................... 81
What is a variable...................................................................................................................................81
Declaring and assigning a variable.......................................................................................................81
Part 3 - iOS application The types of variables............................................................................................................................82
The scope of variables...........................................................................................................................83
Simple operations on the variables.......................................................................................................84
Lesson 3.1. My first iOS project Tips .................................................................................................................................................85
Overview................................................................................................................................................................ 52 The conditional IF and SWITCH statements....................................................................................................... 86
Required configuration for iOS............................................................................................................................ 52 The IF statement....................................................................................................................................86
My first project...................................................................................................................................................... 53 The SWITCH statement..........................................................................................................................87
Creating the project................................................................................................................................53 The loops............................................................................................................................................................... 88
My first window..................................................................................................................................................... 56 The FOR statement................................................................................................................................88
Overview .................................................................................................................................................56 The LOOP statement..............................................................................................................................88
Creating the window...............................................................................................................................56 The WHILE statement............................................................................................................................89
Displaying a message............................................................................................................................ 57 The procedures..................................................................................................................................................... 90
First test................................................................................................................................................................. 59 Types of procedures...............................................................................................................................90
First deployment on the device........................................................................................................................... 62 Creating and calling a procedure..........................................................................................................90
Principle .................................................................................................................................................62 Procedure parameters...........................................................................................................................91
Implementation......................................................................................................................................62 Procedure result.....................................................................................................................................93
Transferring the WINDEV Mobile project onto Mac..............................................................................64
Compiling the project in Xcode..............................................................................................................64

Lesson 3.2. Interface (UI)

Part 5 - Android and iOS: Developing an application
Overview................................................................................................................................................................ 66
Choosing the resolution according to the device............................................................................................... 66 Lesson 5.1. Overview
Window orientation.............................................................................................................................................. 66 Overview................................................................................................................................................................ 98
Practical example...................................................................................................................................67 The sample project used...................................................................................................................................... 99
Touchscreen management.................................................................................................................................. 70 Opening project....................................................................................................................................101
Practical example...................................................................................................................................70 Choosing the platform..........................................................................................................................101
The different types of controls............................................................................................................................. 71 Enabling the iOS platform.................................................................................................................................. 101

Lesson 3.3. Distributing the application Lesson 5.2. Developing the application
Overview................................................................................................................................................................ 73 Project analysis..................................................................................................................................................105
Deployment........................................................................................................................................................... 73 Displaying the list of products...........................................................................................................................105
Creating the window.............................................................................................................................106
Creating the form window..................................................................................................................................110
Creating the window.............................................................................................................................110
Creating controls..................................................................................................................................111
Displaying the form from the list of products......................................................................................113

4 Summary Summary 5
 Managing the product creation and modification...........................................................................................114 Lesson 5.5. Window with scroll
Modifying the product form.................................................................................................................114
Overview..............................................................................................................................................................160
Creating a new product........................................................................................................................118
Creating the Form window with swipe..............................................................................................................160
Using the camera and displaying an image.....................................................................................................121
Creating the Form window...................................................................................................................160
Overview ...............................................................................................................................................121
Creating the internal window...............................................................................................................161
Creating the button for taking photos.................................................................................................121
Managing the swipe in the form window.............................................................................................161
Taking photos.......................................................................................................................................124
Window test........................................................................................................................................................164
Selecting a photo in the photo album.................................................................................................124
Conclusion...........................................................................................................................................................165
Managing the bar code of product....................................................................................................................125
Overview .............................................................................................................................................. 125 Lesson 5.6. Deploying the application
Implementation................................................................................................................................... 125
Managing anchors in the Product form............................................................................................................127 Overview..............................................................................................................................................................167
Using the Map control........................................................................................................................................128 Generating the Android application..................................................................................................................167
Creating the window............................................................................................................................ 128 Generating the iOS application......................................................................................................................... 171
Creating the Map control.................................................................................................................... 128 Transferring the WINDEV Mobile project onto Mac............................................................................173
Displaying stores on the map............................................................................................................. 129 Compiling the project in Xcode............................................................................................................173
Using a Multiline Zone control...........................................................................................................................130
Creating the window.............................................................................................................................130
Creating the Multiline Zone control.....................................................................................................131 Part 6 - Windows Mobile application
Modifying the Multiline Zone control...................................................................................................131
Programming the menu.......................................................................................................................134
Application test...................................................................................................................................................134
Lesson 6.1. My first Windows Mobile project
Overview.............................................................................................................................................................. 178
Lesson 5.3. Managing the orientation of windows with the layouts My first project.................................................................................................................................................... 178
Overview..............................................................................................................................................................136 Creating the project..............................................................................................................................178
Using anchors.....................................................................................................................................................136 My first window...................................................................................................................................................181
Running the application test.............................................................................................................................142 Overview ...............................................................................................................................................181
Creating the window.............................................................................................................................181
Lesson 5.4. Window with search Displaying a message..........................................................................................................................182
First test...............................................................................................................................................................184
Overview..............................................................................................................................................................144
First deployment on the device.........................................................................................................................185
Creating the query used to find the products...................................................................................................145
Principle ...............................................................................................................................................185
Creating the query................................................................................................................................145
Implementation....................................................................................................................................185
Query test.............................................................................................................................................146
Adding a selection condition...............................................................................................................147 Lesson 6.2. Databases
Test of query with parameters.............................................................................................................148
Creating the interface........................................................................................................................................149 Format of databases .........................................................................................................................................188
Creating the window.............................................................................................................................149 HFSQL database..................................................................................................................................188
Managing the search...........................................................................................................................151 CEDB ...............................................................................................................................................189
Improving the window........................................................................................................................................153 AS/400 ...............................................................................................................................................189
Managing "Pull to refresh"...................................................................................................................153 Sharing data between two applications ..........................................................................................................190
Using a sliding menu............................................................................................................................155 Handling the same data files...............................................................................................................191
Copying the data files onto the mobile device (Pocket PC for example)............................................191

6 Summary Summary 7
 Lesson 6.3. Advanced programming
Overview..............................................................................................................................................................193
Introduction
Opening project....................................................................................................................................193
Project description...............................................................................................................................193
Displaying the list of products...........................................................................................................................194
Creating the window.............................................................................................................................194 Preliminary points
Creating the Table control....................................................................................................................194
Creating the form window..................................................................................................................................197 Caution: This is a tutorial. We advise you to check the online help when you are using WINDEV
Creating the window.............................................................................................................................197 Mobile.
Creating controls..................................................................................................................................197 The purpose of this tutorial is to help you discover WINDEV Mobile, get familiar with the editors
Displaying the form from the list of products......................................................................................199 and learn the WINDEV Mobile concepts.
Managing the product creation and modification...........................................................................................200 This tutorial does not cover all the features in WINDEV Mobile.
Modifying the product form................................................................................................................ 200
Creating a new product........................................................................................................................201 This tutorial is intended for developers who are already familiar with WINDEV. It only presents
Creating a menu window...................................................................................................................................204 the main concepts required to develop an application for mobile devices (Android, iPhone, iPad,
Creating the window............................................................................................................................ 204 Windows Mobile, etc).
Customizing the menu........................................................................................................................ 205
Programming the menu...................................................................................................................... 206
If you are not familiar with WINDEV, we recommend that you read the WINDEV tutorial beforehand.
Running the application test.............................................................................................................................206 Remark: The WINDEV tutorial is available in WINDEV, WEBDEV and WINDEV Mobile online help.
Creating the executable.....................................................................................................................................207 Spend at least a few hours to follow this tutorial and learn WINDEV Mobile: it is a good investment!
As WINDEV Mobile is constantly evolving, the screenshots in the tutorial may differ from the
Lesson 6.4. Distributing the application windows displayed in your product.
Overview..............................................................................................................................................................210
Setup in MSI format...........................................................................................................................................212 Tutorial overview
Initial setup...........................................................................................................................................212
Update in MSI format...........................................................................................................................212 The tutorial has been designed to help you develop on the main mobile platforms:
Setup in CAB format...........................................................................................................................................212
• Android.
Initial setup...........................................................................................................................................212
Update in CAB format...........................................................................................................................213 • iOS (iPhone/iPad).
• Windows Mobile/CE.
Conclusion This tutorial is divided into the following sections:
• Part 1: Overview of WINDEV Mobile.
• Part 2: Creating and deploying a first Android application.
• Part 3: Creating and deploying a first iOS application.
• Part 4: Quick reminder of main concepts of WINDEV Mobile and WLanguage.
• Part 5: Creating an application for data management for Android and iOS. This part is common
to Android and iOS and it allows you to create management windows for these two platforms.
• Part 6: Creating applications for Windows Mobile.

8 Summary Introduction 9
:
 9
 This tutorial has been designed to progressively teach you how to use WINDEV Mobile. By following How to access the online help
this tutorial:
• you will discover the main concepts explained informally; these are the concepts you must The online help of WINDEV Mobile allows you to get detailed information about the 3700
learn and understand. WLanguage functions. The online help also contains the help about the editors and the controls,
• you will also be asked to perform operations that illustrate the concepts just explained. tips, ...
As you progress through the tutorial, if you want to take a closer look at a concept or if you want to The online help is available at any time in WINDEV Mobile:
get more details about a programming function, see the online help (accessible from the editors). • In the code editor, a specific help is available for each function via the F1 key.
The size of a lesson is not necessarily proportional to its relevance. • Each dialog box displayed by WINDEV Mobile proposes a button allowing you to access the
corresponding help page.
And don’t forget to take a look at the examples supplied with WINDEV Mobile: they are very • The help menu of the editors ("Help" option available on the "Home" pane, in the "Online help"
instructive! group of the WINDEV Mobile menu) allows you to start the online help.
▶ The help can be displayed:
The tutorial may have evolved since this document was printed. Feel free to • in an Internet browser, if you have access to Internet:
Tip

consult the online version (http://doc.windev.com).

Legend of the symbols in this tutorial

This symbol indicates the duration of the lesson. Please note that the actual time may
vary according to your level of experience.

An example is available to complement the lesson. The examples are available in the
WINDEV Mobile home page (Ctrl + <).

This symbol introduces a "Tip": reading the associated text is strongly recommended.

This symbol introduces a "Warning": reading the associated text is essential.

This symbol introduces a "Note": reading the associated text is recommended.

10 : 
10 Introduction Introduction 11
:
 11
 • in a specific "help browser": 2. In the "Help" tab, select:
• the access mode to the help database.

• the help content: help common to WINDEV, WEBDEV and WINDEV Mobile or help for the
product currently used.

If you are familiar with WINDEV Mobile 24

If you are familiar with WINDEV Mobile 24, following this tutorial will do no harm: it’s a good
opportunity to "review" the features of WINDEV Mobile!
We advise you to check the online help on Internet rather than the local online
help. Indeed, the Internet online help is updated on a regular basis. What is WINDEV Mobile used for?
The online help of WINDEV, WEBDEV and WINDEV Mobile on Internet is available
Remark

from any computer equipped with an Internet access, without the product being WINDEV Mobile is an IDE (Integrated Development Environment). It allows you to develop
necessarily installed. applications in many fields:
Each Web user can add comments about the documentation pages: personal • Management of stocks,
notes, examples, links, ... • Inventories, tracking of goods,
• Adjustment and monitoring of machines on an assembly line,
• Taking orders for fast processing in a temporary outlet (fairs, schools, booth, ...),
Note: If you have no access to Internet, you have the ability to start the local help from the product: • Customer forms,
1. On the "Home" pane, in the "Environment" group, expand "Options" and select "General • Help with making snap decisions on a cell phone,
options of WINDEV Mobile".
• Checking the identity of visitors at an event: trade fair, presentation of products, ...
• On-call doctors or vets,
• Taking information in a temporary outlet: trade fair, street poll, stadium, ...
• Returning leased heavy equipment (tools, vehicles, ...) to a parking lot,
• ...

12 : 
12 Introduction Introduction 13
:
 13
 WINDEV Mobile is a development environment that includes all the tools required to develop an
application.
PART 1
Unlike other programming languages, there is no need to find and add modules to be able to
design, check and install an application.
The 5GL (5th Generation Language) of WINDEV Mobile, named WLanguage, will surprise you by
its simplicity: a few hours are all you need to get the hang of it, a week is usually all it takes to fully
master its potential!
No more programming hassle, WLanguage is available in English and in French!

Overview of
WINDEV Mobile

14 : 
14 Introduction
 Lesson 1.1. Discover WINDEV Mobile

This lesson will teach you the following concepts

• Starting WINDEV Mobile.

Estimated time: 10 mn

16 Part 1: Overview of WINDEV Mobile Part 1: Overview of WINDEV Mobile 17

 Overview Development environment
WINDEV Mobile is an IDE (Integrated Development Environment) allowing you to develop
applications for Android, iOS, Universal Windows (Windows 10), Windows Mobile, ... in several The editor
fields: business, industrial, medical, hospitality, ... The developed applications can give access to The development environment of WINDEV Mobile includes a specific interface and several editors
information stored in the databases. allowing you to create the different elements of your applications.
This tutorial will explain how to create your applications (with or without database) and how to For example, the window editor is used to create windows, the report editor is used to create
improve them by using the different features proposed by WINDEV Mobile. reports, ...
▶ To discover WINDEV Mobile, we are going to open the "Product form" window:
Starting WINDEV Mobile
1. Press Ctrl + E.
▶ Start WINDEV Mobile 25 (if not already done). 2. In the window that is displayed, type the name of the window to open: WIN_Product_form.
3. Validate. The window is displayed in the editor.
▶ A welcome wizard starts if WINDEV Mobile 25 was never started before. This wizard is used to:
• If you worked with an earlier WINDEV Mobile version, this wizard allows you to retrieve the All editors are using the same environment:
existing configurations.
• If you are a new user, this wizard allows you to configure your environment. This allows you to
choose the screen configuration used and to configure the Control Centers.
▶ If you have already launched WINDEV Mobile 25, log in if necessary. The development
environment starts. The home page is displayed. This home page is used to:
• create a project,
• open an existing project,
• open an example,
• open one of the projects found in the tutorial.
▶ Let’s take a look at the development environment of WINDEV Mobile. To do so, from the home
page:
• Click "Tutorial".
• Double-click on "iOS/Android application (Answer)".
• The corresponding project is opened in the editor. The project dashboard is displayed. The
project dashboard allows you to check the progress of a project via several elements (called
widgets).

1. Menu of editors, displayed in ribbon format (we’ll see how to use it in the next paragraph).
2. Current editor (window editor in this case). This space allows you to see the element currently
created or modified in WYSIWYG (What You See Is What You Get).
3. Panes. The interface of WINDEV Mobile includes several panes allowing you to quickly access
different types of information.
Some examples:
• the "Project explorer" pane (displayed on the right) is used to list all project elements by
category.

18 Part 1: Overview of WINDEV Mobile Part 1: Overview of WINDEV Mobile 19

 • the search pane (displayed at the bottom) is used to perform searches in the entire project • the popup panes, specific to the current element: The pane name is displayed in blue.
and in its elements. • the available panes: The pane name is displayed in black.
These panes can be hidden by pressing Ctrl + W if necessary.
The option area (3)
4. Bar of opened documents. This bar is used to quickly see all opened elements. A simple click
on the button corresponding to the element displays it in its own editor.
The menu bar (ribbon) in details

The menu bar of WINDEV Mobile is presented in ribbon format. This ribbon includes panes in
which the different options of editors are grouped. The options displayed in the ribbon differ according to the selected pane. Several types of options
We are going to take a closer look at the main ribbon elements, as well as how we will be using it are available:
in this tutorial. • Options to check,
• Buttons to click,
• Button with arrow used to expand the options. Two types of buttons with arrow are available:
• the buttons with arrow used to expand a menu.
• the buttons with arrow used to expand a menu (click on the arrow) or to perform a default
action (click on the button icon).
The options are organized by group. Each group of options has a name and it can also include
The different ribbon elements a group button . This button is used to perform a specific action according to the current group:
display the description of current element, display the help, ...
The ribbon includes 3 areas:
• the button area, on the left (1). In this tutorial, to identify a menu option, we will be talking about panes and groups. For example:
• the pane area, at the top (2). To display the help, on the "Home" pane, in the "Online help" group, click "Help".
• the option area (3). The environment colors
Let’s take a closer look at these areas.
The environment is using a light theme by default.
The button area (1) Several other themes are also available:
The button area groups the quick access buttons. These buttons are used • Light theme, grey ribbon. In this mode, the menu bar is not colored anymore: it is grayed.
to perform the most usual operations, common to all editors: save, open, • Gray theme. In this mode, the environment and the interface windows are displayed on a light
create, ... gray background.
The product logo is used to display the "About" window, the custom menus • Dark theme. In this mode, the environment and the interface windows are displayed on a black
and the drop-down menus found in the former interface of editors. or dark gray background.
The arrow at the top right of the button area allows you to find the toolbars
and drop-down menus of the old editor interface. ▶ To modify the theme used by the environment:
1. On the "Home" pane, in the "Environment" group, expand "Options" and select "General
options of WINDEV Mobile".
The pane area (2) 2. In the "Editor" tab, in the "Themes" area, select the theme to use.
3. Validate. The theme will be taken into account during the next start of WINDEV Mobile.

The different ribbon panes are used to access the options of different editors for the current Remark: To improve the readability of this manual, the light theme will be used for the different
project. Several types of panes are available: images that illustrate the operations to perform.
• the current pane: The name of the pane appears in bold and is underlined by an orange line.

20 Part 1: Overview of WINDEV Mobile Part 1: Overview of WINDEV Mobile 21

 PART 2

Android
application

22 Part 1: Overview of WINDEV Mobile

 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

24 Part 2: Android application Part 2: Android application 25

 Overview ▶ To create a project:
1. Start WINDEV Mobile 25 (if necessary).
To start developing with WINDEV Mobile for an Android platform, we are going to create a first 2. Display the WINDEV Mobile home page if necessary (Ctrl + <).
project. This project will contain a window used to display a message.
3. On the home page, click "Create a project" then "Android or iOS application"..
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 4. The project creation wizard starts. The different steps of the wizard help you create your
Android operating system. project. The information specified in this wizard can be modified later.
Caution: The Android SDK includes sections corresponding to the versions of device platforms
(5, 6, 7, ...). Tip: Other method for creating a project:

Remark
The download and the setup of Android SDK are proposed if necessary when generating the
1. Click among the quick access buttons of WINDEV Mobile menu.
Android application from WINDEV Mobile.
2. The window for creating a new element is displayed: click "Project".
• 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. 5. The first step of the wizard allows you to define the project execution platform:

See the online help 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. In our case, select "Android only" and go to the next step of the wizard.
6. The wizard proposes to create a blank project or a project based on an example. Choose
A corrected project is available. To open this project: "Create a blank project" and go to the next step.
Answer

1. Display the WINDEV Mobile home page (Ctrl + <). 7. The wizard proposes to choose the type of Android devices affected by the project:
2. Click "Tutorial" and select "My Android project (Answer)". • Generate an application for phones and tablets.
• Generate an application for phones.
• Generate an application for tablets.
• Generate an application for a specific device.

26 Part 2: Android application Part 2: Android application 27

 11. The wizard proposes to add documents. Go to the next step.
If the application is intended to operate on several Android devices 12. This step allows you to use the Source Code Manager (SCM). We will not use it in this
(phones with different sizes or resolutions for example), we advise you to example. Select "No, do not use SCM". Go to the next step.
use one of the following options:
13. This step is used to define the code style. Don’t modify the suggested options. Go to the
Remark • "Generate an application for phones and tablets", next step.
• "Generate an application for phones". 14. This step is used to define the style book of application. We will keep "Material Design Blue
In this case, WINDEV Mobile proposes the smallest resolution to create 2".
the application windows. Using anchors (see "Interface (UI)", page 39
and "Developing the application", page 104) will allow the application to
operate on all 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.

You own an Android device and you want to run the application test on this
Remark

device? Select "Generate an application for a specific device". The wizard next 15. The other steps of the wizard are not important for our first project. Click "Finish" directly.
step is used to select the requested device. The project is automatically created.
16. The window for creating a new element is displayed. This window is used to create all
9. The wizard proposes to type the name of project, its location and its description. In our case, elements that can be associated with a project.
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.

10. Go to the next step.

28 Part 2: Android application Part 2: Android application 29

 My first window 5. Specify the title of the element: "Welcome". The name of the element is automatically
proposed: "WIN_Welcome".
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:
Let’s take a look at the window name proposed by WINDEV Mobile: this name
1. In the window for creating a new element, click "Window" then "Window".
starts with the letters "WIN_". This prefix is automatically added because the
project is using a code style.
As a new project was created, the window for creating a new element is
automatically displayed. The code style is used to define a prefix for each type of object, allowing you to
quickly identify the element:

Remark
To display the window for creating a new element, all you have to do is click • a window starts with "WIN_",
among the quick access buttons of WINDEV Mobile:
• a button starts with "BTN_",
Remark

• 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".

Displaying a message
2. The window creation wizard starts. You are now going to create a Button control used to display a message.
3. In the list of proposed windows, select "Blank". The skin template used is displayed at the
▶ To create the "Display" Button control:
bottom right of wizard. "Material Design Blue 2", the skin template that was selected when
creating the project is selected by default. 1. On the "Creation" pane, in the "Usual controls" group, click . The control appears in
creation mode under the mouse pointer.
Skin templates allow you to quickly create outstanding interfaces. A skin 2. Move the mouse toward the position where the control will be created in the window (at the
Remark

template defines the window style as well as the style of all controls that will top of window for example). To drop the control in the window, simply click on the window.
be used in this window. Thus, there is no risk of obtaining an ugly interface. 3. 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.
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.

30 Part 2: Android application Part 2: Android application 31

 ▶ Modify the control characteristics by entering the following information: 4. Write the following WLanguage 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 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.
1. This control is named: "BTN_Display".
When typing this WLanguage code in the code editor, you probably noticed that
2. The control caption is: "Display". the different elements use different colors. This is the syntactic coloring. The
code editor allows you to easily identify the different elements handled by the
To modify the name and caption of the Button control, we have been using the code:
control description window (also called "7-tab window").

Remark
• the WLanguage functions are colored in blue,
The control name and caption can also be modified from the window currently
Remark

• the character strings (between quotes) are colored in purple,

being edited:
• the names of controls are colored in cyan.
1. Click the control to select it.
These colors can be modified element by element in the options of code editor
2. Press the Enter or Space key: the caption becomes editable. (on the "Home" pane, in the "Environment" group, expand "Options" and select
3. Type the new caption and validate. "Options of the code editor").

▶ Validate the control description window ("OK" button). The new control caption appears in the
Info displays the message passed in parameter.
window editor.
▶ Save the modifications by clicking among the quick access button or by pressing Ctrl + S.
▶ 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. ▶ Close the code editor (cross at the top right of code editor). The window editor is redisplayed.

The programming language supplied with WINDEV Mobile is named

Remark

WLanguage. It is a 5th-generation language (5GL) that includes highly First test

sophisticated commands.
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
1. Select the control if necessary. development computer. This test is useful when no Android device can be used by the developer.
Remarks: However, this test does not allow you to use the hardware components of device (GPS, SMS,
• When the control is selected, several handles appear around the control. camera, ...).
• 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). WINDEV Mobile also allows you to run a test of the application via the Android

Remark
emulator (AVD) supplied with the SDK.
3. Select "Code". This option opens the code editor of WINDEV Mobile, in which all WLanguage
statements can be typed. See the online help for more details.

The code editor proposes different events for each type of control. These are
▶ We will now run the window test in simulation mode.
the events related to the control.
1. Click among the quick access buttons (or press F9).
Remark

Therefore, two events are displayed for the "Button" control: 2. Validate (if necessary) the information message regarding the simulator mode.
• "Initializing", run when the window is displayed. 3. Choose (if necessary) the management mode of editor during the test (editor minimized or
• "Click", run when the user clicks on the control. not).
Remark: Additional events can be added if necessary.

32 Part 2: Android application Part 2: Android application 33

 4. The created window is started in execution.
5. Click the "Display" button. 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
6. Validate the system window that is displayed.
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.

Remark
4. Move one level up.
5. The "Development option" choice appears. Select this option.
6. Check "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.

Implementation
▶ To generate the Android application:
1. On the "Project" pane, in the "Generation" group, click "Generate" (you also have the ability to
click among the quick access buttons).
2. WINDEV Mobile proposes to select the first project window. In our example, select "WIN_
Welcome" and validate ("OK" button).

▶ 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

3. The Android application generation wizard starts.
Principle 4. The first step of wizard allows selecting the application generation mode. Indeed, the
generation format may change depending on the mode selected.
To run the application in stand-alone mode on the Android device, you must: For this tutorial, select "Generate for free deployment (private store, corporate fleet, etc)". Go to
• Connect the device via a USB port. the next step.
• 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.

34 Part 2: Android application Part 2: Android application 35

 5. The next step of the wizard is to check the tools needed to generate the Android application. 8. Go to the next step. This step is used to define:
• the application splash screen,
• 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).
9. Go to the next step. The wizard is used to define the version number of application.
10. 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.
See the online help for more details.
• to use a generic signature that can be used for testing the application.
11. Select "Use a generic signature".
The wizard proposes to:
12. Go to the next step. As we have chosen to generate the application for a fleet of devices, the
• Download and automatically install the Android SDK and Gradle: in this case, you will
wizard proposes to choose the type of devices. Keep the default options.
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
If you have a device connected to the PC, use "Detect hardware automatically".

Remark
updates. Only an Internet connection is required. This option is available only if Gradle was
not downloaded and installed beforehand. Thus, next time an application is generated, this type of device will be
automatically selected.
• 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 13. Go to the next step.
to do is specify the setup paths of Gradle and Android SDK. 14. The wizard allows you to include specific files (data files, images, ...). This possibility will not
6. Select the option corresponding to your configuration and go to the next step. be used in our example. Keep the default options.
Remark: If you have chosen to download and install the tools, the next step may be relatively 15. Go to the next step. The wizard allows you to include specific libraries. Keep the default
long and require validating the license. options.
7. The next wizard step is used to: 16. Go to the next step. The wizard is used to include remote dependencies used by the project.
• define the application name (displayed below the icon used to start the application) and Keep the default options.
the corresponding package. 17. Go to the next step. The wizard is used to define the application permissions. By default,
• select the application icon in the image catalog of WINDEV Mobile. according to the WLanguage functions used in the application, WINDEV Mobile detects the
necessary permissions.
18. 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.
19. Go to the next step. The wizard is used to configure the options of Android SDK. Keep the
default options.

36 Part 2: Android application Part 2: Android application 37

 20. Go to the next step.
21. End the wizard. The generation is automatically performed in background task. The Lesson 2.2. Interface (UI)
icon indicates that the generation is in progress.
22. When the generation is ended, a popup window is displayed in the editor:
This lesson will teach you the following concepts

• Choosing the resolution according to the device.

• Window orientation.
• Touchscreen management.
Remark

This window can be displayed at any time by clicking the icon.

23. To copy and run the application on the device linked to the computer or on an emulator,
click "Deploy". Estimated time: 30 mn
24. 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.

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 XXXX
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 " Debug on mobile
device" among the quick access options: the generation will be performed
Remark

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.

38 Part 2: Android application Part 2: Android application 39

 Overview 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
The Android system is available on the phones and on the tablets. WINDEV Mobile allows you to anchoring mechanism must be used to get a proper result.
easily create interfaces that adapt to the device used.
Practical example
Choosing the resolution according to the device ▶ Open (if necessary) the "My_Android_Project" project that was created in the previous lesson.
When creating a project, you will have to choose the resolution that will be used for the project

Answer
windows. Two cases may occur: A corrected project is available. To open this project, in WINDEV Mobile’s
• You are using a single target device: in this case, all you have to do is select this device in the home page (Ctrl + <), click "Tutorial" and select "My Android project (Answer)".
list proposed by the wizard.
• You are using several target devices with different screen resolutions: in this case, you must
choose the smallest resolution common to all devices. Via the anchoring of controls in the In our example, the project was created for a phone and it was tested in portrait mode in the
window, the content will be adapted to the resolution. simulator.
We are now going to run its test in landscape mode in the simulator.
Window orientation
▶ Run the project test in simulator mode:
In Android, a window can have one of the following orientations: 1. In the quick access button area, expand "GO" if necessary and select the option " Debug
• Free: the window follows the device orientation, on Generic Android Phone simulator".
• Locked in portrait mode,
• Locked in landscape mode.
This orientation is defined in the "UI" tab of the description window of window ("Description" from
the popup menu of window).

By default, the project test on a mobile device is proposed among the quick

Remark
access buttons. After selecting " Debug on simulator" for the first time,
the corresponding icon ( ) will be automatically proposed among the quick
access buttons.

2. Validate (if necessary) the window that opens up.

3. The window is displayed in portrait mode.
4. The simulator shows an icon-based menu:

5. Modify the window orientation with the "Rotation" option .

40 Part 2: Android application Part 2: Android application 41

 6. The window orientation changes on the screen. In our example, the button location does not 3. Select "Anchor": the window for defining anchors is displayed:
change: it does not adapt to the screen orientation.

▶ 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.
4. Select "Horizontally centered" and validate ("OK" button).
▶ To center the Button control in the window:
1. Select the control (click on the Button control).

Remark
In the window displayed in the editor, you will notice the little red arrows in the
2. On the "Alignment" pane, in the "Centering and distribution" group, click "Center in the parent control. These arrows indicate that the control is anchored.
(horz)".
▶ In order for the Button control to remain centered in the window, we are going to use the
control anchoring: ▶ Run the project test on simulator ( among the quick access buttons):
1. Select the control if necessary. • The button is centered in portrait mode.
2. Display the popup menu (right mouse click). • Change the orientation of simulator.
• The button remains centered in landscape mode.

Touchscreen management
One of the most important aspects of the interface for a mobile application is the touchscreen
management.
A "multi-touch" feature is a technique allowing the user to interact with a device via several contact
points.
Handling images is one of the most common multi-touch features. 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 processes.
See the online help for more details.
42 Part 2: Android application Part 2: Android application 43
 Practical example 11. A UI error appears in the error pane: the automatic window scrollbars are in conflict with the
scrolling features of Image control.
▶ Open (if necessary) the "My_Android_Project" project that was created in the previous lesson.
12. To avoid this UI error, disable the window scrollbars:
• Display the description window of window ("Description" from the popup menu).
Answer

A corrected project is available. To open this project, in the WINDEV Mobile • In the "UI" tab, un check "Automatic Scrollbars".
home page (Ctrl + <), click "Tutorial" and select "My Android project (Answer)". • Validate the description window.
13. Save the window (click among the quick access buttons). The UI error disappears.

▶ In the "WIN_Welcome" window, create an Image control:

Remark
The multi-touch management cannot be checked in the simulator. To check
1. On the "Creation" pane, in the "Usual controls" group, click "Image". this feature, the application must be tested (or deployed) on the mobile device.
2. The Image control appears in creation under the mouse.
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. 14. Close the project.
4. Double-click the Image control: the description window of control is displayed.
5. In the "General" tab, select an image from your disk in the "Image" edit control (via , The different types of controls
"Browse").
6. If the image is found in a directory other than the project directory, WINDEV Mobile proposes WINDEV Mobile proposes several controls. These controls are used to display or enter data. Some
to copy the image file into the project directory. Accept by clicking the "Copy the file into the controls are specifically intended for a mobile interface.
suggested directory" button. To develop your applications, you can use the standard controls (edit controls, images, radio
7. Display the "Details" tab: the options for multi-touch management are displayed: buttons and check boxes) but also more specific controls such as:
• the Multiline Zone control to create interfaces (UI) similar to the native Android windows,
• the Map control to view a position on a map or an itinerary,
• the Ad control to display an advertising banner,
• the menu in the shape of "Action bar".
Some of this controls will be presented in the lesson "Developing the application", page 104.

8. Select "Automatic scroll and zoom".

9. Validate the control description window.
10. Save the window (click among the quick access buttons).

44 Part 2: Android application Part 2: Android application 45

 Lesson 2.3. Distributing the application Overview
WINDEV Mobile allows you to develop applications for the Android operating system.
Once the applications are created, developed and checked, all you have to do is deploy them.
Several deployment modes are available:
This lesson will teach you the following concepts • Deployment via Google Play (or another market).
• Deployment on a Web server.
• Generating the APK. • Deployment from the PC via ADB.
• Available distribution modes. • Deployment by copy.

Deployment via Google Play

Google Play is an online service used to download applications (free of charge or not) on mobiles
devices compatible with Android.
Estimated time: 20 mn Once published, the application can be downloaded by the users all around the world via the
Google Play application installed on their phone.

The publication of applications on Google Play must comply with specific rules:
• During the first publication, you must register beside the Google Play service via a Google
account. Once registered, you have the ability to publish or update as many applications as you
want as many times as necessary.
• The published application must be signed with a private cryptographic key. You have the ability
to sign your own application: using a third-party organism is optional. The validity period of
certificate must end after October 23, 2033.
The applications generated by WINDEV Mobile are automatically signed by using the
information specified in the generation wizard ("Signature of application" step) with a sufficient
validity period.
Caution: The published application must not be signed with a generic key (whose use must be
limited to the tests in GO mode).
• An icon must be associated with the application. The generation wizard of WINDEV Mobile
allows you to define the icon to use.
Remark: Google Play is the most common application but other applications are available.

Deployment via a Web server

You have the ability to propose Android applications for download from a link on a Web page.
To do so, you must:
1. Copy the "apk" file of the application onto the Web server that hosts the page proposing the
download of the application.
Reminder: the "apk" file is created by WINDEV Mobile when generating the Android application.

46 Part 2: Android application Part 2: Android application 47

 2. Add a link into the Web page for download. This link has the following format:
<a href=’Path of apk file on the server’>Link</a>
PART 3
3. On the server, add the following MIME type: application/vnd.android.package-archive.
The user will only have to display the page with the browser of the phone. The application will be
downloaded when the link is clicked. Then, all you have to do is click the downloaded file (in the
download manager) to install the application.

Caution: The "Unknown sources" option must be enabled on the phone to allow this setup mode.
To enable this option, go to the "Parameters" menu of phone, in the "Applications" sub-menu.

Deployment from the PC via ADB (advanced mode)

ADB (Android Debug Bridge) is a tool supplied with the Android SDK. It is used, among other
things, to install or uninstall from the PC an Android application (APK file) on a mobile device
compatible with Android.
This setup mode is an advanced mode. We recommend that you see in the online help the specific
iOS
commands used to install an application. To do so:
• go to "https://developer.android.com/studio/index.html".
application
• in the menu, select "User guides" then "Command line tools" and finally "adb".

Caution: The "Unknown sources" option must be enabled on the phone to allow this setup mode.
To enable this option, go to the "Parameters" menu of phone, in the "Applications" sub-menu.

Copying the application onto Mobile device

The easiest way to install an Android application on a mobile device is to copy the apk file onto the
device and to run it. The following operations must be performed:
1. Connect the device to the PC by USB.
2. Copy the apk file of application onto the device (external memory for example).
Reminder: the "apk" file is created by WINDEV Mobile when generating the Android application.
3. On the device, use a file explorer to go to the directory where the apk file was copied and click
the file to start its setup.
Remark: Some devices do not propose a file explorer but several ones are available for free.

Caution: The "Unknown sources" option must be enabled on the phone to allow this setup mode.
To enable this option, go to the "Parameters" menu of phone, in the "Applications" sub-menu.

48 Part 2: Android application

 Lesson 3.1. My first iOS project

This lesson will teach you the following concepts

• Required configuration.
• Creating an iOS project (iPhone or iPad).
• My first window.
• My first test.
• First deployment.

Estimated time: 40 mn

50 Part 3 : iOS application Part 3: iOS application 51

 Overview My first project
To start developing with WINDEV Mobile for an iOS platform, we are going to create a first project.
This project will contain a window used to display a message. Creating the project
This first example will present the main concepts of development for iOS with WINDEV Mobile. We are now going to create our first project for iOS.
Before creating our first project for iOS, the development computer must be configured.

Answer
A corrected project is available. To open this project, in WINDEV Mobile’s home
Required configuration for iOS page (Ctrl + <), click "Tutorial" and select "My iOS project (Answer)".
To develop a WINDEV Mobile application for iPhone/iPad, you must own:
• 1 PC,
• 1 Mac, ▶ To create a project:
• 1 iPhone and/or iPad (optional). 1. Start WINDEV Mobile 25 (if not already done).
2. Display the WINDEV Mobile home page if necessary (Ctrl + <).
Why a PC?
3. On the home page, click "Create a project" then "Android or iOS application".
WINDEV Mobile 25 is a Windows application that can be used in Windows 7, 10, ...
The application will be created on PC before it is compiled on Mac.
This PC requires no setup of Mac/Apple tools.
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 version of the operating system must be iOS 11.
Xcode is a development environment that is used to develop iOS applications (iPhone and iPad).
This tool will be used to compile the applications generated with WINDEV Mobile.
The minimum version of Xcode must be version 11.
4. The wizard for project creation starts. The different steps of the wizard help you create your
See the online help for more details (download addresses, ...). project. The information specified in this wizard can be modified later.

Tip: Other method for creating a project:

Remark
1. Click among the quick access buttons of WINDEV Mobile menu.
2. The window for creating a new element is displayed: click "Project".

52 Part 3: iOS application Part 3: iOS application 53

 5. The first step of the wizard allows you to define the project execution platform: 9. The wizard proposes to type the name of project, its location and its description.

In our case, select "iOS only" and go to the next step of the wizard.
6. The wizard proposes to create a blank project or a project based on an example. Select
"Create a blank project" and go to the next step. In our case, this project will be named "My_iOS_Project". WINDEV Mobile proposes to create
7. The wizard proposes to choose the type of devices affected by the project: this project in the "\My Mobile projects\My_iOS_Project" directory. You can keep this location or
• Generate an application for all iPhones and iPads. modify it via the [...] button.
• Generate an application for all iPhones. 10. Go to the next step ("Next" button).
• Generate an application for all iPads. 11. In the left section of the wizard, click "Guidelines". This step is used to define the code style.
Don’t modify the suggested options. Go to the next step.
• Generate an application for a specific device.
12. This step is used to define the style book of application. We will choose "Ninja".
If the application is intended to operate on several iOS devices (phones
with different sizes or with different resolutions for example), we advise
you to use one of the following options;
• "Generate an application for all iPhones and iPads",
Remark

• "Generate an application for all iPhones".

In this case, WINDEV Mobile proposes the smallest resolution to create
the application windows. Using anchors (see "Interface (UI)", page 65
and "Developing the application", page 104) will allow the application to
operate on all devices.

13. The other steps of the wizard are not important for our first project, so click "Finish". The
project is automatically created.
8. For this example, select "Generate an application for all iPhones" and go to the next step.
14. The window for creating a new element is displayed. This window is used to create all
elements that can be associated with a project.

54 Part 3: iOS application Part 3: iOS application 55

 My first window 5. Specify the title of the element: "Welcome". The name of the element is automatically
proposed: "WIN_Welcome".
Overview Let’s take a look at the window name proposed by WINDEV Mobile: this name
The first window that we will create allows the user to display a welcome message via the "Display" starts with the letters "WIN_". This prefix is automatically added because the
button. project is using a code style.
You may think this is too basic but we advise you to create this window. You may be surprised by The code style is used to define a prefix for each type of object, allowing you to
how intuitive and how easy it is to use the editor of WINDEV Mobile. Furthermore, this window will quickly identify the element:

Remark
allow you to discover concepts that are fundamental for the rest of this tutorial and to see the • a window starts with "WIN_",
entire process for developing an iOS application with WINDEV Mobile. • a button starts with "BTN_",
• etc.
Creating the window
If you do not want to use this code style, you can simply disable it: on the
▶ To create the window: "Project" pane, in the "Other actions" group, expand "Code style" and uncheck
1. In the window for creating a new element, click "Window" then "Window". "Use code style".

As a new project was created, the window for creating a new element is 6. Save the window by clicking "OK".
automatically displayed.
To display the window for creating a new element, all you have to do is click Displaying a message
among the quick access buttons of WINDEV Mobile:
You are now going to create a Button control used to display a message.
Remark

▶ To create the Button control:

1. On the "Creation" pane, in the "Usual controls" group, click . The control appears in
creation mode under the mouse pointer.
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, simply click again.
3. 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:
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. "Ninja", the skin template that was selected when creating the project, is
selected by default. You can choose another skin template proposed in the list.

Skin templates allow you to quickly create outstanding interfaces. A skin

Remark

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.

4. Validate. The window is automatically created in the editor. The window for saving an element 1. This control is named: "BTN_Display".
is displayed. This save window shows: 2. The control caption is: "Display".
• 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.

56 Part 3: iOS application Part 3: iOS application 57

 Note about the assisted input: As soon as the first two characters are typed, WINDEV Mobile
To modify the name and caption of the Button control, we have been using the proposes all words of WLanguage vocabulary containing these characters. The assisted
control description window (also called "7-tab window"). development is a very powerful feature. No more mistakes when entering the name of an
The control name and caption can also be modified from the window currently element: the syntax errors are reduced. All you have to do is select the requested word and press
Remark

being edited: Enter to validate. You can focus on the algorithm.

1. Click the control to select it.
2. Press the Enter or Space key: the caption becomes editable. When typing this WLanguage code in the code editor, you probably noticed that
3. Type the new caption and validate. the different elements use different colors. This is the syntactic coloring. The
code editor allows you to easily identify the different elements handled by the
code:
▶ Validate the control description window ("OK" button). The new control caption appears in the

Remark
• the WLanguage functions are colored in blue,
window editor.
• the character strings (between quotes) are colored in purple,
▶ We are going to display a message in a dialog box (a small window proposed by the system). To • the names of controls are colored in cyan.
do so, we will be using our first WLanguage function: Info. 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
The programming language supplied with WINDEV Mobile is named "Options of the code editor").
Remark

WLanguage. It is a 5th-generation language (5GL) that includes highly

sophisticated commands.
Info displays the message passed in parameter.

1. Select the control if necessary. ▶ Save the modifications by clicking among the quick access button (on the left of ribbon) or
Remarks: by pressing Ctrl + S.
• When the control is selected, several handles appear around the control. ▶ Close the code editor (cross at the top right of code editor). The window re-appears.
• 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 on the control). First test
3. Select "Code". This option opens the code editor of WINDEV Mobile, in which all WLanguage
statements can be typed. For an iOS application, WINDEV Mobile offers several types of tests:
• Project or window test on the development computer using the simulation mode. This test
The code editor proposes different events for each type of control. These are simulates an iOS device on the development computer. This test is useful when the developer
the events related to the control. does not have a Mac or an iOS device to compile the application. However, this test does not
Therefore, two events are displayed for the "Button" control: allow you to use the hardware components of device (GPS, SMS, camera, etc).
Remark

• Initializing, run when displaying the window. • Project test directly on the device. This test is useful when the developer does not have a Mac
• Click, run when the user clicks on the control. to compile the application. All the components of the device are accessible.

Remark: Additional events can be added if necessary. ▶ We will now run the window test in simulation mode.
1. Click among the quick access buttons (or press F9).
4. Write the following code In the "Click" event of the "BTN_Display" control: 2. Validate (if necessary) the information message regarding the simulator mode.
3. The created window is started in execution, in a shell corresponding to the selected device
Info("Hello")
(iPad or iPhone).
4. Click the "Display" button.
5. Validate the system window that is displayed.

58 Part 3: iOS application Part 3: iOS application 59

 ▶ Among the quick access buttons, select " Debug on a mobile device". The window for
connecting to an iOS device appears. This window contains a specific QR code.

6. Click "x" in the menu above the simulator box to close the window. 1. Start WMDev on the mobile device (iPhone or iPad).
7. The WINDEV Mobile editor appears again. • Click on "+" and then on the button displaying a bar code.
▶ Do you have an iPhone? Now, let’s test the project directly on the device. • Scan the barcode displayed under WINDEV Mobile in the connection window of an iOS
device.
▶ First of all, make sure all the following conditions are met: 2. WINDEV Mobile proposes to select the first project window. In our example, select the "WIN_
• the iPhone/iPad and the development workstation must be on the same network (Wifi, for Welcome" window and validate ("OK" button).
example).
• WMDev must be downloaded to the iPhone/iPad (https://itunes.apple.com/us/app/
WMDev/id1437792304).
• the following network ports must be open:
• 64000 (64000 à 64005 if several WINDEV Mobiles are running simultaneously).
• 27280
If a firewall is used, it must be configured to allow the use of these ports.

3. The mobile application starts on the iOS device.

60 Part 3: iOS application Part 3: iOS application 61

 First deployment on the device
This identifier is the unique identifier of your application beside Apple. It
is defined and saved on the Apple developer account.

Remark
Principle This identifier will be used to save your application in order to run its test
To run the application in stand-alone mode on the device, you must: and to deploy it. By default, WINDEV Mobile automatically proposes an
identifier that respects the development standard of Apple. This identifier
• Generate the iOS application (or Xcode project) in WINDEV Mobile.
can be modified.
• Transfer the generated Xcode project onto Mac in order to compile it.
• Compile the project in Xcode in order to generate the program.
• type the email address that will be used by default to send the error reports generated by
• Then, the program can be installed on the connected device or started in the Xcode emulator.
the application.
It will run in stand-alone mode.
4. Go to the next step. You have the ability to specify the path of different application icons.
Let’s take a look at these different steps.
Several icons can be supplied:
Implementation • icons for iPad and iPad Retina (only if the application proposes windows for iPad),
• icons for all iPhone models (for example, iPhone 4S and iPhone 6 Plus have different
▶ To generate the iOS application: resolutions).
1. On the "Project" pane, in the "Generation" group, click "Generate" (you can also click 5. Go to the next step.
among the quick access buttons).
6. Specify the characteristics of the splash screen.
2. The wizard for generating an iPhone/iPad application starts.
7. Go to the next step. Specify the version number of the generated application.
8. Go to the next step. This step is used to include specific files (data files, images, ...). This
possibility will not be used in our example. Keep the default options.
9. Go to the next step. This step is used to specify:
• whether the application is allowed to be resized or not (Split View). The option allows
the end user to display two windows of two different applications side by side on some
devices.
• whether files can be shared with iTunes. If this option is checked, you will have the ability
to retrieve the application files on Mac during the synchronization. For example, if data
files have been supplied with the application, the iTunes application will allow you to
retrieve these files.
• the minimum iOS version required to run the application.
10. Go to the next step. This step is used to define the signature options.
See the online help for more details.
11. Validate the wizard ("Finish"). The generation is performed in the EXE folder of project
directory. The directory containing the source code that will be used on Mac is named "Project_
name.xcode.gen" ("My_iOS_Project.xcode.gen" in our example). This is the directory that must
3. The first step of the wizard allows you to: be copied onto Mac. Click the "Open the generation directory" button.
• define the application name, the company and the copyright. The other operations must be performed on Mac. You must:
• enter the bundle identifier. • Transfer the WINDEV Mobile project onto Mac.
• Compile the project in Xcode.

62 Part 3: iOS application Part 3: iOS application 63

 Transferring the WINDEV Mobile project onto Mac
▶ To transfer the WINDEV Mobile project onto MAC:
Lesson 3.2. Interface (UI)
1. Copy the entire folder generated in the EXE directory onto an external media (USB key,
external hard disk, shared directory with MAC on network). This directory is named <Project
Name>.xcode.gen. This lesson will teach you the following concepts
2. Paste this folder on the MAC that will compile the application.
3. Open the folder on MAC and open the file named "Project_name.xcodeproj".
4. The project is opened in Xcode. • Choosing the resolution according to the device.
• Window orientation.
Compiling the project in Xcode • Touchscreen management.
WINDEV Mobile automatically generates an Xcode project for your iOS compilations. To simplify
the implementation of applications, WINDEV Mobile generates a "Scheme" for Xcode.
▶ To compile the project in Xcode:
1. In the drop-down list found in the top left corner, select the compilation options. Select
the scheme (corresponding to your application) then the compilation target (device currently Estimated time: 20 mn
connected or a simulator).
2. To start the compilation, select "Product .. Clean" then "Product .. Build".
3. A compilation status report appears at the top ("Succeeded", or the number of warnings and
errors). You have the ability to click these symbols to see the list of errors/warnings.
4. Once the program is compiled without error, you can start the simulation ("Product .. Run").
• If the compilation target is the simulator, the application is started in the simulator
window.
• If the compilation target is the connected device, the application is started on the device.
Then, you have the ability to run the test of your application on your iPhone or iPad.

64 Part 3: iOS application Part 3: iOS application 65

 Overview This orientation is defined in the "UI" tab of the description window of window ("Description" from
the popup menu of window).
The iOS system is available on the phones (iPhone), on the tablets (iPad) and on the iPod. WINDEV
Mobile allows you to easily create interfaces that adapt to the device used.

Choosing the resolution according to the device

When creating a project, you must choose the device on which the application will be deployed:
• iPhone,
• iPad,
• iPhone and iPad.

Two cases may occur:

• You know the target device: in this case, all you have to do is select it. The wizard for window
creation will allow you to create windows for this target device.
• You don’t know the target device: in this case, in the wizard for project creation, select "iPhone
and iPad". When creating the windows, you can:
• develop your windows for iPhone. Via the anchoring of controls in the window, the content
will be adapted to the iPad (recommended solution).
• use the layouts to create different interfaces according to the runtime platform and to its
resolution.
• develop 2 sets of windows, one for iPhone, one for iPad. 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
Window orientation anchoring mechanism must be used to get a proper result.

In iPhone or iPad, a window can have one of the following orientations: Practical example
• Free: the window follows the device orientation, ▶ Open (if necessary) the "My_iOS_Project" project that was created in the previous lesson.
• Locked in portrait mode,
• Locked in landscape mode. A corrected project is available. This project contains the different windows

Answer
created in this lesson. To open the corrected project, in WINDEV Mobile’s
home page (Ctrl + <), click "Tutorial" and select "My iOS project (Answer)".

In our example, the project was created for a phone, and we have tested it in portrait mode in the
simulator.
We are now going to run its test in landscape mode in the simulator.

66 Part 3: iOS application Part 3: iOS application 67

 ▶ Run the project test in simulator mode: ▶ We are now going to modify our window in order for the "Display" Button control to be centered
1. In the quick access button area, expand (if necessary) " " and select " Debug on and to remain centered regardless of the device orientation.
iPhone xxx simulator".
▶ Stop the test and go back to the editor.
▶ To center the Button control in the window:
1. Select the Button control (click on the 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. Display the popup menu (right mouse click).
3. Select "Anchor": the window for defining anchors is displayed:

By default, the project test on a mobile device is proposed among the quick
Remark

access buttons. After selecting " Debug on simulator" for the first time,
the corresponding icon ( ) will be automatically proposed among the quick
access buttons.

2. Validate (if necessary) the window that opens up.

3. The window is displayed in portrait mode.
4. The simulator shows an icon-based menu:

5. Modify the window orientation with the "Rotation" option ( ).

6. The window orientation changes on the screen. In our example, the button location does not
change: it does not adapt to the screen orientation.

4. Select "Horizontally centered" and validate ("OK" button).

Remark
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.

▶ Run the project test in simulator mode ( among the quick access buttons):
• The button is centered in portrait mode.
• Change the orientation of simulator.
• The button remains centered in landscape mode.

68 Part 3: iOS application Part 3: iOS application 69

 Touchscreen management 7. Display the "Details" tab: the options for multi-touch management are displayed:

One of the most important aspects of the interface for a mobile application is the touchscreen
management.
A "multi-touch" feature is a technique allowing the user to interact with a device via several contact
points.
Handling images is one of the most common multi-touch features. 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 events.

See the online help for more details.

Practical example 8. Select "Automatic scroll and zoom".

▶ Open (if necessary) the "My_iOS_Project" project that was created in the previous lesson. 9. Validate the control description window.
10. Save the window (click among the quick access buttons).
11. A UI error appears in the error pane: the automatic window scrollbars are in conflict with the
Answer

A corrected project is available. To open this project, in the WINDEV Mobile scrolling features of Image controls.
home page (Ctrl + <), click "Tutorial" and select "My iOS project (Answer)". 12. To avoid this UI error, disable the window scrollbars:
• Display the description window of window ("Description" from the popup menu).
• In the "UI" tab, uncheck "Automatic scrollbars".
▶ In the "WIN_Welcome" window, create an Image control: • Validate the description window.
1. On the "Creation" pane, in the "Usual controls" group, click "Image". 13. Save the window (click among the quick access buttons). The UI error disappears.
2. The Image control appears in creation under the mouse.
The multi-touch management cannot be checked in the simulator. To check

Remark
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. this feature, the application must be deployed on the mobile device. We will
4. Double-click the Image control: the description window of control is displayed. see how to proceed in the "Android and iOS: Deploying an application" section.
5. In the "General" tab, select an image from your disk in the "Image" edit control (via ,
"Browse"). 14. Close the project.
6. If the image is found in a directory other than the project directory, WINDEV Mobile proposes
to copy the image file into the project directory. Accept by clicking the "Copy the file into the The different types of controls
suggested directory" button.
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 iOS windows.
• the Map control to view a position on a map or an itinerary.
Some of these controls will be presented in the "Android and iOS: Developing an application"
lesson, page 95.

70 Part 3: iOS application Part 3: iOS application 71

 Lesson 3.3. Distributing the application Overview
WINDEV Mobile allows you to develop applications for the iOS operating system.
Once the applications are created, developed and checked, all you have to do is deploy them.

This lesson will teach you the following concepts

Deployment
Three methods can be used to deploy the application on a device (iPhone or iPad).
• Available distribution modes.
• Via App Store: This type of distribution allows you to distribute your application via the App
Store without any restrictions. Your application will include the signature linked to your
certificate but it will not be linked to a single device.
• Via an In-House network: This type of distribution allows you to distribute your application via a
Web server to a group of users working for the same company. To use this type of distribution,
Estimated time: 5 mn you must register to the iOS Developer Enterprise program. Your application will include the
signature linked to your certificate but it will not be linked to a single device.
• Via an Ad Hoc network: This type of distribution allows you to install the application on an
Ad Hoc network containing up to 100 devices (iPhone and iPad). The application must be
recompiled for the target device by including the certificate for the signature as well as the
unique identifier of the device.

Caution: To run the application test and/or to deploy the application on a device (iPhone or iPad),
you must register beside the iOS Developer Program. This registration is not free of charge. For
more information, please visit: https://developer.apple.com/programs/whats-included/
Three types of registration are available:
• iOS Developer Program - Individuals.
• iOS Developer Program - Organizations.
• iOS Developer Enterprise Program.

This registration is used to get a developer certificate allowing you to sign your applications in
order to compile them and to distribute them. This certificate is not free of charge. This developer
certificate is required even for a simple setup for test (debug) on a device.

72 Part 3: iOS application Part 3: iOS application 73

 PART 4

Programming
concepts

74 Part 3: iOS application

 Lesson 4.1. Concepts and terminology

This lesson will teach you the following concepts

• Main concepts of WINDEV Mobile.

• Terminology used by WINDEV Mobile.

Estimated time: 10 mn

76 Part 4 : Programming concepts Part 4: Programming concepts 77

 Overview Terminology

In the previous parts, we have created our first Android application and/or our first iOS As already seen, a WINDEV Mobile project (linked to an analysis if necessary) is used to create an
application. After these exercises, let’s talk about the main concepts of WINDEV Mobile and application. Before we actually start working with WINDEV Mobile, let’s go back to the vocabulary
about the terminology specific to WINDEV Mobile. used in WINDEV Mobile. Indeed, several terms are specific to WINDEV Mobile and they may differ
from the ones used in other tools.
The following terms are used in the analysis:
Main concepts • Data file: The analysis is used to describe the structure of database files. A "Data file"
WINDEV Mobile allows you to easily create an application. But what is an Application? corresponds to a "table" in some databases.
In WINDEV Mobile, "Table" represents a graphic object used to view the content of a data file in
An application is a tool used to automatically perform tasks, actions. a table and/or to enter rows. A table can be used to type the order details for example.
• Record: A record is sometimes called row. A data file record corresponds to all items defined
To create an application, WINDEV Mobile proposes to create a project. A project links and for the data file.
organizes the different program elements. The program corresponding to the application will be • Item: In the analysis, an item represents a section of a data file. All items found in a data file
created from the project. are used to define the structure of a record.
• Key/Index: With WEBDEV Mobile and its HFSQL database, the concept of index is linked to
If your application is using data, WINDEV Mobile allows you to define the database structure via the concept of key. The concept of key is part of the item characteristics. The keys are used to
the analysis. The WINDEV Mobile analysis contains the description of the data files (also known improve the speed for accessing data and to simplify the browse operations performed on the
as "Tables" in several databases). These data files will contain the application data. data files. In WINDEV Mobile, if a HFSQL data file includes several key items, a single index file
will be created at run time.
Remark

Describing the data files in the analysis does not mean that they are created.
The data files are physically created when running the application. The following terms are used in the windows and reports:
• Window: Windows are used to display or type information on the screen. Windows are also
called "Screens" or "Dialog boxes". The user can directly act on the windows via controls,
One or more WINDEV Mobile projects can be linked to the same analysis. In this case, we talk buttons, ...
of shared analysis. For example, an application for business management can be divided into • Report: Reports are used to get a custom view of information. This information can come from
several modules. Each module is using the same analysis (at run time, each application can also the database, from text files, from controls found in the windows, ... Reports can be generated
use the same data files). in PDF in mobile applications.
• Control: "Control" is the term used to identify the different graphic objects displayed in a
Project 1 window or report.
• Skin template: The skin template is used define the application style: visual appearance of
windows, buttons, controls, ...
Classes Style
sheet
Windows
and controls • Style: The style groups the graphic characteristics of an element: background image, border,
font, ... The styles of different elements found in the interface of a WINDEV Mobile application
are grouped in a style sheet.

Analysis

Project 2 Project N

Classes Style Windows Classes Style Windows

sheet and controls sheet and controls

78 Part 4: Programming concepts Part 4: Programming concepts 79

 Lesson 4.2. The WLanguage basics The variables

What is a variable
In a programming language, a variable is used to store data. These memory sections contain
This lesson will teach you the following concepts strings, numbers, etc.
The variables are used to perform calculations, to perform comparisons or to store information
that will be used later.
• The different types of variables.
• Main WLanguage statements.
• The main WLanguage operators.
• Procedures and functions.
• Processing strings, numeric values and currencies.

Estimated time: 1 hour

A variable is represented by:

• a name: Name given to the variable so that it can be used by the language.
• a type: Nature of data stored in the variable (see The types of variables).
• a value: Information stored in the variable.
• a scope: Limit for using the variable in the program (see The scope of variables). The scope is
mainly defined by the location where the variable is declared.

Declaring and assigning a variable

The variable must be declared (which means created) before it can be used.
• Example of simple declaration:
Price is currency

• Price represents the variable name.

• is is used to declare the variable. The everyday language is used in WLanguage.
• currency corresponds to the variable type.

80 Part 4: Programming concepts Part 4: Programming concepts 81

 • Example of multiple declaration:
Other types are available, such as arrays, structures, dates, times, ...
LastName, FirstName are strings
Advanced variables are also available. These advanced types gather all the

Remark
• LastName, FirstName represent the names of variables. characteristics of the element being used in a single variable.
• are is used to declare a set of variables. Advanced types can be used to handle XML documents, emails, XLS files, ...
• strings represents the type of variables. See the online help for more details.
When the variable is declared, you have the ability to assign it (or to give it a value). For example:
// Assign a currency variable The scope of variables
Price = 1256.67
// Assign a string variable The variables can be declared anywhere in the code. However, according to the position of its
LastName = “Doe” declaration, the variable cannot be used to perform processes or calculations. We talk of variable
scope.
The = operator is used to perform this assignment.
Two types of scope are available:
• Global.
In WLanguage, the " character (double quote) is the character used to delimit a
Remark

character string. In the above example, the doubles quotes are used to assign • Local.
the Doe value to the LastName variable. Global scope
Global means that the variable has an extended visibility in the code. The variable is visible
The variable content can be read and handled: all you have to do is use the name given to the outside the location where it was declared. Several levels are available:
variable to access it. • Project and Set of procedures,
The following example is used to read and display the content of Price variable on the screen: • Window, Mobile Window, Page, Report.
Info(Price)
A variable declared at project level has the greatest visibility in the program. The variable is visible
The types of variables anywhere, in all program processes. However, you should not declare too many variables with this
scope: indeed, the memory occupied by the variable is always reserved even if the variable is not
The variable type is used to specify the kind of information that will be stored in the variable. The used. Using a large number of global variables is not recommended in the program architecture.
most common types are: To pass variables to a process, we recommend that you use parameters (see "Parameters of a
• boolean (True or False), procedure" for more details).
• string ("Doe"), A variable declared at Set of Procedures level and a variable declared at project level have the
• integer (1234), same visibility. The advantage of declaring a variable at the level of a Set is to group (or classify)
• currency (12,32), the variables by theme (set) in order to make the project initialization process more readable.
• real (7,766666), A variable declared at Window, Mobile Window, Page or Report level limits the scope of the
variable to all the processes of the element (Window, Mobile Window, Page or Report) and its
• etc.
controls. This makes it possible to encapsulate and limit the uses.
Important

Use the type corresponding to the information that must be stored. Therefore, Local scope
you will optimize memory and avoid calculation or process errors when using Local means that the variable has a limited visibility in the code. The variable is visible in the
variables in WLanguage functions. process where it was declared. This makes it possible to restrict the use of variable to the process.

Most of these types of variables will be used in this tutorial.

See the online help regarding the relevant type for more details.

82 Part 4: Programming concepts Part 4: Programming concepts 83

 Summary scope diagram Examples:
// Declaration of variables
Each level accesses the variables of Cnt is int
higher levels.
V1 is int

Project
Res is numeric

Global variables // Assignment

Cnt = 10
Global procedures V1 = 3

UI // Use of operators
Cnt = Cnt + 3 // Cnt is equal to 13
(Windows, Pages, Mobile windows, Reports)
Cnt ++ // Cnt is equal to 14
Global variables Cnt -= 8 // Cnt is equal to 6
Cnt = Cnt * V1 // Cnt is equal to 18
Local procedures Res = Cnt / 5 // Res is equal to 3.6

Processes Comparison operators are also available:

• < less than.
Local variables
• > greater than.
• <= less than or equal to.
A variable is global when it is declared:
• >= greater than or equal to.
• in the initialization code of project (or in the declaration code of set of procedures). The
variable is global to the project. • <> different from.
• In the declaration code of global variables of window, page or report. The variable is global to • = equal to.
the element (window, page or report) where it was declared. Other operators are available. See the online help for more details (keyword: "Operators").
In all other cases, a variable is local to the process where it is declared.
Tips
Simple operations on the variables • It is very convenient to name the variables with long names (and to avoid short names such
Several mathematical operators can be used to perform calculations on variables: as i, j, k, ...). When reading the program again, you will be able to easily remember the variable
purpose.
• + to perform an addition.
• To define the name of variables, all Unicode characters (including the accented characters) are
• - to perform a subtraction.
accepted. Meaning improved readability! Caution: some characters are not allowed: space, =,
• * to perform a multiplication. dot, comma, ...
• / to perform a division. • It is very important to give the proper type to the variable according to its use. For example, to
store several digits, you may have to:
Other operators can be used to perform calculations: • use a numeric variable if this variable must be used for calculations.
• ++ to increment from 1 (add 1 to the variable). • use a string variable if this variable must be used to store digits without performing
• - - to decrement from 1 (subtract 1 from the variable). calculations (to store the social security number for example).
• += to assign by adding a value.
• += to assign by subtracting a value.

84 Part 4: Programming concepts Part 4: Programming concepts 85

 The conditional IF and SWITCH statements The SWITCH statement
This statement is used to evaluate an expression and to run a process for each possible expression
The IF statement value.
The SWITCH statement is used according to the syntax below:
This statement is used to run an action or another one according to the result of an expression. If
the expression is checked, a process is run ; if the expression is not checked, another process can SWITCH <Expression>
be started. CASE Value 1:
Process 1...
The IF statement can be used as follows: CASE Value 2:
IF <Expression to check> THEN Process 2...
Process to run if the expression is checked ...
ELSE CASE Value N:
Process to run otherwise Process N...
END
OTHER CASE
Code example: The following code selects a number at random and displays a message according Process ...
to the value. END

Tot is Currency Example: The following code retrieves today’s date and displays a different message according to
// Selects a number at random between 100 and 4000 its value. A specific message is displayed for the 1st and for the 15th of the month. In the other
Tot = Random(100, 4000) cases, today’s date is displayed.
IF Tot>2000 THEN
Info("The amount is greater than 2000") D is Date
ELSE D = Today()
Info("The amount is less than or equal to 2000") SWITCH D..Day // Checks the day of the date
END CASE 1: Info("We are the first day of the month")
CASE 15: Info("We are the 15th of the month")
In this case, the expression to check corresponds to "Tot>2000". OTHER CASE: Info("We are the: " + DateToString(D))
END
Remark: Several code lines can be run during the process corresponding to a condition. In this
Remarks:
case, the following syntax must be used:
• If the code line "CASE 1:..." is run, the other code lines corresponding to the possible values are
IF <Expression to check> THEN not run.
Code line 1
Code line N • Several values can be grouped in the same case. The different values are separated by a
ELSE comma. For example:
Code line 1 Sub is int = 2
Code line N SWITCH Sub
END CASE 1,2: Info("Case 1 or 2")
CASE 3: Info("Case 3")
OTHER CASE: Info("Other case")
END

• Several code lines can be run during the process corresponding to a condition. In this case, the
following syntax must be used:
SWITCH <Expression>
CASE Value 1:
Process 1 - Code line 1...
Process 1 - Code line 2...
CASE Value N:
Process N - Code line 1...
Process N - Code line 2...
END

86 Part 4: Programming concepts Part 4: Programming concepts 87

 The loops For example:
Counter is int
The loop statements are used to run a process in a recurring way. A specific loop statement is Counter = 10
used according to the number of occurrences. Several statements can be used to perform loops: LOOP
• FOR... // Process to run
Counter = Counter - 1
• LOOP... IF Counter = 0 THEN BREAK
• WHILE... END

The FOR statement

The LOOP statement and the FOR statement can have the same behavior: all
The FOR statement is used when the number of occurrences to process is known. This statement you have to do is use the syntax with exit according to the number of iterations:
is used to manage the number of occurrences via a variable in which the passages performed in
the loop will be counted. LOOP (<Number of iterations>)
...
The syntax of FOR statement is as follows: END

Tip
FOR Subscript = Start Value TO End Value
Process to run Example:
END LOOP(10)
// Process to run
For example, the following code runs the process 2000 times: END
FOR Cnt = 1 TO 2000
// Process to run
END

Remark: An increment step of subscript can be defined via the STEP keyword. For example, the The WHILE statement
following code runs the process 2000 times and the Cnt variable decreases by 10: The WHILE statement and the LOOP statement operate according to the same principle. The
FOR Cnt = 2000 TO 1 STEP -10 difference is that the test of exit condition is performed BEFORE running the loop code. This test
// Process to run is used to compare a variable. This variable starts from a start value and it is modified in the loop
END until it reaches the value that triggers the exit from the loop.
The syntax of WHILE statement is as follows:
The LOOP statement
<Initialize the variable to its start value>
The LOOP statement is used to perform loops when the number of occurrences to process is WHILE <Compare the variable to its end value>
unknown. In this case, a test must be used to exit from the loop. Process to run
<Modify the variable>
END
The syntax of LOOP statement is as follows:
LOOP For example:
Process to run
IF <Expression> THEN BREAK Counter is int
END Counter = 0
WHILE Counter<10
// Process to run
Counter = Counter + 1
END

88 Part 4: Programming concepts Part 4: Programming concepts 89

 The procedures To create an internal procedure, type the following code in the requested process:
INTERNAL PROCEDURE <Procedure name>()
A procedure is used to associate an identifier with a code section in order to re-use it. <Code of internal procedure>
In this lesson, we are going to present the different types of procedures available in WLanguage, END
their creation mode, how to call them, pass parameters and retrieve a result.
To call a procedure, use the procedure name (with the possible parameters that will be passed to
Types of procedures it).
Three types of procedures are available: <Procedure name>(<Parameter 1>, ..., <Parameter N>)
• Global procedure: can be used in all project processes (declared in a set of procedures). See the online help for more details (keyword: "Procedure").
• Local procedure in a Window, Page or Mobile Window: can be used in all processes that
depend on the object in which this procedure was declared. Procedure parameters
• Internal procedure in a process: can only be used in the process where it was declared. What is a parameter?
A parameter is a value sent to a procedure during the call to the procedure.
Scope of procedures
Remark

The following example is used to call the Multiply10 procedure and to pass in parameter the value
The procedures comply with the scope rules presented for the variables (see that will be handled in the procedure:
"The scope of variables").
Multiply10(50)

You have the ability to pass from 0 to several values in parameter to a procedure. These values
Creating and calling a procedure can have any type (as with the variables).
The parameter is specified in the procedure declaration in the format of a variable. For example,
To create a global procedure, you must: for the Multiply10 procedure, the procedure code is:
1. Create (if necessary) a set of procedures (via the "Project explorer" pane, "Procedures" folder).
Give a name to the set of procedures. PROCEDURE Multiply10(P)
P=P*10
2. Create a global procedure in the set of procedures (via the "Project explorer" pane,
"Procedures, Set name" folder). Give a name to the procedure. P is the parameter expected by the procedure.
3. Type the code of global procedure. The procedure code has the following format:
PROCEDURE <Name of global procedure>() To specify the parameter role in the procedure, you have the ability to typecast
the parameter in the procedure declaration.

Remark
To create a local procedure, you must: For example, to use numeric values only, you have the ability to declare:
1. Select the element associated with the procedure (window, page, etc). PROCEDURE Multiply10(P is numeric)
2. Create a local procedure (via the "Project explorer" pane, expand the element name, "Local
procedures" folder).
3. Give a name to the procedure.
In the following example, the Multiplication procedure expects two Integer parameters and returns
4. Type the code of local procedure. The procedure code has the following format: the multiplication result.
PROCEDURE <Name of local procedure>() The procedure code is as follows:
PROCEDURE Multiplication(Nb1 is int, Nb2 is int)
MyResult is int
MyResult = Nb1 * Nb2
RESULT MyResult

90 Part 4: Programming concepts Part 4: Programming concepts 91

 The code used to call the procedure is as follows:
In the same procedure, some parameters can be passed by reference while

Remark
res is int
res = Multiplication(10, 50) other parameters can be passed by value. All you have to do is used the LOCAL
// Res is equal to 500 keyword in front of each parameter passed by value.

How to use the parameters?

Mandatory or optional parameters?
By default, passing parameters in WLanguage is performed by reference (or by address). The
parameter in the procedure represents (references) the variable passed during the call. The parameters received in the procedure can be mandatory or optional parameters. A
mandatory parameter must be filled during the call to the procedure while an optional parameter
Therefore, when a procedure statement modifies the parameter value, the value of the variable
can be omitted: in this case, it will take the default value defined when declaring the procedure
corresponding to this parameter is modified.
parameters.
Example:
• The procedure code is as follows:

Remark
When declaring a procedure, the optional parameters are the last parameters
PROCEDURE Test_address(P1)
P1 = P1 * 2 (they are always specified after all mandatory parameters).

• The code used to call the procedure is as follows:

T is int In the following example, the Multiplication procedure is using an optional parameter, Nb2. This
T = 12 // T is equal to 12 before the call optional parameter is indicated after the mandatory parameters, by specifying its default value. In
Test_address(T) this example, the default value of optional parameter is set to 10.
// T is equal to 24 after the call
PROCEDURE Multiplication(Nb1 is int, Nb2 is int=10)
To avoid modifying the value of the variable corresponding to the parameter, the parameters must MyResult is int
MyResult = Nb1 * Nb2
be passed by value. Passing parameters by value allows you to handle a copy of parameter value. RESULT MyResult
If the procedure code modifies the variable value, the value of the variable corresponding to the
parameter is not modified. The code used to call the procedure is as follows:
To force a parameter to be passed by value to a procedure, the LOCAL keyword must be used res is int
in front of the parameter name in the procedure declaration. This keyword indicates that the res = Multiplication(6)
following parameter will not be modified by the procedure. // Res is equal to 60
Example:
• The procedure code is as follows: In this example, the second parameter was not specified. Therefore, its default value will be used.

PROCEDURE Test_value(LOCAL P1) Procedure result

// Local indicates that the parameter will be passed by value
P1 = P1 * 2 The procedures can return one or more results. The result can be typecasted. The RESULT keyword
must be used to return a value.
• The code used to call the procedure is as follows: See the online help for more details (keyword: Result).
T is int
T = 12 // T is equal to 12
Test_value(T)
// T does not change

92 Part 4: Programming concepts Part 4: Programming concepts 93

 PART 5

Android and iOS:

Developing an
application

94 Part 4: Programming concepts

 Lesson 5.1. Overview

This lesson will teach you the following concepts

• What is a multi-platform project?

• Which project is used for this part?
• How to enable a platform?

Estimated time: 10 mn

96 Part 5: Android and iOS: Developing an application Part 5: Android and iOS: Developing an application 97
 Overview The sample project used
Two separate projects have been created in the previous parts: an iOS project and an Android In this lesson, we are going to develop an Android and iOS application that is using a HFSQL Classic
project. database. The creation of projects was already presented in the previous part therefore we will be
This new part will allow you to develop an Android and/or iOS application that is using a HFSQL working on an existing project, containing the database and the data used by the application.
Classic database.
In iOS and Android, only the HFSQL database is accessible in native mode. Both
the Classic mode and the Client/Server mode are available.
This part can be followed both by the developers of Android applications and by
Remark

the developers of iOS applications. The operations performed are identical, no HFSQL Classic
matter whether the project is developed for Android only or for iOS only. In HFSQL Classic mode, the data files are stored on the device (iPhone, iPad,
Android phones or tablets).
In this case, the application is stand-alone. No Wi-Fi or 4G connection is
We are going to develop a multi-platform project that can be used both on an Android platform and
required.
on an iOS platform.
The data is stored in the device memory. The maximum storage size depends
Most of the time, when developing an application for Mobile, this application must operate both
on the amount of memory on the device.
on Android and on iOS.
If the data typed on the mobile device must be synchronized with a database
With WINDEV Mobile, there is no need to develop two different projects, to maintain them and to
found on a server (HFSQL or other), the replication must be implemented (see
make them evolve in parallel. All you have to do is create a single project associated with several
the online help).
platforms, Android and iOS for example: it is a multi-platform project.

Remark
Each project element (windows, queries, ...) can be associated with one or more platforms. Mobile device Windows or Linux
HFSQL server
If a window is common to several platforms, the specific features of the platform can be managed
via the layouts. The layout is used to define several views of a window in the same project without
duplicating this window. Manta server

When the project is developed, all you have to do is select the requested configuration to create
and deploy the application on the selected platform. Hxxx
functions
,
(read,
write...)
Replication HFSQL
Client/Server
databases

Database
In this part, we will develop an application that is using a HFSQL Classic
database.

98 Part 5: Android and iOS: Developing an application Part 5: Android and iOS: Developing an application 99
 Opening project
HFSQL Client/Server
In HFSQL Client/Server mode, no data is stored on the device. The data is ▶ Start WINDEV Mobile 25 (if necessary).
stored on a computer on which a HFSQL server is installed. ▶ Display the home page if necessary (Ctrl + <).
▶ Open the "WM Managing Products" project.
Mobile Device 1 To do so, in the home page, click "Tutorial" and select "iOS/Android application (Exercise)".

A corrected project is available. This project contains the different windows

Answer
created in this lesson. To open the corrected project,
in the home page, click "Tutorial" and select "iOS/Android application (with
windows)".
Windows or Linux
HFSQL server
Mobile Device 2 Choosing the platform
Manta server If you want to develop the application for the Android platform, go to lesson 5.2 - Developing the
application.
If you want to follow this part for iOS only, you must add the iOS platform (see next paragraph
"Enabling the iOS platform").
Remark

HFSQL All operations performed in this part can be performed on a project associated
Client/Server with an Android platform, on a project associated with an iOS platform or on a

Remark
databases multi-platform project.
Mobile Device N
For information, the different images illustrating the lessons of part 5 have been
created with the Android configuration. Slight differences may appear if you are
using the iOS configuration.

Enabling the iOS platform

▶ To enable the iOS platform, simply create a project configuration:
1. On the "Project" pane, in the "Project configuration" group, expand "New configuration" and
To access this computer and this database, a method for communicating with select "iPhone/iPad application".
the server must be enabled in the mobile application (Wi-Fi or 4G) in order to
connect via the network or Internet.
The project configurations are used to define the different types of generations
The response times depend on the quality of Wi-Fi or Internet network and on supported by the project: Android, iOS, component, ...
the amount of requested data.
The project elements can be:
The access to the data will be performed by the Hxxx functions of WLanguage
• common to several configurations (a window used in iOS and Android

Remark
and/or by SQL queries.
for example).
• specific to a configuration (a class used by a component for example).
You can work on a specific configuration at any time: the elements that do not
belong to this configuration will be grayed in the project editor.
See the online help for more details.

100 Part 5: Android and iOS: Developing an application Part 5: Android and iOS: Developing an application 101
 2. The wizard for creating a project configuration starts. The wizard proposes to create an iOS
platform. Go to the next step.
3. You can enter information regarding the platform. Keep the default options and go to the next 5. For this example, select "Generate an application for all iPhones".
step. 6. Go to the next step and validate the wizard. The iOS configuration is automatically created.
4. The wizard proposes to choose the type of devices affected by the project: ▶ You can check the new project configuration in the "Project explorer" pane:
• Generate an application for all iPhones and iPads. 1. Expand "Configurations (iOS application)" at the top of the "Project explorer" pane.
• Generate an application for all iPhones. 2. The two configurations are displayed:
• Generate an application for all iPads.
• Generate an application for a specific device.

If the application is intended to operate on several iOS devices (phones

with different sizes or with different resolutions for example), we advise
you to use one of the following options: "Generate an application for all
Remark

iPhones and iPads", "Generate an application for all iPhones" or "Generate

an application for all iPads".
In this case, WINDEV Mobile proposes the smallest resolution to create the
application windows. Using anchors (see "Managing anchors in the Product 3. To select a specific configuration, simply double-click the name of the requested
form", page 127) will allow the application to operate on all devices. configuration.
4. The iOS configuration that was just created is automatically selected.

Let’s now start developing the application.

▶ For the rest of this tutorial, we recommend that you activate the Android configuration.
1. Expand "Configurations (iOS application)" at the top of the "Project explorer" pane.
2. Double-click on the configuration name "Android application".
3. The Android configuration is automatically selected.

For information, the different images illustrating the lessons of part 5 have been
Remark created with the Android configuration. Slight differences may appear if you are
using the iOS configuration (especially in the Action Bar).

102 Part 5: Android and iOS: Developing an application Part 5: Android and iOS: Developing an application 103
 Lesson 5.2. Developing the application Project analysis
Let’s take a look at our initial project. This project contains no window. It only contains the analysis
describing the HFSQL Classic data files that will be used. The corresponding data files are supplied
with data in order to run the different tests.
This lesson will teach you the following concepts
▶ To view the analysis associated with the project:
1. Click among the quick access buttons of WINDEV Mobile menu.
• Creating a window containing a looper. 2. The data model editor is displayed.
• Specific controls: Looper control, Multiline Zone control, Map control, ...
• Handling the database.
• Features specific to the device used (GPS, Photo, ...).

Estimated time: 30 mn

3. This analysis includes 3 data files:

• A "Product" data file, which contains the product description: name, price, quantity, ...
• A "Characteristic" data file, which contains the different product characteristics. For
example, if the product is a tee-shirt, its characteristics will correspond to the size, the
color, ... The "Characteristic" data file is therefore linked to the "Product" data file.
• A "Store" data file, which contains the GPS coordinates of each store.
4. Close the data model editor (click the cross at the top right of editor).

Displaying the list of products

We are going to create a window used to list the different products. These products will be
displayed in a "Looper" control.
This window will be created with the window creation wizard.

The window creation wizard offers several preset windows. These windows
Remark
propose modern interfaces for your applications.
Most of these windows can be generated from your data, by including the
WLanguage code required for them to operate. They can be used straightaway.

104 Part 5: Android and iOS: Developing an application Part 5: Android and iOS: Developing an application 105
 Creating the window 6. Go to the next step.
7. Select the style of the Looper control: "Image + Title + Caption below". This template is used
▶ To create the window used to list the products:
to get an interface containing the image of product, its name and its description.
1. Click among the quick access buttons. The window for creating a new element is
displayed: click "Window" then "Window".
2. In the wizard, select the "Standard" tab. In the "Phone" area, choose "Looper" and validate.

If you are using an iOS configuration, the window for creating a new window
contains additional options, specific to iOS.
Remark

A "Looper" window can be created for an iOS platform and for an Android
platform.
Reminder: The images in part 5 of this tutorial use the Android configuration.
Slight differences may appear if you are using the iOS configuration.

3. The window creation wizard starts.

8. Go to the next step.
4. If the iOS platform was added, several platforms are proposed. We advise you to choose the
platform with the smallest resolution. 9. The wizard automatically proposes the file items corresponding to the different controls of
the generated looper.

Go to the next wizard step.

5. The wizard proposes to choose the data source associated with the window. In our case, it
will be the "Product" data file:
• The "Data files" option is selected by default.
• Select the Product data file.
10. Keep the proposed items and go to the next step.
11. Keep the suggested sort on the "ProductID" item. Go to the next step.

106 Part 5: Android and iOS: Developing an application Part 5: Android and iOS: Developing an application 107
 12. The wizard proposes several options for generating the Looper window: 15. Validate the wizard. The window is automatically created, displayed in the editor and saved.

Data automatically appears in the window displayed in the editor. This concept

Remark
is called "Live Data": you see the data of your data files in real time!
This feature is very useful to adapt the size of controls to their content.
• Generate a creation button in the Action Bar: If this option is selected, the wizard
proposes to generate an editable form window.
▶ We are going to run a first test in the simulator to see the result. Click among the quick
• Enable the deletion by row swipe: If this option is selected, the user will be able to delete access buttons (or press F9).
an element of the Looper control by swiping the corresponding row.
• Code for row selection: If "Generate the opening code of the form in read-only" (or
"Generate the opening code of the form in edit") is selected, the wizard proposes to
generate a form window in read-only or in edit mode.
13. In our example, keep the default options. Go to the next step.
14. Give a title and a name to the generated window. Type the window title: "List of products".
The window name is automatically filled.

▶ Close the simulator to go back to the window editor.

108 Part 5: Android and iOS: Developing an application Part 5: Android and iOS: Developing an application 109
 When a project is associated with several platforms, the test of current window If several platforms are defined in the project, the window for saving an element
is run with the current platform. The shell used for the simulator is also adapted proposes to associate the new element to all platforms.
to the current platform. To associate the element to a single platform, all you have to do is expand
Remark

To perform the test on another platform, simply enable this platform by double- "Configurations" in the save window and choose the requested platform:
clicking its name in the "Project explorer" pane.
Remark: In this part, the images representing the tests correspond to an Android

Remark
shell.

Creating the form window

We are now going to create a new window used to display the product form. Then, this window will
be started from the list of products to display the details of selected product.
Creating the window
▶ To create the form window:
1. Create a new blank window. Creating controls
• Click among the quick access buttons. ▶ To create the different edit controls used to display information about the product:
• The window for creating a new element is displayed: click "Window" then "Window". 1. Display the "Analysis" pane if necessary: on the "Home" pane, in the "Environment" group,
• In the wizard, select the "Standard" tab, choose "Blank" and validate. expand "Panes" and select "Analysis". The different data files described in the "WM Managing
2. The window for saving an element is displayed. Specify the window title: "Product form". Its Products" analysis appear in the pane.
name is automatically proposed: "WIN_Product_form". 2. With the mouse, select the items of the "Product" data file displayed in the pane (except for
the "ProductID" item).
3. Drag and Drop these items to the window that was just created.

Validate.
3. The window is added to the project, for all configurations.

110 Part 5: Android and iOS: Developing an application Part 5: Android and iOS: Developing an application 111
 4. Resize the controls ("Name", "Bar code", "Reorder Date" and "Description") so that they 2. Enter the following WLanguage code in the event "End of initialization of WIN_Product_form":
become visible in the window. FileToScreen()
5. Reorganize the controls in the window. Respect the following order: "Photo", "Name", "Price",
"Quantity", "Bar code", "Reorder Date", "Description". FileToScreen is used to display in the controls the data found in the data file, for the current
record. In our case, the current record will be the record selected in the Looper control of "WIN_
List_of_products". This Looper control is linked to the Product data file.
3. Close the code window.
4. Save the window.
Displaying the form from the list of products
Let’s now see how to display the form of selected product in the list of products.
▶ Perform the following operations:
1. Position on the "List of products" window: click the "WIN_List_of_products" button in the open
documents bar:

2. Select the Looper control.

6. We are going to view the tab order in the window:
Caution: make sure you select the Looper control and not one of its controls.
• Press F5. The numbers that are displayed represent the tab order in the window.
3. Display the popup menu of Looper control (right click) and select "Code".
4. In the code window that appears, write the following WLanguage code in the event "Selecting
a row of...":
OpenMobileWindow(WIN_Product_form)

The assisted code input is going to help you: as soon as you type the opening
bracket "(", a drop-down list proposes the name of all existing windows found

Remark
in the project. All you have to do is select the window with the keyboard or with
the mouse.
If the window name is not displayed in the list, it means that this window was
not saved beforehand.

5. Save the modifications by clicking among the quick access buttons.

Press F5 again to hide the numbers. 6. Close the code window (click X at the top right corner of code editor).
• The tab order is automatically adapted to the order of controls in the window.
▶ Run the test of "WIN_List_of_products" window again in the simulator ( among the quick
7. Save the window. access buttons).
▶ Run the test of "WIN_Product_form" window ( among the quick access buttons). • In the list of products, click one of the products with the mouse.
1. The window is displayed with empty controls. • The detailed product window is displayed.
2. Close the simulator. ▶ Close the simulator.
▶ To display the product data:
1. Display the WLanguage events associated with the window:
• Perform a right mouse click in the area beside the window.
• Select "Code" from the popup menu that is displayed.
• The code editor appears.

112 Part 5: Android and iOS: Developing an application Part 5: Android and iOS: Developing an application 113
 Managing the product creation and modification
The description window of Action Bar is adapted to the platforms used in the
We are now going to modify our two windows in order to manage the product addition and project. Indeed, the Action Bar used in an Android application differs from the
modification. Action Bar used in an iOS application.
If your project is using an Android configuration, only the options
Modifying the product form corresponding to the Action Bar for Android are displayed.

Remark
When creating the form window, an Action Bar was automatically created. This Action Bar contains Similarly, for an iOS configuration, only the options corresponding to the Action
a left button used to cancel the current input and to go back to the previous window. In our case, Bar for iOS are displayed.
this button will be used to go back to the list of products. If your project is using both an Android configuration and an iOS configuration,
the window displays a preview of the Action Bar for the two platforms.
Numbers allow you to access the options to configure.
We are going to present the options required by our example.
See the online help for more details.

3. Click on number 2 (any number 2 in the window). The interface for typing an option in the
There is no modification to perform.
toolbar is displayed.
We are going to add a validation button into the Action Bar of "WIN_Product_form" window in order
4. Click on "+" (below the "Top right" area) to add an option. A new default option is created at
to manage the validation of modifications.
the top right.
▶ First of all, display (if necessary) the "WIN_Product_form" window in the editor: click the 5. Modify the characteristics of this option:
corresponding button in the open documents bar. • In the "Option caption" area, type "Done".
▶ To add a validation option into the Action Bar of window:
1. Select the Action Bar (at the top of window).
2. Open the Action Bar description window: right-click and select "Description" from the popup
menu.

At run time, the option caption appears in the Action Bar:

Remark

• If no image is associated with the option.

• If the option is transferred into menu at the bottom.

114 Part 5: Android and iOS: Developing an application Part 5: Android and iOS: Developing an application 115
 • In the "Preset image" area, expand the list and select "Done". • Write the following WLanguage code in the event "Selecting the menu":
ScreenToFile()
HSave(Product)
Close()

Let’s take a look at these lines of code:

• ScreenToFile is used to initialize the items with the values of linked controls, for the
current record.
• HSave is used to update the file data for the current record.
7. Save the modifications by clicking among the quick access buttons.
8. Close the code window (click X at the top right corner of code editor).
▶ When closing the product form, the content of the product list found in the "WIN_List_of_
products" window must be refreshed to take into account the modifications performed in the
form. To do so, use the event "Closing a child window" of "WIN_List_of_products".
1. Click the "WIN_List_of_products" button in the open documents bar:

• Validate the description window. 2. Right-click the window background and select "Code" from the popup menu. The following
WLanguage code is automatically displayed in the event "Closing a child window":
Remark

To go back to the interface for describing the Action Bar, all you have to LooperDisplay(LOOP_Product, taCurrentSelection)
do is click the button. Let’s take a look at this WLanguage code:
• The event "Closing a child window" is run whenever a child window of the current window is
closed. In our case, it is run when the "WIN_Product_form" window is closed.
6. The WLanguage code of this option will be used to save the modifications made in the "WIN_
Product_form" window. To write this code: • LooperDisplay is used to update the data found in the Looper control of "WIN_List_of_
products" window. The taCurrentSelection constant is used to update data from the
• Select (if necessary) the Action Bar control of window.
selection bar.
• Click on "OK". This WLanguage code was automatically generated when the wizard created the window.
• A drop-down menu with the "Done" option is displayed. 3. Close the code window (click X at the top right corner of code editor).
▶ Run the test of "WIN_List_of_products" window in the simulator ( among the quick access
buttons).
• In the list of products, click one of the products with the mouse: for example, the "Polo
Hibiscus Blue" product.
• The detailed window of product is displayed. Modify the product name and type "Polo
Hibiscus Light blue" and click the "OK" button.
This drop-down menu is visible in edit to type the WLanguage code • When going back to the list of products, you will notice that the name of this article was
Remark

associated with the option. This drop-down menu will not be displayed at updated.
run time. ▶ Close the simulator. The WINDEV Mobile editor is displayed.

• Right-click the option.

• Select "Code" from the popup menu that is displayed.

116 Part 5: Android and iOS: Developing an application Part 5: Android and iOS: Developing an application 117
 Creating a new product
The principle for creating a product is as follows:
• In the window for the list of products, we are going to add option into the Action Bar of window
in order to open the "Product form" window.
• Then, we will modify the WLanguage code of "Product form" window to manage the addition
into the Product data file.
▶ To add an option into the Action Bar of window:
1. First of all, display (if necessary) the "WIN_List_of_products" window in the editor: click the
corresponding button in the open documents bar.
2. Select the Action Bar (at the top of window).
3. Open the Action Bar description window: right-click and select "Description" from the popup
menu.

• In the "Preset image" area, expand the list and select "Add".

• Validate the description window.

6. The WLanguage code of this option is used to open the "Product form" window and to reset
4. Click on number 2 (any number 2 in the window). The interface for typing an option in the its controls. To enter this WLanguage code:
toolbar is displayed. • Select (if necessary) the Action Bar control of window.
5. Click on "+" (below the "Top right" area) to add an option. A new default option is created at • Click the "+" button.
the top right. Modify the characteristics of this option: • A drop-down menu with the "New product" option is displayed.
• In the "Option caption" area, type "New product".

118 Part 5: Android and iOS: Developing an application Part 5: Android and iOS: Developing an application 119
 • Right-click the option. Using the camera and displaying an image
• Select "Code" from the popup menu that is displayed.
• Write the following WLanguage code in the event "Selecting the menu":
HReset(Product) This paragraph requires a device equipped with a camera. If this is not the case,
go to the next paragraph directly.

Caution!
OpenMobileWindow(WIN_Product_form)
Furthermore, this paragraph requires the application to be installed on the
HReset initializes the item variables in the "Product" data file with the default values to device because it is using hardware resources that are not accessible in
manage a new record. Simulation mode.
7. Save the modifications by clicking among the quick access buttons.
8. Close the code window (click X at the top right corner of code editor).
Overview
▶ Let’s now check the management of record addition into the window of product form.
1. Open the "WIN_Product_form" window in the editor: click the corresponding button in the We are going to manage the product photo by using the device camera.
open documents bar. To do so, we are going to:
2. Display the code of validation option in the Action Bar: • create a Button control to launch the camera. The photo will be retrieved in the format of an
• Select the Action Bar. image in memory and displayed in the Image control of product.
• Click on "OK". • create a Button control to select a photo from the mobile device’s album.
• A drop-down menu with the "Done" option is displayed. Creating the button for taking photos
• Select "Code" from the popup menu of "Done" option (right mouse click).
• The WLanguage code of the "Click" event does not change: ▶ To create the Button control used to take photos:
1. Open the "WIN_Product_form" window in the editor.
ScreenToFile()
HSave(Product) 2. Add a Button control in the window:
Close() • On the "Creation" pane, in the "Usual controls" group, click : the control shape
appears under the mouse.
Let’s look at this code again:
• Then click on the top right of the Image control to create the Button control.
• By default, HSave is equivalent to HModify (current record modified in the data file).
• If Hreset has been previously called (as is the case when adding a new product), HSave ▶ We will modify the Button control to associate it with an image representing a camera:
adds a new record in the data file (equivalent to HAdd). 1. Select the control and open its popup menu (right click).
3. Close the code window (click X at the top right corner of code editor). 2. Select "Description". The description window of control is displayed.
3. In the "General" tab, click the button on the right of "Image" control. Select "Catalog"
▶ Open "WIN_List_of_products" in the window editor and test it in the simulator ( among the
from the popup menu that is displayed.
quick access buttons).
4. The image catalog of WINDEV Mobile is opened. This catalog contains hundreds of images in
• Click the "+" button found in the Action Bar.
different fields, formats and sizes.
• Type a new product.
• Validate. The new product is displayed in the list of products.
• Close the simulator.

If your project is using several platforms, a GO must be run for each platform.
Remark

The differences regarding the display and the operating modes will appear in
the simulator.

120 Part 5: Android and iOS: Developing an application Part 5: Android and iOS: Developing an application 121
 5. Enter "photo" in the search box at the top and validate. Several images are displayed: 3. The window that appears lists all styles that can be used for the Button controls in the
Phoenix skin template.

6. For example, double-click to select it.

7. In the window that appears, you can select the image size, color, orientation, format and
name.
8. Keep all default options and specify the image name ("Camera"). 4. Click the magnifier and enter "BTN_Blank".
9. Validate the window.
10. The path of the image is displayed in the Button control description.
11. Give a name to the control: "BTN_Camera".
12. Clear the control caption.
13. Validate the description window.
14. In the editor, reduce the control size.
▶ This Button control uses the default style from the "Phoenix" skin template associated with the This name corresponds to a style without background color. This is the style we are going to use.
project: the control background is blue. In our case, the blue background is not necessary. We 5. Press Enter to validate. The "BTN_Blank" style is automatically selected.
will modify the style associated with the control: 6. Validate the window for style selection.
1. If necessary, select the Button control you have just created. 7. The chosen style is automatically applied to the Button control.
2. Open the popup menu and select "Choose a style".

122 Part 5: Android and iOS: Developing an application Part 5: Android and iOS: Developing an application 123
 Taking photos 2. Replace the WLanguage code of the "Click" event with the following WLanguage code:
We will now enter the WLanguage code to take a photo and to display it in the Image control of the // Local variable
product form. sPhoto is string
// Start the selection
▶ To take photos: sPhoto = AlbumPicker(albumImage)
IF sPhoto <> "" THEN
1. Select "Code" from the popup menu of the Button control (right click). IMG_Photo = sPhoto
2. Write the following WLanguage code in the "Click" event: END
// Local variable In this WLanguage code, AlbumPicker is used to retrieve the selected photo from the photo
sPhoto is string album.
// Start the camera
sPhoto = VideoStartApp(viPictureCapture) 3. Save the modifications by clicking among the quick access buttons.
IF sPhoto <> "" THEN 4. Close the code window (click X at the top right corner of code editor).
IMG_Photo = sPhoto
END
Managing the bar code of product
In this WLanguage code, VideoStartApp is used to launch the native camera application on the
device in order to record video or to take a photo.
3. Save the modifications by clicking among the quick access buttons. This paragraph requires a device equipped with a camera.
4. Close the code window (click X at the top right corner of code editor). Otherwise, you will not be able to test its use.

Caution!
Furthermore, this paragraph requires the application to be installed on the
Selecting a photo in the photo album
device because it is using hardware resources that are not accessible in
We are going to add a Button control used to select a photo in the device album and to associate Simulation mode.
it with the product.
▶ To create the Button control for selecting the photo, we are going to "Copy - Paste" the photo Overview
capture Button control that was just created:
1. Select the "BTN_Camera" Button control that was just created. The "Product" data file contains a "Bar_Code" item. This item is used to store the value of a bar
2. Press Ctrl + C: the Button control is copied to the clipboard. code. Some devices (especially the ones equipped with a camera) can scan a bar code to retrieve
its value.
3. Press Ctrl + V: the mouse cursor changes and the control shadow appears under the cursor.
The bar code will be managed via the device camera and by a specific WLanguage function.
4. Click in the window beside the "BTN_Camera" control: the new Button control is automatically
created. Implementation
5. Open the control description window (double-click the control):
▶ To create a Button control to manage bar codes:
• Give a name to the control: "BTN_Photo_Album".
1. Display (if necessary) the "WIN_Product_form" window in the editor.
• Select an image in the image catalog.
Remark: Don’t forget to change the default image name. 2. Add a Button control in the window:
6. Validate the description window. • On the "Creation" pane, in the "Usual controls" group, click .
Remark: This button control corresponds to a "Copy - Paste" of the photo capture Button control, • The control shape appears under the mouse.
the style characteristics are automatically the same. There is no need to modify them! • Create the control next to the "Bar code" control (resize the edit control if necessary).
3. Open the Button control description window (double-click the control):
▶ The WLanguage code associated with this Button control is used to open the device’s photo
• Give a name to the control: "BTN_Bar_Code".
album and select an image to display it in the Image control of the product form.
• Clear the control caption.
1. Select "Code" from the popup menu of button (right mouse click).
• Select an image of bar code in the image catalog (type the "Code" keyword for example).
4. Validate the description window.
5. In the editor, reduce the control size.

124 Part 5: Android and iOS: Developing an application Part 5: Android and iOS: Developing an application 125
 ▶ As for the Button control used to take a photo, we will modify the style associated with the Managing anchors in the Product form
control:
1. If necessary, select the Button control you have just created. All controls have been positioned in the Product form. The vertical and horizontal resolution may
2. Open the popup menu and select "Choose a style". differ according to the devices.
3. In the window that lists the available styles, click on the magnifier and specify "BTN_Blank". The anchoring is used to adapt the size of controls to the resolution and to avoid displaying "empty"
areas in the window (especially at the bottom right).
If the application’s target device is known since the creation of the project, the windows adopt the
size of the target device. No anchoring is required.
If the target device of application is not known or if several devices are used, the smallest common
resolution must be chosen as soon as project creation. The anchoring is required in this case.
▶ To define the anchoring that will be applied to the different window controls:
4. Press Enter to validate. The "BTN_Blank" style is automatically selected. 1. Select the following controls (click each control while keeping the Ctrl key down):
5. Validate the window for style selection. • the Image control that displays the product image,
6. The chosen style is automatically applied to the Button control. • the Button control used to take photos,
• the Button control for selecting a photo from the album.
▶ The WLanguage code of this Button control will make it possible to scan the bar code. 2. Display the popup menu of selection (right mouse click) and select "Anchor".
1. Select "Code" from the popup menu of the control (right click). 3. Select "Centered horizontally" ( ).
2. Write the following WLanguage code in the "Click" event:
// Local variable
bc is BarCodes
// Start the scan
bc = BCCapture()
IF bc..Content <> "" THEN
EDT_Bar_code = bc..Content
END

In this WLanguage code, BCCapture allows you to decode the information stored in a bar code
using the camera of the device.
3. Save the modifications by clicking among the quick access buttons.
4. Close the code window (click X at the top right corner of code editor).

4. Validate.
▶ To define the anchoring that will be applied to the edit controls:
1. Select the following edit controls (click each control while keeping the Ctrl key down):
• Name,
• Bar code,
• Reorder date,
• Description.
2. Display the popup menu of selection (right mouse click) and select "Anchor".
3. Select "Width" ( ).
4. Validate.
126 Part 5: Android and iOS: Developing an application Part 5: Android and iOS: Developing an application 127
 ▶ Repeat this operation for the Button control that allows managing barcodes. In this case, select 4. Click "Disable the automatic scrollbar". The Map control appears in the window editor.
"Right" ( ). 5. Open the "Map" control description window (double-click the control for example).
▶ All anchors have been defined in the window. The red arrows indicating the orientation of 6. In the control description window, specify the control name ("MAP_STORE") and validate.
anchors are displayed: 7. Save the modifications by clicking among the quick access buttons.
Displaying stores on the map

Principle
We are now going to add the code used to display all stores of the "Store" data file on a map.
To do so, we will browse the "Store" data file with a FOR EACH loop. Then, the Marker variables will
be used. A Marker variable is used to define a marker that will be displayed on a map.
A marker contains various information. We will be using the following information:
• Name,
• Latitude,
• Longitude.
MapAddMarker is used to add a marker on the Map control. Then, simply adjust the zoom level to
see all markers in the Map control. If the zoom is not properly adjusted, some markers may not be
visible or may overlap on the control.
Implementation

Using the Map control ▶ To enter the WLanguage code to display the stores:
1. Right-click outside the window. Select "Code" from the popup menu that is displayed. The
We will now present the Map control and the GPS functions of WLanguage. different WLanguage events associated with the window are displayed.
Our database contains a "Store" data file. This data file contains the addresses of stores that will 2. Write the following WLanguage code in the event "Global declarations of...".
be localized on a map via the mapping functions.
// Global variables
gMarker is Marker
Creating the window // Load the stores
We are going to create a new window and add a Map control into it. FOR EACH Store
// Marker coordinates
▶ To create the window: gMarker.Position.Latitude = Store.Latitude
gMarker.Position.Longitude = Store.Longitude
1. Create a new blank window. Click among the quick access buttons. The window for // Marker name
element creation is displayed: click "Window" then "Window". In the wizard, choose "Blank" and gMarker.Name = Store.Name
validate. // Add the marker
2. The window for saving an element is displayed. Specify the window title: "Map of stores". Its MapAddMarker(MAP_STORE,gMarker)
END
name is automatically proposed: "WIN_Map_of_stores". Validate. // Best zoom to view all markers on the map
MAP_STORE..Zoom = zoomAdaptSize
Creating the Map control
3. Save the modifications by clicking among the quick access buttons.
▶ To create the Map control:
4. Close the code window (click X at the top right corner of code editor).
1. On the "Creation" pane, in the "Graphic controls" group, click "Map". The control shape
appears under the mouse. ▶ Run the test of "WIN_Map_of_stores" window in the simulator ( among the quick access
2. Click inside the window to create the control. buttons). Then, close the simulator.
3. A message regarding the management of scrollbars in the window is displayed. Indeed, both
the window and the Map control include their own scrollbar. Therefore, a conflict occurs. A
single scrollbar must be enabled. We advise you to:
• disable the scrollbar in the window because the window has a fixed size,
• keep the scrollbar enabled in the Map control.
128 Part 5: Android and iOS: Developing an application Part 5: Android and iOS: Developing an application 129
 Using a Multiline Zone control Creating the Multiline Zone control
▶ To create the Multiline Zone control:
The "Multiline zone" control is often used on the mobile platforms. This control is used to group 1. On the "Creation" pane, in the "Data" group, click "Multiline Zone". The control shape appears
several controls: under the mouse.
• options on a category, 2. Click inside the window to create the control.
• group of information about a contact, ... 3. Open the control description window (double-click the control for example).
This control can contain at the same time: 4. In the description window, specify the control name ("MZ_MENU") and validate.
• rows defined in edit mode (static rows), The Multiline Zone control contains an empty line. We are going to add as many lines as the
• rows defined at runtime, by programming (dynamic rows). number of options found in our menu.
Our menu will include 3 options:
A Multiline Zone control will be used to create the main menu of our application. We are going to • List of products.
create a new window and insert a Multiline Zone control into it. • Map of stores.
The window that will be created is as follows: • Exit from the application.
Modifying the Multiline Zone control
▶ To modify the Multiline Zone control:
1. Open the control description window (double-click the control for example).
2. Click "New row". A window opens: this window contains all preset line templates.
3. Select the "Simple row with picto" template and validate. Repeat this operation twice.
Now, the multiline zone contains:
• a "blank" row,
• 3 "simple rows with picto".

Creating the window

We are going to create a window and add a Multiline Zone control into it.
▶ To create the window:
1. Create a new blank window:
• Click among the quick access buttons.
• The window for creating a new element is displayed: click "Window" then "Window". In the
wizard, choose "Blank" and validate.
2. The window for saving an element is displayed. Specify the window title: "Menu". Its name is
automatically proposed: "WIN_Menu". Validate.

130 Part 5: Android and iOS: Developing an application Part 5: Android and iOS: Developing an application 131
 4. We are going to delete the blank row that is useless in our example: Modifying the 2nd row: access to the map of stores
• Select the blank row (the first row).
▶ To modify the image in the second row of the Multiline Zone control:
• Then click "Delete".
1. Click the Image control in the second row.
5. Validate the description window. Your menu is created.
2. Open the image description window (double-click the control).
Each row includes an Image control, a Static control and an arrow image. We are now going to
modify the Image control and the Static control of each row in order to represent the menu action. 3. In the description window:
• Give a name to the image ("IMG_MapOfStores" for example).
Modifying the 1st row: access to the list of products • Click on the button . Select "Catalog" from the popup menu that appears to choose an
image representing the action.
▶ To modify the image in the first row of the Multiline Zone control:
• In the image catalog window, type "Map" in the search control and press Enter.
1. Click the Image control in the first row.
• Select an image via a double click.
2. Open the image description window (double-click the control).
• In the window for configuring the generated image, select a size (80 for example, W (Width)
3. In the description window:
= 80 and H (Height) = 80), give a name to the image ("MapOfStores" for example) and
• Give a name to the image ("IMG_ListOfProducts" for example). validate.
• Click on the button . Select "Catalog" from the popup menu that appears to choose an 4. Validate the description window.
image that represents the action.
• In the image catalog window, type "List" in the search control and press Enter. ▶ To modify the Static control in the second row of the Multiline Zone control:
• Select an image via a double click. 1. Click the Static control in the second row.
• In the window for configuring the generated image, select a size (80 for example, W (Width) 2. Open the description window (double-click the control).
= 80 and H (Height) = 80), give a name to the image ("ListOfProducts" for example) and 3. In the description window "General" tab:
validate. • Give a name to the control ("STC_MapOfStores" for example).
• Change the caption ("Map of stores" for example).
The image used in a Multiline Zone control is in "Homothetic extended
Remark

4. Validate the description window.

centered" mode by default. The image will be automatically "resized" to
the proper dimensions. Modifying the 3rd row: exit from the application
▶ To modify the image in the third row of the Multiline Zone control:
4. Validate the description window. 1. Click the Image control in the third row.
▶ To modify the Static control in the first row of the Multiline Zone control: 2. Open the image description window (double-click the control).
1. Click the Static control in the first row. 3. In the description window:
2. Open the description window (double-click the control). • Give a name to the image ("IMG_Exit" for example).
3. In the description window "General" tab: • Click on the button . Select "Catalog" from the popup menu that appears to choose an
• Give a name to the control ("STC_ListOfProducts" for example). image representing the action.
• Change the caption ("List of products" for example). • In the image catalog window, type "Close" in the search control and press Enter.
4. Validate the description window. • Select an image via a double click.
• In the window for configuring the generated image, select a size (80 for example, W (Width)
= 80 and H (Height) = 80), give a name to the image ("Close" for example) and validate.
4. Validate the description window.

132 Part 5: Android and iOS: Developing an application Part 5: Android and iOS: Developing an application 133
 ▶ To modify the Static control of third line found in the Multiline Zone control:
1. Click the Static control in the third row. Lesson 5.3. Managing the orientation
2. Open the description window (double-click the control).
3. In the description window "General" tab: of windows with the layouts
• Give a name to the control ("STC_Exit" for example).
• Change the caption ("Exit from the application" for example).
4. Validate the description window. This lesson will teach you the following concepts
Programming the menu
▶ Finally, we will write the WLanguage code necessary to perform each action in the menu: • The benefit of anchors.
1. Right-click the Multiline Zone control and select "Code". • Creating a layout.
Caution: make sure you select the Multiline Zone control and not one of the controls belonging • Using a layout.
to it.
2. In the code editor, type the following WLanguage code in the event "Selection (click) of a line
in...":
SWITCH MZ_MENU
CASE 1 // List of products
OpenMobileWindow(WIN_List_of_products) Estimated time: 15 mn
CASE 2 // Map of stores
OpenMobileWindow(WIN_Map_of_stores)
CASE 3 // Exit from the application
Close()
END

3. Save the modifications by clicking among the quick access buttons.

4. Close the code window (click X at the top right corner of code editor).

Application test

The last step consists in specifying that the menu window is the first application window. To do so,
we are going to run a full project test and define the first project window.
▶ To define the first project window:
1. Select the "WIN_Menu" window in the "Project explorer" pane.
2. Display the popup menu.
3. Select "First project window". A specific icon (with a small 1) is displayed in front of the
window name, in the "Project explorer" pane.
Until now, the test of windows was run individually by clicking among the quick access buttons.
▶ To start the project test on the simulator:
1. Click among the quick access buttons.
2. Your project starts with the menu window. Click an option of your menu to check whether the
different links are correct.

134 Part 5: Android and iOS: Developing an application Part 5: Android and iOS: Developing an application 135
 Overview All controls found in portrait mode are also displayed in landscape mode but a lot of space is not
used and the window must be scrolled to access all controls.
In most cases, an application for mobile can be used in portrait mode and in landscape mode. We are going to improve the display in landscape mode via layouts.
The interface of a window used in portrait mode can be changed to be used in landscape mode.
WINDEV Mobile manages the change of device orientation via anchors. The layout is used to define several views of a window in the same project
Most of the time, the anchors are sufficient to adapt the display to the different orientations. without duplicating this window.
However, if the interface must change according to the orientation (different positioning of controls This gives you the ability to define:

Remark
in portrait mode and in landscape mode for example), the anchors are not sufficient. • a specific view for the portrait mode,
To manage a different interface in portrait mode and in landscape mode, WINDEV Mobile gives • a specific view for the landscape mode,
you the ability to use layouts.
• a view specific to the phone,
▶ To follow this lesson, open (if necessary) the "WM Managing Products" project that was created • a view specific to the tablet,
in the previous lesson. • ...

If the "WM Managing Products" application was not created, a corrected ▶ To create a new layout:
project is available. This project allows you to follow this lesson.
1. Open the "WIN_Product_form" window if necessary.
To open this intermediate project, in WINDEV Mobile’s home page (Ctrl + <),
2. On the "Window" pane, in the "Layouts" group, expand "Layouts" and select "Add layouts".
Answer

click "Tutorial" and select "iOS/Android application (With windows)".

A corrected project is also available. This project groups all windows developed
in this lesson.
To open this corrected project, in WINDEV Mobile’s home page (Ctrl + <), click
"Tutorial" and select "iOS/Android application (Answer)".

Using anchors
▶ The anchors have already been used in the "WIN_Product_form" window. In test mode, we get 3. The wizard for creating a layout starts.
the following interfaces: 4. Go to the next step of the wizard.

136 Part 5: Android and iOS: Developing an application Part 5: Android and iOS: Developing an application 137
 5. The wizard proposes to manage the differences between the phone and the tablet. The ▶ Two layouts are created in our example. These layouts are displayed in thumbnail format, on
tablets are not used in our example. Keep the option "This window will be displayed on phone the right of the "WIN_Product_form" window.
only".

6. Go to the next step of the wizard.

7. The wizard proposes to manage the Portrait/Landscape orientation of application. That’s
what we are going to do in this example: check the option "Create layouts".

▶ We are going to modify the layout of landscape mode:

1. Double-click the thumbnail of "Landscape - MultiOS Phone" layout: the window corresponding
to this layout is displayed in the middle of the editor.
2. Click (top right corner of main window, in the title bar) to enable the "automatic
dissociation" mode. Via this option, any modification performed on one of the specific windows
8. Go to the next step of the wizard. of layout will not be applied to the other ones.
9. The wizard proposes to use a different presentation for each platform used. In this example, 3. We are going to modify the position of controls in the layout:
the same presentation will be used for the Android platform and for the iOS platform. Select "No • Select the Image control corresponding to the product photo as well as the two Button
specific layout for each OS". controls and move them to the left of the window.

• Select the "Name" and "Reorder date" controls and place them to the right of the Image
control and its Button controls. Resize the controls if necessary.

10. Validate the wizard.

138 Part 5: Android and iOS: Developing an application Part 5: Android and iOS: Developing an application 139
 • Select the "Price" and "Quantity" controls and move them under the Image control on the
left.

▶ Select the Image control. The Image control as well as the two Button controls are enclosed by
a red line. Indeed, an anchoring conflict occurs with the Name control.
▶ Therefore, we are going to modify the anchor of these controls:
1. Select the Image control and the two Button controls.
2. Display the popup menu and select "Layouts .. Dissociate the anchor".

• Select the "Bar code" control and the associated Button control and place them to the
right of the price.

3. Define the new anchor that will be applied to the controls:

• Select the "Description" control and position it on the right of quantity. Reduce the control • Display the popup menu of the controls and select "Anchor".
height if necessary. • In the window that is displayed, select .

140 Part 5: Android and iOS: Developing an application Part 5: Android and iOS: Developing an application 141
 ▶ You get the following interface:
Lesson 5.4. Window with search

This lesson will teach you the following concepts

• Creating a query with parameters.

• Creating a window via the wizard.
• Implementing the search.
• Managing "Pull to refresh".
• Adding a sliding menu.

Estimated time: 30 mn

Running the application test

▶ To run the project test:
1. Click among the quick access buttons.
2. Your project starts with the menu window.
3. Click the list of products.
4. Click a product. The product form appears in portrait mode.
5. Change the window orientation by clicking in the simulator menu.
6. The layout defined for the landscape mode is automatically displayed:

7. Close the test window of application.

142 Part 5: Android and iOS: Developing an application Part 5: Android and iOS: Developing an application 143
 Overview Creating the query used to find the products
In the lesson 5.2, we have explained how to create a window used to list the products in a looper.
Creating the query
We are going to create a window based on the same principle but proposing a search on the
product name: ▶ The query editor will be used to create the query.
• the window displays the list of products in a looper. 1. Click among the quick access buttons. The window for creating a new element is
• when the user types a product name in the search area, the corresponding products are displayed: click "Query­". The query creation wizard starts.
displayed in the looper. 2. Select the "Select" option.
Indeed, this query will be used to select records. Go to the next step.
In our example, this search will be performed on the "Product" data file. 3. The query description window is displayed.
The interface of "WIN_List_of_products_Advanced" will be as follows: 4. Give a name and a caption to your query: type "QRY_Products" instead of "QRY_NoName1" in
the "Query name" area and "Find products on the name" in the "Caption" area:

▶ To build the query, we are going to select the elements that will be displayed in the result.
1. The query must be used to display the characteristics of selected product:
• Select the "Product" data file in the "Analysis" window area.
• Click on the arrow to select all data file items in the query.

To create this window, we are going to:

• Create the query for selecting records in the Product data file.
• Create and configure the search window.

What is a select query?

A select query is a query that will "choose" the records corresponding to the
Remark

specified criteria.
This type of query is called a select query because the SELECT command is
used in SQL language. 2. The description window of query is as follows:

If the "WM Managing Products" application was not created in the previous part:
• an intermediate project is available. This project contains the windows
created in the previous parts. This project allows you to follow this lesson and
to create the new windows.
Answer

To open this project, in WINDEV Mobile’s home page (Ctrl + <), click "Tutorial"
and select "iOS/Android application (With windows)".
• a corrected project is available. This project contains all windows created in
this part and it allows you to check your operations.
To open this corrected project, in WINDEV Mobile’s home page (Ctrl + <), click
"Tutorial" and select "iOS/Android application (Answer)".

144 Part 5: Android and iOS: Developing an application Part 5: Android and iOS: Developing an application 145
 Adding a selection condition
In our example, the user will be able to select a value for the product name. We must modify the
query in order for this search criterion to correspond to a query parameter.
▶ To define a query parameter, display the description window of query:
double-click the background of graphic query representation (or select "Query description" from
the popup menu).
▶ To manage the "Product name" parameter:
1. In the middle of window, select the Product.Name item.
2. Display the popup menu and select "Selection condition .. New condition".

3. Validate the query description window ("OK" button).

4. The graphic representation of the query and the window for saving the query are displayed.
5. Validate the displayed information. 3. In the window that is displayed, we are going to specify that the selection condition
corresponds to a parameter:
Query test
Like all the elements found in a WINDEV Mobile project, you have the ability to run the test of
query that was just created:
1. Click .
2. The result is displayed in a window:

• Select "contains".
• Select "the parameter".
• Keep the parameter name automatically proposed: "ParamName".
4. Validate the condition description window. The number "1" appears on the right of "Product.
Name" item, indicating that a selection condition was defined.
The result lists ALL products.
In our case, we want to display the products corresponding to the search criteria, the product
name. To do so, we must use a query with parameters.
3. Close the window.

146 Part 5: Android and iOS: Developing an application Part 5: Android and iOS: Developing an application 147
 Creating the interface
The search window will be created via the wizard for window creation.

The window creation wizard offers many preset windows. These windows

Remark
propose modern interfaces for your applications.
Most of these windows can be generated from your data.

5. Validate the description window of query.

6. The query graph is modified to take into account the selection condition that was defined. Creating the window
▶ To create the search window:
1. Click among the quick access buttons. The window for creating a new element is
displayed: click "Window" then "Window".
2. In the wizard, choose "Looper" and validate.
3. The window creation wizard starts.
4. Choose the platform to use: "Generic Android phone". Go to the next step of the wizard.
5. The wizard proposes to choose the data source associated with the window. In our case, it is
a query:
• Click "Queries".
• Select the query that was just created: "QRY_Products".

7. Save the query by clicking among the quick access buttons.

Test of query with parameters
6. Go to the next step.
▶ To run the test of query with parameters:
7. Select the looper style: "Image + Title + Caption below". Go to the next step.
1. Click .
8. The wizard automatically proposes the query items corresponding to the generated looper.
2. A window is displayed, allowing you to type the different query parameters. Keep the proposed options and go to the next step.
3. Select the ParamName parameter. In the bottom section of window, type "Polo". 9. Keep the sort item proposed by default ("Name"). Go to the next step.
10. The wizard proposes several options for generating the Looper window. In our example,
keep the default options. Go to the next step.
11. Give a title and a name to the generated window. In our case:
• For the title, type "Products".
• For the name, type "WIN_List_of_products_Advanced".

4. Validate the window. The query result corresponding to the specified parameters is displayed.
5. Close the window.
We are now going to create the interface of our window based on this query.

148 Part 5: Android and iOS: Developing an application Part 5: Android and iOS: Developing an application 149
 12. Validate the wizard. The window is automatically created, displayed in the editor and saved. 5. Save the modifications by clicking among the quick access buttons.
6. Close the code window (click X at the top right corner of code editor).
7. Test the window that was just created in the simulator ( among the quick access buttons).

▶ We are now going to modify the "WIN_List_of_products_Advanced" window in order to display

the Product form that was created in a previous lesson.
1. Right-click the Looper control and select "Code".
Caution: make sure you select the Looper control and not one of the controls it contains.
2. In the code editor, type the following WLanguage code in the "Initializing..." event:
QRY_Products.ParamName = Null 8. Click one of the products: the form window is displayed.
3. This code line is used to initialize the value of parameter found in the "QRY_Products" query 9. End the test.
used by the Looper control. By default, the value of this parameter is set to "Null", allowing you
Managing the search
to ignore the parameter. Therefore, all products will be displayed in the window.
4. In the code editor, type the following WLanguage code in the event "Selecting a row ...": We are now going to manage the search. To do so, we are going to:
HReadSeek(Product,ProductID,QRY_Products.ProductID) • Allow the search in the Action Bar.
OpenMobileWindow(WIN_Product_form) • Create a search button in the Action Bar.
Let’s study this code: ▶ To allow the search in the Action Bar:
• The Looper control is based on the QRY_Product query. When selecting the product in the 1. Display (if necessary) the "WIN_List_of_products_Advanced" window in the editor.
Looper control, the selected record is the one found in the query. 2. Display the description window of Action Bar (double-click the Action Bar).
• During a click on the control row, we want to open the form window that was created 3. In the "Details" tab, check "Allow the search in the Action Bar".
beforehand. This window is based on the Product data file.
• The record selected by the query must be found in the "Product" data file in order to load
the buffer of the selected data in memory. The operation is performed by HReadSeek.
• Then, the form window named "WIN_Product_form" is opened by OpenMobileWindow.

150 Part 5: Android and iOS: Developing an application Part 5: Android and iOS: Developing an application 151
 ▶ To create a search button in the Action Bar:
1. In the "General" tab of the description window of Action Bar:
2. Click number 2. The interface for typing an option in the toolbar is displayed.
3. Click the "+" button to add an option. A new default option is created at the top right. Modify
the characteristics of this option:
• In the "Caption" area, type "Find".
• In the "Preset image" area, expand the list and select "Find".
• Validate the description window. 14. Close the simulator.
4. The code of this option is used to make the search area visible. To write this code:
• Select (if necessary) the Action Bar of window.
Improving the window
• Click the search button.
• A drop-down menu with the "Find" option is displayed.
Managing "Pull to refresh"
• Right-click the option.
• Select "Code" from the popup menu that is displayed. A new feature will be added to our window: the management of "Pull to refresh". This feature
• Write the following WLanguage code in the event "Selecting the menu": allows the user to "pull" a Table or Looper control in order to refresh its content.
During this action, a refresh bar automatically appears in the exposed area:
ActionBarSearchVisible(True)
• The bar indicates that you must pull to refresh.
5. Save the modifications by clicking among the quick access buttons. • Then, the bar indicates that you must release to refresh.
6. Close the code window (click X at the top right corner of code editor). • The bar indicates that the refresh operation is in progress. A progress bar is displayed during
7. Select the Action Bar and display the associated code (press F2 or select "Code" from the the refresh duration.
popup menu). • The control is updated.
8. In the code editor, type the following WLanguage code in the event "Validating the search...":
▶ To use the "Pull to Refresh" feature:
QRY_Products.ParamName = ACTB_ActionBar..SearchValue
LooperDisplay(LOOP_QRY_Products,taReExecuteQuery)
1. Display (if necessary) the "WIN_List_of_products_Advanced" window in the editor.
2. Select the Looper control and display the description window of control.
9. Let’s take a look at this WLanguage code: 3. In the "Details" tab of the description window of control, in the "Moves and gestures" area,
• The query parameter is initialized with the search value typed in the Action Bar. check "Pull to refresh".
• Then, the Looper control is redisplayed by LooperDisplay. The taReExecuteQuery constant
is used to re-run the base query of Looper control and therefore to take the new parameter
into account.
10. Save the modifications by clicking among the quick access buttons.
11. Close the code window (click X at the top right corner of code editor).
12. A button for product addition can also be created in this window. This operation was already
performed in the lesson 5.2 "Creating a new product". The same operations must be performed.
Only the code of "+" button must be adapted.
13. Test the window that was just created in the simulator ( among the quick access
buttons).
• Click the magnifier.
A specific internal window can be used to manage the "Pull to refresh"
Remark
• Type "Polo" in the search area.
feature. In this example, we will be using the default window.
• Validate (ENTER key). See the online help for more details.
• The list of products containing "Polo" is displayed.
4. Validate the control description window.

152 Part 5: Android and iOS: Developing an application Part 5: Android and iOS: Developing an application 153
 ▶ The setting of "Pull to refresh" has added: Using a sliding menu
• the refresh bar that will be displayed to the user during the operation.
In several mobile applications, the menu does not correspond to a "static" window. It corresponds
• the "Refreshing by pull/release" event among the Looper control events. This event is to a sliding window displayed via an option of Action Bar and/or via a window swipe.
automatically called during the refresh gesture. We are now going modify the WLanguage
We are going to modify the "WIN_List_of_products_Advanced" window in order to add a "sliding
code of this event in order to manage how the control is refreshed.
menu". This menu will be using the Multiline Zone control of "WIN_Menu" window that was created
▶ To modify the WLanguage code of the event "Refreshing by pull/release": beforehand.
1. Select the Looper control and display the associated event (press F2 for example). ▶ To create a sliding menu, we are going to:
2. In the code editor, type the following WLanguage code in the event "Refreshing by pull/ • Create an internal window. This internal window will contain the menu options.
release":
• Modify the "WIN_List_of_products_Advanced" window to display the menu.
LooperDisplay(LOOP_QRY_Products,taReExecuteQuery)
An internal window is a simple window with no Action Bar and no toolbar.

Remark
3. As already seen for the search management, LooperDisplay is used to redisplay the Looper An internal window is used to easily include a set of controls in another
control. The taReExecuteQuery constant is used to re-run the base query of Looper control and window.
therefore to take into account the new records entered in the database.
4. Save the modifications by clicking among the quick access buttons.
5. Close the code window (click X at the top right corner of code editor). ▶ To create the internal window containing the menu:
1. Click among the quick access buttons. The window for creating a new element is
▶ Test the window that was just created in the simulator ( among the quick access buttons). displayed: click "Window" then "Internal window".
1. Click the top of looper with the mouse and move the mouse to the bottom. 2. The internal window is automatically opened in the editor.
2. Release the mouse. The looper is updated. 3. The window for saving an element is displayed. Type the name of internal window: "IW_MLZ_
Options".

4. Validate.
5. Display the description window of internal window ("Description" from the popup menu).

3. Close the simulator.

This example allows you to understand the implementation of "Pull to refresh" feature.
This feature can be used for example in the same application in HFSQL Client/Server where
other users would update or add products. These modifications could be displayed by the "Pull to
refresh" feature.

154 Part 5: Android and iOS: Developing an application Part 5: Android and iOS: Developing an application 155
 6. In the "UI" tab, specify the dimensions of this internal window: ▶ We are now going to modify the WLanguage code used to open the list of products. Indeed:
• Width: the one that suits you. It must be sufficient to entirely see the controls of drop-down • we work with the "WIN_List_of_products_Advanced" window and not with the "WIN_List_of_
menu. In theory, the sliding menu must be narrower than the window above which it is products" window anymore.
displayed (260 for example). • the "WIN_List_of_products_Advanced" window contains the sliding menu. Therefore, the "List
• Height: This height must correspond to the height of window above which the sliding menu of products" option must not re-open this window.
is displayed. In our case, this height is set to 248.
▶ We are going to change the WLanguage code used to select the Multiline Zone control.
1. Select the Multiline Zone control.
2. Display the associated WLanguage events (F2).
3. Replace the line:
CASE 1 // List of products
OpenMobileWindow(WIN_List_of_products)

by:
7. Specify a background color for the internal window in the "Style" tab. Indeed, for the menu
CASE 1 // List of products
to be transparent, the parameter "Background color of internal window" must correspond to WinSlidingVisible(swLeft, False)
"White".
8. Validate. In this WLanguage code, WinSlidingVisible is used to make the sliding window displayed from
9. Save the window by clicking among the quick access buttons. the left invisible. Therefore, the list of products is displayed.
4. Save the modifications by clicking among the quick access buttons.
▶ To add the menu options into the internal window: 5. Close the code window (click X at the top right corner of code editor).
1. Open the "WIN_Menu" window previously created (double-click on its name in the "Project
explorer" pane, for example). ▶ To associate the internal window with the "WIN_List_of_products_Advanced" window:
2. Copy the controls found in the "WIN_Menu" window to the "IW_MLZ_Options" internal window: 1. Display the window "WIN_List_of_products_Advanced" (click its name in the bar of opened
• Select all elements found in the "WIN_Menu" window (Ctrl + A). documents).
• Copy the elements (Ctrl + C). 2. Display the description window.
• Display the "IW_MLZ_Options" window (click its name in the bar of opened documents). 3. In the "Details" tab, in "Left sliding window", select "IW_MLZ_Options".
• Paste the elements (Ctrl + V).
3. Via the selection handles, modify the width of Multiline Zone control so that it is entirely
displayed in the internal window. Via the anchors, all controls found in the Multiline Zone control
are also modified. You get the following window:

The "Swipe" option is used to automatically manage how the sliding window is displayed during
the swipe.
4. Validate.

156 Part 5: Android and iOS: Developing an application Part 5: Android and iOS: Developing an application 157
 5. The window being associated with an Action Bar, the editor proposes to enable the option
used to open the sliding window. Lesson 5.5. Window with scroll

This lesson will teach you the following concepts

• Creating an internal window by refactoring.

• Changing the window content by swipe.
6. Accept.
▶ We are going to test the operating mode of the sliding menu in the simulator:
1. In the "Project explorer" pane, define the "WIN_List_of_products_Advanced" window as first
project window (indeed, the "WIN_Menu" window is now useless).
Estimated time: 20 mn
• Select the window "WIN_List_of_products_Advanced" in the "Project explorer" pane.
• Display the popup menu.
• Select "First project window". A specific icon (with a small 1) is displayed in front of the
window name, in the "Project explorer" pane.
2. Click among the quick access buttons.
3. When clicking the menu of Action Bar, the sliding window of menu is displayed.

158 Part 5: Android and iOS: Developing an application Part 5: Android and iOS: Developing an application 159
 Overview Creating the internal window

In the Windows applications, all the operations are performed via the mouse or the keyboard. ▶ To simplify the creation of internal window, we are going to create it from the "WIN_Product_
form" window found in our project:
In mobile, the interfaces must be configured differently. With the touchdown screens, all the
operations are performed with the fingers. 1. If necessary, open "WIN_Product_form" in the editor (double-click its name in the "Project
explorer" pane).
In the applications for mobile devices, WINDEV Mobile proposes several features to manages the
specific moves of fingers (pull to refresh, double touch, sliding, ...). 2. Select all controls found in the portrait layout (Ctrl + A).
In this lesson, we are going to create a new form window, used to view the products. 3. Display the popup menu and select "Refactoring .. Create an internal window from the
selection".
In this window, you will have the ability to go from a product form to another one by swipe.
4. The internal window is automatically created and the save window is displayed. Give the
"IW_Product" name and validate.
If the "WM Managing Products" application was not created in the previous part,
a corrected project is available. This project contains all windows created in this 5. Display the created internal window in the editor: click the "IW_Product" button in the bar of
Answer

part and it allows you to check your operations. opened elements.

To open this corrected project, in WINDEV Mobile’s home page (Ctrl + <), click 6. Display the description window of internal window. In the "UI" tab, modify the window width:
"Tutorial" and select "iOS/Android application (Answer)". 320. This width corresponds to the width of Internal Window control that was created in the
"WIN_Product_form_Advanced" window.
7. Validate.

Creating the Form window with swipe Managing the swipe in the form window
▶ To associate the internal window with the Form window:
Creating the Form window 1. Display the "WIN_Product_form_Advanced" window in the editor (click its name in the bar of
opened elements).
▶ To create the form window:
2. Select the Internal Window control and display its description ("Description" from the popup
1. Create a new blank window. menu).
• Click among the quick access buttons. 3. In the "General" tab, select the internal window that was just created ("IW_Product").
• The window for creating a new element is displayed: click "Window" then "Window".
• In the wizard, select the "Standard" tab, choose "Blank" and validate.
2. In the window for saving an element, specify:
• the window title: "Product form".
• the window name: "WIN_Product_form_Advanced".
3. Validate.

We are now going to create an Internal Window control in the "WIN_Product_form_Advanced"

window. This control will host an internal window that will display the data to scroll.
▶ To create the Internal Window control:
1. On the "Creation" pane, in the "Containers" group, expand "Internal window" and select
"Swipe area (Internal window)".
2. Click the position where the control will be created in the window (top left corner).
3. Resize the Internal Window control so that it occupies the entire available space in the
window.
4. Modify the anchor of Internal Window control ("Anchor" option from the popup menu): anchor
the control in height and in width ( ).
5. Validate.

160 Part 5: Android and iOS: Developing an application Part 5: Android and iOS: Developing an application 161
 4. In the "UI" tab, in "Changing content by swipe": ▶ To avoid being bothered by the keyboard appearance during the swipe, we are going to use
• The option "Allow the change of content by swipe" is already checked because we have SIPVisible:
chosen the Internal Window control for swipe. 1. Display the WLanguage events of the Internal Window control in "WIN_Product_form_
• Check "Position on the current record when opening the internal window". Advanced".
• The swipe orientation is "Horizontal" by default. 2. Write the following code in the WLanguage event "Selection by swipe ...":
SIPVisible(False)

3. Close the code editor.

▶ To finish this window, we are going to add the validation option into the Action Bar of
the window. We already did this in the lesson 5.2 ("Managing the product creation and
modification"). Here, we will only present the main points:
1. Select the Action Bar (at the top of window).
2. Open the Action Bar description window.
3. Click number 2. The interface for typing an option in the Action Bar appears.
4. Click the "+" button to add an option. A new default option is created at the top right.
5. Modify the characteristics of this option:
• In the "Caption" area, type "Done".
5. In the "Content" tab, we are going to configure the mode for filling the internal window. This • In the "Preset image" area, expand the list and select "Done".
window will display the data of the Product data file: • Validate the description window.
• Click "File/Query". 6. To enter the code used to save the modifications performed in the "WIN_Product_form_
• In the source, for the "Browsed file" option, select the "Product" data file. Advanced" window:
• Select (if necessary) the Action Bar control of window.
• Click on "OK".
• A drop-down menu with the "Done" option is displayed.
• Right-click the option.
• Select "Code" from the popup menu that is displayed.
• Write the following WLanguage code in the event "Selecting the menu":
ScreenToFile()
HSave(Product)
Close()

7. Save the modifications by clicking among the quick access buttons.

6. Validate the description window. 8. Close the code window (click X at the top right corner of code editor).

The swipe is implemented.

162 Part 5: Android and iOS: Developing an application Part 5: Android and iOS: Developing an application 163
 Window test Conclusion

Before running the window test, we are going to modify the "WIN_List_of_products_Advanced" This part explained the main concepts for developing Android or iOS applications.
window to directly open the from window that was just created.
Several themes have not been presented in this part:
▶ To open the window with swipe from the list of products:
• managing emails,
1. Display the window "WIN_List_of_products_Advanced" in the editor (click its name in the bar
• managing notifications,
of opened documents).
• using the visualization panel,
2. Display the WLanguage events related to the Looper control.
• using the debugger,
3. In the event "Selecting a row ... ", replace the WLanguage code:
• ...
HReadSeek(Product,ProductID,QRY_Products.ProductID)
OpenMobileWindow(WIN_Product_form)
Don’t hesitate to see the online help to discover and check new features.
by:
HReadSeek(Product,ProductID,QRY_Products.ProductID)
OpenMobileWindow(WIN_Product_form_Advanced)

▶ We are going to test the operating mode of project in the simulator:

1. Click among the quick access buttons.
2. In the Looper control that is displayed, click a product to display its form.
3. Click the product form and move the mouse to the right or to the left. The product form
automatically changes.

164 Part 5: Android and iOS: Developing an application Part 5: Android and iOS: Developing an application 165
 Lesson 5.6. Deploying the application Overview
That’s it, our application is created, we must now compile it and install it on the device in order to
run its test.
If you have chosen to develop the application for Android only, you can follow the generation of
This lesson will teach you the following concepts Android application.
If you have chosen to develop the application for iOS, go to "Generating the iOS application".
If you want to develop the application for the two platforms, follow the generation for Android then
• Generating the Android application.
the generation for iOS.
• Generating the iOS application.
Generating the Android application
▶ To generate the Android application:
1. If necessary, select the Android platform in the "Project explorer" pane.
Estimated time: 20 mn 2. On the "Project" pane, in the "Generation" group, click "Generate" (you can also click
among the quick access buttons).
3. The Android application generation wizard starts.
4. 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.
5. 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.
• 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.
6. Select the option corresponding to your configuration and go to the next step.
Remark: 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.

166 Part 5: Android and iOS: Developing an application Part 5: Android and iOS: Developing an application 167
 7. Go to the next step by clicking the arrow keys at the bottom of wizard. The next wizard step is

Remark
used to: If your project is using the Android platform only, the files must be
• define the application name (displayed below the icon used to start the application) and selected in the EXE directory of project.
the corresponding package.
• select the application icon in the image catalog of WINDEV Mobile ("stock" in the "Flat
Soft" theme for example). 13. Check the "Write" box for each file (required to be able to modify data from the application).
• define the email address used by default to send an error report if necessary.

14. Go to the next step.

15. Validate the other steps until you reach the "Configuration" step that is used to configure the
options of Android SDK and the setup location.

8. Go to the next step. This step is used to define:

• the splash screen of application,
• the information saved in the manifest,
• the start mode of application (when starting the device or not).
9. Go to the next step. The wizard is used to define the version number of application.
10. 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.
See the online help for more details.
11. 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.
16. Go to the next step.
If you have a device connected to the PC, use "Detect hardware
Remark

automatically". Thus, next time an application is generated, this type of device

will be automatically selected.

12. The next step is used to include the data files in the application. For our example, pre-filled
HFSQL data files are available. They will be supplied with the application. In this case, they must
be specified in the "Integrating files" step.
• Click the "Add" button.
• Select the data files (.fic, .ndx and .mmo) found in the "EXE\Android application" directory
of project. The list of files is displayed.
168 Part 5: Android and iOS: Developing an application Part 5: Android and iOS: Developing an application 169
 17. This step is specific to the use of Map control. It is used to enter the key required to use the Generating the iOS application
Map control. If you own a Google Maps API key, type it. Otherwise, click "Get a key".
▶ To generate the iOS application:
1. If necessary, select the iOS platform in the "Project explorer" pane.
2. On the "Project" pane, in the "Generation" group, click "Generate" (you can also among
the quick access buttons).
3. The wizard for generating an iOS application starts.
4. The wizard is used to:
• define the application name, the company and the copyright.
• enter the bundle identifier.

18. Go to the next step. This identifier is the unique identifier of your application beside Apple. It
19. End the wizard. The generation is automatically performed in background task. The is defined and saved on the Apple developer account.

Remark
icon indicates that the generation is in progress. This identifier will be used to save your application in order to run its test
20. When the generation is ended, a popup window is displayed in the editor: and to deploy it. By default, WINDEV Mobile automatically proposes an
identifier that respects the development standard of Apple. This identifier
can be modified.

• define the email address used by default to send an error report if necessary.
21. To copy and run the application on the device linked to the computer or on an emulator,
click “Deploy”.
22. 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.

If the device is not connected to the development computer, you must:

1. Connect the device to the development computer.
2. In the explorer, open the generation directory of apk file corresponding to
the Android application.
Remark

3. Copy the apk file into the "Download" directory of device.

4. Unplug the device.
5. Start the application for file management on the device.
6. Go to the "Download" directory and run the apk file. The application is
automatically installed. 5. Go to the next step.
6. You have the ability to specify the path of different application icons for each type of device.
7. Go to the next step.
8. Specify the characteristics of the splash screen.
9. Go to the next step.
10. Specify the version number of the generated application.
11. Go to the next step.

170 Part 5: Android and iOS: Developing an application Part 5: Android and iOS: Developing an application 171
 12. This step is used to include specific files (data files, images, ...). 18. The generation is performed in the EXE folder of project directory. The directory containing
• Click the "Add" button. the source code that will be used on Mac is named "Project_name.xcode.gen" ("WM Managing
• Select the data files (.fic, .ndx and .mmo) found in the "EXE\iOS application" directory of Products.xcode.gen" in our example). This is the directory that must be copied onto Mac. Click
project. The list of files is displayed. the "Open the generation directory" button.
The other operations must be performed on Mac. You must:
• Transfer the WINDEV Mobile project onto Mac.
• Compile the project in Xcode.

Transferring the WINDEV Mobile project onto Mac

▶ To transfer the WINDEV Mobile project onto Mac:
1. Copy the entire folder generated in the EXE directory onto an external media (USB key,
external hard disk, shared directory with Mac on network). This directory is named <Project
Name&gt.xcode.gen.
2. Paste this folder on the Mac that will compile the application.
3. Open the folder on Mac and open the file named "Project_name.xcodeproj".
13. Indicate that these data files must be in write mode: check the "Write" box. 4. The project is opened in Xcode.
14. Go to the next step.
Compiling the project in Xcode
15. The wizard allows you to specify:
• whether the application is allowed to be resized or not (Split View). The option allows WINDEV Mobile automatically generates an Xcode project for your iOS compilations. To simplify
the end user to display two windows of two different applications side by side on some the implementation of applications, WINDEV Mobile generates a “Scheme” for Xcode.
devices.
▶ To compile the project in Xcode:
• whether files can be shared with iTunes. If this option is checked, you will have the ability
to retrieve the application files on Mac during the synchronization. For example, if data 1. In the drop-down list found in the top left corner, select the compilation options. Select
files have been supplied with the application, the iTunes application will allow you to the scheme corresponding to your application then the compilation target (device currently
retrieve these files. connected or a simulator).
• the minimum version of iOS required to run the application. 2. To start the compilation, select “Product .. Clean” then “Product .. Build”.
3. A status report of compilation is displayed at the top (“Succeeded”, otherwise the number
of warnings and errors). You have the ability to click these symbols to see the list of errors/
warnings.
4. Once the program is compiled without error, you can start the simulation (“Product .. Run”).
The simulation window appears with the application.
Then, you have the ability to run the test of your application on your iPhone or iPad.

16. Go to the next step. This step is used to specify the signature options for Xcode.
See the online help for more details.
17. Validate the wizard.

172 Part 5: Android and iOS: Developing an application Part 5: Android and iOS: Developing an application 173
 PART 6

Windows Mobile
application

174 Part 5: Android and iOS: Developing an application

 Lesson 6.1. My first Windows Mobile
project

This lesson will teach you the following concepts 

• Creating Windows Mobile project.

• My first window.
• My first test.
• First deployment.

Estimated time: 1 h

176 Part 6: Windows Mobile application Part 6: Windows Mobile application 177
 Overview 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.
To start developing with WINDEV Mobile for a Windows Mobile platform, we are going to create a
first project. This project will contain a window used to display a message. Other method for creating a project:

Remark
This first example will present the main concepts of development for Windows Mobile with WINDEV 1. Click among the quick access buttons of WINDEV Mobile menu.
Mobile. 2. The window for creating a new element is displayed: click "Project".
Caution

The setup of a Windows Mobile application can be created with a 32-bit WINDEV 4. The wizard proposes to create a blank project or a project based on an example. Select
Mobile editor only. "Create a blank project" and go to the next step.
5. The next step is used to detect the parameters of device connected to the PC.

My first project

Creating the project

We are going to create our first project for Windows Mobile. If you own the mobile device
(Smartphone or Pocket PC) on which the application must be run, we advise you to connect this
device to the development computer. Therefore, the device characteristics will be automatically • If your device is connected, click "Click here to automatically detect the device".
detected and proposed when creating the Windows Mobile project. • If no device is connected, go to the next step to manually define the characteristics of
device used.
6. The next step is used to describe your device.
Answer

A corrected project is available. To open this project, in WINDEV Mobile’s home

page (Ctrl + <), click "Tutorial" and select "My Pocket project (Answer)".

▶ To create a project:
1. Start WINDEV Mobile 25 (if necessary).
2. Display the WINDEV Mobile home page if necessary (Ctrl + <).
3. In the home page, click "Create a project" then "Windows CE".

Go to the next step.

178 Part 6: Windows Mobile application Part 6: Windows Mobile application 179
 7. The wizard proposes to type the name of project, its location and its description. In our case, My first window
this project will be named "My_Pocket_Project". WINDEV Mobile proposes to create this project
in the "\My Mobile Projects\My_Pocket_Project" directory. You can keep this location or modify
it via the [...] button. Overview
The first window allows the user to display a welcome message via a "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 a Windows Mobile application with WINDEV Mobile.
Creating the window
▶ To create the window:
1. 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
8. Go to the next step ("Next" button). automatically displayed.
9. The wizard proposes to add documents. Go to the next step. To display the window for creating a new element, all you have to do is click
among the quick access buttons of WINDEV Mobile:
10. This step allows you to use the SCM (Source Code Manager). We will not use this option in
this tutorial. Click on "No, do not use SCM".

Remark
11. In the left section of the wizard, click "Guidelines". This step is used to define the code style.
Don’t modify the suggested options. Go to the next step.
12. This step is used to define the style book. Select "Elegant".
Remark: This skin template can be found in "Obsolete skin templates for Windows Mobile and
others".
13. The other wizard steps not being important for our first project, click "End" in the left section
of wizard.
14. Click on "Finish" at the bottom of the wizard. The project is automatically created.
2. The window creation wizard starts.
15. The window for creating a new element is displayed. This window is used to create all
elements that can be associated with a project. 3. In the list of proposed windows, select "Blank". The skin template used is displayed at the
bottom right of wizard. The "Elegant" skin template that was selected when creating the project
is selected by default.

Skin templates allow you to quickly create outstanding interfaces. A skin

Remark
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.

4. Validate. The window is automatically created in the editor. The window for saving an element
is displayed. This window displays:
• the element title. For a window, this title will be displayed in the title 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.

180 Part 6: Windows Mobile application Part 6: Windows Mobile application 181
 5. Specify the name of the element: "Welcome" (here, the element corresponds to the WINDEV ▶ Modify the control characteristics by entering the following information:
Mobile window).
6. The element name ("WIN_Welcome") is automatically proposed.

1. This control is named: "BTN_Display".

2. The control caption is: "Display"
▶ Validate the control description window ("OK" button). The control appears in the window editor.
Let’s take a look at the window name proposed by WINDEV Mobile: this name ▶ We are going to display a message in a dialog box (a small window proposed by the system). To
starts with the letters "WIN_". This prefix is automatically added because the do so, we will be using our first WLanguage function: Info.
project is using a code style.
The programming language supplied with WINDEV Mobile is named

Remark
The code style is used to define a prefix for each type of object, allowing you to
quickly identify the element: WLanguage. It is a 5th-generation language (5GL) that includes highly
Remark

• a window starts with "WIN_", sophisticated commands.

• a button starts with "BTN_",
• etc. 1. Select the control if necessary.
If you do not want to use this code style, you can simply disable it: on the Remarks:
"Project" pane, in the "Other actions" group, expand "Code style" and uncheck • When the control is selected, several handles appear around the control.
"Use code style". • To select a control, simply click on it.
2. Display the popup menu of control (right mouse click).
7. Validate by clicking "OK". 3. Select "Code". This option opens the code editor of WINDEV Mobile, where all WLanguage
statements can be typed.
Displaying a message 4. Write the following code In the "Click" event of the "BTN_Display" control:
You are now going to create a Button control to display a message. Info("Hello")
▶ To create the "Display" Button control: Note about the assisted input: As soon as the first two characters are typed, WINDEV Mobile
1. On the "Creation" pane, in the "Usual controls" group, click . The control appears in proposes all words of WLanguage vocabulary containing these characters. The assisted
creation mode under the mouse pointer. development is a very powerful feature. No more mistakes when entering the name of an
2. Move the mouse toward the position where the control will be created in the window (at the element: the syntax errors are reduced. All you have to do is select the requested word and press
top of window for example). To drop the control in the window, simply click again. Enter to validate. You can focus on the algorithm.
3. 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. When writing this code in the code editor, you may have noticed that the
different elements use different colors. 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,
Remark • 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").

182 Part 6: Windows Mobile application Part 6: Windows Mobile application 183
 Info displays the message passed in parameter. First deployment on the device
▶ Save the modifications by clicking among the quick access button (on the left of ribbon) or
by pressing Ctrl + S. Principle
▶ Close the code window (cross in the top right corner of code editor). The window reappears in To run the application in stand-alone mode on the mobile device, you must:
the window editor. • Connect the device via a USB port.
• Generate the application.
First test • Choose to copy and start the executable on the connected mobile. Copying the application can
take several seconds.
For a Windows Mobile application, WINDEV Mobile allows you to run the application test on the
development computer via the simulation mode. This test simulates a Windows Mobile device on Implementation
the development computer. This test is useful when no Windows Mobile device can be used by the
▶ To generate the Windows Mobile application:
developer. However, this test does not allow you to use the hardware components of device (SMS,
...). 1. On the "Project" pane, in the "Generation" group, click "Generate" (you can also click
among the quick access buttons).
▶ We will now run the window test in simulation mode. 2. WINDEV Mobile proposes to select the first project window. In our example, select "WIN_
1. Click among the quick access buttons (or press F9). Welcome" and validate ("OK" button).
2. Validate (if necessary) the information message regarding the simulator mode. 3. The wizard for creating a mobile executable starts.
3. The created window is started in execution. The simulator shell corresponds to: 4. The first wizard step is used to define the application name and icon.
• the device connected to the development computer,
• the device chosen in the wizard for project creation.
4. Click the "Display" button.

The executable icon can be chosen in the image catalog of WINDEV Mobile:
• Click on on the right of the control "Name of icon".
• Select "Catalog" from the popup menu that is displayed.
• The window of image catalog is displayed.

As soon as an image can be used (in a control, window, report, ...), the
"Catalog" button is available (via the menu displayed by the button).
This allows you to select an image among the images supplied in the
image catalog of WINDEV, WEBDEV and WINDEV Mobile.

Remark
To perform a search in the image catalog:
• specify the keyword corresponding to the search,
5. Validate the system window that is displayed. • validate. The images found are automatically displayed.
By double-clicking the requested image, this one is generated and
▶ Any developer knows that running a program test can be a long and tiresome job. In WINDEV included in your project.
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!
5. The other steps are not required by our application. Click the "2- Copy onto the mobile" link
▶ Click the "x" button found in the simulator shell to close the window. found on the left of the wizard.

▶ The WINDEV Mobile editor appears again.

184 Part 6: Windows Mobile application Part 6: Windows Mobile application 185
 6. This step is used to define the options for copying files onto the mobile device:
Lesson 6.2. Databases

This lesson will teach you the following concepts 

• Available databases.
• Synchronization.

Estimated time: 30 mn
Caution

The setup of a Windows Mobile application can be created with a 32-bit

WINDEV Mobile editor only.

7. The options to choose depend on your configuration:

• If a mobile device is connected, select "Yes: Copy the executable to Pocket PC" as well as
"Run the application on Pocket PC at the end of copy". In this case, once the executable is
generated, the application will be automatically copied and started on the mobile.
• If no mobile is device connected, select "No: Don’t copy the executable to Pocket PC". In
this case, the application can be deployed on the mobile devices via a setup procedure.
8. Validate and end the wizard.
That’s it, our first application is generated and run on the Windows Mobile device.

186 Part 6: Windows Mobile application Part 6: Windows Mobile application 187
 Format of databases  CEDB

A Windows Mobile application can handle data. The format of these databases can be: The CEDB format is a database format that can be used on the mobile devices (Pocket PC).
• HFSQL (in Classic or Client/Server mode), database system supplied with WINDEV Mobile. A CEDB database corresponds to a ".CDB" file. A CEDB database can contain several data files
(also called "tables").
• CEDB, database system that can be used on mobile devices (Pocket PC).
Two types of CEDB databases are available:
• AS/400, AS/400 database that can be used on mobile devices (Pocket PC).
• the standard CEDB databases, that correspond to the databases found by default on
• ... the mobile device. These databases contain the following data files: "Tasks", "Contacts",
HFSQL database "Appointments", ...
• the other CEDB databases (called custom databases), that correspond to the Access
HFSQL Classic databases (".MDB" file) previously exported from a PC.
In HFSQL Classic mode, the data files are stored on the device.
Remark: When an Access database (".MDB" file) is copied onto a mobile device (via the file
In this case, the application is stand-alone. No Wi-Fi or 3G connection is required. explorer), this database is automatically changed into a CEDB database (".CDB" file).
The data is stored in the device memory. The maximum storage size depends on the amount of
memory on the device.
A CEDB database can be handled:
HFSQL Client/Server • from a WINDEV Mobile application.
In HFSQL Client/Server mode, no data is stored on the device. The data is stored on a computer • from a WINDEV application.
on which a HFSQL server is installed. These operations are performed by the cdbXXX functions of WLanguage.
To access this computer (and therefore the database), a method for communicating with the
server must have been enabled in the mobile application (Wi-Fi or 3G) in order to connect via the Caution: From Windows Mobile 5 onwards, a standard database (tasks,
network or Internet. contacts, appointments, etc.) can no longer be accessed from a Window

Remark
The response times depend on the quality of Wi-Fi or Internet network and on the amount of application (and therefore from a standard WINDEV application).
requested data. CEDB databases can be accessed from the PC, from the simulator, from the
The access to the data will be performed by the Hxxx functions of WLanguage and/or by SQL mobile device.
queries. Standard databases can be accessed from the mobile device only.

The "Pocket Notes" and "Pocket Telephony" examples (supplied with WINDEV
Example

Mobile) are using HFSQL data files. Caution: The structure of CEDB databases is not adapted to the process of

Remark
large data amount. Therefore, we recommend that you use HFSQL databases.
These examples are accessible from the WINDEV Mobile home page (Ctrl + <). Furthermore, HFSQL allows you to benefit from all features available in WINDEV
Mobile (RAD, file link, ...).
Remark

During the test (in simulation mode) of a WINDEV Mobile application that

Remark
handles HFSQL data files, the data files used are the ones found on the PC. During the test (in simulation mode) of a WINDEV Mobile application that
handles a CEDB database, the database used is found on Pocket PC.

AS/400
This database format is accessible via a Native Connector (also know as Native Access) by
Windows Mobile applications. To use this Native Connector, a module is required in addition to
WINDEV Mobile.
Contact PC SOFT Sales Department for more details.

188 Part 6: Windows Mobile application Part 6: Windows Mobile application 189
 Sharing data between two applications  Handling the same data files

A WINDEV Mobile application for Windows Mobile can share data with a standard WINDEV To allow the WINDEV Mobile application to access the data files found on the PC:
application. • the mobile devices must have network access (Ethernet card, Wi-Fi, etc.)
You have the ability to use: • the data found on the PC must be accessible in read/write via a UNC path (the directory used
• a standard WINDEV application used to handle the entire database. must be a shared directory).
• a WINDEV Mobile application used to handle the entire database or part of this database. Then, the data can be handled (addition, modification and deletion) by the HFSQL functions.
When two applications share the same data, the data files can be managed according to two
different methods: Databases in HFSQL format (on the Pocket PC and on the PC)

Example
• Handling the same data files: The "Network tasks" example (supplied with WINDEV Mobile) includes a project
The two applications handle the same data files. These data files are found on the PC. The that can be used on a Windows Mobile device (Pocket Network tasks) and a
WINDEV Mobile application accesses the data files by Wi-Fi, by infrared, by GPRS, ... HSubstDir project that can be used on PC (PC Network tasks). These two examples use
allows you to specify the data directory to use. the data files found on the PC.

Copying the data files onto the mobile device (Pocket PC for example)
To update the data files found on the PC with the data typed on the mobile devices, all you have to
do is synchronize the files.
If the data files used are in HFSQL format, all mobile devices must be connected one by one to the
PC. The automatic HFSQL synchronization via ActiveSync takes everything in charge.
If the data files used are not in HFSQL format, you must program the synchronization between the
WINDEV Mobile application and the WINDEV application. See the examples supplied with WINDEV
Mobile for more details.

Databases in HFSQL format (on the mobile device and on the PC)

Example
The "Sending SMS", "Managing lists of purchases" and "Stocks" examples
For example: application for taking orders in a restaurant. The new orders are automatically (supplied with WINDEV Mobile) include a project that can be used on mobile
sent to the database found on the PC. device (Pocket PC for example) and a project that can be used on PC. These
• Copying data files on the mobile device: examples present the synchronization of data typed in the two projects.
All data files (or some of them) are copied onto each mobile device (Pocket PC for example)
beforehand. Each application handles its own files. To take into account the modifications
performed in each application, the data files must be synchronized (automatically or not).

For example: poll application performed in the street. The answers will be available in the
WINDEV application once the data files have been synchronized.

190 Part 6: Windows Mobile application Part 6: Windows Mobile application 191
 Lesson 6.3. Advanced programming Overview
In this lesson, we are going to develop a Windows Mobile application that is using a HFSQL Classic
database.
This application will allow us to present some specific features of the programming for Windows
This lesson will teach you the following concepts  Mobile.
Opening project
• Creating a management application.
▶ Start WINDEV Mobile 25 (if not already done).
• Handling the database.
▶ Display the WINDEV Mobile home page if necessary (Ctrl + <).
▶ Open the "Pocket Managing Products" project.
To do so, in the home page, click "Tutorial" and select "Pocket Managing Products (Exercise)".

Estimated time: 1 h A corrected project is available. This project contains the different windows

Answer
created in this lesson. To open the corrected project, in WINDEV Mobile’s
home page, click "Tutorial" and select "Pocket Managing Products (Answer)".

Project description
Let’s take a look at our initial project. This project is an existing project. It contains no window. It
only contains the analysis describing the HFSQL Classic data files that will be used. In the EXE
directory, the corresponding data files are supplied with data in order to run the different tests.
▶ To view the analysis associated with the project:
1. Click among the quick access buttons of WINDEV Mobile menu.
2. The data model editor is displayed.

192 Part 6: Windows Mobile application Part 6: Windows Mobile application 193
 3. This analysis includes 3 data files: 2. The control appears under the mouse.
• A "Product" data file, which contains the product description: name, price, quantity, ... 3. Click the position where the control must be created in the window (at the top for example).
• A "Characteristic" data file, which contains the different product characteristics. For The wizard for creating a Table control starts.
example, if the product is a tee-shirt, its characteristics will correspond to the size, the 4. In the wizard, select "Display the data found in a file or in an existing query". Go to the next
color, ... The "Characteristic" data file is therefore linked to the "Product" data file. step.
• A "Store" data file, which contains the GPS coordinates of each store. 5. Select the "Product" data file. Go to the next step.
4. Close the data model editor (click the cross at the top right of editor). 6. Select the items to display:
We are now going to develop our application.

Displaying the list of products

We are going to create a window used to list the different products. These products will be
displayed in a "Table" control.
Creating the window
▶ To create a new window:
1. Click among the quick access buttons. The window for creating a new element is
displayed: click "Window" then "Window".
2. In the wizard, display the "Standard" tab, choose "Blank" and validate.
3. The window for saving an element is displayed. 7. Keep the "Name", "Description" and "Price" items (a checkmark must be found in front of
4. In the window that is displayed, type the window title: "List of products". The window name these items). Go to the next step.
and location are automatically filled. Keep the default values and validate ("OK" button). 8. Keep the proposed sort item (ProductID). The products will be sorted in the Table control
5. The window is added to the project. according to this item. Go to the next step.
Creating the Table control 9. In the "Additional parameters" step, keep the default options. Go to the next step.
10. Select the "Vertical" orientation and go to the next step.
To display the list of products, we are going to use a "Table" control. The main information about 11. Keep the default name ("TABLE_Product") and validate.
the products will be displayed in this control. 12. The Table control appears in the window editor.
▶ To create the "Table" control: 13. Resize the control and its columns via the handles in order for the content to be displayed
in the window.
1. On the "Creation" pane, in the "Data" group, expand "Table" and select "Table (Vertical)".

194 Part 6: Windows Mobile application Part 6: Windows Mobile application 195
 Creating the form window
We are now going to create a new window used to display the product form. Then, this window will
be started from the list of products to display the details of selected product.
Creating the window
▶ To create the form window:
1. Create a new blank window. Click among the quick access buttons. The window for
creating a new element is displayed: click "Window" then "Window".
2. In the wizard that starts:
• Select the "Standard" tab.
• Choose "Blank".
3. Validate the wizard.
4. The window for saving an element is displayed. Specify the window title: "Product form". Its
name is automatically proposed: "WIN_Product_form". Validate.
Creating controls
▶ To create an edit control:
1. Display the "Analysis" pane if necessary (on the "Home" pane, in the "Environment" group,
Data automatically appears in the window displayed in the editor. This concept expand "Panes" and select "Analysis"). The different data files described in the "Pocket
Remark

is called "Live Data": you see the data of your data files in real time! Managing Products" analysis appear in the pane.
This feature is very useful to adapt the size of controls to their content. 2. With the mouse, select the items of the "Product" data file displayed in the pane (except for
the "ProductID" item).
▶ Save the window by clicking among the quick access buttons. 3. Drag and Drop these items to the window that was just created.

▶ We are going to run a first test in the simulator to see the result. Click among the quick
access buttons (or press F9).

4. Resize the controls ("Name", "Bar code", "Reorder date" and "Description") so that they
become visible in the window:
▶ Close the simulator to go back to the window editor.
• Select the requested control.
• Use the sizing handles (blue squares) to resize the control.

196 Part 6: Windows Mobile application Part 6: Windows Mobile application 197
 5. Reorganize the controls in the window. Displaying the form from the list of products
Let’s now see how to display the form of selected product in the list of products.
▶ Perform the following operations:
1. Position on the "List of products" window: click the "WIN_List_of_products" button in the open
documents bar:

2. On the "Creation" pane, in the "Usual controls" group, click : the shape of the control
appears under the mouse pointer. Then, click at the bottom of the window to create the Button
control.
3. Select the control and press Enter. The control caption becomes editable. Type "Modify the
element" and press Enter on the keyboard.
4. If necessary, resize the control (using the handles) so that the caption is fully displayed.
Respect the following order: "Photo", "Name", "Price", "Quantity", "Bar code", "Reorder date", 5. Right-click the control and select "Code" from the popup menu.
"Description". 6. In the code window that appears, write the following code in the "Click" event:
6. We are going to view the tab order in the window: press the F5 key. The numbers that are Open(WIN_Product_form)
displayed represent the tab order in the window. Press the F5 key again to make the numbers TableDisplay(TABLE_Product, taCurrentSelection)
disappear. The tab order is automatically adapted to the order of controls in the window.
7. Save the window (Ctrl + S).
The assisted code input is going to help you: as soon as you type the opening
▶ Run the window test ( among the quick access buttons). The window is displayed with bracket "(", a drop-down list proposes the name of all existing windows found

Remark
empty controls. in the project. All you have to do is select the window with the keyboard or with
the mouse.
▶ Close the test window to go back to the editor. If the window name is not displayed in the list, it means that this window was
▶ To display the product data: not saved beforehand.
1. Display the WLanguage events associated with the window:
• Perform a right mouse click in the area beside the window. 7. Save the modifications by clicking among the quick access buttons.
• Select "Code" from the popup menu that is displayed. 8. Close the code window (click X at the top right corner of code editor).
• The code editor appears. • Run the window test again in the simulator ( among the quick access buttons).
2. Enter the following code in the event "End of initialization of WIN_Product_form": • In the list of products, click one of the products with the mouse.
FileToScreen() • Click the "Modify the element" button.
• The detailed product window is displayed.
FileToScreen is used to display in the controls the data found in the data file, for the current
record. ▶ Close the simulator.
3. Close the code window (click X at the top right corner of code editor).
4. Save the window.

198 Part 6: Windows Mobile application Part 6: Windows Mobile application 199
 Managing the product creation and modification ▶ We will now write the WLanguage code associated with the "Validate" Button control.
1. Right-click on the control and select the "Code" option from the popup menu.
We are now going to modify our two windows in order to manage the product addition and 2. Write the following code in the "Click" event:
modification.
ScreenToFile()
Modifying the product form HModify(Product)
Close()
We are going to add a button into the "WIN_Product_form" window: a "Validate" button to manage
the validation of modifications. Let’s study this code:
• ScreenToFile is used to initialize the items with the values of linked controls, for the current
In the applications for Windows Mobile, the use of a "Cancel" button is not record.
Remark

required. Indeed, the user can just click the cross (top right of the window) to • HModify is used to update the file data for the current record.
cancel the input performed. • Close is used to close the form and to go back to the "WIN_List_of_products" window.
3. Save the modifications by clicking among the quick access buttons.
▶ To create the "Validate" Button control in the "WIN_Product_form" window: 4. Close the code window (click X at the top right corner of code editor).
1. Display (if necessary) the "WIN_Product_form" window in the editor: click the corresponding ▶ Display the "WIN_List_of_products" window in the window editor and run its test in the
button in the open documents bar. simulator ( among the quick access buttons).
2. On the "Creation" pane, in the "Usual controls" group, click : the shape of the control • In the list of products, click one of the products with the mouse: for example, the "Polo
appears under the mouse pointer. Then click in the window to create the control (next to the Hibbicus Blue" product at a price of 25.90 Dollars.
Image control, for example).
• Click "Modify the element".
3. Select the control and press Enter. The control caption becomes editable. Type "Validate" and
press Enter on the keyboard. • The detailed window of product is displayed. Modify the price of 25.90 Dollars and type
19.90 Dollars, then click the "Validate" button.
• When going back to the list of products, you will notice that the price was updated for this
product.
▶ Close the simulator. The WINDEV Mobile editor is displayed.
Creating a new product
The principle for creating a product is as follows:
• In the window for the list of products, we are going to add a "New product" button that will be
used to open the "Product form" window.
• Then, we will modify the code of "Product form" window to manage the addition into the
Product data file.
▶ First of all, display (if necessary) the "WIN_List_of_products" window in the editor: click the
corresponding button in the button bar.
4. If necessary, resize the control (using the handles) so that the caption is fully displayed. ▶ To create a new Button control:
1. On the "Creation" pane, in the "Usual controls" group, click : the shape of the control
appears under the mouse pointer. Then click in the window to create the control (for example
next to the Button control "Modify the element").
2. Select the control and press Enter. The control caption becomes editable. Type "New product"
and press Enter on the keyboard.

200 Part 6: Windows Mobile application Part 6: Windows Mobile application 201
 2. We will modify the code of the Button control used to validate the form:
• Right-click the Button control and select "Code" from the popup menu.
• In the "Click" event, replace the existing WLanguage code with the following:
ScreenToFile()
IF Product..NewRecord THEN
HAdd(Product)
ELSE
HModify(Product)
END
Close()

Let’s take a look at these lines of code:

• ..NewRecord is used to find out whether the current record must be created.
• If HReset was called beforehand, the property returns True (click on "New product") and
the record must be created by HAdd.
• Otherwise, the current record already exists and it must be modified by HModify.
3. If necessary, resize the Button control (using the handles) so that the caption is fully The test code of new record can be replaced by HSave. This function is
displayed. used to check whether the record is already found in the data file, and it
4. The WLanguage code of this Button control will allow you to open the "Product form" window allows you to add it or to modify it. The code becomes:

Remark
an to reset its controls. To write this code:
ScreenToFile()
• Right-click the "New product" Button control. HSave(Product)
• Select "Code" from the popup menu that is displayed. Close()
• Write the following code in the "Click" WLanguage event:
HReset(Product)
Open(WIN_Product_form) 3. Save the modifications by clicking among the quick access buttons.
TableDisplay(TABLE_Product) 4. Close the code window (click X at the top right corner of code editor).
• HReset initializes the item variables in the Product data file with the default values to ▶ Display the "WIN_List_of_products" window in the window editor and run its test in the
manage a new record. simulator ( among the quick access buttons).
• Open is used to open the form window. • In the list of products, click the "New product" button.
• TableDisplay is used to update the content of Table control: the new record will be • Type a new product.
displayed in the control.
• Validate. The new product is displayed in the list of products.
5. Save the modifications by clicking among the quick access buttons.
• Close the simulator.
6. Close the code window (click X at the top right corner of code editor).
▶ We are now going to modify the window of product form to manage the addition of a new
record.
1. Open the "WIN_Product_form" window in the editor.

202 Part 6: Windows Mobile application Part 6: Windows Mobile application 203
 Creating a menu window Customizing the menu

We are now going to create a window for implementing the application menu. We are going to modify the menu in order to call the window of list of products and to exit from the
application.
Creating the window
▶ To modify the menu option:
First of all, we are going to create a blank window with a menu. 1. Right-click the "Menu" option to display the popup menu.
Remark: This "Menu" option is positioned at the bottom left of window.
▶ To create the window:
2. Select "Option description". The description window is displayed.
1. Create a new blank window. Click among the quick access buttons. The window for
3. Modify the caption of the option that becomes "Product". Validate the description window.
creating a new element is displayed: click "Window" then "Window".
4. Select the menu option again.
2. In the wizard for window creation, click the "Standard" tab.
5. Display the popup menu (right click):
3. Choose "Wizard" and validate.
4. The wizard for creating a Windows Mobile window starts.
5. Select "Maximized" and go to the next step.
6. In the advanced settings, select "With menu and toolbar".

6. Select "Transform to expand a sub-menu".

7. In the input area that is displayed, type "List of products" and validate.

Go to the next step.

7. Specify the window title: "Menu".
8. Validate the wizard. The window is displayed in the editor. 8. Right-click the new option and select "Add before" from the popup menu.
9. The window for saving an element is displayed. The name entered in the wizard is 9. In the input area that is displayed, type "Exit" and validate.
automatically proposed in the save window. Validate.

204 Part 6: Windows Mobile application Part 6: Windows Mobile application 205
 Programming the menu Creating the executable
We are now going to type the code of these two menu options. ▶ To generate the Windows Mobile application:
▶ To define the WLanguage code of "Exit" option: 1. On the "Project" pane, in the "Generation" group, click "Generate" (you also have the ability to
1. In the window editor, display the "Exit" option. All you have to do is expand the menu, just like click among the quick access buttons).
you did at run time. 2. The wizard for creating a mobile executable starts.
2. Display the popup menu of "Exit" option (right mouse click) and select "Code". 3. The first wizard step is used to define the application name and icon. The executable icon
3. Write the following code: can be chosen in the image catalog of WINDEV Mobile ("Catalog" button).
4. The other steps are not required by our application. Click the "2- Copy onto the mobile" link
Close()
found on the left of the wizard.
Close is used to close the current window. The "Menu" window being the only window, the 5. This step is used to define the options for copying files onto the mobile device:
application is automatically closed.
▶ To define the WLanguage code of "List of products" option:
1. In the window editor, display the "List of products" option. All you have to do is expand the
menu, just like you did at run time.
2. Display the popup menu of the "List of products" option (right mouse click) and select "Code".
3. Write the following WLanguage code:
Open(WIN_List_of_products)

4. Save the modifications by clicking among the quick access buttons.

5. Close the code window (click X at the top right corner of code editor).

Running the application test

6. The options to choose depend on your configuration:
The last step consists in specifying that the menu window is the first application window. To do so, • If a mobile device is connected, select "Yes: Copy the executable to Pocket PC" as well as
we are going to define the first project window and run a full test of project. "Run the application on Pocket PC at the end of copy". In this case, once the executable is
generated, the application will be automatically copied and started on the mobile.
▶ To define the first project window:
• If no mobile is device connected, select "No: Don’t copy the executable to Pocket PC". In
1. Select the "WIN_Menu" window in the "Project explorer" pane.
this case, the application can be deployed on the mobile devices via a setup procedure.
2. Display the popup menu.
7. Go to the next step.
3. Select "First project window". A specific icon (with a small 1) is displayed in front of the
window name, in the "Project explorer" pane.
Until now, the test of windows was run individually by clicking among the quick access buttons.
▶ To run the project test:
1. Click among the quick access buttons.
2. Your project starts with the menu window. Click an option of your menu to check whether the
different links are correct.
That’s it, our application is created, we must now compile it and install it on the device in order to
test it in real conditions.

206 Part 6: Windows Mobile application Part 6: Windows Mobile application 207
 8. If the option "Yes: Copy the executable to Pocket PC" was selected, the wizard proposes the
files to copy onto Pocket PC: Lesson 6.4. Distributing the application

This lesson will teach you the following concepts 

• Available distribution modes.

9. Validate the selection of suggested files.

Estimated time: 20 mn
That’s it, your application is generated and run on the Windows Mobile device.

208 Part 6: Windows Mobile application Part 6: Windows Mobile application 209
 Overview 8. Specify the files to install. The wizard proposes the executable. You also have to install the
data files of application. Click the "Add" button and select the HFSQL files (.fic, .ndx and .mmo
WINDEV Mobile allows you to develop applications for Windows Mobile. files) found in the EXE directory of your project.
Several methods can be used to install a WINDEV Mobile application on a device running Windows
Mobile (Pocket PC for example):
• setup in CAB format. This setup program is run on the mobile device directly.
• setup in MSI format. This setup program is run on a PC running Windows connected to a
mobile device (Pocket PC for example).
• setup by direct copy of executable from the PC to the Pocket PC (as already seen in the
previous lessons).
These different setup modes are available via the wizard for setup creation.
Caution

The setup of a Windows Mobile application can be created with a 32-bit WINDEV
Mobile editor only.

▶ To start the setup wizard:

1. On the "Project" pane, in the "Generation" group, click "Setup procedure". The wizard for
creating the executable and the setup starts.
2. The executable being already created, click "2-Setup" on the left of the wizard.
3. In the message box that is displayed, click "Access the setup options".
4. The description screen of application is displayed. Go to the next step of the wizard ("Next").
5. You can choose the setup mode of your mobile application:
9. Go to the next step.
10. Uncheck the options for configuring the databases. Go to the next step.
11. The wizard proposes to install additional modules. We won’t select any. Go to the next step.
12. The generation directory of setup is proposed.
13. Validate. The setup is generated.
14. WINDEV Mobile proposes to start the setup or to open the generation directory.

6. For our example, we are going to choose a setup by ActiveSync: check the corresponding
option and go to the next step.
7. The wizard asks for the setup directory of application. Keep the default option. Go to the next
step.

210 Part 6: Windows Mobile application Part 6: Windows Mobile application 211
 Setup in MSI format Update in CAB format
The CAB format proposes two types of updates:
Initial setup • update by entirely re-installing the application . In this case, the update is identical to the initial
setup. See the previous paragraph.
This setup consists in:
• update by Internet (HTTP protocol). This update consists in:
• creating the application executable on the development computer via WINDEV Mobile.
• creating the application executable on the development computer via WINDEV Mobile.
• generate the setup program of application on the development computer via WINDEV Mobile.
This program corresponds to a ".MSI" file. • generate the setup program of application on the development computer via WINDEV
Mobile. This setup program corresponds to a ".CAB" file.
• distributing this setup program to the end users.
• copying this setup program onto a Web directory by FTP.
• running this setup program on PCs. The application will be automatically installed on the
mobile device connected to the current computer, via ActiveSync. • retrieving and installing the update on the mobile device.
Remark: If no mobile device is connected, the setup will be performed during the next
synchronization between the PC and the mobile device.
To use this application, start the application on the mobile device (double-click the ".EXE" file for
example).
Update in MSI format
The MSI format proposes two types of updates:
• update by entirely re-installing the application . In this case, the update is identical to an initial
setup.
• update by Internet (HTTP protocol) in CAB format. This update consists in:
• creating the application executable on the development computer via WINDEV Mobile.
• generate the setup program of application on the development computer via WINDEV
Mobile. This setup program corresponds to a ".CAB" file.
• copying this setup program onto a Web directory by FTP.
• retrieving and installing the update on the mobile device.

Setup in CAB format

Initial setup
This setup consists in:
• creating the application executable on the development computer via WINDEV Mobile.
• generate the setup program of application on the development computer via WINDEV Mobile.
This setup program corresponds to a ".CAB" file.
• copying this setup program onto the mobile devices of the end users (via a memory card, by
GPRS from an Internet site or via the file explorer).
• running this setup program on the mobile devices. This program installs all the files required by
the application. At the end of setup, the ".CAB" file is automatically deleted from the device.
To use this application, start the application on the mobile device (double-click the ".EXE" file for
example).

212 Part 6: Windows Mobile application Part 6: Windows Mobile application 213
 Conclusion
The tutorial is over now!

This course covered a range of topics, but not all WINDEV Mobile features, far from it!
You are now familiar with the main concepts.
We recommend that you spend another day exploring the menu options of WINDEV Mobile, for
each module.

You can also explore the examples supplied with WINDEV Mobile: some are simple and only
address one topic, while others are more complex. These examples will show you the different
aspects of WINDEV Mobile as well as the development for the different platforms. Reading the
source code is also a good way to learn.

It would take too much time to discuss all available topics (there are hundreds, even thousands!).
WINDEV Mobile proposes several features that were not presented in this tutorial:
• sockets and HTTP functions, ...
• queries, queries with parameters, ...
• printing, ...

See the online help for more details.

We wish you great development experiences with WINDEV Mobile 25!

214 Conclusion