Create a web-style graphical user interface in MFC programming (1)

 

ArticleIntroduction

This article will show you how to compileProgramCreate a web-style graphical user interface. The "application with web-style Gui" I mentioned here means that all or part of the user interface is in HTML format. The following figure shows a web-style session window.

When I try to use this web-Type User Interface in a program, I face the following two problems:

1. How to handle Web interface events and messages (that is, intercepting DHTML interface events and processing them by background programs)

2. How to make the background program interact with the web interface elements (that is, to allow the background program to modify and refresh DHTML)

To solve these two thorny problems, msdn recommends that you use the dhtml com component. But I don't think this is a good idea. Especially for the simple MFC user interface mode, in this mode, events are mapped to the control class for processing.

So I wrote this article to explain how to quickly create a web-style user interface and make it work with the program background. In summary:

◎ Use onbeforenavigate2 () to receive Web interface events.

◎ ThroughCodeAdd corresponding script functions to implement interface interaction with background programs.

In this article, I will introduce three classes: chtmldialog,Chtmlscript,Chtmlctrl and how to use them to create web-style user interfaces.

 

 

Display HTML format with the chtmlview class

We need to make some changes to the HTML code in the program interface to make them look a little different from what we see in IE.

It is easy to display the HTML format in the MFC program. You only need to call the chtmlview class to complete this task. First, we need to create a new "MFC Appwizard (exe)" project, select the single-document structure view, and open multi-document view structure support. Create and set the chtmlview class to the base class in Class Wizard. Finally, add HTML pages to system resources.

To make our web interface look more like a program interface than an IE window, you must make some necessary modifications to the HTML page code.

Set the HTML background color to the standard Windows application background color.

Disable the right-click menu of the HTML page, unless it is used for the right-click menu in the editbox box.

The text in the HTML page is prohibited from being put in the mouse box. Similarly, the text in the editbox box is not allowed.

It is prohibited to change the form when the mouse pointer crosses static text. In IE, when the mouse pointer crosses static text, it will become a "work" shape, as is the case in the editbox box. This phenomenon should be avoided in Windows applications.

The following code implements the above four requirements:

& Lt; script language = <SPAN class = "CPP-string"> "jscript" </span> & gt; <SPAN class = "CPP-comment"> // forbid user's mouse selecting for the content </span> <SPAN class = "CPP-comment"> // (allow text selection in editbox only) </span> <SPAN class = "CPP-keyword"> function </span> onselect1 () {<SPAN class = "CPP-keyword"> If </span> (window. event. srcelement. tagname! = <SPAN class = "CPP-string"> "input" </span>) {window. event. returnvalue = <SPAN class = "CPP-keyword"> false </span>; window. event. cancelbubble = <SPAN class = "CPP-keyword"> true </SPAN> ;}} <SPAN class = "CPP-comment"> // forbid ie context menu </span> <SPAN class = "CPP-comment"> // (allow in editbox only) </span> <SPAN class = "CPP-comment"> // (if the real context menu must be shown-advance hosts hosting </span> <Span Class = "CPP-comment"> // interfaces must be used) </span> <SPAN class = "CPP-keyword"> function </span> oncontextmenu () {<SPAN class = "CPP-keyword"> If </span> (window. event. srcelement. tagname! = <SPAN class = "CPP-string"> "input" </span>) {window. event. returnvalue = <SPAN class = "CPP-keyword"> false </span>; window. event. cancelbubble = <SPAN class = "CPP-keyword"> true </span>; <SPAN class = "CPP-keyword"> return </span> <SPAN class = "CPP-keyword"> false </SPAN> ;}} <SPAN class = "CPP-comment"> // install context menu and Mark handlers on HTML loading. </span> <SPAN class = "CPP-comment"> // </span> <SPAN class = "CPP-keyword"> function </span> onload () {<SPAN class = "CPP-comment"> // forbid cursor change (partition t "input" </span> <SPAN class = "CPP-comment"> // entry box and "A" hyperlink) for HTML text. </span> <SPAN class = "CPP-keyword"> var </span> objs = document. all; <SPAN class = "CPP-keyword"> for </span> (I = <SPAN class = "CPP-literal"> 0 </span>; I <; objs. length; I ++) <SPAN class = "CPP-comment"> // "input" entry box D "A" hyperlink </span> <SPAN class = "CPP-keyword"> If </span> (objs (I). tagname! = <SPAN class = "CPP-string"> "input" </span> & amp; objs (I). tagname! = <SPAN class = "CPP-string"> "A" </span>) objs (I ). style. cursor = <SPAN class = "CPP-string"> "default" </span>; <SPAN class = "CPP-comment"> // event handler-Content Selection </span> document. onselectstart = onselect1; <SPAN class = "CPP-comment"> // event handler-context menu </span> document. oncontextmenu = oncontextmenu ;}& lt;/script & gt; & lt; body onload = <SPAN class = "CPP-string"> "onLoad ();" </span> leftmargi N = <SPAN class = "CPP-literal"> 0 </span> topmargin = <SPAN class = "CPP-literal"> 0 </span> rightmargin = <SPAN class = "CPP-literal"> 0 </span> bottommargin = <SPAN class = "CPP-literal"> 0 </span> style = <SPAN class = "CPP-string"> "background-color: buttonface; "</span> & gt; <SPAN class =" CPP-comment "> // The HTML background color will be as in Windows applications </span>...

with the above method, we can use HTML to implement our program interface. Menus, tool bars, and static lines are retained. After all, we do not have to force the use of all traditional controls. In this way, we have gained greater flexibility.