InformIT: Visual C++ 6 Unleashed > Using MFC and Dynamic HTML

Table of Contents

Using MFC and Dynamic HTML

As an example of using the CHtmlView class, the CD-ROM that accompanies this book includes WWWTest, an example SDI project built using MFC AppWizard. The initial project was built just like any other SDI project, with the following exception:

In AppWizard step six, select the View class in the Class list box, in this case, CWWWTestView.
Select CHtmlView from the Base Class combo box; this changes the base class of the view class to CHtmlView instead of CView.
Click the Finish button to end the AppWizard process and display the New Project Information dialog box.
Click OK to generate the code for the WWWTest project.

Simple Navigation Using `CHtmlView`

When the WWWTest project is generated by MFC AppWizard, a default implementation of the OnInitialUpdate function in the CWWWTestView class is provided, as shown in Listing 12.5. This function will navigate to the Microsoft Visual C++ home page, and display the page in the view.

Example 12.5. Navigating to an Internet HTML Document

void CWWWTestView::OnInitialUpdate()
{
    CHtmlView::OnInitialUpdate();
    Navigate2(_T("http://www.microsoft.com/visualc/"),NULL,NULL);
}

If you're building the project from scratch, you can build the initial project and run it without making any changes. By default, the program will attempt to load the Visual C++ web page over the Internet. Once loaded, you can use the page to begin navigating throughout the Microsoft Web site, just as if you were using Internet Explorer or any other browser.

Navigating to a Source File

You can also use classes derived from CHtmlView to interact with Dynamic HTML documents located on a local hard drive. To navigate to a file on the local machine, pass an URL referring to the file to the Navigate or Navigate2 functions.

Listing 12.6. contains a Dynamic HTML page that includes a button control. When the button is clicked, some of the text on the page is hidden. This page is included on the CD-ROM that accompanies this book as Simple.htm in the WWWTest project directory.

Example 12.6. An Interactive Dynamic HTML Page

<html>
<body>

This example uses DHTML to hide text that has the span attribute.

<!— Define the button control -->
<p>
    <button style="cursor:hand"
        onclick="onOffToggle(document.all.toggledLine)"
        onmouseover="onEnterHighlight(this)"
        onmouseout="onExitHighlight(this)"
    >DHTML Toggle
    </button>
</p>

Click the button to hide the blue text below.<br>

<!— Define a span as the first part of a line of text -->
<span style="color:blue" id=toggledLine>
        Should I stay or should I go?
</span>

I'm staying no matter what!<br>

<script>
<!— onOffToggle: toggles an element's display property -->
function onOffToggle(theElement)
{
    if(theElement.style.display == "none"){
        theElement.style.display = "";
    }else{
        theElement.style.display = "none";
    }
}

<!— onEnterHighlight: highlights an element -->
function onEnterHighlight(theElement)
{
    theElement.style.color = 'red';
}

<!— onExitHighlight: clears highlight from an element -->
function onExitHighlight(theElement)
{
    theElement.style.color = 'black';
}

</script>

</body>
</html>

To modify the WWWTest project so that Simple.htm is loaded when its view is initially displayed, replace the OnInitialUpdate function in CWWWTestView with the function provided in Listing 12.7. Before executing the program, copy the Simple.htm file to the C:\directory.

Example 12.7. Navigating to a Dynamic HTML Document on the Local Machine

void CWWWTestView::OnInitialUpdate()
{
    CHtmlView::OnInitialUpdate();
    Navigate2("c:\\Simple.htm");
}

Build and run the WWWTest project. Figure 12.6 shows the WWWTest project displaying the Simple.htm page.

Figure 12.6 Displaying a Dynamic HTML page in an MFC application.

Navigating to the User's Home Page

In addition to the navigation capabilities discussed earlier, the CHtmlView class allows you easy access to configuration information used by Internet Explorer. For example, you can navigate to the home page defined by the user by calling the CHtmlView::GoHome member function.

To enable WWWTest to navigate to the predefined home page, you must first add a new menu item to the WWWTest project. Add a menu item to the View menu, using the values from Table 12.7.

Table 12.7. A New Menu Item for the View Menu

Menu ID	Caption	Event	Function Name
`ID_VIEW_HOME`	`&Home`	`COMMAND`	`OnViewHome`

Use the values from Table 12.7 to add a menu handling function to the CWWWTestView class named OnViewHome. Add the source code from Listing 12.8 to the OnViewHome function.

Example 12.8. Navigating to the User's Home Page

void CWWWTestView::OnViewHome()
{
    GoHome();
}

Build and run the WWWTest project. Navigate to the user's home page by selecting View|Home from the WWWTest menu.

Using a Dynamic HTML Resource

As discussed earlier, a Dynamic HTML document can be stored as one of your application's resources. Storing a page as a resource often makes it easier to use in your application because you can refer to the resource by a symbol name instead of providing a path or location.

You add an HTML resource to a project much like any other resource:

Right-click the resource tree and select Insert from the shortcut menu. An Insert Resource dialog box will be displayed.
Select HTML as the resource type and click New to close the dialog box.
A blank HTML document will be added to the resource tree, and the document will be opened for editing.

To modify a property for an HTML resource such as the Resource ID, right-click anywhere in the HTML document while it's loaded in the editor, and select Properties from the shortcut menu.

Add a new HTML resource to the WWWTest project, using the steps outlined previously. Name the resource IDR_VISUALC_LINKS. Add the source code from Listing 12.9 to the resource.

Example 12.9. An HTML Page That Displays Useful Links for Visual C++ Programming

<html>
<body>

<h3>Useful Visual C++ Programming Links</h3>
<br>

<ul>

<li><a href="http://msdn.microsoft.com/developer">
        Microsoft Developer's Network
    </a>
<li><a href="http://msdn.microsoft.com/visualc">
        Microsoft Visual C++ Start Page
    </a>
<li><a href="http://www.mcp.com">
        Macmillan Computer Publishing
    </a>
<li><a href="http://www.numega.com">
        NuMega Technologies
    </a>
<li><a href="http://www.vcdj.com">
        Visual C++ Developer's Journal
    </a>
<li><a href="http://www.codevtech.com">
        Codev Technologies
    </a>

</ul>

</body>
</html>

To enable WWWTest to load the HTML resource, you must first add another menu item to the WWWTest project. Add a new menu item to the View menu, using the values from Table 12.8.

Table 12.8. A New Menu Item for the View Menu

Menu ID	Caption	Event	Function Name
`ID_VIEW_LINKS`	`&Links`	`COMMAND`	`OnViewLinks`

Use the values from Table 12.8 to add a menu handling function to the CWWWTestView class named OnViewLinks. Add the source code from Listing 12.10 to the OnViewLinks function.

Example 12.10. Navigating to a Dynamic HTML Resource

void CWWWTestView::OnViewLinks()
{
    LoadFromResource(IDR_VISUALC_LINKS);
}

Build and run the WWWTest project. The contents of the HTML resource can be displayed by selecting View|Links from the WWWTest menu, as shown in Figure 12.7.