Click here to Skip to main content
15,892,005 members
Articles / Web Development / HTML

Creating Web-style GUI in MFC applications

Rate me:
Please Sign up or sign in to vote.
4.85/5 (41 votes)
13 Jul 20049 min read 279.6K   11.1K   247  
Creating Web-style GUI and easily managing it from MFC code. Creating dialogs based on DHTML, receiving events from DHTML to MFC, and calling JScript functions from MFC.
<HTML id=dlgAbout>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<STYLE>
.NonClientBackground {  background-color: buttonface;}
</STYLE>

<head>
<TITLE>
Using Hide elements
</TITLE>

<SCRIPT LANGUAGE="JScript">

var Val1_checked=0;
var Val2_selected =0;


function fn1(innerText) {
	id2.innerText = innerText
	//Btn1.value = winH(); //document.body.clientHeight; //window.innerWidth;  // //document.all("Btn1").value
	//var winHeight = window.innerHeight;    
	//dlgAbout.style.pixelHeight = 300
        //dlgAbout.style.pixelWidth = 400
	//copyrightText.innerText = document.body.parentElement.outerHTML;
	//copyrightText.innerText = document.body.parentElement.outerHTML;

}

function onLoad()
{
 // 
	// var oPopup = window.createPopup();
    // The variables "lefter" and "topper" store the X and Y coordinates
    // to use as parameter values for the following show method. In this
    // way, the popup displays near the location the user clicks. 
    // document.body.id_ok.onclick = fn1;
	


}

function selectView( nView) {

	if ( nView==1)
	id2.innerHTML=view1.innerHTML;
	if ( nView==2)
	id2.innerHTML=view2.innerHTML;
}

</SCRIPT>
</head>


<BODY onload="onLoad();" leftmargin=0 topmargin=0 rightmargin=0 bottommargin=0 
STYLE="width: 400; height: 250; FONT: 8pt Tahoma, MS Shell Dlg; font-size: 8">

<TABLE border=0 class='NonClientBackground' 
style="width: 400px; height: 250px;"
cellpadding=0 cellspacing=0
>
<tr> 
	<td valign=top> 
	<b> Switch the view </b>
		<UL>
		<LI><A HREF="javascript:selectView(1);">CheckBox's</A> <br>
		<LI><A HREF="javascript:selectView(2);">Action</A>
		</UL>
	<td valign=top id=id2 
	style="border-left-style:ridge; width:250px; height:150px;"> 
		<br><br>Select one of the Item to see it content
		


</TABLE>


<div id=view1 
style="display:none;">
<TABLE cellpadding=0 cellspacing=0 width=100%>
<tr height=60> 
 <td valign=top bgcolor=gray> 
 <font color=white> <b>CheckBox Show</b> <br >
 <font size=2pt >This View demonstrate various checkboses 

<tr height=20> <td>
<tr height=40>
  <td> <input type=checkbox value=chk1>Enable 32*32 bitmaps
<tr>
  <td> recover behaviour: 
		<select size=1 >
		<option> None
		<option> Fast
		<option> 
		</select>
		
 

 
</TABLE>
</div>


<div id=view2 
style="display:none;">
<TABLE cellpadding=0 cellspacing=0 width=100%>
<tr height=60> 
 <td valign=top bgcolor=gray> 
 <font color=white> <b>Actions Show</b> <br >
 <font size=2pt >Here user can generate some events to MFC:: code 

<tr height=20> <td>
<tr height=40>
  <td> 
	<INPUT type=BUTTON value="Send email" id="okButton" onClick="okButtonClick()" style="width:150px">
<tr>
  <td>	
 

 
</TABLE>
</div>



</BODY>
</HTML>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
Moldova (Republic of) Moldova (Republic of)
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions