Dom in WPF/E

Microsoft's official website has recently failed due to optical cable disconnection, so I read WPF/e when I have time. A little bit of it, I remember it on my blog.
1. aghost. JS File
Aghost. JS file, mainly known as activexobject (for IE), this activexobject is used to run the WPF/e page, it is like running flash, you must first install a flash ocx (also known as activexobject. The following is a packaged activexobject. In the application, you can reference this aghost. js file. In addition, there are some exception handling methods.Code. In fact, this is not the case. It is also possible to directly put the code in a page.
VaR hosts = new object ();
Function aghost (hostelementid, ID, width, height, backgroundcolor, sourceelement, source, windowlessmode, framerate, errorhandler ){
VaR hostelement = Document. getelementbyid (hostelementid );
VaR innerhtml;

// Assign error handler

If (errorhandler = NULL ){

Errorhandler = "aghost_errorhandler ";

}

// Ie Detection
If (navigator. appversion. indexof ('msie ')! =-1 )){

Try {

VaR wpfe = new activexobject ("agcontrol. agcontrol.0.8 ");

Innerhtml = '<Object ID = "' + ID + '" width = "' + width + '" Height = "' + height + '" classid = "CLSID: 32c73088-76ae-40f7-ac40-81f62cb2c1da "> ';

If (sourceelement! = NULL ){
Innerhtml + = '<Param name = "sourceelement" value = "' + sourceelement + '"/> ';
}
If (source! = NULL ){
Innerhtml + = '<Param name = "Source" value = "' + Source + '"/> ';
}
If (framerate! = NULL ){
Innerhtml + = '<Param name = "maxframerate" value = "' + framerate + '"/> ';
}
If (errorhandler! = NULL ){
Innerhtml + = '<Param name = "onerror" value = "' + errorhandler + '"/> ';
}
If (backgroundcolor! = NULL ){
Innerhtml + = '<Param name = "backgroundcolor" value = "' + backgroundcolor + '"/> ';
}
If (windowlessmode! = NULL ){
Innerhtml + = '<Param name = "windowlessmode" value = "' + windowlessmode + '"/> ';
}
Innerhtml + = '<\/Object> ';

}

Catch (e ){

Innerhtml = '<Div width = "' + width + '" Height = "' + height + '"> ';
Innerhtml + = 'you must install "WPF/E" (codename) December 2006 CTP to view this page :';
Innerhtml + = '<a href = "http://go.microsoft.com/fwlink? Linkid = 77792 & clcid = 0x409 "> get" WPF/e! "</A> ';
Innerhtml + = '</div>'

}
}

// FF/Windows Detection



Else if (window. geckoactivexobject & navigator. useragent. indexof ('windows ')! =-1 )){

Innerhtml = '<embed id = "' + ID + '" width = "' + width + '" Height = "' + height + '" pluginspage = "http://go.microsoft.com/fwlink? Linkid = 77792 & clcid = 0x409 ';
If (source! = NULL ){
Innerhtml + = '"Source ="' + source;
}
If (sourceelement! = NULL ){
Innerhtml + = '"sourceelement ="' + sourceelement;
}
If (framerate! = NULL ){
Innerhtml + = '"maxframerate ="' + framerate;
}
If (errorhandler! = NULL ){
Innerhtml + = '"onerror ="' + errorhandler;
}
If (backgroundcolor! = NULL ){
Innerhtml + = '"backgroundcolor ="' + backgroundcolor;
}
If (windowlessmode! = NULL ){
Innerhtml + = '"windowlessmode ="' + windowlessmode;
}
Innerhtml + = '"type =" application/Ag-plugin "/> ';

}

// Mac Detection
Else if (navigator. useragent. indexof ("Macintosh ")! =-1 ){

If (navigator. useragent. indexof ("Firefox/1.5.0.8 ")! =-1 | navigator. useragent. indexof ("safari ")! =-1 ){


Innerhtml = '<embed id = "' + ID + '" width = "' + width + '" Height = "' + height + '" pluginspage = "http://go.microsoft.com/fwlink? Linkid = 77793 & clcid = 0x409 ';
If (source! = NULL ){
Innerhtml + = '"Source ="' + source;
}
If (sourceelement! = NULL ){
Innerhtml + = '"sourceelement ="' + sourceelement;
}
If (framerate! = NULL ){
Innerhtml + = '"maxframerate ="' + framerate;
}
If (errorhandler! = NULL ){
Innerhtml + = '"onerror ="' + errorhandler;
}
If (backgroundcolor! = NULL ){
Innerhtml + = '"backgroundcolor ="' + backgroundcolor;
}
If (windowlessmode! = NULL ){
Innerhtml + = '"windowlessmode ="' + windowlessmode;
}
Innerhtml + = '"type =" application/Ag-plugin "/> ';

// Disable safari caching

// For more information, see http://developer.apple.com/internet/safari/faq.html#anchor5

Innerhtml + = "<IFRAME Style = 'visibility: Den den '/> ";

}

Else {
Innerhtml = '<Div width = "' + width + '" Height = "' + height + '"> ';
Innerhtml + = 'you must be running Firefox 1.5.0.8 to view "WPF/E" content on this page .';
Innerhtml + = '<a href = "http://go.microsoft.com/fwlink? Linkid = 78984 & clcid = 0x409 "> visit the" WPF/E "Product site for more details. </a> ';
Innerhtml + = '</div>'
}
}

Hostelement. innerhtml = innerhtml;
}

Function aghost_errorhandler (line, Col, HR, string ){
If (line! = 0 & Col! = 0)
{
VaR STR = "(" + LINE + "," + Col + "):" + String + "\ n ";
STR + = "hresult:" + HR;
Alert (STR );
}
}
2. An HTML file
In this file, first reference the previous aghost. JS, followed by writing several JS functions. The first two are the colors of the fill sender, and the third is to display the coordinates of the current mouse in an existing one, the name is gswtextblock. Var control = Document. getelementbyid ("wpfecontrol"); it is often used in JS files. Its usage is the same as before. Here, wpfecontrol is the name of the above WPF/e control activexobject. New aghost ("...... ") Is to call the function in the aghost. js file. For specific functions, see the aghost. js file.
<HTML> <Title> display date </title>
<SCRIPT type = "text/JavaScript" src = "aghost. js"> </SCRIPT>
<SCRIPT type = "text/JavaScript">
Function onmouseenter (sender ){
Sender. Fill = "Coral ";
}
Function onmouseleave (sender ){
Sender. Fill = "red ";
}
Function onmousemove (sender, eventargs ){
VaR x_grey = eventargs. X;
VaR y_grey = eventargs. Y;
Setcaption ("x =" + x_grey + '; y =' + y_grey );
}
Function setcaption (captionstring ){
Var control = Document. getelementbyid ("wpfecontrol ");
Control. findname ("gswtextblock"). Text = captionstring;
}
</SCRIPT>
</Head>
<Body bgcolor = "teal">
<Div id = "wpfecontrolhost">
<SCRIPT type = 'text/JavaScript '>
New aghost ("wpfecontrolhost", // hostelementid (HTML element to put WPF/E
// ActiveX control inside of -- usually a <div>)
"Wpfecontrol", // ID of the WPF/e ActiveX control we create
"600", // width
"600", // height
"# Ff999999", // background color
Null, // sourceelement (name of script tag containing XAML)
"XAML/slideshow. XAML", // source file
"False", // iswindowless
"24", // maxframerate
Null); // onerror handler (method name -- no quotes)
</SCRIPT>
</Div>
</Body> 3. a XAML File
Obviously, here is a reference to a "canvas" template with an ellipse in the middle. "mouseenter", "mouseleaver", and "mousemove" are ellipse events, call the JS functions in the preceding HTML to implement their respective functions. There is also a textblock used to display the horizontal and vertical coordinates of the mouse over ellipse.
<Canvas
Xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml">
<Ellipse
Canvas. Left = "120"
Mouseenter = "javascript: onmouseenter"
Mouseleave = "javascript: onmouseleave"
Mousemove = "javascript: onmousemove"
Height = "200" width = "100"
Fill = "teal"/>
<Textblock
X: Name = "gswtextblock" canvas. Left = "220"
Fontsize = "16"/> </canvas>

Finally, let's take a look at the result: (but I didn't see the local mouse. Sorry)