Development of cross-platform mobile applications in Delphi # 2

Part 1

In the previous part of the cycle, we reviewed the main features of the new RAD Studio XE5. Today we move on to practice. First of all, let's define the task.
')

Formulation of the problem

Despite some academic character of the task, we chose a cookbook as an example. And in order to give originality to the application being developed, we will try to extend the functionality common to such programs with several additional functions:

Recalculate the number of products required.

Typically, recipes indicate the exact amount of products used. But if you want to change the number of servings, then accordingly, you need to recalculate the number of products. In the process of cooking it is not always convenient.

Timer.

If you are new to cooking, then you should use recipes that clearly indicate the time of a particular operation. And the timer on the tablet, phone or netbook may well be a convenient replacement for the kitchen timer.
It often happens that several operations are performed in parallel. Each operation can have its own "timer".
At the same time, we are interested in both “desktop” and mobile implementation of the application. The mobile application will be used as a guide for visualizing the recipe and accompanying the preparation process. The desktop version can be used in a more advanced functionality for, for example, the formation of new recipes.

It should be noted here that, in principle, cookbooks, like books on programming, can be designed for different levels of readiness of readers. In our case, we are talking about “recipes for teapots,” that is, those that indicate the exact number of products and the exact time of an action.

We are implementing this application for Windows and for Android . Then, based on a single source database, we will be able to port the application to MacOS and iOS .

Selection of development tools

Before proceeding directly to the development, let's define the toolkit. Of course, it is best to store the data that will be used in the application in a database.

For the purity of the experiment, we use SQLite as a DBMS. This DBMS has a number of advantages, including speed, ease of use, and resource efficiency. It is ideal for solving simple tasks, and in addition, Android has built-in support for SQLite .

In the future, we will look at how to transfer the application to the use of InterBase DBMS and show all the advantages of the Embarcadero native solution.

Together with the application, we will distribute a ready-made database created separately. This approach is due to the specifics of the problem.

Of course, we need Delphi XE5 . To create a Windows application, in principle, we could be limited to Professional editions. But for the so-called. mobile development, we need at least Enterprise product edition. Alternatively, you can use the Mobile Add-On Pack for Delphi XE5 Professional .

To work with SQLite in Windows, we need to download the sqlite-dll-win32-x86-3080100.zip library from the official website. The easiest way is to place this library in one of the system folders (for example, Windows / SYSTEM32).
Currently, there is a fairly large number of free tools for administering SQLite databases. You can easily use one of them.

We will access the database from the application using the FireDAC library.

FireDAC is a universal data access library designed to develop applications that connect to various databases. With FireDAC, you can develop both VCL and FireMonkey applications. The library supports the following DBMS: InterBase , SQLite , MySQL , SQL Serve r, Oracle , PostgreSQL , DB2 , SQL Anywhere , Advantage DB , Firebird , Access , Informix . However, at this stage, in mobile applications "directly" (without using DataSnap technology) using FireDAC you can connect only to SQLite and InterBase .

Database creation

We will begin the development process by creating a database structure. Its logical model is shown in the diagram.

This diagram is obtained using another tool from the company Embarcadero Technologies - ER / Studio . Developer edition of this product is available to users of RAD Studio Architect . In this publication, we will not dwell on the description of ER / Studio . This powerful tool deserves to devote a separate material to it.

When creating a database structure, each entity of the logical model will correspond to a physical table. Briefly consider the purpose of the resulting tables.

In the tblFoodstuff table we will store a list of all possible products. In the tblUnit table, the list of units of measure (gram, spoon, cup, etc.). The tblRecipe table contains a list of recipes. The tblIngredientes and tblAction tables contain a list of ingredients (with the number in the qty field) and actions (with the time and descriptions), respectively.

To create a SQLite database, you can simply use the script below.

CREATE TABLE [tblAction] ( [Id] INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, [IdRc] INTEGER NOT NULL, [Sec] INTEGER NULL, [DescriptionShort] VARCHAR(128) NOT NULL, [DescriptionExtendent] TEXT NOT NULL ); CREATE TABLE [tblFoodstuff] ( [Id] INTEGER PRIMARY KEY AUTOINCREMENT NULL, [Abbr] VARCHAR(10) NULL, [Title] VARCHAR(50) NULL ); CREATE TABLE [tblIngredientes] ( [Id] INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, [IdCB] INTEGER NOT NULL, [IdFS] INTEGER NOT NULL, [IdUnit] INTEGER NOT NULL, [qty] INTEGER NULL ); CREATE TABLE [tblRecipe] ( [Id] INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, [Title] VARCHAR(150) NOT NULL ); CREATE TABLE [tblUnit] ( [Id] INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, [UnitName] VARCHAR(25) NOT NULL, [Abbr] VARCHAR(7) NOT NULL ); CREATE INDEX [IDX_TBLACTION_Recipe] ON [tblAction]( [IdRc] ASC ); CREATE INDEX [IDX_TBLINGREDIENTES_] ON [tblIngredientes]( [IdCB] ASC ); CREATE INDEX [idxFoodStuff] ON [tblIngredientes]( [IdFS] ASC ); CREATE INDEX [idxRecipe] ON [tblIngredientes]( [IdCB] ASC ); CREATE INDEX [idxUnit] ON [tblIngredientes]( [IdUnit] ASC ); 

Creating a Windows Application

We will directly organize the application development process as follows. Let's start by creating a basic version of the application for Windows, then port it to the Android platform. Next, we will expand the functionality of both applications in parallel. MacOS and iOS versions of the application will be the final stage. We will begin to create them after we have a ready-made Windows and Android version.

Delphi IDE provides several templates for new applications. In this case, we are interested in FireMonkey Desktop Application .



After selecting the appropriate menu item, an additional dialog will be displayed in which you will be asked to choose the type of new FireMonkey application - HD (High Definition) or 3D.



Rename the main form of the application (change the Name property in the object inspector) and save the newly created project. Add a new Data Module (File | Other menu Delphi Files branch) to the project, rename it and save it.



Thus, we created a new project and prepared directly for development.

Configuring FireDAC Connection

habrahabr.ru/topic/edit/200490/#
The first thing we need to do is set up a database connection. In FireMonkey, this procedure is not significantly different from VCL.
Place the TFDConnection , TFDGUIxWaitCursor and TFDPhysSQLiteDriverLink components in the DataModule . In the Object Inspector, we change the value of the LoginPrompt property of the TFDConnection component:

LoginPrompt = False

Double clicking on the component on the form will bring up the connection settings dialog.



In our case, the driver ID should be SQLite , and the path to the database file should be specified as the value of the Database parameter. You can check the correctness of the settings using the Test button.

Immediately create a function that is responsible for connecting to the database in Run Time.

 function TDM.ConnectToDB: Boolean; begin try FDConnection1.Connected := True; except end; Result:= FDConnection1.Connected; end; 

In order for this function to be called from the main module, we will move its title to the public section.

Main application form

On the main form of the application we will consistently place the components TGroupBox , TTabControl and TSplitter . Set up the Align property for each of them (alLeft, alLeft and alClient, respectively). Put two components on the left panel - TListBox and TBindNavigator. Place them as shown in the picture. Double-click the item designer on the TTabControl component, and create two items.

A list of recipes will be displayed on the left side of our application. The tabs on the right side contain the list of ingredients of the dish (with an indication of the quantity) and, directly, the recipe itself, consisting of a specific list of actions.

Data connection

As we have said, there are no special data display components in FireMonkey. Instead, the LiveBinding binding mechanism is used. Let's see how it works. Let's connect the recipe list to the TListBox component on the main form. First of all, you need to create a data set for working with a list of recipes. In the data module we use the TFDTable component. Set its properties as follows:


In the code of our ConnectToDB function, we add a call to the method for opening a dataset.

 FDTRecipe.Open; 

In order to establish a connection with the database in Run Time mode, you must add a call to the ConnectToDB function. You can bind it to the data module's OnCreate event.

 procedure TDM.DataModuleCreate(Sender: TObject); begin DM.ConnectToDB; end; 

At the initial stage of application development, we will not handle exceptions that may occur during connection, although this will need to be done in the future.

We organize the output of data from the TRecipe table to the list on the main form. To do this, first of all, add a data module to the Uses section of the main form module of the program.

 interface uses uDM, System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants, 

In the form editor, call the context menu and select the Bind Visually item. The LiveBinding Designer opens at the bottom of the screen. In it in the form of elements of the diagram objects and their basic properties are presented. Simply dragging and dropping the properties of three objects as shown in the figure.



Actually, this is all that is needed to display data from the recipe table (that is, the list of recipe names). If we run the program now, it will show the list, but it will be empty, and we should take care of how to add recipes.

Create a new FireMonkey HD form. Set its properties as follows:

Name = fAddRecipe
BorderStyle = bsToolWindow
Position = poMainFormCenter


We connect the data module and place the TEdit component and two buttons on the form. In the LiveBinding Designer, we associate the Text property of the TEdit component with the Title field of the dataset.



Let's save the new forum and remove it from the list of automatically created forms (the Project | Options menu, the Forms tab).

For the main form of the application, create a method:

 procedure TfMain.RecipeAfterInsert(DataSet: TDataSet); var fAddRecipe: TfAddRecipe; begin try fAddRecipe:= TfAddRecipe.Create(Application); fAddRecipe.ShowModal; if fAddRecipe.ModalResult = mrOk then begin if DataSet.State in [dsInsert, dsEdit] then DataSet.Post; end else begin if DataSet.State in [dsInsert, dsEdit] then DataSet.Cancel; end; finally FreeAndNil(fAddRecipe); end; end; 

When the program starts, we define the AfterInsert event for the recipe data set.

 procedure TfMain.FormShow(Sender: TObject); begin DM.FDTRecipe.AfterInsert:= RecipeAfterInsert; end; 

Now, running the application, we get a list of recipes, which can be modified using the navigator. When you add a new recipe, a form with an input field appears on the screen.

In this part of the loop, we created the simplest FireMonkey application for Windows . We learned how to establish a database connection using the FireDAC package and looked at the simplest example of using LiveBinding .

In the next, perhaps most interesting, part of the cycle, we will create the first Android application .

Stay with us…

Part # 3