Programming languages have evolved well thanks to the development of the technologies, better education, and the curiosity of the human mind about searching for and creating new things. Some of the most cutting-edge evolutions and changes were originally made in the C++ language. Since 1983, C and later the C++ programming languages – their compilers, IDEs, frameworks, and other tools – evolved along with CLANG standards C++98, C++11, C++14, C++17, and more. The technology of the C++ compiler and IDEs have also grown in sophistication, capability and also visually with the advent of Graphical User Interface (GUI) based operating systems.
These evolutions and requirements about buttons, actions and all graphical interfaces birth new types of GUI-centric libraries that we have come to refer to as Visual frameworks or User Interface Frameworks. Developers can design GUI based C and C++ applications with professional IDE’s and they can easily develop applications for all sorts of different platforms, for desktop and mobile. In C++ Builder, these GUI / UI frameworks are known as the VCL and FMX libraries.
Table of Contents
What is the history of a GUI in C++?
Before the ’80s, in the 80’s and very early ’90s the typical input device was a keyboard with the output directed to the screen which had a very limited display capability. Developers were using text-based commands to run apps similar to the Command Prompt in Windows or Terminal in Linux and applications had numeric or alphabetic choices instead of buttons found in the interfaces of today. Users were able to choose menus and sub-menus by pressing the letter or number which corresponded to the character displayed next to the desired choice. In these DOS-like apps, some developers made these choices appear in boxes with ASCII-Codes which controlled a rudimentary color and position system. Then some other developers found to add a shadow effect to these boxes with other ASCII characters. In those days, if there was a menu with an ASCII shadow it was a more shiny, exciting application for us :). Later these early menus and controls were shown on a big rectangular area which was the genesis of the panel and group boxes found in most Windows type GUI systems of today.
These kinds are the first GUI based programming examples in C and C++ on the both development and runtime applications.
What were the next steps to a GUI in C++?
Later, developers found that when the user press keys, this action needs to be identified on the screen. They added a small animation so that these ASCII buttons appeared to be moving on the shadow, so users were feeling like the click action on it. These were very useful but needs a lot of code to do these graphics even in ASCII characters. While the trackball, a related pointing device, was invented in 1946 by Ralph Benjamin, today’s mouse technology really started to be popular with the arrival of the Apple Mac computer and Amiga computers in 90’s. There was a cursor moving on these buttons and we were able to click so that you had the felling you had really clicked on the buttons and UI elements. The development of more powerful CPUs and the advent of dedicated GPUs ushered in a great evolution in operating systems and the graphical user interface or GUI. These allows us to develop faster and more beautiful apps in C++ and in other languages.
In the last 25 years of coding, you do not need to write arcane manual code to display UI elements and we have a set of special GUI libraries known as UI frameworks. They allow you develop fast, simple and very elegant applications with a lot of different kinds of GUI elements and modifiable properties, methods, events or actions. In C++ Builder, these GUI / UI frameworks are VCL and FMX libraries and in Microsoft Visual C++ these are in visual library. In Linux, there are FMX libraries (with Delphi) and GTK libraries which are used to design GUIs in codes.
How to make a GUI in C++ Builder ?
C++ Builder is a professional IDE that allows developers to design, develop and deploy their amazing application. C++ Builder uses VCL frameworks (VCL Library) for the Windows only applications and FMX Framework (FireMonkey Library) for the Multi-Device and Multi-OS applications. FMX framework allows you to design and code one time project and you can compile same project for different operating systems (platforms) like Windows, iOS, Android, etc.
Both VCL and FMX frameworks has a lot of professional GUI’s that are called as components. These visual GUI components are listed in a Palette window of RADS Studio, C++ Builder IDE. Palette window (at the right bottom side of C++ Builder) has all components installed. You can drag the Button component from the Palette Window under the Standard category.
All GUI’s (with a very few exceptions) also need to interact with a user at runtime. When the user clicks a button the GUI understands that is clicked with an interface (a mouse, or touch) at X and Y coordinates, or with a key press, or any other input devices. These UI elements have methods that are called actions or events, and they run these auto-generated actions. Developers are able to add codes inside these actions, thus you can define what will your application do when user clicks to this element in X and Y coordinate. For example, In C++ Builder, If you double click to a Button in design time, this will create an OnClick event which is like Button1Click() event. You can add your codes inside here that are needed to run when user clicks this button.
Now let’s see this example
Is there an example to how to make a GUI in C++ with C++ Builder ?
To edit and run a simple C++ program you need a compiler, a linker, and an editor into which you type your C++ program code. The best and the simplest way is to use a C++ IDE which combines all these things into one package along with other useful tools.
The C++ Builder CE version is free C and C++ IDE for building simple or professional applications on the Windows, 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. C++ Builder comes with Rapid Application Development Studio, also known as RAD Studio, and C++ Builder is one of the most professional IDEs that work under RAD Studio. 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.
You can download the free C++ Builder Community Edition here: https://www.embarcadero.com/products/cbuilder/starter.
Professional developers can use the Professional, Architect or Enterprise versions of C++ Builder. Please visit https://www.embarcadero.com/products/cbuilder.
If you downloadthe C++ Builder Community Edition (or RAD Studio CE version) or a free trial of the full version of C++ Builder. Install it on your windows computer and run RAD Studio or C++ Builder. Beginners and students normally start to learn C++ with simple code. Let’s create a new Multi-Device (Cross-Platform) C++ application by using FireMonkey (FMX) framework. It’s a simple program, but when we’ve finished it’s capable of running on other devices, not just a Windows PC!
Choose File->New-> “Multi-Device Application – C++ Builder” menu.
This will create a New C++ Project for Windows and can be easily compiled for other operating systems like iOS , Android. This will allow you develop C++ apps with FMX UI elements. If you don’t need UI Elements you don’t need VCL or FMX frameworks. Modern applications have a GUI’s and skinned Styles. Note that VCL projects are Windows only. FireMonkey FMX projects are Multi Device (multi-platform) applications that you can compile and run on Windows, MacOS, iOS and Android .
Save all Unit files and Project file to a folder.
How to design your first screen or form to create a GUI in C++?
Simply drag and drop components from the Palette window on the right side; Memo (TMemo) and Button (TButton) to your form design. Arrange their width, height and position. You can edit each of their properties from the Object Inspector on the left side.
How to create an event for a GUI in C++ Builder?
OnClick Event of Button
The most used action of Button is OnClick event, it is being auto created by using double click on it. Or you can select your button and, go to Events Section of Object Inspector,
For example, If you want to show a message when user clicks a button. Double click to Button to create OnClick event with a procedure, add missing lines inside as below;
|
1 2 3 4 |
void __fastcall TForm1::Button1Click(TObject *Sender) { ShowMessage("Hello, you click Button1"); } |
In our example, let’s add a message to Memo1 component when the user clicks to Button1. In your FMX application development, when you are is Design Mode, Double click to Button1 to create Button1Click() event for this button. This will forward you to Code Editor. Add these lines into Button1Click() event,
|
1 |
Memo1->Lines->Add("Hello, you click Button1"); |
This line will add “Hello, you click Button1” text to the Lines of Memo1 component. Here is the full example,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
#include <fmx.h> #pragma hdrstop #include "Unit1.h" //--------------------------------------------------------------------------- #pragma package(smart_init) #pragma resource "*.fmx" TForm1 *Form1; //--------------------------------------------------------------------------- __fastcall TForm1::TForm1(TComponent* Owner): TForm(Owner) { } //--------------------------------------------------------------------------- void __fastcall TForm1::Button1Click(TObject *Sender) { Memo1->Lines->Add("Hello, you click Button1"); } |
Note that you can switch between the GUI Design mode to Code Mode by pressing F12, or vice versa. If you want, you can switch to your header file (.h) of your cpp file (.cpp) from the button tabs. You can change your Build Configuration from the left Project window by setting it to Debug or Release mode.
You can run your application by pressing F9 or Run buttons.
As you see there are many GUI components in C++ Builder. Design of your application with a lot of components and coding actions of each components are very easy as given example above. Moreover, you can add glamorous skinned Styles to your buttons with simple touches. Or you can cerate your own custom styles too. Here is the about How to Modernize applications by Styles.
GUI’s are the showcase of your application. You need gloomy professional GUI elements, that means you need a professional IDE to design, edit, customize and develop these kind of visuals easily. I think the best IDE to design and develop GUI applications is C+++ Builder.
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.
Design. Code. Compile. Deploy.
Start Free Trial
Free C++Builder Community Edition
