The key benefit of Delphi in mobile development is that you can design your app once and, from the same source code, you can natively compile it for both Android and iOS. This chapter is exactly about this capability. We are going to first install Delphi, create a simple one-button "Hello World" app, and then run the same app on Google Nexus 7 and on Apple iPhone 6S.
The Integrated Development Environment (IDE) is where the programmer spends the most of the time. Learning best practices of using the IDE will pay off in the future and will increase your developer productivity. Before going into building apps, you need to feel comfortable working in the IDE.
The objective of this chapter is to install the Delphi IDE, learn basic IDE functionality, and prepare it for mobile development.
Delphi is a Windows program, so you need to have a computer with a proper version of Windows installed and enough free space on your hard drive. You may want to install Delphi on a physical computer or onto a Windows virtual machine image using one of the available virtualization solutions such as VMware. Installing onto a virtual machine has some advantages in cross-platform development. In order to create iOS apps, you will need to have access to a Mac computer. This could be another computer available on a local network or the same physical machine. One of the most convenient configurations is to have just one physical machine that allows you to target all operating system platforms supported by Delphi.
In order to deploy to iOS devices, you need to use a physical Mac machine. At the same time, Delphi is a Windows program, so you will also need Windows. You can use both on one computer by running Windows in a virtual machine installed on Mac. Whether you choose to install Delphi onto a physical or virtual Windows machine, the installation process is the same.
Delphi is implemented as a native Windows 32-bit executable. As such, it can be installed to either 32-bit or 64-bit versions of Windows. Some parts of Delphi are written in .NET 3.5, so at the beginning of the installation, the installer may also install a .NET 3.5 redistributable package which is not installed by default in newer versions of Windows.
Delphi comes in different versions, so before downloading the installer, we need to decide which version to choose. There are four Delphi versions--Starter, Professional, Enterprise, and Architect:
- The Starter version is the simplest one and it does not contain features necessary for doing mobile development. This version is aimed at hobbyists, students, and in general for anyone that just wants to learn Delphi. Starter supports building application for Windows 32-bit only. That's not what we need.
- The next version is Professional. It also does not contain features for mobile development, but they can be installed separately in the form of mobile add-on packs. The Professional is a good choice if you plan to build applications for Windows and you do not need the possibility to connect to remote databases.
- The third version is Enterprise. This is the full version of Delphi and contains everything that is in the Professional plus more. It allows you to create apps for all supported mobile and desktop platforms including Android, iOS, Windows, Mac, and Linux. It also contains the DataSnap framework for building scalable, multitier systems that is not available in Professional edition. This is the version of Delphi that we are going to use in this book.
- The highest Delphi version is Architect. This is a product bundle that contains Delphi Enterprise and separately installed ER/Studio Developer Edition for modeling relational SQL databases and DB Power Studio Developer Edition that contains tools for working with SQL databases.
Delphi is available as a standalone product, but it can also be used as part of RAD Studio. RAD Studio contains Delphi and C++Builder. Delphi and C++Builder are two different IDE personalities of RAD Studio and both can be installed from the same RAD Studio installer into one deeply integrated environment. Both products, Delphi and C++Builder, provide the same capabilities of building mobile and desktop apps for different operating systems from the same source code using visual designers, and share the same component libraries, but differ in the programming language being used. Delphi uses Object Pascal and C++Builder uses standard C++.
I'm trying as much as possible to make sure that this book is not tied to any particular Delphi version. However, it is important to pay attention to which version of different pieces of software we are using.
In this book, we are going to use Delphi 10.2 Tokyo Enterprise edition. Delphi is produced by Embarcadero and you can find more information about different Delphi versions and features on the Embarcadero Delphi home page (http://www.embarcadero.com/products/delphi). You can get Delphi directly through the Embarcadero website or through one of many partner companies that represent Embarcadero in different countries. After purchasing Delphi, you will receive an automatically generated email with the download link to the Delphi installer and the serial number that you will need during the installation.
Delphi installer is available in two different formats. You can either choose to install Delphi using the so-called Electronic Software Delivery (ESD) for short, or you can install from the ISO image of the full Delphi installation DVD. The first option is the default one and it makes for faster installation. The ESD installer is a relatively small application that downloads and installs only those parts of Delphi that you have chosen at the beginning of the installation process. After Delphi is installed you can always choose to install or uninstall different features. The second option is to install from the DVD ISO image. This is useful when the internet access is slow, unreliable, or for some security reasons the Windows machine that you install Delphi onto does not have internet access at all.
Here we are going to use the web installer. Download the installation file from the link provided in the email. You will need to have administration rights on Windows to be able to install Delphi. On one of the first installer screens you will be prompted to enter the serial number that you have received from Embarcadero and also you will need to enter your Embarcadero Developer Network (EDN) username and password. If you do not have an EDN account, you can quickly create one from within the installer. It is free and it makes the connection between the serial number that you have received and you as the user of the software.
During the installation, you can choose which platforms and additional features you want to install. You can always add or remove platforms and features from the IDE Welcome Page after the installation is complete, as shown in the following screenshot:
After this, we need to select platforms and all additional features, as shown in the following screenshot:
I'm going for the full install, so I have selected all platforms and all additional features to be installed, except for languages other than English. Depending on the speed of your internet connection, the installer should complete the installation in a couple of minutes. At the end of the installation, you will see the message that the installation is complete and you can start working.
If you run into problems during the installation, you can review the Delphi Installation Notes on the Embarcadero DocWiki (http://docwiki.embarcadero.com/RADStudio/en/Installation_Notes).
Delphi is now installed. Run it and the first thing you will see is the Welcome Page, as shown in the following screenshot:
Here you can display the Platforms and Extensions Manager, which will give you an opportunity to add or remove installed platforms and additional options. From the Welcome Page you can open sample projects, watch video tutorials, and access online documentation. You can also easily open recently closed projects. The projects that you frequently work with can be added to Favorites for quick access.
Delphi IDE has an open architecture and provides many ways to extend its functionality through additional packages. You can see the list of currently installed packages in the Installed Packages option available from the Component menu. The most typical Delphi building block is a Component. Technically, this is about taking the object-oriented programming principles and moving it one step further. With components, you have the ability to manipulate regular programming language object instances during the design time, before the project is built for a given platform. Packages may also contain custom property editors and the Open Tools API extension to the IDE itself that may add custom functionality to the IDE, such as additional menus and windows.
Out of the box, with the default Delphi installation, you will get a few hundred components already preinstalled. Depending on your Delphi version and selected features, this list may differ. Click on the Installed Packages option in the Component menu to verify which components are actually installed, as shown in the following screenshot:
There are many additional free and commercial component packages that are not installed by default. They can be installed with the integrated GetIt Package Manager. It is available either from the Welcome Page or from the Tools menu, as shown in the following screenshot:
If you want to install any of the available component packages, just click on the Install button under the image of the package. The installation process is very straightforward. After accepting the license, the components are downloaded from the internet, compiled, and installed into the IDE.
You can manage all aspects of how the Delphi IDE works from the Options dialog available from the Tools menu. Here, you can control various aspects of how Delphi operates as a whole. Take a look at the following screenshot:
In a nutshell, Delphi is a program for making other programs. The actual program responsible for generating executable files from the source code is a compiler. It is typically implemented as a command-line application. When executing a command-line application, you can pass to it command-line parameters. Compilers take different command-line parameters, including the location of source code files necessary to generate the resulting binary file. Take a look at the following diagram:
It is possible to write your programs using a text editor like Notepad and then execute the compiler from the command line, but it is not the most efficient way of creating applications. Most programmers use IDE for working on apps. The idea of an integrated development environment originates from the Delphi ancestor, Borland Turbo Pascal, and comes from the integration of three previously separate programs: Code Editor, compiler, and debugger.
Delphi IDE contains different compilers for generating apps for different platforms. The IDE manages all necessary source code files needed for building an app. It also takes care of passing correct parameters to right compilers and manages their output. In the IDE, it is possible to build, deploy, and run an app directly on the mobile device connected with a USB cable by just pressing the Run button. Obviously, it is also possible to generate an executable application without running it. Sometimes it is very handy to be able to step into an application as it is executed in the host operating system. This process is called debugging. In the Delphi IDE, you can run your program with or without debugging.
There are in total eight different Delphi compilers installed with the Delphi 10.2 version:
32-bit Mac OS X
These compilers are typically installed into the C:\Program Files (x86)\Embarcadero\Studio\19.0\bin folder. The bin folder of Delphi has been added to the Windows path by the installer, so you can try and execute them directly.When executed with no parameters, Delphi compilers will just display their version numbers and possible command-line switches, as shown in the following screenshot:
Take a look at the following screenshot:
In the IDE, we do not need to invoke command-line compilers directly. The IDE is doing this for us when we choose to either run, build, or compile our project. It will also take care of outputting the resulting binary files into a separate folder per every supported platform and build configuration. When we build, deploy, and run our apps, we can see in the bottom part a log of all commands being executed, parameters passed to them, and their output.
Starting with a new programming language or framework typically involves creating a program that displays the famous "Hello World" message, and we will follow this convention. Our app will have just one button. When you press the button, a Delphi Hello World! message will be displayed. Later in this chapter, we are going to put this app on an iPhone and on an Android device.
Click on the Multi-Device Application - Delphi option in the File | New menu, as shown in the following screenshot:
This will display the wizard with different multi-device project templates, as shown in the following screenshot:
Double-click on the Blank Application project template.
The first thing after creating a new project is to save it all. The Delphi project is made of multiple files that are managed by the IDE. The IDE will also create subfolders in the project directory for managing different artifacts such as compiled executable files, editor history, and recovery files, so it is always a good idea to save a new project into an empty directory.
Click on the Save All button in the Delphi toolbar just below the main menu to save all files in the project, as shown in the following screenshot:
Clicking from time to time on the Save All button is something that you do almost automatically.
First, we will be asked to save the main form of our application. Enter uFormHelloWorld in the file save dialog and click on Save. Then, the second file save dialog is displayed. Here we need to give our project a name. Enter DelphiHelloWorld and click on Save.
Delphi organizes all files necessary to build an app into a Project. The Delphi IDE contains a number of windows that help us work on our projects. There are different project types. It is possible to create a project group inside the IDE, but at any given moment of time there can be only one project active. You can see the name of the active Delphi project in the very top left corner of the Delphi window. Its name is also displayed in bold font in the Project Manager. Delphi IDE is context sensitive, so the contents of different windows and dialogs can vary. An example of a context sensitive dialog is Project Options. Select the Options item from the bottom of the Project menu. All options related to the current project opened in the IDE will be displayed, as shown in the following screenshot:
Let's add a button to the form. The fastest way to work in the IDE is to use the IDE Insight. There are hundreds of different options, components, and windows in the IDE. If you know what you are looking for, you can just press F6 or Ctrl and . keys at the same time. The IDE Insight combobox will receive focus. You can also just click on the IDE Insight combobox in the top corner of the IDE window. We want to add a button to the form. Just start typing what you are looking for and notice how, with every keystroke, the list of available items in the IDE Insight combobox is changing. Type b, u, and t and, after three keystrokes, the TButton component is the first on the list. Refer to the following screenshot:
Just press Enter and a button is added to the form. It is probably one of the single most useful productivity features of the IDE. Six keystrokes are needed to get the component added to the form. Alternatively, we could locate the TButton component in the Tool Palette window and double-click it to add it to the form. Over time, you will find that you press Ctrl + almost subconsciously, very much like clicking on Save All. In fact, you can click on Save All right now. :)
We have a button in the middle of an empty form. Let's start working on how our app will look--that's form design. What our app is going to do--that's coding. Click on the button and move it more toward the window's top left corner. In the left bottom part of the IDE there is the Object Inspector window. Here we can modify properties and events of components. We need to change the text that is displayed on the button. Make sure that TButton1 is selected in the Object Inspector and find its Text property. Replace the default Button1 with Hello World. Now, find the Name property of the button and change it to btnHelloWorld. Notice that the new name of the component has been immediately reflected in the Structure view above the Object Inspector. Now select the form. You can click somewhere on the form in the Form Designer to select it or just click on the form's node in the Structure view above Object Inspector. That's how the IDE works. Different windows are synchronized with each other, so selecting a component, changes the current component selection in other views as well. Find the Name property of the main form and change the default Form1 to FormHelloWorld. Now, find the Caption property of the form and change it to Delphi Hello World. Save all.
It is always good practice to give components and their properties meaningful names. There are different naming conventions. One of the most popular ones is to give components such name, that, just from the name itself, we could understand what the type of this particular component is. You also want to keep names short. If names are too long, you need to type more. Long names in the source code also tend to be less readable. It is up to you to decide what naming convention you use, but once you have decided, it is important to stick to it.
Now we need to define what will happen when the user of our app clicks on the button. For this, we need to attach an event handler to the OnClick event, of the btnHelloWorld button. We could switch to the Events tab in the Object Inspector, locate the OnClick event and double-click on the space next to it to generate an empty event handler. Let's do it faster. Just double-click on the button on the form. The IDE will switch from the Form Designer to Code Editor, and the cursor will be placed just at the beginning of an empty line between begin and end where we need to enter some code in the Object Pascal language. This code will be executed by our app in response to the click event. It could be misleading that this event is called OnClick, as you can use the mouse on desktop computers only. Fear not! If we compile our app to mobile targets, this event will be triggered in response to touching the button on the mobile device screen. In the code, we will invoke the built-in ShowMessage function and pass to it Delphi Hello World! as the string that we want to display in the message.
Click on Save All again. Now let's run the application. Refer to the following screenshot:
Click on the Run green arrow icon under the main menu to build and run the project. You will get the following output:
We are on Windows and by default, we will compile our multi-device app as a Windows 32-bit executable. This is very useful during the developement of mobile apps with Delphi. During the development it is quicker to run our multi-device app on Windows to see that it does not contain any mistakes. If it compiles fine on Windows, then there is a big chance that it will also compile OK with mobile compilers. Building and deploying to a mobile device typically takes longer.
Every Delphi form is made of two source code files. You can switch between these files by clicking on the third button from the left in the toolbar with the Toggle Form/Unit (F12) hint or at the bottom of the screen using the Code and Design tabs. When we entered uFormHelloWorld as the name of the main form of our app, the IDE created two files: uFormHelloWorld.pas and uFormHelloWorld.fmx. The first file we can see in the Code tab is the source code, and the following is the screenshot of the toolbar with the toggle button to switch between the files:
The Code Editor is where we edit Delphi source files with the pas filename extension. We can see directly the contents of the file in the editor, as shown in the following screenshot:
The contents of the fmx file are managed by the Form Designer and we do not edit it directly. Every time we change something in the Object Inspector or in the Form Designer, these changes are stored in the fmx file. The Form Designer gives us a what you see is what you get user experience, so we can see how our app will look even before we run it. Refer to the following screenshot:
You can preview the text of the form file by right-clicking somewhere on the form and selecting the View As Text option from the context menu.
To return to the form view, just right-click on the editor again and select View As Form from the context menu, as shown in the following screenshot:
The most important window in the IDE is the Project Manager. It provides a graphical interface to work with all files that make up our projects and lets us switch between different compilers and build configurations. You can build your applications in either debug or release mode. The debug mode is used during the development of an app. The resulting binary file will have additional binary information embedded that is used by a debugger. When our app is ready to be built for distributing to an app store, then we can switch to release mode.
This will generate an app in the form that is suitable for distribution. Take a look at the following screenshot:
Let's have a look at different files that make up a Delphi project. If you want to quickly find the folder where the current project is located, you can do it easily. Click on the name of the project in the Project Manager. In the Object Inspector, you should now see, Full Name and Full Path properties. Copy the content of the Full Path property to the clipboard, paste it into Windows Explorer, and then hit Enter, as shown in the following screenshot:
You should now see all the files and folders that make up our DelphiHelloWorld project:
Alternatively, you could also right-click on the project name in the Project Manager and select the Show in Explorer option.
Among others, you will see here two files named uFormHelloWorld and two project files with the same name as our project DelphiHelloWorld, but with different extensions. The first one has the extension dpr, which stands for Delphi Project and contains the main program file of our application. We can preview this file inside the IDE by going to the Project | View Source menu, as shown in the following screenshot:
It is the application main program file which is managed by the IDE and most of the time, we need to change anything there. The second project file has a dproj extension. If we open it in Notepad, we will see that it contains XML code with build instruction, for the MSBuild engine that is used by Delphi to manage all files and resources that are needed to build our project for different targets and configurations, as shown in the following screenshot:
There is also a win32 subfolder here. It contains a subfolder called debug and two files: DelphiHelloWorld.exe and uFormHelloWorld.dcu. The first file is a regular Windows 32-bit executable program that we have just built. It does very little. It only has a button and displays a message. The second file is the product of compiling a form file and is only useful for the IDE during the build process. You can safely delete the win32 folder and its contents. The next time you run the application, all folders and files will be recreated. That's where the difference between building and compiling the project comes. The very first time, both commands do exactly the same--they generate all binary files in the output folder. In fact, dcu files are generated first and the exe file is generated next. If we select Build every time, all binary files are recreated. If we select Compile, only those dcu files are recreated that have changes. This really speeds up running a project inside of the IDE.
Our DelphiHelloWorld project is now ready for deployment to mobile devices. We have already built and run it on Windows. Now, we are going to first deploy it to an Android device and then to iOS.
This is a one-time preparation for mobile development that you need to go through after Delphi is installed. We want to get to the point that you can see your devices as targets inside the Project Manager.
For Android, all steps to configure your system to detect your device are described at http://docwiki.embarcadero.com/RADStudio/en/Configuring_Your_System_to_Detect_Your_Android_Device.
Deploying apps from Delphi to Android devices is simpler then deploying to iOS. You only need to have an Android device and a USB cable to connect your device to a Windows machine where you have Delphi installed.
Before deploying to an Android device, you need to find out if your device is supported by the version of Delphi you are using. For details, consult http://docwiki.embarcadero.com/RADStudio/en/Android_Devices_Supported_for_Application_Development for the list of currently supported Android versions.
The first step is to enable USB debugging on the device. This option can be set in Developer options on your device. This option is not easy to find. It is, in fact, hidden. On your Android device, go to the Settings | About menu. Tap the Build number seven times to make Settings | Developer options available. Then, check the USB Debugging option. Connect your Android device with a USB cable to a computer where your PC is running. If you are using VMware make sure that your Android device is connected to the virtual machine where you have Delphi and not to your Mac. The first time you connect your Android device, you may see a message displayed on the device to Allow USB debugging from the computer, identified by a string of hexadecimal numbers that represents the computer's RSA key fingerprint. Check the Always allow from this computer option and click on OK.
More info on enabling USB debugging on Android devices is available at http://docwiki.embarcadero.com/RADStudio/en/Enabling_USB_Debugging_on_an_Android_Device.
The next step is to install the USB driver for your Android device on the machine where Delphi is installed. The test device that I'm using is Google Nexus 7.
Probably the easiest option to download all the necessary bits for Android development is to download and install Android Studio for free from Google. It will download all necessary Java SDKs and tools that are needed in order to build an Android apk executable file. For reference, I'm using Android Studio version 2.2.2. On the splash, select the Android SDK option. In the dialog, select the SDK Tools tab and check the Google USB Driver option. Click OK and the driver will be downloaded and installed, as shown in the following screenshot:
In order to make sure that the device driver has been installed successfully, go to the Device Manager window in Control Panel and you should find your device listed. If you right-click on the device, there is an option to Update Device Driver. I could find my Nexus 7 listed there and the device driver was up to date. Refer to the following screenshot:
Depending on your device, the steps may be different. You can find detailed information on how to install the USB driver for your Android device at http://docwiki.embarcadero.com/RADStudio/en/Installing_the_USB_Driver_for_Your_Android_Device.
Now, back to Delphi IDE. Make sure that our DelphiHelloWorld project is still open in the IDE. In the Project Manager, expand Target Platforms and click on Android. The first time you click on the Target node, you will see the message Android SDK tools are required. Do you want to download and install Android SDK tools automatically?. Click on Yes. The process to download and install SDK tools will start and you will see in the Command Prompt window the progress of the operation. After a moment, you should see your device listed under Tools in the Project Manager.
Double-click on the Android node to select the Android target. It should display in bold font. Now this is the current target, so when you click on the Run green arrow, the IDE will build our Delphi Hello World app using the Delphi Android compiler and the executable apk Android file will be created, deployed to the device, and run in just one operation.
Click on Run. The project will be compiled, deployed to your Android device, and run:
You can find more information about preparing your IDE for running apps on Android devices on DocWiki at http://docwiki.embarcadero.com/RADStudio/en/Android_Mobile_Application_Development.
Deploying apps from Delphi to an iOS device requires a Mac computer. As compared to Android, deploying to iOS requires more steps because you also need to enroll for the Apple iOS Developer Program and to provision the device you want to deploy to.
First, you need to make sure that the iOS device that you want to deploy your application to is compatible. In case of iPhone, the oldest supported model is 4GS, but you want to have a device that can have iOS 10 installed. In my case, it is iPhone 6S.
The first steps to prepare your Mac and an iOS device for deployment are exactly the same that any iOS developer needs to do. This is something that you do once. During the process of deploying to an iOS device, an app needs to be digitally signed with the special command-line tool that comes with Apple Xcode installation. You could install just the Xcode command-line tools, but in practice it is easier to install the whole Xcode development environment from Apple.
In order to be able to deploy apps to an iOS device, it needs to be provisioned first. The process of provisioning iOS devices, joining the Apple iOS Developer Program, and installing various certificates is the same as in the case of any app developed with Xcode. In order to be sure that you will be able to deploy an app from Delphi into iOS, it is recommended to create an empty app from a template in Xcode and try to run it on the device. If this is successful, the next step is to install a special PAServer Mac program on the machine where you have Xcode installed. The PAServer19.0.pkg installable package is installed in the PAServer subdirectory of Delphi. Just copy it over to your Mac and execute. This will install the PAServer. The PAServer is implemented as a command-line app, and after it is launched on Mac, it will display a command-line interface where you will be prompted to enter your Mac password. Your Mac will also display a dialog asking if it is OK to give PAServer debugging permissions. Accept it.
You can think about the PAServer as an agent that performs operations on behalf of the Delphi IDE that runs on a remote Windows machine. In order for Delphi to be able to connect, you need to know the IP address of the machine where the PAServer is running. You can find out the IP address by issuing the i command from the PAServer's Command Prompt. The list of all available command-line parameters to PAServer is displayed when you enter ? in the Command Prompt, as shown in the following screenshot:
Now we need to configure Delphi, so it can find the iOS device you want to deploy to. The goal is to find your device listed in the Project Manager. In general, you could have multiple different Macs visible to your Delphi installation. For every Mac you want to deploy to, you need to define a connection profile.
Make sure that our DelphiHelloWorld project is open in the IDE.
Double-click on the iOS Device - 64 bit node under Target to make it active. It will be displayed in bold. Now, right-click on the node and select Properties. You will see a small Platform Properties dialog where you will be able to select the proper iOS SDK. Click on the SDK combo box and select Add New... from the dropdown.
Then, select Add New from the connection profile combo. The Create a Connection Profile wizard will be displayed. I have entered DelphiDev as the profile name. Click on Next. On the next tab of the wizard dialog, we need to enter the address and port of the remote machine. Keep the default port 64211 and enter your Mac password in the last field. Now click on the Test Connection button to verify that the IDE can communicate with the remote PAServer. If everything went well you should see the message that the connection to your Mac succeeded. Click on Finish, as shown in the following screenshot:
Now, back in the Add a New SDK dialog, select the SDK version to add and click on OK:
This will initiate the process of updating the local file cache, with files being downloaded from Mac that are needed by the Delphi iOS compiler to generate an iOS executable file. Refer to the following screenshot:
After the cache is refreshed, the IDE should automatically update the iOS 64-bit Target node and you should see your device listed there:
Now click on the Run button. This will locally build the iOS ipa executable file and send it to the Mac machine where PAServer is running. The PAServer will invoke the command-line tool from the Xcode installation to digitally sign the executable, and then it will be deployed and run on the physical iOS device--all in one operation.
And here is how our Delphi Hello World app looks on my iPhone 6 running iOS 10:
More information about deploying apps to iOS devices from Delphi can be found online at http://docwiki.embarcadero.com/RADStudio/en/IOS_Mobile_Application_Development.
In this chapter, we have installed Delphi and configured it for mobile development. We have also learned the basic functionality of the Integrated Development Environment.
Now we are going to change gears and focus on Object Pascal, the programming language of Delphi.