Building User Interfaces with Style

If you would need to choose one single most important concept to understand in Delphi cross-platform programming, then it would probably be the concept of styles. Styling is the cornerstone of cross-platform FireMonkey architecture. Styles are used at different levels. There are built-in styles, which are specific to a platform that you use when you create a multi-device project and switch between in the form designer. The FireMonkey controls on a form have a StyleLookup property, which can be used to use a specific style for a given component. You can also apply a custom style using a TStyleBook component. Finally, with the built-in style editor, you can visually customize a given style item in the stylebook as easily as you would customize a component on the form. The goal of this chapter is to give you a solid understanding of FireMonkey styles for building stunning graphical user interfaces (GUIs).

This chapter will cover the following points...

Working with built-in styles

The look and feel of every FireMonkey control depends on the style. There is only one code base of your app, but when you compile it for a given platform, there is a different style used to render any control. In this way, magic is possible. The same app running on iOS will look like a regular iOS app, and when compiled for Android, it will look like an Android app. You can also compile the project for desktop targets and then an appropriate Windows or Mac style will be used.

Delphi comes with built-in styles. When you create a new multi-device application, during the design time, you can preview how a given form will look with a different style applied.

Let’s give it a try. Create a new multi-device blank application. Save the main form unit as uFormStylesTest and the whole project as StylesTest. Above the form designer area, there is a Style combo box where you can change the style that is used to preview the form you are working with, as...

Using custom styles

If we do not want to use a built-in style, we can always use a custom style. Delphi installation comes with a number of custom styles. In Delphi, FireMonkey custom styles are installed by default in the C:\Users\Public\Documents\Embarcadero\Studio\NN.0\Styles directory (where NN is the internal product version number). FireMonkey styles are files with *.style extension. If we preview a FireMonkey style file with a text viewer, we will see that its content looks very much like a form file we design with Form Designer inside the IDE.

It is good practice not to put non-visual components such as a stylebook directly on the form but rather on a dedicated data module. To do this, select File | New | Data Module to add a new data module to the project.

Save the unit as uDMStyles. Change the Name property of the data module to DMStyles. Make sure that the data module is created before the application main form. You can do it in the Forms tab in the Options dialog...

Using frames

At times, you might want to define a group of controls working together in a certain way and reuse them multiple times. This can be done using frames.

Developer productivity often relies on being able to reuse previous work. Delphi projects consist of forms, data modules, and source code units. If you have an existing unit, it can always be added to a new project. At a smaller scale, there are occasions in which it would be desirable to reuse a certain combination of components. This is where frames come in. If you have a few controls working together that you would like to reuse multiple times in the same or multiple forms, then you can use frames.

Frames cannot exist on their own in the final application. They always need to be embedded in a form. They can contain controls and code, like a regular form.

Let’s consider address information. Imagine we are designing a form with different controls for storing contact data. Our “contact” can...

Working with inherited views

When we design a form, it is the same for all platforms, form factors, and orientations. While you can use layouts, alignments, and anchors to make the form flexible, the differences in screen resolution and layout between different devices are generally very significant and had to accommodate.

By changing the platforms of a FireMonkey form, we can preview what the form is going to look like on different platforms, but the design remains the same. To address this problem, the FireMonkey Form Designer allows us to define inherited views that are specific to a given platform and the form factor. Next to the Style combo box at the top of the Form Designer, there is another combo box called View. Using it, we can add additional form files to our form that are specific to a given platform or a specific form factor.

Every form always has a built-in Master view. From the list, we can add additional views, as you can see in Figure 7.18.

...

Previewing forms on devices

Delphi form designer gives us a “what you see is what you get” functionality, but we can go one step further and use Delphi’s built-in functionality to preview the form we are designing live on a physical device. For this, we will have to build from the Delphi samples and deploy them to our device, or download a special app published by Embarcadero Technologies and called FireUI App Preview from an online store.

With the FireUI App Preview app, you can preview the app as you are designing it live on a physical device. The Form Designer broadcasts the current form, with any changes applied by the developer, to all connected devices in real time. This app uses the App Tethering technology available in Delphi, where arbitrary apps written in either Delphi or C++Builder, desktop or mobile, can communicate with each other over a Wi-Fi network or using Bluetooth.

In this scenario, the Delphi IDE runs on a Windows desktop and communicates...

Summary

Building GUIs with the Delphi and FireMonkey libraries requires an understanding of the concept of a style. Styles in FireMonkey UI design play a similar role to cascading style sheets in web development.

Every FireMonkey app uses a style. This could be a built-in style or a custom style loaded from the TStyleBook component or an embedded resource. Integrated FireMonkey Style Designer lets us modify existing styles as easily as designing a form.

We have learned a lot about building UIs with FireMonkey. In the next chapter, we will go deeper into the rich world of different frameworks and components available on iOS and Android operating systems, and how FireMonkey helps us write cross-platform code that abstracts away the differences between different APIs.