Home

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:

 

Practical Learning Practical Learning: Introducing the Tree View Control

  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

Tree View Design

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.

Practical Learning Practical Learning: Designing a Tree View

  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

Creating a Tree View

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;
}
//---------------------------------------------------------------------------
Countries Statistics
 

Practical LearningPractical Learning: Introducing the Tree View Control

  1. Start a new project with its default 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 DeptStore1 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 form's Caption to Department Store
  7. In the Tool Palette, click the Win32 tab. Click TreeView and click the form
  8. Using the Object Inspector, change its properties as follows:
    Name: tvwStoreItems
    Anchors: akLeft: true, akTop: true, akRight: true, akBottom: true
  9. From the Additional tab of the Tool Palette, click BitBtn and click the form below the tree view
  10. In the Object Inspector, change its properties as follows:
    Caption: Close
    Kind: bkClose
    Anchors: akLeft: false, akTop: false, akRight: true, akBottom: true

     
  11. Save all
 

Operations on Tree View's Nodes

 

Introduction to Creating Nodes

We saw earlier that you could use TreeView Items Editor to create the nodes of a tree view at design time and in the TreeNode Editor. The branches of a tree view are stored in a property called Items. The Items property is an object based on the TTreeNodes class. As its name indicates, the Nodes property carries all of the branches of a tree view. This means that the Nodes property in fact represents a collection. Each member of this collection is called a node and it is an object based on the TTreeNode class.

At run time, to create a new node, call the TreeNodes::Add() method. Its syntax is:

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

If you are creating the first item of the tree view, the first argument must be passed as NULL. The second is the string that the branch will display. This means that this method is also the prime candidate to create the root node. Here is an example of calling it:
//---------------------------------------------------------------------------
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;

    tvwCountries->Items->Add(NULL, "World");
}
//---------------------------------------------------------------------------
Countries Statistics

In the same way, you can call the TTreeNodes::Add() method as many times as necessary to create additional branches. 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;

    tvwCountries->Items->Add(NULL, "World");
    tvwCountries->Items->Add(NULL, "Jupiter");
    tvwCountries->Items->Add(NULL, "Neptune");
    tvwCountries->Items->Add(NULL, "Uranus");
}
//---------------------------------------------------------------------------
 

 

Practical LearningPractical Learning: Creating the Root Node

  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

Creating Child Nodes

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.

Practical LearningPractical Learning: Creating Child Nodes

  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

The Siblings of a Node

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);
 

Node Selection

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.

Practical LearningPractical Learning: Introducing Node Selection

  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

Node Edition

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.

Node Location

To get a reference to the top most node of the tree view, you can access the value of the TTreeView::TopItem, which produces a TTreeNode object.

As mentioned already, the nodes of a tree view are stored in a collection of type TTreeNodes. Every time you create a new node, it occupies a position inside the tree. Each node is represented by the Item indexed property of this collection and each item is of type TTreeNode. Besides the Item property, the [] operator is overloaded in the TTreeNodes class to allow you to access any node using its index.

The first node of the tree has an index of 0 in the TTreeNodes::Item[] collection. Another technique you can use to get a reference to the first item is by calling the TTreeNodes::GetFirstNode() method. Its syntax is:

TTreeNode* __fastcall GetFirstNode(void);

The second node has an index of 1 in the TTreeNodes::Item[] collection and so on. You can use this property to access any node in the tree. Another technique you can use to get a reference to the first item is by calling the TTreeNodes::GetFirstNode() method. Its syntax is:

TTreeNode* __fastcall GetFirstNode(void);

The children of a node are stored in its TTreeNode::Item[] property, which is a collection. To get a reference to the first child of a node, you can access the item stored in TTreeNode::Item[0]. An alternative is to call its TTreeNode::GetFirstChild() method. Its syntax is:

TTreeNode* __fastcall getFirstChild(void);

In the same way, the TTreeNode class provides other methods to access the last child (GetLastChild()), the next sibling (GetNextSibling()), the next child (GetNextChild()), etc, nodes.

Another technique you can use to locate a node consists of using some coordinates. To do this, you can call the TreeView::GetNodeAt() method. Its syntax is:

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

To use this method, you must know the location or the x and y coordinates of the node. If you provide valid argumentation to this method, it returns a reference to the TTreeNode located at the argument.

 

Practical LearningPractical Learning: Using the Selected Node

  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

Deleting Nodes

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.

Practical LearningPractical Learning: Deleting a Node

  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

Visual Feedback of Nodes

 

Hot Tracking

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.

The Intermediary Lines of Related Nodes

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");
}
//---------------------------------------------------------------------------

The Root Lines

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.

Node Indentation

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.

Full Row Selection

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;
}
//---------------------------------------------------------------------------

Hiding Selection After Losing Focus

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.

The + and - Buttons

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.

Expanding and Collapsing Tree Nodes

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();

Tree Nodes and Check Boxes

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.

Tree Nodes and Icons

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.

Practical LearningPractical Learning: Associating Icons With Nodes

  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

The List View

 

Introduction

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.

List View Design

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.

Practical Learning Practical Learning: Designing a List View

  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

Dynamic List Views

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);
}
//---------------------------------------------------------------------------

Practical Learning Practical Learning: Programmatically Creating a List View

  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.

The Splitter Bar

 

Introduction

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.

Creating a Splitter

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.



Practical Learning Practical Learning: 

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

 

 
Previous Copyright © 2004-2007 Yevol Next