Developing in C++ with the HTML Viewer Control

[转载自MSDN：http://msdn.microsoft.com/en-us/library/ms838684.aspx]

Microsoft Internet Explorer for the Pocket PC lets you browse the wireless Web and view offline Web files. However the HTML Viewer Control gives these abilities and more to any application.

Applies to:
   Microsoft Windows Powered Pocket PC 2000
   Microsoft eMbedded Visual C++ version 3.0
   VOImage classes (optional) available for free from Virtual Office Systems, Inc
   GIF, JPG, and other types of files

Languages Supported
English

Creating the HTML Viewer Control

Before you can create a control you need a project with a main window. The following steps walk you through creating both your project and the HTML Viewer Control.

1. From the Microsoft eMbedded Visual C++ 3.0 menu, select File and then select New .
2. Select Projects and then, from the list of available project types, select WCE Pocket PC Application .
3. In the Project Name edit control box, enter HTMLControl and click OK to start the project wizard.
4. Select A Typical 'Hello World!' Application and then click Finish .
5. In the confirmation dialog box, click OK to generate the source files. You now have a buildable project.
6. From the Target Platform drop-down list box, select Win32 (WCE x86em) Debug , as shown in Figure 1. (This can also be done by selecting Build and then Set Active Configuration from the menu and selecting the desired target platform.)

   

   Figure 1: Select the target platform.

7. Add the following code (the lines of code you need to add are in red, the other lines are there for reference only) near the top of the HTMLCONTROL.CPP file:
   Copy Code

   #include <sipapi.h>
   #include <htmlctrl.h>
    
   #define IDC_HTMLVIEW     10 
   #define MAX_LOADSTRING   100
   

8. Add the following global variable at the top of the HTMLCONTROL.CPP file:
   Copy Code

   HWND     hwndCB; // The command bar handle
   HWND     hwndHTML;      // HTML Control
    
   static SHACTIVATEINFO s_sai;
   

1. Add the following function at the end of the HTMLCONTROL.CPP file:
   Copy Code

   HWND CreateHTMLControl(HWND hwndParent)
   {
       RECT rc;
       DWORD dwStyle = WS_CHILD | WS_VISIBLE | WS_VSCROLL | WS_CLIPSIBLINGS;
    
       if(!InitHTMLControl( hInst ))
           MessageBox(hwndParent, TEXT("Unable to initialize HTML control"), 
               TEXT("Error"), MB_OK);
    
       GetClientRect (hwndParent, &rc);
    
       return CreateWindow (DISPLAYCLASS, NULL, dwStyle, rc.left, rc.top, 
                rc.right - rc.left, rc.bottom - rc.top, hwndParent, 
                (HMENU)IDC_HTMLVIEW, hInst, NULL);
   }
   

2. Call the CreateHTMLControl() function after the call to CreateRpCommandBar () in the WM_CREATE processing code, and pass the hWnd of the application window as the hwndParent parameter. Your WM_CREATE code should now look like this (new code is in red):
   Copy Code

   case WM_CREATE:
       hwndCB = CreateRpCommandBar(hWnd);
       hwndHTML = CreateHTMLControl(hWnd);
       SetFocus (hwndHTML);
       break;
   

3. Add the following code to the message switch of the WndProc() function (this will cause the HTML control to resize any time the parent window is resized):
   Copy Code

   case WM_SIZE:
       if(IsWindow(hwndHTML))
           SetWindowPos(hwndHTML, 0, 0, 0, LOWORD(lParam), 
               HIWORD(lParam) - MENU_HEIGHT, 
               SWP_NOZORDER | SWP_NOMOVE);
       break;
   

Populating the HTML Viewer Control

Before populating the list control with HTML code, you should decide if you want to work with Unicode or single-byte text. Depending on which one you choose, you will send either the DTM_ADDTEXT or the DTM_ADDTEXTW message to the control. The one you use determines the format of text parameters in notification messages sent from the control to your application. I'll assume you want to use Unicode, because that is the default character set for most Pocket PC character strings.

To set the contents of the HTML Viewer Control, you need to:

1. First clear the contents of the HTML Viewer Control by sending it a WM_SETTEXT message and an empty string.
2. Send the HTML code to the HTML Viewer Control in one or more DTM_ADDTEXTW messages.
3. Send the HTML Viewer Control a DTM_ENDOFSOURCE message.

The HTML code can come from a file, your code, or the Internet. To keep it simple, let's just generate the code in your sample project. Add the following code to your WM_CREATE message handler, after the SetFocus() line and before the break (the optional DTM_ENABLESHRINK message tells the control to attempt to fit the contents of the HTML page to the control width if possible):

Copy Code

BOOL    fFitToPage = TRUE;
PostMessage(hwndHTML, DTM_ENABLESHRINK, 0, fFitToPage);
 
SendMessage(hwndHTML, WM_SETTEXT, 0, (LPARAM)"");
SendMessage(hwndHTML, DTM_ADDTEXTW, FALSE, (LPARAM)TEXT("<HTML><TITLE>Test</TITLE>"));
SendMessage(hwndHTML, DTM_ADDTEXTW, FALSE, (LPARAM)TEXT("<BODY><P>"));
SendMessage(hwndHTML, DTM_ADDTEXTW, FALSE, (LPARAM)TEXT("<h1>Heading</h1>Normal Text<BR>"));
SendMessage(hwndHTML, DTM_ADDTEXTW, FALSE, (LPARAM)TEXT("<A HREF=\"www.voscorp.com\"><IMG SRC=\"\\Pic.gif\"></A>"));
SendMessage(hwndHTML, DTM_ADDTEXTW, FALSE, (LPARAM)TEXT("</BODY></HTML>"));
SendMessage(hwndHTML, DTM_ENDOFSOURCE, 0, (LPARAM)NULL);

You will now have a control that contains the text (including the header style) from your HTML code, but if you run the application at this point you will notice that the image (\PIC.GIF ) is not displayed (as shown in Figure 2). To display images, your application needs to load the images in response to a notification event from the HTML Viewer Control.

Figure 2: HTML View Control without images.

Processing HTML Viewer Control Events

There are several notification messages from the HTML Viewer Control that you may wish to process. If you have no need for images, you may choose not to process the NM_INLINE_IMAGE message. Likewise, you may not want to process sounds, so you may choose not to process the NM_INLINE_SOUND message. Of course, anything you choose not to process will not be available to your users via the control.

To avoid having the (rather lengthy) code to handle the loading of GIF, JPG, BMP, and other code using IMGDECMP, this code assumes you are using the free VOImage class libraries from Virtual Office Systems, Inc to do the dirty work. To add image processing to your code, follow these steps:

1. Add IMGDECMP.LIB to your list of library files to link to by selecting Project , then Settings , and then Link from the menu.

   Note that SHLoadImageFile and SHLoadImageResource should be used for Windows Mobile-based devices.

2. Select All Configurations from the drop-down list box, and add IMGDECMP.LIB to the Object/Library Modules edit box.
3. Add the VOIMAGE.CPP and VOIMAGE.H files to your project by selecting Project , then Add to Project , and then Files from the menu.
4. Add a global CVOImage class variable to the HTMLCONTROL.CPP file like this:
   Copy Code

   HWND             hwndHTML;               // HTML Control
   CVOImage          img;          // Interface to IMGDECMP.DLL
    
   static SHACTIVATEINFO s_sai;
   

5. Add a WM_NOTIFY message to your window message procedure like this:
   Copy Code

   case WM_NOTIFY:
       switch(wParam) 
       {
           case IDC_HTMLVIEW:
           {
               NM_HTMLVIEW* pnm = (NM_HTMLVIEW*)lParam;
     
           switch(pnm->hdr.code) 
           {
               case NM_INLINE_IMAGE:
               {
                   HDC dc = GetDC(hWnd);
                   if(img.Load(dc, pnm->szTarget))
                   {
                       INLINEIMAGEINFO      imgInfo;
                       imgInfo.dwCookie = pnm->dwCookie;
                       imgInfo.iOrigHeight = img.GetHeight();
                       imgInfo.iOrigWidth = img.GetWidth();
                       imgInfo.hbm = img.Copy();    
                       imgInfo.bOwnBitmap = FALSE;
                       SendMessage(hwndHTML, DTM_SETIMAGE, 0, 
                            (LPARAM)&imgInfo);   
                   }
                   else
                       SendMessage(hwndHTML, DTM_IMAGEFAIL, 0, 
                               pnm->dwCookie);
                   ReleaseDC(hWnd, dc);
                   break;
                   } // end case NM_INLINE_IMAGE:
               } // end switch(pnm->hdr.code)
           } // End case IDC_HTMLVIEW:
       } // End switch(wParam)
   break;
   

   Note that we pass a copy of the HBITMAP to the DTM_SETIMAGE message by using the Copy() method of the VOImage object and setting bOwnBitmap to TRUE. This allows us to reuse the same VOImage object for multiple image files, and instructs the control to clean up the HBITMAP objects we have passed to it instead of relying on the calling code to do the cleanup.

6. As desired, add case handlers for the NM_INLINE_SOUND message, NM_HOTSPOT (received when the user clicks on an HTML link), and any other HTML Viewer Control notification message type. You may want to process the NM_HOTSPOT message, displaying different HTML code depending on what was clicked.

Conclusion

The HTML Viewer Control allows you to include the rich interfaces to your application that users are used to seeing in Web browsers. What you do with the control is of course up to you, but as you can see in Figure 3, you can have quite an impressive interface with very little coding.

Figure 3: HTML View Control with images.