Building a C++ VCL Customer/Sales Master/Detail/Charting Application with 1 Line of Code

David Intersimone

4 years ago

You may have read or heard about No Code and Low Code application development using systems, languages and run times. Atanas Popov, GM of Embarcadero Technology, recently blogged about low code development. “These days low-code development is en vogue. Various research groups, such as Gartner, put the low-code application development platform market at ~$10M billion in 2019 and project CAGR to be greater than 20% from 2020 to 2027.” He went on to discuss the importance of low code to Delphi developers (and I would add C++Builder developers).

In this post I am going to show you how to build a Windows C++ Customer/Sales, Master/Detail/Charting application that only needs 1 line of code. Using the IDE and leveraging some of my favorite RTL features including visual live bindings, FireDAC and TeeChart I can create a full customer and sales business application for Windows.

I’ll use the IDE’s form designer, VCL, FireDAC database access components with fields editor, visual live bindings and 1 line of C++ code (if anyone can show me how to remove the need for the one line of code, I’ll gladly update my C++Builder project.

Table of Contents

The UI

To start my project, I used the File | New | C++Builder VCL application menu item. My form contains a TPanel at the top of the form containing a checkbox and TDBNavigator, two TDBGrid components (one for the customer list and one for the sales for a selected customer), Steema Software’s TDBChart (to show a pie chart of a customer’s sales by item type), two TSplitter components (one to expand and contract the customer list and a second one to expand and contract the space for the customer sales and pie chart, and several FireDAC components (TFDConnection, 3 TFDQuery), 2 TDataSource, and a second TPanel to house the customer sales and pie chart.

To see the list of components and their TPanel containers you can view the form in the Structure Window.

The Database Components and SQL Queries

For this application I am using the InterBase Employee.gdb sample database that includes Customer and Sales tables.

You can view the Employee.gdb file structure in the Data Explorer Window.

For each TFDQuery component I used the FireDAC Query Editor window (right mouse click on each TFDQuery component) to create and test SQL statements for the customer query, sales by customer query and sales by item type for a customer (in the Parameters tab use 1001 for the customer number).

Right mouse click on each TFDQuery to bring up the fields editor to include just a few of the columns from each query.

To connect each query’s result data to the TDBGrids and TDBChart set up properties for the TDataSource components.

To create the connection between the customer (master) and sales (detail) queries, set up the MasterSource and MasterFields properties for the SalesQuery in the Object Inspector. Do the same for the SalesByItemTypeForCustomerQuery.

Visual Live Bindings

To control the connection to the database and connect the results of the queries to the UI I’ll use C++Builder’s Visual Live Bindings technology. LiveBindings is a data binding, expression-based framework that visually (or in code) allows you to bind objects to other objects or to dataset fields. Using LiveBindings, any object can be bound to any other object using a binding expression involving one or more properties of the objects you want to bind together. LiveBindings binding expressions can be either unidirectional or bidirectional.

To bring up the LiveBindings designer, right mouse click on the form and choose the “Bind Visually…” item in the pop up menu.

This will bring up a frame below the form containing the visual and non-visual components included on the form. You can use the “…” at the lower right of each object to bring up a selection list of properties you need for your binding expression.

In my case I just want to use the Checked property and CheckedState. Dragging the mouse between the CheckedState property and the Active property for each Query will form links to make of the binding expression. At execution time the binding expression will be evaluated and use the state of the checkbox to execute each of the SQL queries.

You can zoom in/out the LiveBindings Designer, create layers to hide some of the bindings complexity and save the design to a bitmap file.

Using Steema’s TeeChart to create a Pie Chart of Customer Sales by Item Type

Included in C++Builder is a standard set of TeeChart components. You can also upgrade to advanced functionality by contacting Steema Software.

Right mouse click on the TDBChart component in the lower right of the form to bring up the pop up menu containing component editors.

Use the “Edit Chart…” menu item. In the component editor window select “Series” and click the Add… button to choose a pie chart from the gallery of charts included with the TeeChart standard edition.

Select the series (“Series 1”) and click on the “Data Source” tab to choose the dataset (“SalesByItemTypeForCustomerQuery”) and set the Labels to be the ITEM_TYPE field and the Pie to be the SUM field.

Set the Chart Titles to Text to “Sales by Item Type for Customer”. Then click the close button to finish setting up the Pie Chart.

The Completed Form

Here is a text view of the completely designed form (right mouse click on the form designer and choose “view as text”) with UI components, FireDAC, TeeChart, and LiveBindings components and settings.
[crayon-676d8d43f354c710254754/]

The Project and the 1 Line of Code

Save the project to a folder.

In order to have the TeeChart pie chart refresh each time a customer is selected (by using the TDBNavigator or moving to a next row in the customer DBGrid) I’ve written one line of code for the CustomerQuery AfterScroll event handler.
[crayon-676d8d43f3556246592939/]
This one line of code tells the DBChart to refresh the Pie Chart data for the updated SalesByItemTypeForCustomerQuery.

MasterDetailUnit.h

[crayon-676d8d43f3559420568524/]

MasterDetailUnit.cpp

[crayon-676d8d43f355a767782122/]

The Running Program

Here are two screen grabs of the running program for the first two customers. Notice that the customer sales grid and pie chart are updated for each selected customer.