Scroll Views HTML Views and Other View Types

Scroll Views, HTML Views, and Other View Types Jim Fawcett CSE 778 – Advanced Windows Programming Summer 2003

References • Programming Windows with MFC, Chapter 10, Jeff Prosise, Microsoft Press, 1999 • Adapted from a presentation by: Zhiguang Li Summer 2001

Topics 1. Scroll Views 2. HTML Views 3. Tree Views 4. List Views - views with scroll bars - views based on browser control - views like explorer’s left pane - views based on list control

About MFC’s CView Class • MFC's CView class defines the basic functionality of views and represents data stored in a CDocument object. It is also the base class of some other useful view classes which we will talk about in this chapter.

Class Relationships

1. SCROLL VIEWS • Functionality: adds basic scrolling capabilities to CView. • Additional Messages: WM_VSCROLL , WM_HSCROLL

View Definitions • physical view : refers to the view window and the space that it occupies on the screen. • logical view : describes the virtual workspace that can be viewed by using the scroll bars.

Three steps to create a Scrolling view • Step 1: Using App. Wizard to create a CScroll. View-based application

Step 2: Specify the view's logical dimensions Override On. Initial. Update in the view class, and call Set. Scroll. Sizes to specify the view's logical dimensions. Four Parameters for CScroll. View: : Set. Scroll. Sizes § § An integer specifying the mapping mode (required) A SIZE structure or CSize object specifying the view's logical dimensions (required) A SIZE structure or CSize object specifying the page size —the amount by which MFC scrolls the view when the scroll bar shaft is clicked (optional) A SIZE structure or CSize object specifying the line size —the amount by which MFC scrolls the view when the scroll bar arrows are clicked (optional)

Continued: • The mapping mode specified in Set. Scroll. Sizes' first parameter determines the units of measurement for the second, third, and fourth parameters. Example: void CMy. View: : On. Initial. Update () { CScroll. View: : On. Initial. Update (); Set. Scroll. Sizes (MM_LOENGLISH, CSize (850, 1100), CSize (200, 200), CSize (25, 25)); }

Step 3: Implement On. Draw as if the view were a conventional CView. • When On. Draw is called, the mapping mode has already been set to the one specified in the call to Set. Scroll. Sizes. Therefore, you needn't call Set. Map. Mode yourself when you implement On. Draw.

Additional notes to scrolling view • If you draw in the view outside of On. Draw, call CScroll. View: : On. Prepare. DC to allow MFC to factor the mapping mode and scroll position into the output. Example: CScroll. View: : On. Paint( ) { CPaint. DC dc(this); On. Prepare. DC(&dc); On. Draw(&dc) } • If you do any hit-testing in response to mouse messages, use CDC: : DPto. LP to convert the click coordinates from device coordinates to logical coordinates to factor the mapping mode and scroll position into the hit-test. Example: void CMy. View: : On. LButton. Down (UINT n. Flags, CPoint point) { CPoint pos = point; CClient. DC dc (this); On. Prepare. DC (&dc); dc. DPto. LP (&pos); CSize size = Get. Total. Size (); if (: : abs (pos. y) < (size. cy / 2)) { // Upper half was clicked. } else { // Lower half was clicked. } }

Performance: * The key to optimizing On. Draw is a CDC function named Get. Clip. Box. * Example: CRect rect; //How to use this information is highly application-specific. p. DC->Get. Clip. Box (&rect); -- This tells you what part of the view needs redrawing.

Demo use of Get. Clip. Box CRect rect; p. DC->Get. Clip. Box (&rect); int n. Start. Row = max (0, (rect. top - m_n. Cell. Height) / m_n. Cell. Height); int n. End. Row = min (98, (rect. bottom - 1) / m_n. Cell. Height); int n. Start. Col = max (0, (rect. left - m_n. Ribbon. Width) / m_n. Cell. Width); int n. End. Col = min (25, ((rect. right + m_n. Cell. Width - 1) m_n. Ribbon. Width) / m_n. Cell. Width); for (i=n. Start. Row; i<=n. End. Row; i++) for (j=n. Start. Col; j<=n. End. Col; j++) Draw. Address (p. DC, i, j); * displays a spreadsheet in a scrollable view, translates the coordinates returned by Get. Clip. Box into row and column numbers and uses the results to paint only those cells that fall within (either in whole or in part) the invalid rectangle.

How to convert a ordinary view to Scroll view? 1. Search the view's header file and CPP file and change all occurrences of CView to CScroll. View, except where CView* occurs in a function's parameter list. 2. Override On. Initial. Update if it isn't overridden already, and insert a call to Set. Scroll. Sizes.

Scroll. Demo Application • 1 CScroll. Demo. View: : public CScroll. View {// derived from CScroll. View …. • 2 CScroll. Demo. View: : On. Initial. Update() { …. . . Set. Scroll. Size(MM_TEXT, Csize(n. Width, n. Height); ……} 3 CScroll. Demo. View: : On. Draw(CDC* p. DC) same as implementation for Cview: : On. Draw(CDC* p. DC) 4 Two additional points: CScroll. Demo. View: : On. Draw(CDC* p. DC) { ……. p. DC->Get. Clip. Box(&rect); ……. . } CSroll. Demo. View: : On. LButton. Down(. . ) { …………. . dc. DPto. LP(&pos)…………}

2. HTML Views • Functionality: The CHtml. View converts Web-Browser control, the heart of Microsoft Internet Explorer, into a full fledged MFC view. • Attribution: *CHtml. View displays HTML documents. (needs a URL) URL -- a document on the intranet, an intranet, a local hard disk. * CHtml. View is an Active Document container. Can be used to display these and other documents: --- Microsoft Word, Microsoft Excel, and other Active Document servers. --- the contents of folders on a hard disk—just like Internet Explorer.

Non-virtual functions of CHtml. View

Virtual functions of CHtml. View On. Navigate. Complete 2 Called after navigating to a new URL On. Before. Navigate 2 Called before navigating to a new URL On. Progress. Change Called to provide an update on status of a download On. Download. Begin Called to indicate that a download is about to begin On. Download. Complete Called to indicate that a download is complete On. Title. Change Called when the document title changes On. Document. Complete Called to indicate that a document was successfully downloaded

Html. Clock Application • File “Clock. htm” uses DHTML and Java. Script to display time. • You provide the URL CHtml. Clock. View: : On. Initial. Update() { …. . string = string. Left(n. Index+1) + _T(“Clock. htm”); …. } • CHtml. View displays the document CHtml. Clock. View: : On. Initial. Update() { …. . Navigate(string); …. }

3. TREE Views Functionality: • Tree views are ideal for depicting data that's inherently hierarchical. • Display tree like structure containing items composed of text and images. • Use CTree. Ctrl functions on the underlying tree view control

Tree view styles

Initialize a tree view 1 Add an image list to the control. Get. Tree. Ctrl (). Set. Image. List (p. Image. List, TVSIL_NORMAL); 2 Add root items with or without sorting HTREEITEM h. Eagles = Get. Tree. Ctrl (). Insert. Item (_T ("Eagles"), 0, 0, TVI_ROOT, TVI_SORT); 3 Add the sub item with or without sorting Get. Tree. Ctrl (). Insert. Item (_T ("Eagles"), 1, 1, h. Eagles); Get. Tree. Ctrl (). Insert. Item (_T ("On the Border"), 1, 1, h. Eagles);

Member functions: Delete. Item: • Removes an item from control. (Delete All. Items). Expand : • Expands or collapses a subtree. Set. Item. Text: • Changes an item's label, Get. Item. Text retrieves it. Sort. Children: • Sorts items in a subtree. Get. Parent. Item, Get. Child. Item, Get. Next. Sibling. Item: • To enumerate and iterate a tree

Tree View notification • Processing tree view notifications lets user customize a tree view. • Use Tree View notifications to: *Enable in-place label editing so that the user can edit text in a tree view *Update item text and images dynamically by passing LPSTR_TEXTCALL- BACK and I_IMAGECALLBACK parameters to Insert. Item and processing TVN_GETDISPINFO notifications *Customize control's response to keyboard input by processing TVN-_KEYDOWN notifications *Support drag-and-drop operations

Drive Tree Application 1 void CDrive. View: : On. Initial. Update() { // to create and set imagine list … m_il. Drives. Create (IDB_DRIVEIMAGES, 16, 1, RGB (255, 0, 255)); Get. Tree. Ctrl (). Set. Image. List (&m_il. Drives, TVSIL_NORMAL); …. } 2 void CDrive. View: : On. Initial. Update() { // to add root and empty subitem …. Add. Drives() => Add. Drive. Item() h. Item = Get. Tree. Ctrl (). Insert. Item (psz. Drive, ILI_FLOPPY); Get. Tree. Ctrl (). Insert. Item (_T (""), ILI_CLOSED_FOLDER, h. Item); ………………. } 3 int CDrive. View: : Add. Directories(HTREEITEM h. Item, LPCTSTR psz. Path) { // to add subitem …. h. New. Item = Get. Tree. Ctrl (). Insert. Item ((LPCTSTR) &fd. c. File. Name, ILI_CLOSED_FOLDER, ILI_OPEN_FOLDER, h. Item); ……}

4. List View • Difference between List View and Tree View. • List: Presents "flat" collections of data, such as lists of file names. • Tree: shows hierarchical relationships. • Clist. View class derives its functionality from list view control (CList. Ctrl). • Use CList. View: : Get. List. Ctrl to acqure a CList. Ctrl reference to the control that appears inside the listview, then you can call CList. Ctrl functions using the returned reference.

Five steps in initializing a list view Step 1: Create a pair of image lists containing images for list view items. • First imagine list contains "large" images used in large icon mode; • Second contains "small" images used in small icon, list, and report modes.

Step 2: Attach imagine lists to the list view control. • Use CList. Ctrl: : Set. Image. List to associate image lists with list view control. Pass Set. Image. List an LVSIL_NORMAL flag for the image list containing large images and an LVSIL_SMALL flag for the image list containing small images. • Some of the list view styls: • • • LVS_ICON LVS_SMALLICON LVS_LIST LVS_REPORT More … (on Page 587) Selects large icon mode. Selects small icon mode. Selects list mode. Selects report mode.

Step 3: Add columns to the list view control • Call CList. Ctrl: : Insert. Column Left column -- displays items added to the control . Right column -- display subitems (visible only in report mode).

Step 4: Add items to the control with CList. Ctrl: : Insert. Item. Parameters passed to Insert. Item specify item's 0 -based index, item label, and index of the corresponding images in image lists. Step 5: Assign text strings to item's subitems with CList. Ctrl: : Set. Item. Text. Parameters passed to Set. Item. Text specify item number, subitem number, and subitem text, in that order.

Code Sample static CString text[8][3] = { _T ("Tennessee"), _T ("Nashville"), _T ("41, 154"), _T ("Alabama"), _T ("Montgomery"), _T ("50, 766"), … }; // Assign image lists. Get. List. Ctrl (). Set. Image. List (&il. Large, LVSIL_NORMAL); Get. List. Ctrl (). Set. Image. List (&il. Small, LVSIL_SMALL); // Add columns. Get. List. Ctrl (). Insert. Column (0, _T ("State"), LVCFMT_LEFT, 96); Get. List. Ctrl (). Insert. Column (1, _T ("Capital"), LVCFMT_LEFT, 96); Get. List. Ctrl (). Insert. Column (2, _T ("Area (sq. miles)"), LVCFMT_RIGHT, 96); // Add items and subitems. for (int i=0; i<8; i++) { Get. List. Ctrl (). Insert. Item (i, (LPCTSTR) text[i][0], i); Get. List. Ctrl (). Set. Item. Text (i, 1, (LPCTSTR) text[i][1]); Get. List. Ctrl (). Set. Item. Text (i, 2, (LPCTSTR) text[i][2]); }

Change Presentation Style 1. Default presentation style is applied in Pre. Create. Window. However, you can switch modes on the fly by changing the presentation style. 2. Modify. Style (LVS_TYPEMASK, LVS_SMALLICON); // The statement above switches list view to a small icon mode. Modify. Style is a CWnd function that's inherited by CList. View. The first parameter passed to Modify. Style specifies style bits to turn off. The second parameter specifies style bits to turn on. NOTE: LVS_TYPEMASK comes in handy when you query a list view to determine its current presentation style with the following statement: DWORD dw. Style = Get. Style () & LVS_TYPEMASK

Sorting in a list View • An application's usual response to an LVN_COLUMNCLICK notification is to call CList. Ctrl: : Sort. Items to sort list view items. • You don’t need to write code to do the sorting. • You do have to provide a callback function that the control's built-in sorting routine can call to compare a pair of arbitrarily selected items • In the comparison function, we need to specify LPSTR_TEXTCALLBACK for the item and subitem text and provide text to the list view control in response to LVN_GETDISPINFO notifications to avoid wasteful use of memory.

Hitting-testing in a List view • Notifications responding to mouse clicks: • NM_CLICK, NM_DBLCLK, NM_RCLICK, and NM_RDBLCLK • Hit-testing: CList. Ctrl: : Hit. Test • Hit. Test returns the index of item under mouse or -1 if the point doesn't correspond to an item. • Example: // In CMy. List. View's message map ON_NOTIFY_REFLECT (NM_DBLCLK, On. Double. Click) void CMy. List. View: : On. Double. Click (NMHDR* pnmh, LRESULT* p. Result) { DWORD dw. Pos = : : Get. Message. Pos (); CPoint point ((int) LOWORD (dw. Pos), (int) HIWORD (dw. Pos)); Get. List. Ctrl (). Screen. To. Client (&point); int n. Index; If ((n. Index = Get. List. Ctrl (). Hit. Test (point)) != -1) { CString string = Get. List. Ctrl (). Get. Item. Text (n. Index, 0); TRACE (_T ("%s was double-clicked₩n"), string); } *p. Result = 0; }

Continued: • ON_NOTIFY_REFLECT : entry in the message map reflects NM_DBLCLK notifications back to the list view. • The NM_DBLCLK handler echoes the name of the item. • NM_DBLCLK notifications don't include cursor coordinates, so the cursor position is retrieved with : : Get. Message. Pos. • The screen coordinates returned by : : Get. Message. Pos are converted into client coordinates local to the list view and passed to CList. Ctrl: : Hit. Test. • If Hit. Test returns an item index, the index is used to retrieve the item's text

Win. Dir Application

End of Presentation