New WINDEV Mobile 2024 feature!
Help / WINDEV Mobile Tutorial / Tutorial - Developing an Android and iOS application
  • Lesson 1 - Application overview
  • Sample project
  • Opening the example project
  • Creating an iOS platform
  • Project analysis
  • To sum up

Tutorial - Developing an Android and iOS application

Lesson 1 - Application overview
We will cover the following topics:
  • Overview of the project manipulated in this tutorial
  • How to enable a platform?
Durée de la leçon 10 min
Sample project
In this tutorial, we will create an Android and iOS application that uses an HFSQL Classic database.
We will implement the following features in this project:
  • a window with the list of products
  • a window to view and modify a product from the list. This window can also be used to create a product. In this window, the user will be able to select a product image and scan a barcode.
  • a window to view the stores on a Map control.
  • layouts to set the window orientation.
  • a search window with the "Pull-to-refresh" functionality.
  • a sliding menu.
  • ability to change the window content with a swipe gesture.
  • ability to print a report.
  • ability to consume a web service.
We have already seen how to create a project in My first Android/iOS application. Now, we will work on a project that already contains the database and the data used by the application.
Our application will use an HFSQL Classic database.
Difference between HFSQL Classic and HFSQL Client/Server
  • In HFSQL Classic, data files are stored on the device (iPhone, iPad, Android phones or tablets).
    In this case, the application is stand-alone. No network or Internet connection is required.
    The data is stored in the device memory. The maximum storage size depends on the amount of memory on the device.
    Remark: If the data entered on the mobile device must be synchronized with a database on a server (HFSQL or other), a replication must be implemented (see Mobile data replication).
  • In HFSQL Client/Server, no data is stored on the device. The data is stored on a machine on which an HFSQL server is installed. To access this machine and the database, the mobile application must have a method to connect to the server via the network or the Internet (Wi-Fi or 4G).
    Response times depend on the quality of the Wi-Fi or Internet network and the amount of data requested.
Opening the example project
Open the "WM Product Management" project in WINDEV Mobile:
  1. Go to the WINDEV Mobile home page (Ctrl + <).
  2. On the home page, click "Tutorial", then in "Tutorial - Develop an Android/iOS application", double-click "Android/iOS product management - Exercise".
This project will be used in the different lessons of this tutorial.
Creating an iOS platform
"WM Product Management" is a project intended to be used only on Android. Since this application is also intended to be used on iOS, we will enable the iOS platform in the project.
Reminder: Project configurations make it possible to define the different types of generations supported by the project: Android, iOS, component, etc. We already used project configurations in My first Android/iOS project. In this tutorial, we will see how to create a project configuration.

To enable the iOS platform, we will create a project configuration:
  1. On the "Project" tab, in the "Project configuration" group, expand "New configuration" and select "iPhone/iPad application".
  2. The project configuration creation wizard starts. The wizard proposes to create an iOS platform. Go to the next step.
  3. Enter the platform information. Keep the default options and go to the next step.
  4. The wizard prompts you to choose the type of devices the project is intended for:
    • Generate an application for all iPhones and iPads.
    • Generate an application for all iPhones.
    • Generate an application for all iPads.
    • Generate an application for a specific device.
      This last option should only be used if the application is intended for a single type of device or a single model. This case is not very common.
      The other options can be used for different types iOS devices (for example, phones with different screen sizes or resolutions). WINDEV Mobile allows creating windows with the lowest screen resolution. You can use anchors to adapt the application to any device.

  5. For this example, select "Generate an application for all iPhones".
  6. Go to the next step and finish the wizard. The iOS configuration is automatically created.
You can check the new project configuration in the "Project explorer" pane:
  1. Expand "Configurations (iOS application)" at the top of the "Project explorer" pane.
  2. The two configurations are displayed:
  3. To select a specific configuration, double-click the desired 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 the "Android application" configuration.
  3. The Android configuration is automatically selected.
The different images used in the lessons of this tutorial were created with the Android configuration. You might find some slight differences if you use the iOS configuration (especially in the Action Bar).
Project analysis
Now let's take a look at the database of our example. The project only contains the analysis with the HFSQL Classic data files we are going to use. The data files already contain the data needed to run the different tests.

Before going any further, let's do a quick reminder of the terms used in the analysis:
  • Data file: The analysis allows you to define the structure of the database files. A "Data file" 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 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 for the data file.
  • Item: In the analysis, an item represents a section of a data file. All items in a data file are used to define the structure of a record.
  • Key/Index: In WINDEV Mobile and HFSQL, the concept of index is linked to the concept of key. A key is part of the item characteristics. Keys allow fast access to data and simplify loop through operations on data files. In WINDEV Mobile, if an HFSQL data file includes multiple key items, a single index file will be created at runtime.
To view the analysis associated with the project:
  1. Click Load project analysis in the quick access buttons of the WINDEV Mobile menu.
  2. The data model editor is displayed.
    Analysis of this course
  3. This analysis includes 3 data files:
    • A "Product" data file, which contains the product description: caption, price, quantity, etc.
    • A "Characteristic" data file, which contains the different product characteristics. For example, if the product is a T-shirt, its characteristics will be the size, color, etc. 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 "X" icon in the upper-right of the editor).
To sum up
Completed project
Do you want to check the end result of the steps described here?
A completed project is available. This project contains the different windows created in this lesson. To open the completed project, go to the home page and click "Tutorial", then in "Tutorial - Develop an Android/iOS application", double-click "Android/iOS product management - Answers".
This lesson gave us an overview of the project and the analysis manipulated in this tutorial, and explained how to create a project configuration.
In the next lesson, we will start developing the application by creating different windows.
Table of contentsNext Lesson
Minimum version required
  • Version 2024
Click [Add] to post a comment

Last update: 02/28/2024

Send a report | Local help