3 Steps to build a Great Report Control List for your GUI

There are many MFC based applications which provide a GUI consisting of hierarchical report controls list. But creating a hierarchical report control list using MFC Appwizard is a long-drawn-out job as it will require you to manually create and manage each type of component you want to add.

This takes a significant amount of time and effort making you divert your attention from the business logic of your application to its GUI enhancement. But what if you get a set of wrapper classes developed on top of MFC, which can be used to do this job very quickly and intuitively?

This article will take you through one such way using Codejock Software’s Xtreme Report Control.

Codejock Software’s Xtreme Report Control
It allows you to display a hierarchical list of records. Every record can have one or more sub-records, and so forth. Every record/sub-record can have one or number of items, and we can allocate a separate column for an item depending upon its type.

Here is a sample report control list which demonstrates how we can leverage its capabilities.

Thus, this sample UI contains 12 records where each record consists of 4 types of items as follows :
1) Text: For displaying the Record name
2) Button: For applying a color in this case. i.e On click, it displays a color palette (shown below) on which you can select a color

The selected color will become the background color of this button (as shown in ‘Record 2’ of the above report-control list). This functionality can be used to color different parts of your model if you have associated one with your report-control list. This button can be used for any purpose (not only for color) as per the requirement, though

3) Combo-box: I found it to be a very tricky job to be able to add a combo-box on a report-control and populate it. The combo-box can be used, for example, to assign a material (out of some predefined set of materials specific to your application) to the corresponding element of the model (which this record belongs to)

4) Check-box: It can be used to show or hide the corresponding model element, for example

Here, we will see how we can implement the above report-control list. It is a 3 steps process :

Step 1  Define and instantiate the report-control class:
Define a class derived from CWnd (say ‘CMyReportControlList’) and declare an object of the class CXTPReportControl as its member variable. Also override the OnCreate() function of the parent class (i.e CWnd) to extend its functionality to be able to add the report-control columns.
Here is how it looks

 class CMyReportControlList : public CWnd
{
.
.
private:
CXTPOfficeBorder<CXTPReportControl,false> m_MyReportControl;

public:
afx_msg int OnCreate(LPCREATESTRUCT lpCreateStruct);
.
.
};

(NOTE : The class CXTPOfficeBorder is a template class used for windows that require a thin border. You can create the above report-control list without using this template class, though.)

The implementation of the above OnCreate() function should basically consist of following things:

1) Call to the parent
e.g.      CWnd::OnCreate(lpCreateStruct)
2) Creation of the report-control
e.g.      m_MyReportControl.Create(WS_VISIBLE|WS_CHILD,CRect(0,0,0,0),this,353433);
3) Addition of the columns to the above created report-control
e.g.      CXTPReportColumn* pColumn= new CXTPReportColumn(ColumnIndex ,                                                                                                          L”RecordName”  ,300);
m_MyReportControl.AddColumn(pColumn);

You can also make it a hierarchical column as follows.
e.g.   pColumn->SetTreeColumn(TRUE);

Similarly, you take this code further to add as many columns as you want, in the same manner. Thus, the definition of the “OnCreate()” function is complete.

Now, as the report-control class is ready, you can instantiate it as follows.
e.g CXTPOfficeBorder<CMyReportControlList> m_MyReportControlList; // Instantiated here..

Step 2  Setup the columns of the report control list :
Call the above defined OnCreate() function, as follows to setup the columns.
e.g. m_MyReportControlList.Create (L”STATIC”,L”hi”,WS_CHILD|WS_VISIBLE,CRect(0,0,30,25),this,3453);

Step 3  Populate the records :
Here is how you can populate the records in the report-control list.

CXTPReportRecord*  pMyRecord = new CXTPReportRecord();
pMyRecord ->AddItem(new CXTPReportRecordItemText("Record 1")); //The very first record.
m_MyReportControl.AddRecord(pMyRecord );

ReportRecord can have a list of child items. To get the pointer to that list, use GetChilds(). This way you can add records in a hierarchical manner.
e.g    pMyRecord->GetChilds()->Add(“Sub Record 1”); //The very first child record.

This is how you can create a nice and intuitive report control list as shown in the above snapshot. The measure component in this entire implementation, according to me, is the addition of the combo-box on a report-record. So, I would like to specifically describe how to add it, here.

Adding a combo-box to a report-record and populating it:
This is a bit different than the rest of the controls. Here is how you can add a separate column for a combo-box on the report-control list.

CXTPReportColumn* pComboBoxColm = new CXTPReportColumn(columnTexture,L"Options",120);
CXTPReportRecordItemEditOptions* pEditOptions = pComboBoxColm->GetEditOptions();
pEditOptions->AddComboButton(TRUE);
m_MyReportControl.AddColumn(pComboBoxColm);

Thus, you need to access the ‘Edit Options’ of the corresponding column which is to be made as a combo-box. You can also set some of its other attributes according to your requirement.

e.g    pEditOptions->m_bAllowEdit = FALSE;    // Optional
pEditOptions->m_bConstraintEdit = TRUE;    //Optional

Now, as you have declared a column to be a combo-box column, the next step is to insert the very first/default value to be shown by default. Here is how you can do it.

e.g     CXTPReportRecordItemText *pComboBoxValue = new CXTPReportRecordItemText(_T(“Option 1”)); //The very first entry in the texture’s combo-box
pMyRecord->AddItem(pComboBoxValue); // Where, ‘pMyRecord’ is the pointer to the current report-record, which you have already instantiated (Refer Step 3 above).

To populate the rest of the options in the combo-box, you will need to access the ‘Edit Options’ once again.Here is the way to do it.

void PopulateComboBox()
{
//Load the provided list to the Combo box.
CXTPReportColumn *pComboBoxColumn =  m_MyReportControl.GetColumns()->Find(ComboBoxColumnIndex);
CXTPReportRecordItemEditOptions* pEditOptions = pComboBoxColumn ->GetEditOptions();
pEditOptions->GetConstraints()->RemoveAll(); //In case you want to re-populate it, otherwise you can skip this.

pEditOptions->AddConstraint("Option 2");
pEditOptions->AddConstraint("Option 3");
pEditOptions->AddConstraint("Option 4");
.
.
.

}

Thus, this completes creating a sample report control list with various types of the column which can enhance the user interface of your application significantly.

Author: Vikas
Contact us:
info@prototechsolutions.com
ProtoTech Solutions and Services Pvt. Ltd.