| To create a ListView on an sdi: | |||||||||||||||||||
| I. | Let's create the starting app first. | ||||||||||||||||||
| 1. | Using AppWizard, create an sdi.
For this example, name it: ExoList and choose the appropriate directory. In AppWizard Step 6 of 6, change the name of your view class to CExoView, Change its Header file's name to ExoView.h, its Base class will be CListView, and its Implementation file will be ExoView.cpp. Change the name of the application's class(CWinApp) name to CExoApp. Change the Class name of the document(CDocument) to CExoDoc, its Header file to ExoDoc.h, its Implementation file will be ExoDoc.cpp. |
||||||||||||||||||
| 2. | In the Visual Studio, click Build->Set Active Configuration... Double-click ExoList - Win32 Release. | ||||||||||||||||||
| II. | We will go little by little to examine what is going on in a ListView creation. | ||||||||||||||||||
| 1. | We first create a simple display style. | ||||||||||||||||||
| a) | From the WorkSpace, click the ClassView tab
and expand the ExoList classes. Expand CExoView, then double-click the OnInitialUpdate() function to access its implementation. |
||||||||||||||||||
| b) | We will first create the column headers. To do that, create a CListCtrl object and use it to insert/create/initialize each column. The CListCtrl.InsertColumn() function is extremely flexible. We will use four of its arguments. The first argument specifies the order of the particular item with respect to the others (remember that they are counted 0, 1, 2, etc). The second argument specifies the caption you want to display on the header. The third gives the relative position of the column caption, specified on left, center, or right. The last argument specifies the width of the column. The default display of the ListView is as LargeIcons; to see these columns, we need to use the CWnd::ModifyStyle() function to change its default display as Report. When you finish, your function might look like this: | ||||||||||||||||||
| void CExoView::OnInitialUpdate() { |
|||||||||||||||||||
| CListView::OnInitialUpdate();
CListCtrl& lCtrl = GetListCtrl(); lCtrl.InsertColumn(0, "Name", LVCFMT_LEFT, 120); lCtrl.InsertColumn(1, "BirthDay", LVCFMT_CENTER, 80); lCtrl.InsertColumn(2, "Qualification", LVCFMT_LEFT, 120); lCtrl.InsertColumn(3, "Profession", LVCFMT_LEFT, 100); lCtrl.InsertColumn(4, "Fav. Sport", LVCFMT_RIGHT, 80); lCtrl.InsertColumn(5, "Hobby", LVCFMT_CENTER, 100); ModifyStyle(NULL, LVS_REPORT, 0); |
|||||||||||||||||||
| } | |||||||||||||||||||
| c) | If you want to see the column headers, build and execute your app now. | ||||||||||||||||||
| d) | Let's populate the listview and make it display some stuffs. You first use the ListView.InsertItem() function to specify the first item in a row. For this example, it will be the Name. Then, you specify the other items using the ListCtrl.SetItemText() function. When you finish, your function might look like the following: | ||||||||||||||||||
| void CExoView::OnInitialUpdate() { |
|||||||||||||||||||
| CListView::OnInitialUpdate(); CListCtrl& lCtrl = GetListCtrl();
int nItem; nItem = lCtrl.InsertItem(0, "Celestin Abolo");
lCtrl.SetItemText(nItem, 1, "10/05"); nItem = lCtrl.InsertItem(0, "William Levine");
lCtrl.SetItemText(nItem, 1, "04/12"); nItem = lCtrl.InsertItem(0, "Karine Doudou");
lCtrl.SetItemText(nItem, 1, "12/30"); nItem = lCtrl.InsertItem(0, "Esther Scwartz");
lCtrl.SetItemText(nItem, 1, "06/06"); lCtrl.InsertItem(0, "David Chang"); ModifyStyle(NULL, LVS_REPORT, 0); |
|||||||||||||||||||
| } | |||||||||||||||||||
| e) | To view the result, build and execute your app now. | ||||||||||||||||||
| 2. | Now, we will give the user the ability to change the display style. | ||||||||||||||||||
| a) | You can simply use some sub items in a menu to change the display styles. But to make it cooler, we will use both the toolbar buttons and the menu items. Following this table: | ||||||||||||||||||
|
|||||||||||||||||||
| Change your view menu. | |||||||||||||||||||
| Still using the table, insert four buttons on your toolbar (the buttons use the same identifiers as the menu create earlier) | |||||||||||||||||||
| b) | From the WorkSpace, declare a DWORD function to get the view type, and a BOOL type function to set the view types. The get function simply seizes the current view style applied to the button that the user has pressed. The set function takes one argument used in combination with the mask style of the currently pressed button to modify the current view style. | ||||||||||||||||||
| // Implementation public: |
|||||||||||||||||||
| virtual
~CExoView(); DWORD GetViewType(); BOOL SetViewType(DWORD dwViewType); |
|||||||||||||||||||
| c) | Implement these two functions as follows: | ||||||||||||||||||
| ///////////////////////////////////////////////////////////////////////////// // CExoView message handlers DWORD CExoView::GetViewType() |
|||||||||||||||||||
| return (GetStyle() & LVS_TYPEMASK); | |||||||||||||||||||
| } BOOL CExoView::SetViewType(DWORD dwViewType) { |
|||||||||||||||||||
| return (ModifyStyle(LVS_TYPEMASK, dwViewType & LVS_TYPEMASK)); | |||||||||||||||||||
| } | |||||||||||||||||||
| d) | To give their due functionality to the toolbar buttons, use ClassWizard (Ctrl+W) to add a COMMAND function and an UPDATE_COMMAND_UI for each button identifier. (Main menu: View->ClassWizard. In the ClassWizard, choose the CExoView class name. Choose the Object IDs: ID_VIEW_LARGEICON. In the Messages listbox, double-click COMMAND and accept the suggested function name. Do the same for the other three buttons). Edit these functions as follows: | ||||||||||||||||||
| void CExoView::OnViewLargeicon() { |
|||||||||||||||||||
| if( GetViewType() !=
LVS_ICON ) SetViewType(LVS_ICON); |
|||||||||||||||||||
| } void CExoView::OnUpdateViewLargeicon(CCmdUI* pCmdUI) { |
|||||||||||||||||||
| pCmdUI->SetCheck(GetViewType() == LVS_ICON); | |||||||||||||||||||
| } | |||||||||||||||||||
| void
CExoView::OnViewSmallicon() { |
|||||||||||||||||||
| if( GetViewType() !=
LVS_SMALLICON ) SetViewType(LVS_SMALLICON); |
|||||||||||||||||||
| } void CExoView::OnUpdateViewSmallicon(CCmdUI* pCmdUI) { |
|||||||||||||||||||
| pCmdUI->SetCheck(GetViewType() == LVS_SMALLICON); | |||||||||||||||||||
| } | |||||||||||||||||||
| } void CExoView::OnViewList() { |
|||||||||||||||||||
| if( GetViewType() !=
LVS_LIST ) SetViewType(LVS_LIST); |
|||||||||||||||||||
| } void CExoView::OnUpdateViewList(CCmdUI* pCmdUI) { |
|||||||||||||||||||
| pCmdUI->SetCheck(GetViewType() == LVS_LIST); | |||||||||||||||||||
| } | |||||||||||||||||||
| void
CExoView::OnViewDetails() { |
|||||||||||||||||||
| if( GetViewType() !=
LVS_REPORT ) SetViewType(LVS_REPORT); |
|||||||||||||||||||
| } void CExoView::OnUpdateViewDetails(CCmdUI* pCmdUI) { |
|||||||||||||||||||
| pCmdUI->SetCheck(GetViewType() == LVS_REPORT); | |||||||||||||||||||
| } | |||||||||||||||||||
| e) | Build and execute your app. Click the buttons to see the changes. | ||||||||||||||||||
| 3. | The only things missing now are the images to make the views more entertaining. At least now you know that a listview doesn't need images to be functional. | ||||||||||||||||||
| a) | Create
two bitmaps identified as: IDB_SMALLBMP and IDB_LARGEBMP. You can use
one image 16x16 pixels in the small bitmap and one image 32x32 in the
large bitmap and make all the items use the same image for display. To
make things less monautonous, we will use a different image for each
item. So, give the small bitmap the dimensions 96x16 pixels (Width x
Height) and design the different images as if each were 15x15.
Design the IDB_LARGEBMP bitmap with dimensions 192x32. |
||||||||||||||||||
| b) | Now, declare two CImageList objects in the protected implementation section of your view class: | ||||||||||||||||||
| protected: | |||||||||||||||||||
| CImageList m_SmallBmp; CImageList m_LargeBmp; |
|||||||||||||||||||
| c) | What you have to do now is to create the images in the OnInitialUpdate() function. Then you use the CListCtrl class to set their state style. Finally, you give a different image to each main item (if you want) by modifying the items declarations. When you finish, your final function would look like this(I took out the first ModifyStyle() function inside the OnInitialUpdate because we don't need it anymore(for this exercise)): | ||||||||||||||||||
| void CExoView::OnInitialUpdate() { |
CListView::OnInitialUpdate(); CListCtrl& lCtrl = GetListCtrl(); m_SmallBmp.Create(IDB_SMALLBMP, 16, 0, RGB(246, 232, 255)); lCtrl.SetImageList(&m_SmallBmp, LVSIL_SMALL); lCtrl.SetImageList(&m_LargeBmp, LVSIL_NORMAL); lCtrl.InsertColumn(0, "Name", LVCFMT_LEFT, 120); lCtrl.InsertColumn(1, "BirthDay", LVCFMT_CENTER, 80); lCtrl.InsertColumn(2, "Qualification", LVCFMT_LEFT, 120); lCtrl.InsertColumn(3, "Profession", LVCFMT_LEFT, 100); lCtrl.InsertColumn(4, "Fav. Sport", LVCFMT_RIGHT, 80); lCtrl.InsertColumn(5, "Hobby", LVCFMT_CENTER, 88); int nItem; nItem = lCtrl.InsertItem(0, "Celestin Abolo", 3);
lCtrl.SetItemText(nItem, 1, "10/05"); nItem = lCtrl.InsertItem(0, "William Levine", 1);
lCtrl.SetItemText(nItem, 1, "04/12"); nItem = lCtrl.InsertItem(0, "Karine Doudou", 4);
lCtrl.SetItemText(nItem, 1, "12/30"); nItem = lCtrl.InsertItem(0, "Esther Scwartz", 2);
lCtrl.SetItemText(nItem, 1, "06/06"); nItem = lCtrl.InsertItem(0, "David Chang", 5); |
||||||||||||||||||
| } | |||||||||||||||||||
| Copyright (c) 2003 FunctionX |