| This is another very small application. |
||||
| I. | The raw beginning. | |||
| 1 - | Start Visual Studio if you didn't yet | |||
| a) | Click the File->New main menu. From the Projects tab, choose Win 32 Application. Give the Project Name: dtree, then specify the directory where you want to create/store your app. Click OK. | |||
| b) | In the Win 32 Application
Step 1 of 1, click OK. |
|||
| 2 - | Once you are back in the Visual Studio editor area, click Project->Settings. In the Settings For: combo box, choose All Configurations. From the General tab, in the Microsoft Foundation Classes combo box, choose Use MFC In A Shared DLL. Click OK. | |||
| 3 - | Since this treeview will reside in a dialog, let's create the host dialog. | |||
| a) | Click Ctrl+R to invoke the Insert Resource dialog box. Click Dialog->New. | |||
| b) | Delete the Cancel button, we will not use/need it. | |||
| c) | Right click in the dialog and choose Properties. In the Properties dialog, change the identifier to IDD_DIALOG_TREE and its caption to: Demo Tree View In A Dialog. Give your dialog the dimensions around 230x220. Once more I don't see the need for an About box, after all, we came here for a short Win 32 application; but if you wanted to include an About box, first you create its resource (a dialog), then you would have to write/modify the call to your System menu so that your users will be able to invoke it. | |||
| d) | Click File->Save All. You are asked to create the resource script in the Save As dialog. In the File Name box, type dtree and click Save. | |||
| e) | Click Insert->Resource. Choose Icon then click New. Invoke the Properties dialog and identify the icon as IDI_DLGTREE_ICON in the File Name of the same Properties dialog, type res\dtree.icon. Design this 32x32 icon anyway you like. When you finish, click the small button on the right of the Device combo box. Then choose Small (16x16). Design also this small icon to your liking. When you finish, Save All. You may be warned that the directory res\ doesn't exist, click OK to get it created by Visual Studio. | |||
| f) | Once more click Project->Add To Project->Files...You can verify that Visual Studio has already create the Resource.h file for you. Click dtree.rc then OK. | |||
| II. | After creating the main resource, let's code our application. | |||
| 1 - | The header file | |||
| a) | Press Ctrl+N to invoke the File-New dialog. From the Files tab, click C/C++ Header File. In the File Name: box, type: dtree and press OK. | |||
| b) | In the new empty file, we need the create the application class to initialize the application. Then we will create a CDialog class with a function to diaplay it which usually is the OnInitDialog. So, type the following: | |||
| // dtree.h class CDtreeApp : public CWinApp { public: |
||||
| BOOL InitInstance(); | ||||
| }; | ||||
| class CDtreeDlg : public CDialog { public: |
||||
| CDtreeDlg(CWnd* pParent = NULL); enum { IDD = IDD_DIALOG_TREE }; |
||||
| protected: | ||||
| virtual BOOL OnInitDialog(); | ||||
| }; | ||||
| Wasn't that simple? |
||||
| c) | To implement these functions, click File->New. In the New dialog, choose C++ Source File,. In the File Name: box, type dtree. We want the main application to call the dialog. Then, when initializing the dialog, we will request the system menu and load our wonderful icon. There we go: | |||
| // dtree.cpp #include "resource.h" #include "dtree.h" CDtreeApp dApp; BOOL CDtreeApp::InitInstance() |
||||
| CDtreeDlg dlg; m_pMainWnd = &dlg; dlg.DoModal(); return FALSE; |
||||
| } CDtreeDlg::CDtreeDlg(CWnd* pParent /*=NULL*/) : CDialog(CDtreeDlg::IDD, pParent) { } BOOL CDtreeDlg::OnInitDialog() |
||||
| CDialog::OnInitDialog(); CMenu* pSysMenu = GetSystemMenu( FALSE ); HICON m_hIcon = (HICON)::LoadImage(dApp.m_hInstance, MAKEINTRESOURCE( IDI_DLGTREE_ICON ), IMAGE_ICON, 16, 16, LR_DEFAULTCOLOR ); SetIcon(m_hIcon, TRUE); // Set big icon SetIcon(m_hIcon, FALSE); // Set small icon return TRUE; |
||||
| } |
||||
| c) | If I were you, I would build my application
now to see what it looks like. |
|||
| III | - | I think it is time to create our treeview, after all, that's why we came here. | ||
| 1 - | Let's take advantage of the Resource Editor. | |||
| a) | From the WorkSpace, click the ResourceView tab and expand the folder(s). If for some reason it can't open, you will have to close it by clicking the X close button of the child window, not the main application. | |||
| b) | Open the IDD_DIALOG_TREE by double clicking it. From the control toolbar, choose a Tree Control and drop it in the dialog application. Enlarge it enough, you can make it 145x210, I wouldn't mind that. | |||
| c) | Right-click on the tree view in the dialog and
choose Properties. Identify the treeview as IDC_TREE.
In the Styles tab, the following options are
up to you but I like to set them, click the following check boxes: Has
buttons, Has lines, Lines at root. There are other options in the
other tabs, set them at will. |
|||
| 2 - | First, no picture, OK? | |||
| a) | To handle the items in the tree view, we need a CTreeCtrl object to control their behavior. Like most other controls, we need the DoDataExchange() function to let the dialog know which control (IDC_TREE) is getting controlled by the control (CTreeCtrl). In the class declaration of the dialog, declare a DoDataExchange() function: | |||
| protected: | ||||
| virtual
void DoDataExchange(CDataExchange* pDX); virtual BOOL OnInitDialog(); |
||||
| }; | ||||
| b) | In the
protected section of the CDtreeDlg class, declare a CTreeCtrl object:
CTreeCtrl m_Tree; In the source file of the dialog, implement the new function: |
|||
| void CDtreeDlg::DoDataExchange(CDataExchange *pDX) { |
||||
| CDialog::DoDataExchange(pDX); DDX_Control(pDX, IDC_TREE, m_Tree); |
||||
| } | ||||
| c) | Now, all we have to do is give the application
a list of the items we want to see displayed. Since those items are
going to belong to a tree view the class that handles this job is the
HTREEITEM; so you define your categories as objects kinds of HTREEITEM,
then you use the CTreeCtrl object you had already created to insert your
items. To make our job easier, we will just put everything in the
OnInitDialog (because if you were capricious, you could list those items
in another function and call that function in the OnInitDialog()). So, modify the end of your OnInitDialog() function to look like the following: |
|||
| HTREEITEM
hCompany, hOffice, hProg, hOperSys, hProd; hCompany =
m_Tree.InsertItem("Microsoft", TVI_ROOT); hOperSys =
m_Tree.InsertItem("Windows 9x", hCompany); hOperSys =
m_Tree.InsertItem("Windows NT", hCompany); hOffice =
m_Tree.InsertItem("Office 97", hCompany); hProd = m_Tree.InsertItem("Word", hOffice); hProd = m_Tree.InsertItem("Access", hOffice); hProd = m_Tree.InsertItem("Excel", hOffice); hProd = m_Tree.InsertItem("OutLook", hOffice); hProd = m_Tree.InsertItem("PowerPoint", hOffice); hProg = m_Tree.InsertItem("Visual C++", hCompany); hProg = m_Tree.InsertItem("Visual Basic", hCompany); hProg = m_Tree.InsertItem("Visual FoxPro", hCompany); hProg = m_Tree.InsertItem("Visual Interdev", hCompany); hCompany
= m_Tree.InsertItem("Lotus", TVI_ROOT); hCompany
= m_Tree.InsertItem("Borland", TVI_ROOT); hCompany
= m_Tree.InsertItem("Novell", TVI_ROOT); hCompany
= m_Tree.InsertItem("Corel", TVI_ROOT); return TRUE; |
||||
| } | ||||
| d) | At this time you can build your app to see
what it displays. |
|||
| 3 - | Let's add some spice with pictures (if you want); | |||
| a) | From the main menu, click Insert->Resource.
Double-click Bitmap. In the ResourceView, right-click IDB_BITMAP1 and
choose Properties. Change the identifier to: IDB_BITMAP. Push the pin
button on the Properties dialog to fix it to the screen. Click anywhere
on the bitmap itself to get the bitmap Properties and in the General
tab, change the Width to 80 and the Height to 16. Why??? Somehow the
Width represents the logical number of bitmaps, that is the number of
times Width can be divided by the height; in this case 96/16=6. So, we
are going to use 5 pictures in our application. Why??? Well, just for
fun. You could use one, two, or three pictures aas long as you
aesthetically configure them fine, like we will do in a few minutes. The
reason I chose 5 pictures is because in this app, we have five
categories of items and I want each category to use a different kind of
picture (After all, Microsoft is a company that writes Word, just like
WordPerfect is written by Corel; but, although Word and Visual C++ are
children of Microsoft, they don't perform the same functions, in other
words, category speaking, Visual C++ is closer to C++ Builder than it is
to Word. That's why we keep those categories). Each picture is 16x16 in
this case and they are numbered from 0 to end. Design your bitmap
keeping in mind that what ever covers the first 15x15 pixels is the
first picture (numbered 0) and so on. Be creative but you should be
concerned with memory, those cute little things take a lot of space in
your hard drive. With more experience, you will learn how to deal with
that.
|
|||
| b) | In the header file of the dialog, declare a
protected CImageList that will set the default attributes of the bitmap;
CImageList m_TreeImg; |
|||
| c) | In the OnInitDialog() function, create the
object to associate with the bitmap.
m_TreeImg.Create(IDB_TREEBMP,
16, 5, RGB (255, 255, 255)); |
|||
| d) | Set the type for the image list:
m_Tree.SetImageList(&m_TreeImg,
TVSIL_NORMAL); |
|||
| e) | Now the fun part. Since you have a few pictures, you need to make your choice of images for each category. the CTreeView::InsertItem() function is extremely flexible (sometimes I wish every Win32 derived function behaves like that). For example you can supply it some pictures or not pictures at all, and the program will still compile very fine. We are going to supply two pictures for each item while inserting it. The first picture is the default picture an item uses when it is not highlighted. The second picture is used by that item when it is highlighted. Insert your items in the tree and when you finish, it might look something like this: | |||
| m_TreeImg.Create(IDB_BITMAP,
16, 5, RGB(255, 255, 255)); m_Tree.SetImageList(&m_TreeImg, TVSIL_NORMAL); HTREEITEM hCompany, hOffice, hProg, hOperSys, hProd; hCompany =
m_Tree.InsertItem("Microsoft", 0, 5, TVI_ROOT); hCompany =
m_Tree.InsertItem("Lotus", 0, 5, TVI_ROOT); hProd =
m_Tree.InsertItem("Lotus Notes", 4, 1, hCompany); hProd =
m_Tree.InsertItem("Domino", 4, 1, hCompany); hCompany =
m_Tree.InsertItem("Borland", 0, 5, TVI_ROOT); hCompany = m_Tree.InsertItem("Novell", 0, 5, TVI_ROOT); hOperSys = m_Tree.InsertItem("NetWare", 5, 1, hCompany); hProd = m_Tree.InsertItem("GroupWise", 2, 3, hCompany); hCompany =
m_Tree.InsertItem("Corel", 0, 5, TVI_ROOT); hOffice =
m_Tree.InsertItem("Office Suite", 1, 4, hCompany); hProd =
m_Tree.InsertItem("WordPerfect", 2, 3, hOffice); |
||||
| } | ||||
| Webmaster | Copyright (c) 1999 FunctionX |
