View-Based Controls

Introduction to the Tree View

Overview

A tree view consists of displaying a hierarchical view of items arranged in a parent-child format. It is typically used to show items that belong to interrelated categories, such as parent to child and child to grandchild, etc; or folder to subfolder to file.

The starting item of the tree is called the Root and illustrates the beginning of the tree. Each item, including the root, that belongs to the tree is referred to as a node.

In the following charts, the down arrow means, "has the following child or children":

A tree view is not limited to a one-to-one correspondence. Not only can an item have more than one dependency, but also a child can make the tree stop at any category. Categories of a tree view are organized by levels. The most used trees have one parent called the root; then under the root start the dependents.

Here is an example representing the world and some countries:

The children of a parent are recognized by their belonging to the same level but can have different behaviors. For example, while one child may have another child (or other children), an item on the same level does not necessarily abide by a set rule. Everything usually depends on the tree designer.

Consider the following tree:

1. Create a new project with its starting form
2. To save the project, on the Standard toolbar, click Save All
3. Locate the folder where the exercises are selected
4. Click the Create New Folder button, type Countries1 and press Enter twice to display the new folder in the Save In combo box
5. Click Save twice to save the unit and the project names
6. Change the Caption of the form to Countries Statistics
7. From the Standard section of the Tool Palette, double-click the Panel control
8. Set the following properties:
   Align = alTop
   Alignment = taLeftJustify
   BevelInner = bvRaised
   bvOuter = bvLowered
   Height = 28
9. To type the caption, click the Caption field, press Delete, press Space, and type Countries
10. Click an unoccupied area of the form to deselect the panel
11. From the Standard section, double-click the Panel control again
12. Set its Align property to alBottom, its BevelOuter to bvLowered, delete the value of its Caption, and set its Height to 20

C++ Builder provides an easy way to create a tree view at design time. When using it, you would create a complete tree view without writing a single line of code.

A member of a tree view is called a node. Visually, a node on a tree view displays its text in one of two states: selected or not selected. On another visual front, a node has a child or it is standing alone. When a node has a child, it displays a + (collapsed) or – (expanded) buttons. These last two details will be important because at times you will need to know whether a node is selected or not, whether a node has a child or not. The first issue is to know how to create a tree view and how to assign a child or children to a node.

To create a tree view, you can use the tree view control from the Win32 tab of the Tool Palette. After placing the control on the form, create its children using the Items property. To include pictures on your tree, you can use an ImageList control.

1. Click in the middle of the form. On the Win32 tab of the Tool Palette double-click the TreeView control
2. While the new TreeView1 control is still selected, on the Object Inspector, set its Align property to alLeft and its Width to 140
3. Click the Items field and click its ellipsis button
4. On the TreeView Items Editor dialog box, click the New Item button
5. Type World and press Enter
6. Type Universe
7. On the dialog box, click Universe and click Delete
8. Click World and click the New Subitem button
9. Type America and press Enter
10. Type Africana and press Enter
11. Type Europe
12. Click Africana and using the Text edit box, edit it to display Africa and press Enter
13. Type Asia
14. Click America and click New Subitem
15. Type Chile and press Enter
16. Type Canada
17. Click Asia and click New Subitem
18. Type Thailand and press Enter
19. Type Afghanistan
     
    
20. Click OK
21. To test the tree view, press F9
22. Notice the + button on the World item
23. Click + and notice the – button
24. Click the other + button to expand the tree items and click the – buttons
     
    
25. After using the form, close it and save the project
26. To use some images, make sure the Tool Palette displays the Win32 tab. Click the ImageList control
27. Click anywhere on the form
28. On the form, double-click the ImageList button
     
    
29. On the Form1->ImageList1 ImageList dialog box, click the Add button
30. Locate the folder where the exercises are located and display the Bitmaps folder
31. Click World and click Open
32. Repeat the same process to add Band, Dans, Category, Insert, and Records
     
    
33. Click OK
34. On the form, click TreeView1 to select it
35. On the Object Inspector, set the Images property to ImageList1
36. While the tree view control is still selected, click the Items field and click its ellipsis button
37. On the TreeView Items Editor dialog box, click World to select it. Set its Image Index to 0 and its Selected Index to 1
38. Click the + button on World to expand it
39. Click America to select it
40. Set its Image Index to 2 and its Selected Index to 3
41. Set the other images according to the following table:
     

    Item – Text	Image Index	Selected Index
    World	0	1
    America / Africa/ Europe / Asia	2	3
    Chile / Canada / Thailand / Afghanistan	4	5

42. Click OK
43. To test the tree view, press F9
44. Click the various + to expand and click items to select them. Notice the change of graphics
     
    
45. After using the form, close it and save the application

The tree view control is implemented in the Visual Component Library (VCL) by the TTreeView class that is defined in the ComCtrls.hpp library. Based on this, to (programmatically) create a tree view, you can declare a pointer to TTreeView and initialize it by specifying its parent. Here is an example:

//--------------------------------------------------------------------------- #include <vcl.h> #include <ComCtrls.hpp> #pragma hdrstop #include "Unit1.h" //--------------------------------------------------------------------------- #pragma package(smart_init) #pragma resource "*.dfm" TForm1 *Form1; //--------------------------------------------------------------------------- __fastcall TForm1::TForm1(TComponent* Owner) : TForm(Owner) { } //--------------------------------------------------------------------------- void __fastcall TForm1::btnCreateClick(TObject *Sender) { TTreeView* tvwCountries = new TTreeView(this); tvwCountries->Parent = this; tvwCountries->Left = 10; tvwCountries->Top = 50; tvwCountries->Width = 220; tvwCountries->Height = 260; } //---------------------------------------------------------------------------

TTreeNode* __fastcall Add(TTreeNode* Node, const AnsiString S);

1. On the form, double-click an unoccupied area of its body to access its OnCreate event
2. To create the first node of the tree, implement the event as follows:
    

   //--------------------------------------------------------------------------- void __fastcall TForm1::FormCreate(TObject *Sender) { this->tvwStoreItems->Items->Add(NULL, "Store Items"); } //---------------------------------------------------------------------------

3. Execute the application to test the form
    
   
4. Close the form and return to your programming environment

At design time and in the TreeView Items Editor, to create a child node for an existing item, first select it in the Items list, then click the New SubItem button. This causes a child node to be created for the selected item. To edit its name, first click it and change the string in the Text text box in the Item Properties section.

At run time, to create a child node, first get a reference to the node that will be used as its parent. One way you can get this reference is to obtain the returned value of the TreeNodes::Add() method. As its syntax indicates, this method returns a TreeNode object. Once you have this reference, to create a child node, you can call the TreeNodes::AddChild() method. Its syntax is:

TTreeNode* __fastcall AddChild(TTreeNode* Node, const AnsiString S);

To create a child node, you can pass the parent as the Node argument. The second argument is the text the new item will display. Here are examples:

//--------------------------------------------------------------------------- void __fastcall TForm1::btnCreateClick(TObject *Sender) { TTreeView* tvwCountries = new TTreeView(this); tvwCountries->Parent = this; tvwCountries->Left = 10; tvwCountries->Top = 50; tvwCountries->Width = 220; tvwCountries->Height = 260; TTreeNode *nodRoot = tvwCountries->Items->Add(NULL, "World"); tvwCountries->Items->AddChild(nodRoot, "Africa"); tvwCountries->Items->AddChild(nodRoot, "America"); tvwCountries->Items->AddChild(nodRoot, "Asia"); tvwCountries->Items->AddChild(nodRoot, "Europe"); } //---------------------------------------------------------------------------

Using the same approach, you can create as many branches and their child nodes as you wish. Here is an example:

//--------------------------------------------------------------------------- void __fastcall TForm1::btnCreateClick(TObject *Sender) { TTreeView* tvwCountries = new TTreeView(this); tvwCountries->Parent = this; tvwCountries->Left = 10; tvwCountries->Top = 50; tvwCountries->Width = 220; tvwCountries->Height = 360; TTreeNode *nodRoot = tvwCountries->Items->Add(NULL, "World"); TTreeNode *nodAfrica = tvwCountries->Items->AddChild(nodRoot, "Africa"); TTreeNode *nodAmerica = tvwCountries->Items->AddChild(nodRoot, "America"); tvwCountries->Items->AddChild(nodRoot, "Asia"); TTreeNode *nodEurope = tvwCountries->Items->AddChild(nodRoot, "Europe"); tvwCountries->Items->AddChild(nodAfrica, "Senegal"); tvwCountries->Items->AddChild(nodAfrica, "Botswana"); tvwCountries->Items->AddChild(nodAfrica, "Ghana"); tvwCountries->Items->AddChild(nodAfrica, "Morocco"); tvwCountries->Items->AddChild(nodAmerica, "Canada"); tvwCountries->Items->AddChild(nodAmerica, "Jamaica"); tvwCountries->Items->AddChild(nodAmerica, "Colombia"); tvwCountries->Items->AddChild(nodEurope, "Italy"); tvwCountries->Items->AddChild(nodEurope, "Greece"); tvwCountries->Items->AddChild(nodEurope, "Spain"); tvwCountries->Items->AddChild(nodEurope, "England"); } //---------------------------------------------------------------------------

The number of nodes in the TreeNodes objects is stored in the TreeNodes::Count property.

1. To expand the list, change the Load event of the form as follows:
    

   //--------------------------------------------------------------------------- void __fastcall TForm1::FormCreate(TObject *Sender) { TTreeNode *nodRoot = this->tvwStoreItems->Items->Add(NULL, "Store Items"); TTreeNode *nodBabies = tvwStoreItems->Items->AddChild(nodRoot, "Babies"); tvwStoreItems->Items->AddChild(nodRoot, "Teens"); TTreeNode *nodWomen = tvwStoreItems->Items->AddChild(nodRoot, "Women"); tvwStoreItems->Items->AddChild(nodRoot, "Men"); TTreeNode *nodMisc = tvwStoreItems->Items->AddChild(nodRoot, "Miscellaneous"); tvwStoreItems->Items->AddChild(nodBabies, "Health and Care"); tvwStoreItems->Items->AddChild(nodBabies, "Bathing"); tvwStoreItems->Items->AddChild(nodBabies, "Decorations"); tvwStoreItems->Items->AddChild(nodWomen, "Dresses"); TTreeNode *nodWomenPants = tvwStoreItems->Items->AddChild(nodWomen, "Pants and Jeans"); tvwStoreItems->Items->AddChild(nodWomenPants, "Casual Pants"); tvwStoreItems->Items->AddChild(nodWomenPants, "Professional Pants"); tvwStoreItems->Items->AddChild(nodWomenPants, "Jeans"); tvwStoreItems->Items->AddChild(nodWomenPants, "Shorts"); tvwStoreItems->Items->AddChild(nodWomen, "Shoes"); tvwStoreItems->Items->AddChild(nodWomen, "Career Wear"); tvwStoreItems->Items->AddChild(nodWomen, "Lingerie"); tvwStoreItems->Items->AddChild(nodMisc, "Cosmetics"); tvwStoreItems->Items->AddChild(nodMisc, "Travel Wear"); tvwStoreItems->Items->AddChild(nodMisc, "Jewelry"); } //---------------------------------------------------------------------------

2. Execute the application to see the result
    
   
3. Close the form

If you create a node and add it to a branch that already contains another node, the new node is referred to as a sibling to the existing child node. To create a new node that would be a sibling to an existing node, you can call the TTreeNodes::Add() method we used to create the root node. If you want to specify that the new node would be a sibling to an existing node, pass the existing node as the first argument to this method. Here is an example:

//--------------------------------------------------------------------------- void __fastcall TForm1::btnCreateClick(TObject *Sender) { TTreeView* tvwCountries = new TTreeView(this); tvwCountries->Parent = this; tvwCountries->Left = 10; tvwCountries->Top = 50; tvwCountries->Width = 220; tvwCountries->Height = 260; TTreeNode *nodRoot = tvwCountries->Items->Add(NULL, "World"); TTreeNode *nodAfrica = tvwCountries->Items->AddChild(nodRoot, "Africa"); tvwCountries->Items->Add(nodAfrica, "America"); tvwCountries->Items->Add(nodAfrica, "Asia"); tvwCountries->Items->Add(nodAfrica, "Europe"); } //---------------------------------------------------------------------------

When you call the TreeNodes::Add() method to create a node, the new branch is added at the end of the list of its siblings. If you want, you can add a new child somewhere in the tree. To do this, you would call the TreeNode::Insert() method. Its syntax is:

TTreeNode* __fastcall Insert(TTreeNode* Node, const AnsiString S);

The first argument to this method is a reference to the node that will the sibling to the new node. The second argument is the text that the new node will display. To perform the same operation, you can call the TTreeNodes::InsertNode() method. Its syntax is:

TTreeNode* __fastcall InsertNode(TTreeNode* Node, TTreeNode* Sibling,
				 const AnsiString S, void * Ptr);

Besides looking at a node, probably the primary action a user performs on a tree is to select an item. To select a node in the tree, the user can click it. To programmatically select a node, assign its reference to the TreeView::Selected property. Here is an example:

//--------------------------------------------------------------------------- void __fastcall TForm1::btnCreateClick(TObject *Sender) { TTreeView* tvwCountries = new TTreeView(this); tvwCountries->Parent = this; tvwCountries->Left = 10; tvwCountries->Top = 50; tvwCountries->Width = 220; tvwCountries->Height = 260; TTreeNode *nodRoot = tvwCountries->Items->Add(NULL, "World"); TTreeNode *nodAfrica = tvwCountries->Items->AddChild(nodRoot, "Africa"); TTreeNode *nodAmerica = tvwCountries->Items->Add(nodAfrica, "America"); tvwCountries->Items->Add(nodAfrica, "Asia"); tvwCountries->Items->Add(nodAfrica, "Europe"); tvwCountries->Selected = nodAmerica; } //---------------------------------------------------------------------------

After selecting a node, the tree view indicates the item selected by highlighting it. In the above picture, the America node is selected.

By default, the user can select only one item from a time in the tree view. If you want to user to be able to select more than one node, set the TTreeView::MultiSelect property to true. Its default value is false. If you allow the user to select more than one node, you can then control how a multiple selection can be performed. This is done using the TTreeView::MultiSelectStyle property.

Whether the user selects one or more items, the list of selected nodes is stored in the TTreeView::Selections property, which is a collection. Each member of this collection is an object of type TTreeNode. When only one node is selected, which is usually the case, you can get its reference from its index of the Selections property. The code to get this information would be as follows:

TTreeNode *nodSel = tvwCountries->Selections[0];

If you had allowed the user to select more than one node, you can get a reference for each using its index in the Selected property.

1. In the header file of the form, declare a private pointer to TTreeNode named nodSelected
    

   //--------------------------------------------------------------------------- #ifndef Unit1H #define Unit1H //--------------------------------------------------------------------------- #include <Classes.hpp> #include <Controls.hpp> #include <StdCtrls.hpp> #include <Forms.hpp> #include <Buttons.hpp> #include <ComCtrls.hpp> //--------------------------------------------------------------------------- class TForm1 : public TForm { __published: // IDE-managed Components TTreeView *tvwStoreItems; TBitBtn *BitBtn1; void __fastcall FormCreate(TObject *Sender); private: // User declarations TTreeNode* nodSelected; public: // User declarations __fastcall TForm1(TComponent* Owner); }; //--------------------------------------------------------------------------- extern PACKAGE TForm1 *Form1; //--------------------------------------------------------------------------- #endif

2. Save all

After locating a node, the user may want to change its text. To change the string of a node, it must be put to edit mode. To do this, you can call the TTreeNodes::BeginUpdate() method. Its syntax is:

void __fastcall BeginUpdate(void);

When a node is in edit mode, the caret blinks in its edit box section. The user can then type a new string or edit the existing string. After setting the (new) string, the user can press Enter or may click somewhere. At this time, you need to indicate that the user has finished this operation. To do this, you can call the TTreeNodes::EndUpdate() method. Its syntax is:

void __fastcall EndUpdate(void);

Just before this method, you can check the content of the string that was added or edited. This allows you to accept or reject the change.

TTreeNode* __fastcall GetFirstNode(void);

TTreeNode* __fastcall GetFirstNode(void);

TTreeNode* __fastcall getFirstChild(void);

TTreeNode* __fastcall GetNodeAt(int X, int Y);

1. On the form, click the tree view
2. In the Object Inspector, click the Events tab and double-click the right field to OnMouseDown
3. Implement the OnMouseDown event as follows:
    

   //--------------------------------------------------------------------------- void __fastcall TForm1::tvwStoreItemsMouseDown(TObject *Sender, TMouseButton Button, TShiftState Shift, int X, int Y) { // Get informaition about where the user's mouse landed THitTests hitPosition = this->tvwStoreItems->GetHitTestInfoAt(X, Y); // If the mouse clicked a node if( hitPosition.Contains(htOnItem) ) // then get its reference this->nodSelected = tvwStoreItems->GetNodeAt(X, Y); // Select the node that the user clicked this->tvwStoreItems->Selected = this->nodSelected; } //---------------------------------------------------------------------------

4. To add a new form, on the main menu, click File -> New -> Other...
5. In the New Items dialog box, click the Dialogs tab
6. Click Standard Dialog (Horizontal) and click OK
7. Set the Name to dlgNewCategory and save its unit with the default name (Unit2)
8. Design the dialog box as follows:
    

   Control Name Text Label   New Category: TextBox edtNewCategory

9. Display the first form. In the Standard property page of the Tool Paletter, click PopupMenu and click the form
10. On the form, double-click the PopupMenu1 and click Caption
11. Create three menu items as follows:
     

    Text	(Name)	Shortcut
    New Category	mnuNewCategory	Ctrl+N
    Delete	mnuDelete	Del
    Remove all Items	mnuDeleteAll	Shift+Del

12. On the form, click the tree view. In the Object Inspector, set its PopupMenu to PopupMenu1
13. On the menu, click File -> Include Unit Hdr...
14. Access the Unit2 selected and click OK
15. On the form, double-click PopupMenu1
16. On the Form1->PopupMenu1 window, double-click New Category and implement the event as follows:
     

    //--------------------------------------------------------------------------- void __fastcall TForm1::mnuNewCategoryClick(TObject *Sender) { if( this->nodSelected == NULL ) return; if( dlgNewCategory->ShowModal() == mrOk ) { if( dlgNewCategory->edtNewCategory->Text == "" ) return; this->tvwStoreItems->Items->AddChild(this->nodSelected, dlgNewCategory->edtNewCategory->Text); } } //---------------------------------------------------------------------------

17. Execute the application
18. Click the + button
19. Right-click Women in the tree and click New Category
     
    
20. In the New Category edit box, type Skirts
     
    
21. Press Enter
     
    
22. Close the form and return to your programming environment

When a tree contains a few nodes, the user may want to delete some of them, for any reason. To remove a node, you can call the TTreeNodes::Delete() method. Its syntax is:

void __fastcall Delete(TTreeNode* Node);

This method expects a reference to the node you want to remove. If you are already at that node and you want to remove it, you can call the TTreeNode::Delete() method. Its syntax is:

void __fastcall Delete(void);

One of the characteristics of a tree in the real world is that, if you cut a branch, the other branches attached to it and their leaves are cut too. In the same way, if you call any of these Delete() methods to delete a node, its children would be deleted too. If you want to remove (only) the children of an item, you can call its TTreeNode::DeleteChildren() method. Its syntax is:

void __fastcall DeleteChildren(void);

To remove all nodes of a tree view, you can call the TTreeNodes::Clear() method. Its syntax is:

void __fastcall Clear(void);

This method is used to get rid of all nodes of a tree.

1. Display the first form. On the form, double-click PopupMenu1. In the Form1->PopupMenu1 window, double-click Delete
2. Implement the event as follows:
    

   //--------------------------------------------------------------------------- void __fastcall TForm1::mnuDeleteClick(TObject *Sender) { if( this->nodSelected != NULL ) this->tvwStoreItems->Items->Delete(this->nodSelected); } //---------------------------------------------------------------------------

3. Return to the Form1->PopupMenu1 window and double-click Remove all Items
4. Implement the event as follows:
    

   //--------------------------------------------------------------------------- void __fastcall TForm1::mnuDeleteAllClick(TObject *Sender) { this->tvwStoreItems->Items->Clear(); } //---------------------------------------------------------------------------

5. Execute the application and try deleting an item

In order to select an item, the user must click it or navigate to it using the keyboard. Alternative, if you want, you can cause the item to be underlined when the mouse passes over it:

To produce this effect, you can set to true the TTreeView::HotTrack Boolean property. Its default value is false.

As mentioned already, a tree view appears as a list of items arranged like a tree. This implies a relationship of parent-child between two items in the control. To indicate this relationship between two nodes, a line is drawn from one to another. Based on this, a line from a node on top to another node under it indicates that the one on top is the parent to the one under it.

The presence or absence of the lines among related nodes is controlled by the TTreeView::ShowLines Boolean property. By default, this property is set to true. If this property is set to false, the lines among the nodes would not display. Here is an example:

//--------------------------------------------------------------------------- void __fastcall TForm1::btnCreateClick(TObject *Sender) { TTreeView* tvwCountries = new TTreeView(this); tvwCountries->Parent = this; tvwCountries->Left = 10; tvwCountries->Top = 50; tvwCountries->Width = 220; tvwCountries->ShowLines = false; TTreeNode *nodRoot = tvwCountries->Items->Add(NULL, "World"); TTreeNode *nodContinent = tvwCountries->Items->AddChild(nodRoot, "Africa"); tvwCountries->Items->Add(nodContinent, "America"); tvwCountries->Items->Add(nodContinent, "Asia"); tvwCountries->Items->Add(nodContinent, "Europe"); } //---------------------------------------------------------------------------

If you create a tree that has more than one root, a line is drawn among those root nodes. Here is an example:

The presence or absence of this type of line is controlled by the TTreeView::ShowRoot Boolean property whose default value is true. If you set its value to false, these lines would not appear.

Indentation is the ability for a child node to be aligned to the right with regards to its parent. The general distance from the left border of the parent to the left border of the children is partially controlled by the TTreeView::Indent property which is an integer. If the default distance doesn't suit you, you can change it by assigning a positive number to the control's Indent property.

When the user clicks an item, that node becomes highlighted for the length of its string. If you want, you can show the highlighting on the selected node but from the left to the right borders of the tree view. To do this, you can set the TTreeView::RowSelect Boolean property to true. Its default value is false. For the TreeView::RowSelect property to work, the ShowLines property must be set to false. Here is an example:

//--------------------------------------------------------------------------- void __fastcall TForm1::btnCreateClick(TObject *Sender) { TTreeView* tvwCountries = new TTreeView(this); tvwCountries->Parent = this; tvwCountries->Left = 10; tvwCountries->Top = 50; tvwCountries->Width = 220; tvwCountries->ShowLines = false; tvwCountries->RowSelect = true; TTreeNode *nodRoot = tvwCountries->Items->Add(NULL, "World"); TTreeNode *nodContinent = tvwCountries->Items->AddChild(nodRoot, "Africa"); TTreeNode *nodAmerica = tvwCountries->Items->Add(nodContinent, "America"); tvwCountries->Items->Add(nodContinent, "Asia"); tvwCountries->Items->Add(nodContinent, "Europe"); tvwCountries->Selected = nodAmerica; } //---------------------------------------------------------------------------

We saw that, to select an item, the user can click it. If the user clicks another control, the node that was selected in the tree view loses its highlighting because the control has lost focus. When the focus moves to another control, if you want the selected node of the tree view to preserve its highlighting, set to false the TTreeView::HideSelection Boolean property. Its default value is true.

In previous sections, we saw that some nodes have children and some don't. When a node has at least one child, the node indicates this by displaying a + button. If the user clicks the + button, the node expands, displays a list of its children, and the button becomes -. The presence or absence of the + and - buttons is controlled by the TTreeView::ShowButtons Boolean property. By default, this property is set to true. If you don't want the parent nodes to display the + or - button, set this property to false.

When a node displays a + button and the user clicks that button, the node displays its child(ren). This action is referred to as expanding the node. To programmatically expand a node, call its TTreeNode::Expand() method. Its syntax is:

void __fastcall Expand(bool Recurse);

This method can be called to expand the node that calls it. If you want to expand only the node but not its children that have their own children, pass the Recurse argument as false. To expand a node and its children that have nodes, pass the argument as true.

To find out if a node is expanded, check the value of its TTreeNode::Expanded property.

To expand other nodes of the tree view, the user can continue clicking each node that has a + button as necessary. To programmatically expand all nodes of a tree view, call its TTreeView::FullExpand() method. Its syntax is:

void __fastcall FullExpand(void);

If a node is displaying a - button, it indicates that it is showing the list of its children. To hide the list, the user can click the - button. This action is referred to as collapsing the node. To programmatically collapse a node, call its TTreeNode::Collapse() method whose syntax is:

void __fastcall Collapse(bool Recurse);

If you want to collapse only the node but not its children that are already expanded, pass the argument as false. If you want to collapse the node and its children that have their own children, pass the argument as true.

The user can continually click the - button of each node that is expanded to collapse them. To programmatically collapse all nodes of a tree view, call its TTreeView::FullCollapse() method. Its syntax is:

void __fastcall FullCollapse();

Besides the strings (and some small pictures as we will see later), the nodes of a tree view can display a check box on their left side. To display check boxes on the items of a tree view, call the SetWindowLong() function and specify that you want to add the TVS_CHECKBOXES style. This can be done as follows:

//--------------------------------------------------------------------------- void __fastcall TForm1::btnCreateClick(TObject *Sender) { TTreeView* tvwCountries = new TTreeView(this); tvwCountries->Parent = this; tvwCountries->Left = 10; tvwCountries->Top = 50; tvwCountries->Width = 220; tvwCountries->Height = 260; LONG GWLTreeView = GetWindowLong(tvwCountries->Handle, GWL_STYLE); SetWindowLong(tvwCountries->Handle, GWL_STYLE, GWLTreeView | TVS_CHECKBOXES); TTreeNode *nodRoot = tvwCountries->Items->Add(NULL, "World"); TTreeNode *nodAfrica = tvwCountries->Items->AddChild(nodRoot, "Africa"); TTreeNode *nodAmerica = tvwCountries->Items->AddChild(nodRoot, "America"); tvwCountries->Items->AddChild(nodRoot, "Asia"); TTreeNode *nodEurope = tvwCountries->Items->AddChild(nodRoot, "Europe"); tvwCountries->Items->AddChild(nodAfrica, "Senegal"); tvwCountries->Items->AddChild(nodAfrica, "Botswana"); tvwCountries->Items->AddChild(nodAfrica, "Ghana"); tvwCountries->Items->AddChild(nodAfrica, "Morocco"); tvwCountries->Items->AddChild(nodAmerica, "Canada"); tvwCountries->Items->AddChild(nodAmerica, "Jamaica"); tvwCountries->Items->AddChild(nodAmerica, "Colombia"); tvwCountries->Items->AddChild(nodEurope, "Italy"); tvwCountries->Items->AddChild(nodEurope, "Greece"); tvwCountries->Items->AddChild(nodEurope, "Spain"); tvwCountries->Items->AddChild(nodEurope, "England"); } //---------------------------------------------------------------------------

If you equip the nodes with check boxes, the user can click an item to select it independently of the check box. The user can also click the check box, which would place a check mark in the box.

Each of the nodes we have used so far displayed a simple piece of text. To enhance the appearance of a node, besides its text, you can display a small icon to the left of its string. To do this, you must first create a list of images and store them in a TImageList object. After creating a tree view, if you plan to display an icon next to its nodes, first assign a TImageList value to its Images property.

To support pictures associated with items, the TTreeNode class is equipped with a property called ImageIndex. This property allows you to assign the intended image to the node.

1. To create an icon, on the main menu, click Tools -> Image Editor
2. On the main menu of Image Editor, click File -> New -> Icon File (.ico)
3. In the Icon Properties dialog box, click the 16 x 16 (Small Icon) and the 16 Color radio buttons
4. Click OK and design the icon as follows:
    
   
5. Save the icon as StoreDef.ico in the folder of the current project 
6. As done above, start a new 16x16, 16 colors icon and design it as follows:
    
   
7. Save it as StoreSel.ico
8. Start a new 16x16, 16 colors icon and design it as follows:
    
   
9. Save it as CatDef.ico
10. Start a new 16x16, 16 colors icon and design it as follows:
     
    
11. Save it as CatSel.ico
12. Start a new 16x16, 16 colors icon and design it as follows:
     
    
13. Save it as GroupDef.ico
14. Start a new 16x16, 16 colors icon and design it as follows:
     
    
15. Save it as GroupSel.ico 
16. Start a new 16x16, 16 colors icon and design it as follows:
     
    
17. Save it as LevelDef.ico
18. Start a new 16x16, 16 colors icon and design it as follows:
     
    
19. Save it as LevelSel.ico
20. Return to Borland C++ Builder and display the first form.
    In the Win32 section of the Tool Palette, click ImageList and click the form
21. On the form, double-click the ImageList1 that was just added
22. In Form1->ImageList1 ImageList dialog box, click Add
23. Locate the folder that contains the current project and display it in the Look In combo box
24. Select StoreDef.ico and click Open
25. In the same way, add the other pictures in the following order: StoreSel.ico, StoreSel.ico, CatDef.ico, CatSel.ico, GroupDef.ico, GroupSel.ico, LevelDef.ico, LevelSel.ico
26. Click OK
27. In the form, click the tree view and, in the Object Inspector, set its Image property to ImageList1
28. Double-click an unoccupied area of the form and change its OnCreate event as follows:
     

    //--------------------------------------------------------------------------- void __fastcall TForm1::FormCreate(TObject *Sender) { TTreeNode *nodRoot = this->tvwStoreItems->Items->Add(NULL, "Store Items"); nodRoot->ImageIndex = 0; nodRoot->SelectedIndex = 1; TTreeNode *nodBabies = tvwStoreItems->Items->AddChild(nodRoot, "Babies"); nodBabies->ImageIndex = 2; nodBabies->SelectedIndex = 3; TTreeNode *nodTeens = tvwStoreItems->Items->AddChild(nodRoot, "Teens"); nodTeens->ImageIndex = 2; nodTeens->SelectedIndex = 3; TTreeNode *nodWomen = tvwStoreItems->Items->AddChild(nodRoot, "Women"); nodWomen->ImageIndex = 2; nodWomen->SelectedIndex = 3; TTreeNode *nodMen = tvwStoreItems->Items->AddChild(nodRoot, "Men"); nodMen->ImageIndex = 2; nodMen->SelectedIndex = 3; TTreeNode *nodMisc = tvwStoreItems->Items->AddChild(nodRoot, "Miscellaneous"); nodMisc->ImageIndex = 2; nodMisc->SelectedIndex = 3; TTreeNode *nodBabyHealth = tvwStoreItems->Items->AddChild(nodBabies, "Health and Care"); nodBabyHealth->ImageIndex = 4; nodBabyHealth->SelectedIndex = 5; TTreeNode *nodBabyBathing = tvwStoreItems->Items->AddChild(nodBabies, "Bathing"); nodBabyBathing->ImageIndex = 4; nodBabyBathing->SelectedIndex = 5; TTreeNode *nodBabyDecor = tvwStoreItems->Items->AddChild(nodBabies, "Decorations"); nodBabyDecor->ImageIndex = 4; nodBabyDecor->SelectedIndex = 5; TTreeNode *nodWomenDress = tvwStoreItems->Items->AddChild(nodWomen, "Dresses"); nodWomenDress->ImageIndex = 4; nodWomenDress->SelectedIndex = 5; TTreeNode *nodWomenPants = tvwStoreItems->Items->AddChild(nodWomen, "Pants and Jeans"); nodWomenPants->ImageIndex = 4; nodWomenPants->SelectedIndex = 5; TTreeNode *nodWomenCausalPants = tvwStoreItems->Items->AddChild(nodWomenPants, "Casual Pants"); nodWomenCausalPants->ImageIndex = 6; nodWomenCausalPants->SelectedIndex = 7; TTreeNode *nodWomenProPants = tvwStoreItems->Items->AddChild(nodWomenPants, "Professional Pants"); nodWomenProPants->ImageIndex = 6; nodWomenProPants->SelectedIndex = 7; TTreeNode *nodWomenJeans = tvwStoreItems->Items->AddChild(nodWomenPants, "Jeans"); nodWomenJeans->ImageIndex = 6; nodWomenJeans->SelectedIndex = 6; TTreeNode *nodWomenShorts = tvwStoreItems->Items->AddChild(nodWomenPants, "Shorts"); nodWomenShorts->ImageIndex = 6; nodWomenShorts->SelectedIndex = 7; TTreeNode *nodWomenShoes = tvwStoreItems->Items->AddChild(nodWomen, "Shoes"); nodWomenShoes->ImageIndex = 4; nodWomenShoes->SelectedIndex = 5; TTreeNode *nodWomenCareerWear = tvwStoreItems->Items->AddChild(nodWomen, "Career Wear"); nodWomenCareerWear->ImageIndex = 4; nodWomenCareerWear->SelectedIndex = 5; TTreeNode *nodWomenLingerie = tvwStoreItems->Items->AddChild(nodWomen, "Lingerie"); nodWomenLingerie->ImageIndex = 4; nodWomenLingerie->SelectedIndex = 5; TTreeNode *nodMiscCosm = tvwStoreItems->Items->AddChild(nodMisc, "Cosmetics"); nodMiscCosm->ImageIndex = 4; nodMiscCosm->SelectedIndex = 5; TTreeNode *nodMiscTravel = tvwStoreItems->Items->AddChild(nodMisc, "Travel Wear"); nodMiscTravel->ImageIndex = 4; nodMiscTravel->SelectedIndex = 5; TTreeNode *nodMiscJewel = tvwStoreItems->Items->AddChild(nodMisc, "Jewelry"); nodMiscJewel->ImageIndex = 4; nodMiscJewel->SelectedIndex = 5; } //---------------------------------------------------------------------------

29. Execute the application to test it
     
    
30. Close the form and return to your programming environment

A list view consists of using one of four views to display a list of items. The list is typically equipped with icons that allow the user to verify what view is displaying. There are four views used to display items

Large Icons: The view displays a list of items using icons with a 32x32 pixels size of icons. This is the preferred view when the main idea consists of giving an overview of the items

Small Icons: Like the other next two views, it uses 16x16 pixel icons to display a simplified list of the items. Once more, no detail is provided about the items of this list. The list is organized in disparate columns with some on top of others. If the list is supposed to be sorted, the alphabetical arrangement is organized from left to right.

List: This list, using small icons, is also organized in columns; this time, the columns are arranged so that the first column gets filled before starting the second. If the list is sorted, the sorting is arranged in a top-down manner.

Details: This view displays arranged columns of items and provides as much detail as the list developer had arranged it.

C++ Builder provides a means of creating a list view without any coding, as long as you need just one view to display the list.

To create a list view, use the ListView control from the Win32 tab. If you plan to display a list without columns, you can create the list in a major one-step process. If the list needs a column, its creation would involve a major two-step process. Once the ListView control is placed on the form, create its items using the Items field. The columns are created using the Columns field.

1. Create a new project with its starting form
2. Save it in a new folder named Statistics1
3. Save the unit as Main and save the project as Statistics1
4. Change the Caption of the form to Statistics
5. Change its dimensions to Height = 195 and Width = 445
6. To create our listview, on the Tool Palette, click the Win32 tab
7. Click the ListView control
8. Click on the form
9. Change the position and the dimensions
   Height = 114
   Left = 16
   Top = 16
   Width = 410
10. While the listview control is still selected on the form, on the Object Inspector, click the Items field and click its ellipsis button
11. On the ListView Items Editor dialog, click New Item
12. Type Yemen and press Enter
13. Type Botswana and press Enter
14. Type Belgium and press Enter
15. Type Colombia and press Enter
16. Type Denmark and press Enter
17. Type Benin
18. Click OK
19. To test the list view, press F9
20. After viewing the listview, close the form
21. On the form, click the listview. On the Object Inspector, click the Columns field and click its ellipsis button
22. From the Editing ListView1->Columns window, click Add New Item
23. While the 0 – TListColumn line is still selected, type Countries to change the Caption of the column header
24. Click the Width field and type 80
25. Click Add New Item, type Area and change its width to 100
26. Click Add New Item, type Population and change its width to 100
27. Click Add New Item, type Budget and change its width to 50
28. Click Add New Item, type Capital and change its width to 60
29. Close the Editing ListView1->Columns window
30. On the Object Inspector, change the ViewStyle property to vsReport
31. To add the images to the listview, on the Win32 tab, double-click the ImageList control
32. With the ImageList1 selected, change its Name to imgLarge
33. On the form, double-click the imgLarge control to add the images
34. Click Add
35. Locate the folder where the exercises are located. Access the Flags folder
36. Click Yemen and click Open. If you receive a message warning that the bitmap is too large…, click No to All
37. Add the other following flags: Botswana, Belgium, Colombia, Denmark, and Benin:
38. Click the list as follows:
    Item Image Index New SubItem
    Yemen 0 527,970
    17,479,206
    17B
    Sanaa
    Botswana 1 600,370
    1,576,470
    1.6B
    Gaborone
    Belgium 2 30,510
    
    10,241,506
    116.5B
    Brussels
    Colombia 3 1,138,910
    39,685,655
    22B
    Bogota
    Danemark 4 43,094
    5,336,394
    59.7B
    Copenhagen
    Benin 5 112,620
    6,395,919
    299M
    Cotonou
39. Click OK
40. On the Win32 tab, double-click the ImageList control again
41. Change its Name to imgSmall
42. Double-click the imgSmall icon
43. Using the Add button, add the following bitmaps: smYemen, smBotswana, smBelgium, smColombia, smDanemark, and smBenin
44. Click OK
45. On the form, click the ListView
46. On the Object Inspector, set the SmallImages property to imgSmall
47. Change the ViewStyle to vsReport
48. To test the listview, press F9
49. After viewing the listview, close the form
50. On the Tool Palette, click the Standard section
51. Add four buttons to the form positioned under the list box
52. Change their captions to &Large Icons, &Small Icons, &List, and &Details respectively:
53. Double-click the Large Icons button to access its OnClick event
54. Double-click the other buttons and implement their events as follows:
    //---------------------------------------------------------------------------
    void __fastcall TForm1::Button1Click(TObject *Sender)
    {
    ListView1->ViewStyle = vsIcon;
    }
    //---------------------------------------------------------------------------
    void __fastcall TForm1::Button2Click(TObject *Sender)
    {
    ListView1->ViewStyle = vsSmallIcon;
    }
    //---------------------------------------------------------------------------
    void __fastcall TForm1::Button3Click(TObject *Sender)
    {
    ListView1->ViewStyle = vsList;
    }
    //---------------------------------------------------------------------------
    void __fastcall TForm1::Button4Click(TObject *Sender)
    {
    ListView1->ViewStyle = vsReport;
    }
    //---------------------------------------------------------------------------
55. To test the ListView, press F9
56. After viewing the ListView, close the form

Creating a ListView from code provides the same flexibility as a ListView object created at design-time, minus the ability to visualize live the list being created. To create a list view, place a ListView control on the form.

The columns and the items of the list are created separately. A column is created using the TListColumn class. This allows you to add and format columns. An item of the list is created using the TListItem class.

To display check boxes on the list view, send a LVM_SETEXTENDEDLISTVIEWSTYLE message to the control. Here is an example:

//---------------------------------------------------------------------------
void __fastcall TForm1::FormCreate(TObject *Sender)
{
	SendMessage((HWND)ListView1->Handle,
		    (UINT)LVM_SETEXTENDEDLISTVIEWSTYLE,
		    (WPARAM)(DWORD) LVS_EX_CHECKBOXES,
		    (LPARAM)LVS_EX_CHECKBOXES);
}
//---------------------------------------------------------------------------

1. Start a new application with its default form
2. Save it in a new folder named Countries3
3. Save the unit as Main and save the project as Countries3
4. From the Win32 tab of the Tool Palette, double-click the ListView control
5. Change the Height of the ListView1 control to 200 and its Width to 350
6. Double-click an empty area on the form and implement the OnCreate event of the form as form
7. At the end of the existing content of the event but before the closing bracket, type:
   //---------------------------------------------------------------------------
   void __fastcall TForm1::FormCreate(TObject *Sender)
   {
   TListColumn *ListCol;
   TListItem *ListIt;
   
   ListCol = ListView1->Columns->Add();
   ListCol->Caption = "Country";
   ListCol->Width = 95;
   
   ListCol = ListView1->Columns->Add();
   ListCol->Caption = "Area (Km2)";
   ListCol->Width = 70;
   ListCol->Alignment = taRightJustify;
   
   ListCol = ListView1->Columns->Add();
   ListCol->Caption = "Population (M)";
   ListCol->Width = 90;
   ListCol->Alignment = taRightJustify;
   
   ListCol = ListView1->Columns->Add();
   ListCol->Caption = "Budget";
   ListCol->Width = 50;
   ListCol->Alignment = taRightJustify;
   
   ListCol = ListView1->Columns->Add();
   ListCol->Caption = "Capital";
   ListCol->Width = 85;
   
   ListCol = ListView1->Columns->Add();
   ListCol->Caption = "@";
   ListCol->Width = 30;
   
   ListIt = ListView1->Items->Add();
   ListIt->Caption = "Belgium";
   ListIt->SubItems->Add("30,510");
   ListIt->SubItems->Add("10,241,506");
   ListIt->SubItems->Add("116.5B");
   ListIt->SubItems->Add("Gaborone");
   ListIt->SubItems->Add("BC");
   
   ListIt = ListView1->Items->Add();
   ListIt->Caption = "Colombia";
   ListIt->SubItems->Add("1,138,910");
   ListIt->SubItems->Add("39,685,655");
   ListIt->SubItems->Add("22B");
   ListIt->SubItems->Add("Bogota");
   ListIt->SubItems->Add("CO");
   
   ListIt = ListView1->Items->Add();
   ListIt->Caption = "Botswana";
   ListIt->SubItems->Add("600,370");
   ListIt->SubItems->Add("1,576,470");
   ListIt->SubItems->Add("1.6B");
   ListIt->SubItems->Add("Gaborone");
   ListIt->SubItems->Add("BC");
   
   ListIt = ListView1->Items->Add();
   ListIt->Caption = "Danemark";
   ListIt->SubItems->Add("43,094");
   ListIt->SubItems->Add("5,336,394");
   ListIt->SubItems->Add("59.7B");
   ListIt->SubItems->Add("Copenhagen");
   ListIt->SubItems->Add("DA");
   
   ListIt = ListView1->Items->Add();
   ListIt->Caption = "Bangladesh";
   ListIt->SubItems->Add("144,000");
   ListIt->SubItems->Add("129,194,224");
   ListIt->SubItems->Add("4.3B");
   ListIt->SubItems->Add("Dhaka");
   ListIt->SubItems->Add("BG");
   
   ListIt = ListView1->Items->Add();
   ListIt->Caption = "Benin";
   ListIt->SubItems->Add("112,620");
   ListIt->SubItems->Add("6,395,919");
   ListIt->SubItems->Add("299M");
   ListIt->SubItems->Add("Cotonou");
   ListIt->SubItems->Add("BN");
   
   ListView1->ViewStyle = vsReport;
   }
   //---------------------------------------------------------------------------
8. To test the form, press F9
9. After viewing the form, close it
10. Press F12 to display the form. To add images, from the Win32 tab, double-click the ImageList control
11. Double-click the ImageList icon on the form
12. Click Add and add the following images: Map, Belgium, Colombia, Botswana, Denmark, Bangladesh, and Benin
13. Click OK
14. On the form, click the ListView1 control and, on the Object Inspector, set its Images value to ImageList1
15. Open the FormCreate event again
16. After the TListItem line, add the following:
    ListView1->LargeImages = ImageList1;
    ListView1->SmallImages = ImageList1;
17. After the first ListIt->Caption line, add the following:
    ListIt->Caption = "Belgium";
    ListIt->ImageIndex = 0;
18. In the same way, assign an image to each item list:
    ListIt->Caption = "Colombia";
    ListIt->ImageIndex = 1;
    ListIt->Caption = "Botswana";
    ListIt->ImageIndex = 2;
    ListIt->Caption = "Danemark";
    ListIt->ImageIndex = 3;
    ListIt->Caption = "Bangladesh";
    ListIt->ImageIndex = 4;
    ListIt->Caption = "Benin";
    ListIt->ImageIndex = 5;
19. To test the form, press F9
20. After using the form, close it.
    21. On the main menu, click File -> Reopen -> ..\Countries\Project1.bpr. If the project is not on the list, open it.
    22. On the form, double-click the TreeView1 control.
    23. In the TreeView Item Editor, click each country and click Delete to delete all countries except the continents:
    
    
    24. Click OK
    25. On the form, click an unoccupied area of the form
    26. From the Standard section of the Tool Palette, double-click the Panel control
    27. Delete its caption and set its Align property to alClient
    28. Make sure the latest panel is still selected.
    29. From the Standard section, double-click the Panel control again.
    30. Set its Align property to alTop. Set its BevelOuter to bvLowered. Delete its caption and set its Height to 38
    31. On the form, click the biggest section of the form, it is occupied by the biggest panel (this should be Panel3).
    32. From the Win32 tab of the Tool Palette, double-click the ListView control.
    33. With the ListView still selected, change its Align property to alClient and its ViewStyle to vsReport.
    34. From the Win32 tab of the Tool Palette, double-click ImageList.
    35. On the form, click the ListView1 control. On the Object Inspector, set both the LargeImages and SmallImages values to ImageList2
    36. On the form, double-click ImageList2. Using the Add button and from the Icons folder, add the following icons: Zambia, Guinea, Benin, Austria, Finland, Romania, Monaco, Jamaica, Colombia, Yemen, SouthKorea, and Lebanon
    37. Click OK
    38. Press F12 to display the Code Editor. In the private section of the TForm1 class, declare the following function:
    void __fastcall DisplayColumns(TTreeNode *NodeSelected);
    39. In the source file, implement the function as follows:
    //---------------------------------------------------------------------------
    void __fastcall TForm1::DisplayColumns(TTreeNode *NodeSelected)
    {
    TListColumn *Col;
    
    // Erase the previous columns so they would not be added to the new ones
    ListView1->Columns->Clear();
    
    // Find out what node was selected, the root or a continent
    if( NodeSelected == TreeView1->Items->Item[0] )
    {
    Col = ListView1->Columns->Add();
    Col->Caption = "Name";
    Col->Width = 100;
    
    Col = ListView1->Columns->Add();
    Col->Caption = "Area (sq km)";
    Col->Width = 120;
    Col->Alignment = taRightJustify;
    
    Col = ListView1->Columns->Add();
    Col->Caption = "Population";
    Col->Width = 120;
    Col->Alignment = taRightJustify;
    }
    else
    {
    Col = ListView1->Columns->Add();
    Col->Caption = "Name";
    Col->Width = 100;
    
    Col = ListView1->Columns->Add();
    Col->Caption = "Area (sq km)";
    Col->Width = 100;
    Col->Alignment = taRightJustify;
    
    Col = ListView1->Columns->Add();
    Col->Caption = "Population";
    Col->Width = 100;
    Col->Alignment = taRightJustify;
    
    Col = ListView1->Columns->Add();
    Col->Caption = "Capital";
    Col->Width = 100;
    
    Col = ListView1->Columns->Add();
    Col->Caption = "Code";
    Col->Width = 40;
    Col->Alignment = taCenter;
    }
    }
    //---------------------------------------------------------------------------
    40. In the header file (Unit1.h), just on top of the class, declare the following two-dimensional array:
    //---------------------------------------------------------------------------
    #ifndef Unit1H
    #define Unit1H
    //---------------------------------------------------------------------------
    #include <Classes.hpp>
    #include <Controls.hpp>
    #include <StdCtrls.hpp>
    #include <Forms.hpp>
    #include <ComCtrls.hpp>
    #include <ExtCtrls.hpp>
    #include <ImgList.hpp>
    const AnsiString CountryStats[12][10] = {
    // Name Area Population Capital Internet Code
    { "Zambia", "752,614", "9,959,037", "Lusaka", "zm" },
    { "Guinea", "245,857", "7,775,065", "Conakry", "gn" },
    { "Benin", "112,620", "6,787,625", "Cotonou", "bj" },
    { "Austria", "83,858", "8,169,929", "Vienna", "at" },
    { "Finland", "337,030", "5,183,545", "Helsinki", "fi" },
    { "Romania", "237,500", "22,317,730", "Bucharest", "ro" },
    { "Monaco", "1.95", "31,987", "Monaco", "mc" },
    { "Jamaica", "10,991", "2,680,029", "Kingston", "jm" },
    { "Colombia", "1,138,910", "41,008,227", "Bogota", "co" },
    { "Yemen", "527,970", "18,701,257", "Sanaa", "ye" },
    { "South Korea", "98,480", "48.324 Mlns","Seoul", "kr" },
    { "Lebanon", "10,400", "3,677,780", "Beirut", "lb" } };
    //---------------------------------------------------------------------------
    class TForm1 : public TForm
    41. Press F12 to display the form. On the form, click the TreeView1 control and, on the Object Inspector, click the Events tab
    42. Double-click the event side of OnChange and implement it as follows:
    //---------------------------------------------------------------------------
    void __fastcall TForm1::TreeView1Change(TObject *Sender, TTreeNode *Node)
    {
    DisplayColumns(Node);
    ListView1->Items->Clear();
    
    TListItem *lstItem;
    
    if( Node->Text == "World" )
    {
    lstItem = ListView1->Items->Add();
    lstItem->Caption = "Africa";
    lstItem = ListView1->Items->Add();
    lstItem->Caption = "Europe";
    lstItem = ListView1->Items->Add();
    lstItem->Caption = "America";
    lstItem = ListView1->Items->Add();
    lstItem->Caption = "Asia";
    }
    else if( Node->Text == "Africa" )
    {
    lstItem = ListView1->Items->Add();
    lstItem->Caption = CountryStats[0][0];
    lstItem->SubItems->Add(CountryStats[0][1]); // Area
    lstItem->SubItems->Add(CountryStats[0][2]); // Population
    lstItem->SubItems->Add(CountryStats[0][3]); // Capital
    lstItem->SubItems->Add(CountryStats[0][4]); // Internet Code
    lstItem->ImageIndex = 1;
    
    lstItem = ListView1->Items->Add();
    lstItem->Caption = CountryStats[1][0];
    lstItem->SubItems->Add(CountryStats[1][1]);
    lstItem->SubItems->Add(CountryStats[1][2]);
    lstItem->SubItems->Add(CountryStats[1][3]);
    lstItem->SubItems->Add(CountryStats[1][4]);
    lstItem->ImageIndex = 2;
    
    lstItem = ListView1->Items->Add();
    lstItem->Caption = CountryStats[2][0];
    lstItem->SubItems->Add(CountryStats[2][1]);
    lstItem->SubItems->Add(CountryStats[2][2]);
    lstItem->SubItems->Add(CountryStats[2][3]);
    lstItem->SubItems->Add(CountryStats[2][4]);
    lstItem->ImageIndex = 3;
    }
    else if( Node->Text == "Europe" )
    {
    lstItem = ListView1->Items->Add();
    lstItem->Caption = CountryStats[3][0];
    lstItem->SubItems->Add(CountryStats[3][1]);
    lstItem->SubItems->Add(CountryStats[3][2]);
    lstItem->SubItems->Add(CountryStats[3][3]);
    lstItem->SubItems->Add(CountryStats[3][4]);
    lstItem->ImageIndex = 4;
    
    lstItem = ListView1->Items->Add();
    lstItem->Caption = CountryStats[4][0];
    lstItem->SubItems->Add(CountryStats[4][1]);
    lstItem->SubItems->Add(CountryStats[4][2]);
    lstItem->SubItems->Add(CountryStats[4][3]);
    lstItem->SubItems->Add(CountryStats[4][4]);
    lstItem->ImageIndex = 5;
    
    lstItem = ListView1->Items->Add();
    lstItem->Caption = CountryStats[5][0];
    lstItem->SubItems->Add(CountryStats[5][1]);
    lstItem->SubItems->Add(CountryStats[5][2]);
    lstItem->SubItems->Add(CountryStats[5][3]);
    lstItem->SubItems->Add(CountryStats[5][4]);
    lstItem->ImageIndex = 6;
    
    lstItem = ListView1->Items->Add();
    lstItem->Caption = CountryStats[6][0];
    lstItem->SubItems->Add(CountryStats[6][1]);
    lstItem->SubItems->Add(CountryStats[6][2]);
    lstItem->SubItems->Add(CountryStats[6][3]);
    lstItem->SubItems->Add(CountryStats[6][4]);
    lstItem->ImageIndex = 7;
    }
    else if( Node->Text == "America" )
    {
    lstItem = ListView1->Items->Add();
    lstItem->Caption = CountryStats[7][0];
    lstItem->SubItems->Add(CountryStats[7][1]);
    lstItem->SubItems->Add(CountryStats[7][2]);
    lstItem->SubItems->Add(CountryStats[7][3]);
    lstItem->SubItems->Add(CountryStats[7][4]);
    lstItem->ImageIndex = 8;
    
    lstItem = ListView1->Items->Add();
    lstItem->Caption = CountryStats[8][0];
    lstItem->SubItems->Add(CountryStats[8][1]);
    lstItem->SubItems->Add(CountryStats[8][2]);
    lstItem->SubItems->Add(CountryStats[8][3]);
    lstItem->SubItems->Add(CountryStats[8][4]);
    lstItem->ImageIndex = 9;
    }
    else if( Node->Text == "Asia" )
    {
    lstItem = ListView1->Items->Add();
    lstItem->Caption = CountryStats[9][0];
    lstItem->SubItems->Add(CountryStats[9][1]);
    lstItem->SubItems->Add(CountryStats[9][2]);
    lstItem->SubItems->Add(CountryStats[9][3]);
    lstItem->SubItems->Add(CountryStats[9][4]);
    lstItem->ImageIndex = 10;
    
    lstItem = ListView1->Items->Add();
    lstItem->Caption = CountryStats[10][0];
    lstItem->SubItems->Add(CountryStats[10][1]);
    lstItem->SubItems->Add(CountryStats[10][2]);
    lstItem->SubItems->Add(CountryStats[10][3]);
    lstItem->SubItems->Add(CountryStats[10][4]);
    lstItem->ImageIndex = 11;
    
    lstItem = ListView1->Items->Add();
    lstItem->Caption = CountryStats[11][0];
    lstItem->SubItems->Add(CountryStats[11][1]);
    lstItem->SubItems->Add(CountryStats[11][2]);
    lstItem->SubItems->Add(CountryStats[11][3]);
    lstItem->SubItems->Add(CountryStats[11][4]);
    lstItem->ImageIndex = 12;
    }
    }
    //---------------------------------------------------------------------------
    43. Test the application
    44. After using the form, close it and save the project.
    
    

27.3.1 
A splitter is a bar that divides a window area in two sections. These sections are referred to as panes or frames.. The splitter bar is used to create independent sections holding various controls. The splitter can divide the sections horizontally or vertically, depending on how you create it. Among other things, the design and implementation allows displaying related data.

27.3.2 
To create a splitter bar, click the Splitter control from the Additional tab of the Tool Palette. The Splitter must be added to a control that has the Align property set to a value other than alNone. If the splitter is embedded to a control that has the alLeft or alRight Align property, it will create two vertical sections. If the Align property of a control is set to alTop or alBottom when receiving the splitter, this creates two horizontal sections. By using a combination of panels and other controls, you can divide the window in as many sections as necessary and in any way.

Practical Learning: Adding a Splitter Bar
1. Display the form. Click the tree view control on the left side of the form to select it. Make sure its Align property is set to alLeft
2. From the Additional tab of the Tool Palette, click the Splitter control 
3. Click the tree view on the left side of the form. Notice that the splitter aligns vertically with the tree view
4. That’s it. To test the form, press F9:

5. Drag the splitting line in the middle of the form to resize the sections
6. After using the form, close it.

1. Start Microsoft SQL Server. In the MMC window, expand the Databases folder