ch10.htm

Learning language of Visual C++6

		<TD ALIGN="LEFT">UDS_AUTOBUDDY		</TD>
		<TD ALIGN="LEFT">Makes the previous window the buddy control		</TD>
	</TR>
	<TR ALIGN="LEFT" VALIGN="TOP">
		<TD ALIGN="LEFT">UDS_HORZ		</TD>
		<TD ALIGN="LEFT">Creates a horizontal up-down control		</TD>
	</TR>
	<TR ALIGN="LEFT" VALIGN="TOP">
		<TD ALIGN="LEFT">UDS_NOTHOUSANDS		</TD>
		<TD ALIGN="LEFT">Eliminates separators between each set of three digits		</TD>
	</TR>
	<TR ALIGN="LEFT" VALIGN="TOP">
		<TD ALIGN="LEFT">UDS_SETBUDDYINT		</TD>
		<TD ALIGN="LEFT">Displays the control's value in the buddy control		</TD>
	</TR>
	<TR ALIGN="LEFT" VALIGN="TOP">
		<TD ALIGN="LEFT">UDS_WRAP		</TD>
		<TD ALIGN="LEFT">Causes the control's value to wrap around to its minimum when the maximum is reached,
			and vice versa		</TD>
	</TR>
</TABLE>
</P>
<P>This chapter's sample application establishes the up-down control with calls to
SetBuddy(), SetRange(), and SetPos(). Thanks to the UDS_SETBUDDYINT flag passed to
Create() and the call to the control's SetBuddy() member function, Common doesn't
need to do anything else for the control's value to appear on the screen. The control
automatically handles its buddy. Try building and testing now.</P>
<P>You might want up-down controls that move faster or slower than in this sample
or that use hex numbers rather than base-10 numbers. Look at the member functions
of this control in the online documentation, and you will see how to do that.</P>
<P>
<H2><A NAME="Heading11"></A>The Image List Control</H2>
<P>Often you need to use images that are related in some way. For example, your application
might have a toolbar with many command buttons, each of which uses a bitmap for its
icon. In a case like this, it would be great to have some sort of program object
that could not only hold the bitmaps but also organize them so that they can be accessed
easily. That's exactly what an image list control does for you--it stores a list
of related images. You can use the images any way that you see fit in your program.
Several common controls rely on image lists. These controls include the following:</P>
<P>

<UL>
	<LI>List view controls
	<P>
	<LI>Tree view controls
	<P>
	<LI>Property pages
	<P>
	<LI>Toolbars
</UL>

<P>You will undoubtedly come up with many other uses for image lists. You might,
for example, have an animation sequence that you'd like to display in a window. An
image list is the perfect storage place for the frames that make up an animation,
because you can easily access any frame just by using an index.</P>
<P>If the word <I>index</I> makes you think of arrays, you're beginning to understand
how an image list stores images. An image list is very similar to an array that holds
pictures rather than integers or floating-point numbers. Just as with an array, you
initialize each &quot;element&quot; of an image list and thereafter can access any
part of the &quot;array&quot; by using an index.</P>
<P>You won't, however, see an image list control in your running application in the
same way that you can see a status bar or a progress bar control. This is because
(again, similar to an array) an image list is only a storage structure for pictures.
You can display the images stored in an image list, but you can't display the image
list itself. Figure 10.2 shows how an image list is organized.</P>
<P><A HREF="javascript:popUp('03fig02.gif')"><B>FIG. 10.2</B></A><B> </B><I>An image
list is much like an array of pictures.</I></P>

<P><I></I>
<H3><A NAME="Heading12"></A>Creating the Image List</H3>
<P>In the Common Controls App application, image lists are used with the list view
and tree view controls, so the image lists for the controls are created in the CreateListView()
and CreateTreeView() local member functions and are called from CCommonView::OnCreate().
Just as with the other controls, add calls to these functions to OnCreate() and then
add the functions to the class. You will see the full code for those functions shortly,
but because they are long, this section presents the parts that are relevant to the
image list.</P>
<P>A list view uses two image lists: one for small images and the other for large
ones. The member variables for these lists have already been added to the class,
so start coding CreateListView() with a call to each list's Create() member function,
like this:</P>
<P>
<PRE>m_smallImageList.Create(16, 16, FALSE, 1, 0);
m_largeImageList.Create(32, 32, FALSE, 1, 0);
</PRE>
<P>The Create() function's five arguments are</P>
<P>

<UL>
	<LI>The width of the pictures in the control
	<P>
	<LI>The height of the pictures
	<P>
	<LI>A Boolean value indicating whether the images contain a mask
	<P>
	<LI>The number of images initially in the list
	<P>
	<LI>The number of images by which the list can dynamically grow
</UL>

<P>This last value is 0 to indicate that the list isn't allowed to grow during runtime.
The Create() function is overloaded in the CImageList class so that you can create
image lists in various ways. You can find the other versions of Create() in your
Visual C++ online documentation.</P>
<P>
<H3><A NAME="Heading13"></A>Initializing the Image List</H3>
<P>After you create an image list, you will want to add images to it. After all,
an empty image list isn't of much use. The easiest way to add the images is to include
the images as part of your application's resource file and load them from there.
Add these four lines to CreateListView() to fill each list with images:</P>
<P>
<PRE>HICON hIcon = ::LoadIcon (AfxGetResourceHandle(),
    MAKEINTRESOURCE(IDI_ICON1));
m_smallImageList.Add(hIcon);
hIcon = ::LoadIcon (AfxGetResourceHandle(),
      MAKEINTRESOURCE(IDI_ICON2));
m_largeImageList.Add(hIcon);
</PRE>
<P>Here the program first gets a handle to the icon. Then it adds the icon to the
image list by calling the image list's Add() member function. (In this case, the
list includes only one icon. In other applications, you might have a list of large
icons for folders, text files, and so on, as well as another list of small icons
for the same purposes.) To create the first icon, choose Insert, Resource and double-click
Icon. Then edit the new blank icon in the Resource Editor. (It will automatically
be called IDI_ICON1.) Click the New Device Image toolbar button next to the drop-down
box that says Standard (32*32) and choose Small (16*16) on the dialog that appears;
click OK. You can spend a long time making a beautiful icon or just quickly fill
in the whole grid with black and then put a white circle on it with the Ellipse tool.
Add another icon, IDI_ICON2, and leave it as 32*32. Draw a similar symbol on this
icon.</P>
<P>You can use many member functions to manipulate an object of the CImageList class,
adjusting colors, removing images, and much more. The online documentation provides
more details on these member functions.</P>
<P>You can write the first few lines of CreateTreeView() now. It uses one image list
that starts with three images. Here's the code to add:</P>
<P>
<PRE>   m_treeImageList.Create(13, 13, FALSE, 3, 0);
   HICON hIcon = ::LoadIcon(AfxGetResourceHandle(),
      MAKEINTRESOURCE(IDI_ICON3));
   m_treeImageList.Add(hIcon);
   hIcon = ::LoadIcon(AfxGetResourceHandle(),
      MAKEINTRESOURCE(IDI_ICON4));
   m_treeImageList.Add(hIcon);
   hIcon = ::LoadIcon(AfxGetResourceHandle(),
      MAKEINTRESOURCE(IDI_ICON5));
   m_treeImageList.Add(hIcon);
</PRE>
<P>Create IDI_ICON3, IDI_ICON4, and IDI_ICON5 the same way you did the first two
icons. All three are 32*32. Draw circles as before. If you leave the background the
same murky green you started with, rather than fill it with black, the circles will
appear on a transparent background--a nice effect.</P>
<P>
<H2><A NAME="Heading14"></A>The List View Control</H2>
<P>A list view control simplifies the job of building an application that works with
lists of objects and organizes those objects in such a way that the program's user
can easily determine each object's attributes. For example, consider a group of files
on a disk. Each file is a separate object associated with a number of attributes,
including the file's name, size, and the most recent modification date. When you
explore a folder, you see files either as icons in a window or as a table of entries,
each entry showing the attributes associated with the files. You have full control
over the way that the file objects are displayed, including which attributes are
shown and which are unlisted. The common controls include something called a <I>list
view control</I>, so you can organize lists in exactly the same way. If you'd like
to see an example of a full-fledged list view control, open the Windows Explorer
(see Figure 10.3). The right side of the window shows how the list view control can
organize objects in a window. (The left side of the window contains a tree view control,
which you will learn about later in this chapter in the section titled &quot;The
Tree View Control.&quot;) In the figure, the list view is currently set to the report
view, in which each object in the list receives its own line, showing not only the
object's name but also the attributes associated with that object.</P>
<P><A HREF="javascript:popUp('10uvc03.gif')"><B>FIG. 10.3</B></A><B> </B><I>Windows
Explorer uses a list view control to organize file information.</I></P>

<P>The user can change the way objects are organized in a list view control. Figure
10.4, for example, shows the list view portion of the Explorer set to the large-icon
setting, and Figure 10.5 shows the small-icon setting, which enables the user to
see more objects (in this case, files) in the window. With a list view control, the
user can edit the names of objects in the list and in the report view can sort objects,
based on data displayed in a particular column.</P>
<P><A HREF="javascript:popUp('10uvc04.gif')"><B>FIG. 10.4</B></A><B> </B><I>Here's
Explorer's list view control set to large icons.</I></P>

<P><A HREF="javascript:popUp('10uvc05.gif')"><B>FIG. 10.5</B></A><B> </B><I>Here's
Explorer's list view control set to small icons.</I></P>

<P>Common will also sport a list view control, although not as fancy as Explorer's.
You will add a list view and some buttons to switch between the small-icon, large-icon,
list, and report views.</P>
<P>
<H3><A NAME="Heading15"></A>Creating the List View</H3>
<P>How does all this happen? Well, it does require more work than the progress bar,
trackbar, or up-down controls (it could hardly take less). You will write the rest
of CreateListView(), which performs the following tasks:</P>
<P>

<DL>
	<DT></DT>
	<DD><B>1. </B>Creates and fills the image list controls
	<P>
	<DT></DT>
	<DD><B>2. </B>Creates the list view control itself
	<P>
	<DT></DT>
	<DD><B>3. </B>Associates the image lists with the list view
	<P>
	<DT></DT>
	<DD><B>4. </B>Creates the columns
	<P>
	<DT></DT>
	<DD><B>5. </B>Sets up the columns
	<P>
	<DT></DT>
	<DD><B>6. </B>Creates the items
	<P>
	<DT></DT>
	<DD><B>7. </B>Sets up the items
	<P>
	<DT></DT>
	<DD><B>8. </B>Creates the buttons
	<P>
</DL>

<P>After creating the image lists, CreateListView() goes on to create the list view
control by calling the class's Create() member function, as usual. Add these lines
to CreateListView():</P>
<P>
<PRE>// Create the List View control.
    m_listView.Create(WS_VISIBLE | WS_CHILD | WS_BORDER |
        LVS_REPORT | LVS_NOSORTHEADER | LVS_EDITLABELS,
        CRect(160, 120, 394, 220), this, IDC_LISTVIEW);
</PRE>
<P>The CListCtrl class, of which m_listView is an object, defines special styles
to be used with list view controls. Table 10.3 lists these special styles and their
descriptions.</P>
<P>
<H4>Table 10.3&#160;&#160;List View Styles</H4>
<P>
<TABLE BORDER="1">
	<TR ALIGN="LEFT" VALIGN="TOP">
		<TD ALIGN="LEFT"><B>Style</B></TD>
		<TD ALIGN="LEFT"><B>Description</B></TD>
	</TR>
	<TR ALIGN="LEFT" VALIGN="TOP">
		<TD ALIGN="LEFT">LVS_ALIGNLEFT		</TD>
		<TD ALIGN="LEFT">Left-aligns items in the large-icon and small-icon views		</TD>
	</TR>
	<TR ALIGN="LEFT" VALIGN="TOP">
		<TD ALIGN="LEFT">LVS_ALIGNTOP		</TD>
		<TD ALIGN="LEFT">Top-aligns items in the large-icon and small-icon views		</TD>
	</TR>
	<TR ALIGN="LEFT" VALIGN="TOP">
		<TD ALIGN="LEFT">LVS_AUTOARRANGE		</TD>
		<TD ALIGN="LEFT">Automatically arranges items in the large-icon and small-icon views		</TD>
	</TR>
	<TR ALIGN="LEFT" VALIGN="TOP">
		<TD ALIGN="LEFT">LVS_EDITLABELS		</TD>
		<TD ALIGN="LEFT">Enables the user to edit item labels		</TD>
	</TR>
	<TR ALIGN="LEFT" VALIGN="TOP">
		<TD ALIGN="LEFT">LVS_ICON		</TD>
		<TD ALIGN="LEFT">Sets the control to the large-icon view		</TD>
	</TR>
	<TR ALIGN="LEFT" VALIGN="TOP">
		<TD ALIGN="LEFT">LVS_LIST		</TD>
		<TD ALIGN="LEFT">Sets the control to the list view		</TD>
	</TR>
	<TR ALIGN="LEFT" VALIGN="TOP">
		<TD ALIGN="LEFT">LVS_NOCOLUMNHEADER		</TD>
		<TD ALIGN="LEFT">Shows no column headers in report view		</TD>
	</TR>
	<TR ALIGN="LEFT" VALIGN="TOP">
		<TD ALIGN="LEFT">LVS_NOITEMDATA		</TD>
		<TD ALIGN="LEFT">Stores only the state of each item		</TD>
	</TR>
	<TR ALIGN="LEFT" VALIGN="TOP">
		<TD ALIGN="LEFT">LVS_NOLABELWRAP		</TD>
		<TD ALIGN="LEFT">Disallows multiple-line item labels		</TD>
	</TR>
	<TR ALIGN="LEFT" VALIGN="TOP">
		<TD ALIGN="LEFT">LVS_NOSCROLL		</TD>
		<TD ALIGN="LEFT">Turns off scrolling		</TD>
	</TR>
	<TR ALIGN="LEFT" VALIGN="TOP">
		<TD ALIGN="LEFT">LVS_NOSORTHEADER		</TD>
		<TD ALIGN="LEFT">Turns off the button appearance of column headers		</TD>
	</TR>
	<TR ALIGN="LEFT" VALIGN="TOP">
		<TD ALIGN="LEFT">LVS_OWNERDRAWFIXED		</TD>
		<TD ALIGN="LEFT">Enables owner-drawn items in report view		</TD>
	</TR>
	<TR ALIGN="LEFT" VALIGN="TOP">
		<TD ALIGN="LEFT">LVS_REPORT		</TD>
		<TD ALIGN="LEFT">Sets the control to the report view		</TD>