Desktop Apps and Mobile Bridges

Although, in this book, we are primarily focused on building mobile apps with Delphi and FireMonkey, this chapter touches on the development menu of desktop applications and on the development of applications that work seamlessly on desktop and mobile, with a single source code base. The chapter will offer specific tips and recommendations for Windows, macOS, and Linux, and it will focus on what Delphi offers to create desktop and mobile applications that interact directly, using a technology called app tethering.

Given that FireMonkey is a great library for desktop development, it is important to focus on this area of the library, besides covering iOS and Android support. A significant advantage of FireMonkey is its ability to target desktop and mobile with a single source code, and the goal of this chapter is to help you understand this powerful feature while exploring specific examples.

This chapter will cover the following points:

• Single...

Technical requirements

The source code for the demos in this chapter is available at https://github.com/PacktPublishing/Expert-Delphi_Second-edition.

Single source for mobile and desktop

The beauty of building applications using FireMonkey is that you can compile them for each of the supported platforms and they just work, adapting automatically to the platform controls’ style and look and feel. Additionally, as we have seen, you can adapt the UI to each of the platforms you want to target, by creating specific views in the FireMonkey form designer in the Delphi IDE.

Therefore, it is possible to build a single app for multiple platforms. We have focused on building native apps for Android and iOS, seamlessly. However, within the desktop world, there are additional considerations to take into account. One of them is the fact that screens tend to be wide, and applications tend to stretch horizontally, unlike in the mobile world. Also, most visual interaction is through the mouse rather than through the touch of a finger. This affects the entire UI design.

There are many other differences for desktop applications, and...

Using the MultiView control

A very peculiar control in FireMonkey is the MultiView control, which can be used to offer a flexible set of commands or menus, easily adaptable for mobile and desktop applications. It offers an implementation of the so-called hamburger menu (a button with three horizontal lines), with a drawer that can overlap the content or push it to the side. The MultiView control associates a master pane (with the application menu or controls elements) with a details pane, generally showing the actual application content and data.

In this case, I want to build a general app that can change the behavior of the MultiView control, by switching its mode at runtime. Let’s look at the display options (or modes) for this control:

• Drawer mode has a master pane that is hidden and can slide to overlap the details pane
• Panel mode has independent panels, with the master docked on the side of the detail pane
• Popover mode has the master pane in a pop-up...

Using data grids

Every time you need to display complex, structured information to a user, you can use the grid, one of the most common UI controls. We’ll read more about grids in the next chapter, when covering database apps. However, I want to introduce grids now, as they are even more common on desktop applications.

Let’s see how TStringGrid works in FireMonkey. Let’s get back to our MultiViewDemo example and place a string grid control on the detail panel called Panel1. Align this grid to Client. Now, select the grid and right click on it, or view the commands at the bottom of the Object Inspector and open its Items Editor window. In the combo box on the side, make sure that TStringColum is selected (as we want to have a grid of strings), and press Add Item five times. You should have now added five columns, as shown in Figure 9.4.

Figure 9.4: Adding columns to a string grid at design time

Close this dialog, and set the RowCount...

Leveraging layout controls

Layout controls are a fundamental tool to define an adaptive and flexible UI for FireMonkey apps.

If you want to create a flexible and fluid UI that adapts to different device sizes, you should not position your controls at absolute points. In most of the previous demos, we used alignments and nested controls to allow the actual controls to adapt to the hosting surface and window. In the MultiViewDemo example, for example, I used a layout with a speed button and a label with specific alignments.

The TLayout control is the base layout. It’s an empty and invisible container. By invisible, I mean it has no visible elements in the UI, but the control itself needs to be visible for a user to see the controls it hosts. The TLayout control can use absolute positioning or alignment with margins, like any other FireMonkey container control.

However, there are a number of inherited layout classes that offer specialized behavior. If you search layout...

Building desktop apps for Windows, macOS, and Linux

Besides mobile apps for Android and iOS, Delphi and FireMonkey offer you the ability to build native applications for the desktop, as we saw in the previous sections. While this book is focused on mobile, in this chapter I want to add some quick notes regarding the desktop platform, offering a bit of specific advice and steps to build applications for Windows, macOS, and even Linux (if you own the Enterprise edition of Delphi or RAD Studio). This won’t be a deep dive; I will only highlight some core considerations for Windows development.

We have built Windows applications in this chapter as well as previous chapters of this book. The reason is simple – the Delphi IDE runs on Windows, and it should be no surprise that Delphi offers the best platform support in terms of tooling for Windows. For all other platforms, Delphi has a cross-compiler, a compiler that runs on Windows and produces a binary for different operating...

App tethering

App tethering is a unique feature of Delphi that can be used to set up communication between different types of applications, such as mobile or desktop, running on any of the supported platforms using FireMonkey. It can also be used in the Windows-specific VCL library. The original use case for app tethering was to be able to extend existing desktop apps to mobile and easily create mobile companion apps. Instead of trying to re-implement existing desktop apps on mobile, the idea was to be able to either control a desktop app from a mobile app or to be able to easily exchange data between the two.

For example, we could have an existing desktop application written in Delphi that help doctors keep track of patients’ data and possibly control some medical instruments. There is nothing wrong with this desktop application; it has stood the test of time and is very useful. However, mobile has brought new possibilities. It would be cool to use a mobile device with a...

Summary

This chapter focused on desktop applications, taking a slight detour from the main focus of this book, which is building mobile apps. The beauty of FireMonkey is that the same application can run on desktop and mobile platforms, although it takes some extra effort to create a UI that adapts to both. In this chapter, we covered some of the scenarios, but there is more you can explore. We also touched on specific elements of desktop apps and built a macOS and Linux app.

We also focused on app tethering, which is a very powerful set of components to connect desktop applications with mobile companion apps. The app tethering framework allows two arbitrary Delphi apps to exchange data over Bluetooth or TCP/IP, with almost no coding required.

The ability to create desktop applications can certainly come handy for you in many cases, as the power of Delphi is in its ability to target both desktop and mobile apps, and by learning to use FireMonkey, you’ll be able to create...