Building mobile applications can be tasking sometimes. But C++Builder makes it easy to build mobile and desktop applications while writing code in C++.
In this article, we will share a few steps you can take to build your first app using C++Builder.
If you haven’t read: Building Your First App Using C++ Builder (Part 2)
The app discussed here is a mini reminder application that will feature the SQLite database, some input fields, date/time pickers, and more components—a wide variety of functionality to give you an idea of what is easily possible.
First Step: Setting Up C++Builder
To start building your first application using C++Builder, you will need to set up the IDE on your device.
After setting up C++Builder, the next step is to design the UI by dragging and dropping components.
A component is a visual control like a button or a nonvisual bit of functionality like configurable database access.
C++Builder is easy to use because it allows you to simply drag and drop components like buttons, text fields, time pickers, shapes, and so on to the design form (the form is what becomes your window or screen when the app runs); this makes the process of designing the UI and connecting other functionality simple and fast.
Select the type of application you want to build and move to the next step. Note that the app we intend to build is a Windows application, so we recommend selecting the option that lets you create one.
Second Step: Drag and Drop
Once you have selected the type of application you want to build, you can begin the design process. The components are located at the bottom right of the page in the “Palette” section.
Simply search for the component you are interested in using and drag it to the form panel. Or you can browse the list and see the visual controls and other functionality that’s available—there are over seven hundred components.
Palette Section:
Form panel:
The design tab on the bottom right contains the form used to align components for your application. The Unit1.cpp tab right next to it provides the editor for writing your C++ code to control components and implement important functions. The Unit1.h tab contains the header for Unit1.cpp.
The object inspector on the left-hand side is used to adjust properties of the components in the application. Select one or more, and their properties will be available to edit. It has an event list that contains event listeners that can be added to your code.
This allows you to call code in response to something happening—for example, call a method when a button is clicked or something more complex, such as when the location of your device changes.
In our mini reminder app, we will begin by using some basic label fields and buttons but will follow an iterative design approach (we will start with a simple design and further improvements will be made to the UI after we have made some progress).
We will begin by dragging components such as the TLabel field, date/time pickers, fdconnection, a button, and a memo. The static text field allows us to display text. In the design form shown below, our static text field is displaying “Time.”
We will also need to add a time picker and a date picker for the reminder app.
Go to the Palette section and search for these two components. Drag and drop them into the form.
Next, we want a button to add reminders into our mini SQlite database so that we can retrieve and display them when the user requests them. Drag and drop the button onto the design form as well.
Third Step: Code, Code, Code
Next, we will write code to retrieve user input using the time picker and date picker, and we’ll display the code in our memo.
For now, we will make use of the Add Reminder button to get the time and date input and display them in our memo. In the next part of this article, we will store the value directly to the SQLite database using the button.
Double-click on the button in the design form, which will direct you to the fastcall function for the button. In this function, we will implement the code that will be executed in the OnClick event of the button—this event is just what it sounds like.
It allows you to call a method when the button is clicked. Events are named “On” plus the event, such as OnDoubleClick, OnKeyPress, or OnDataReceived.
void __fastcall TForm1::Button1Click(TObject *Sender)
{
TDateTime dateTime;
ReplaceDate(dateTime, DateTimePicker1->Date);
ReplaceTime(dateTime, TimePicker1->Time);
Memo1->Text = dateTime.FormatString("dd/mm/yyyy HH:mm");
}
Run your code and click the “Add Reminder” button; your date and time should be displayed in the memo.
Before Clicking The Button:
After clicking the button:
Congrats! We have discussed how to design forms and make use of some components using C++Builder, from Embarcadero.
In the next part of this article, we will work on improving the application, including the user interface, and incorporating our database and some notifications.