What is multiple platform app development? How can I design my FMX application for the different operating systems? What should we do to design better performance apps?
C++ Builder is a great IDE that allows you to design your application on different platforms in varied sizes. From back-end app and small-scale forms (TForm) to high DPI forms. We can create an application for a low graphic IoT and we can create an application for the High DPI large screens, touch panels, kiosks etc. One application project (codes) can be compiled to different platforms Windows, Android, iOS etc. Let’s see some basic tips on how to make a multiple platform app.
Table of Contents
What is a multiple platform app?
A multiple platform app is an app which is designed to run on more than one operating system or device. Usually, the source code of the application is written once using a framework or technology stack which is able to work on more than one type of device such as Windows, Apple Mac, Apple iPhones, iPads, Android tablets and phones as well as some types of devices running Linux. This is different to single platform apps which are written and designed to work only on type of device such as a desktop PC running Microsoft Windows.
Picking the right multiple platform app IDE is important
Not all multiple platform app solutions are the same. Some technologies try to offer a locked-in framework which offers a limited selection of pre-created capabilities and behaviors. Make sure you understand the difference – as C++ developers we want to have the full power of the wonderful C++ language available to us. This is why RAD Studio C++ Builder is the best multiple platform app IDE and solution. It allows us to write real C++ code and design our program’s screens using the Firemonkey FMX framework, so our apps look great on any device and use the maximum amount of shared code without having to write separate programs for each operating system and different device.
How to design and lay out your multiple platform app screens
Use an app designer made for creating a multiple platform app
RAD Studio and C++ Builder have an awesome Form Design that allows you to explicitly design your apps with the components and see the results of windows. You don’t need to code for designing, just create an empty application, drag components you need, and arrange their positions, align them, you can add images, features, colors, font size etc. You can include some components to some other container components like layouts, panels, shapes etc. Thus, you can move or align all of them to positions.
We highly recommend you use RAD Studio Form Design; it’s the perfect way to prototype your ideas on screen content and functionality with the added benefit that the layouts you create are the real thing, ready to work with your code, not lifeless wireframes, or sketches.
Focus on your application’s needs and user experience
Another tip is to focus on your application needs. For example, which view in your app screen or window is the primary for the user? Every window of application should be designed. a Panel (TPanel) with a lot of input components? an Image (TImage)? a Data Grid (TDataGrid). Then focus to other areas, what should be on the top, on the left, on the right and on the bottom. If the screen is high resolution, you may want to show all of these areas, may be user can make them visible and invisible. Which areas are necessary if the window is small? This is important to UI design for the user experience.
RAD Studio has a great selection of ready-to-use multiple platform app templates
C++ Builder has great templates. When you create a Multi-Device C++ Builder FMX Application, you can choose a template from the basic templates in the wizard. Note that these templates can be modified and are very flexible to your needs. Here are the basic templates that can be used,
If you want to design your own layout, you can choose Blank Application and you can start design by dragging your components that you need on the form. These were the basic components. There are more design templets comes free with the RAD Studio. You can download them by using the Tools->Get-It Package Manager… menu option and you can use that template design directly. You can search template to see all results as below,
If you search on the web, you can find more free and priced templates on the web.
Learn to align your controls and anchor them
In C++ Builder some of basic components like Panels (TPanel), Layouts(TLayout), GroupBox, Shapes (TRectangle, TCircle, …), TImage… can be used as a container.
Check the platform on which your multiple platform app is running
In C++ Builder, you can easily check platform so you can change your design in accordance with the OS platform on which it is running. Please check this post for more details.
Check the screen size
When you are writing a multiple platform app you can’t assume the height, width, or number of pixels the screen can display. You can check the pre-defined screen size variables, screen->width, screen->height. Please check this post for more details.
Learn to check your form’s window size
The screen resolution can cause scaling which in turn can affect the actual size of your form. You can check window size, Form1->Width, Form1->Height. Please check this post for more details.
Learn to check size changes by using the OnResize event
You can check Window Size by using OnResize event. To use this, select the form and go to Events property and double click to OnResize event. In some cases, you can check by using OnPaint() event. At that time, you can get properties fo your Form design, i.e. Form1->Width and Form1->Height etc. Then, in accordance with your app design you can enable or disable some unnecessary parts of your design.
Learn the latest design features of RAD Studio 11
In the latest C++ Builder 11, VCL Styles now provides design-time support: Prototype stylish UIs even faster by seeing immediately at design-time how your styled forms and controls will look when running. Viewing at design time how styles will impact the UI at runtime improves the design and testing process for modern UIs. Creating better UIs faster is especially useful when working with per-control styles.
“The new high DPI IDE looks absolutely gorgeous! The great big helper though is the VCL styles design-time support, which makes it a lot easier to see how my apps will actually look and feel at runtime – a really big help for me!”, Ian Barker, Embarcadero MVP.
Be ready to Windows 11 designs with RAD Studio 11
Support for Windows 11 provisioning with integrated MSIX generation. WebBrowser component for Windows, with support for both the IE ActiveX and the new Microsoft WebView 2 control (Chromium-based Edge).
Enhanced VCL Form Designer to visually build native Windows applications, with live snap-to hints and layout guidelines. Enhanced Delphi and C++ RTL for 32-bit Windows and 64-bit Windows.
C++ Builder is the easiest and fastest C and C++ IDE for building simple or professional applications on the Windows, MacOS, iOS & Android operating systems. It is also easy for beginners to learn with its wide range of samples, tutorials, help files, and LSP support for code. RAD Studio’s C++ Builder version comes with the award-winning VCL framework for high-performance native Windows apps and the powerful FireMonkey (FMX) framework for cross-platform UIs.
There is a free C++ Builder Community Edition for students, beginners, and startups; it can be downloaded from here. For professional developers, there are Professional, Architect, or Enterprise versions of C++ Builder and there is a trial version you can download from here.