Interesting post on getting Mozilla XUL running inside Internet Explorer by Jean-Yves Cronier (English)

Interesting post on getting Mozilla XUL running inside Internet Explorer by Jean-Yves Cronier

posted on Sunday, September 12, 2004 11:46 AM

Let the crossover continue! Jean-Yves Cronier left a comment on my old post about HTC inside Mozilla, he points to a post he left in the XULPlanet forum showing a technique to get XUL behaviours running inside of Internet Explorer using a simple HTC behaviour as a sort of interface layer. This is again, pretty cool - and would be even cooler if it could be extended to allow complete translation between all IE HTC behaviours and their XUL equivalent! Anyway, since this is posted on a forum I know nothing abot, I'll repeat the post here:

I've reflected on possibilities offered by famous behavior HTC under IE. I think it would be perhaps possible to interpret a small part of specifications of XUL.

A little sample:

index.xul :

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet type="text/css" href="xul.css" media="all"?>
<window id="example-window" title="Example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<label control="some-text" value="Enter some text"/>
<textbox id="some-text" value="toto"/>
<label control="some-password" value="Enter a password"/>
<textbox id="some-password" type="password" maxlength="8"/>
<menulist label="Bus">
<menupopup>
<menuitem label="Car"/>
<menuitem label="Taxi"/>
<menuitem label="Bus" selected="true"/>
<menuitem label="Train"/>
</menupopup>
</menulist>
</window>

xul.css :


Code:
label{behavior:url(label.htc)} menuitem{behavior:url(menuitem.htc)} menulist{behavior:url(menulist.htc)} menupopup{behavior:url(menupopup.htc)} textbox{behavior:url(textbox.htc)} window{behavior:url(window.htc)}

label.htc :


Code:
<public:htc urn="window"> <public:attach event="ondocumentready" handler="build" /> <public:property name="value" /> <script type="text/javascript"> function build() </script> </public:htc>

menuitem.htc :

Code:

<public:htc urn="window">
<public:attach event="ondocumentready" handler="build" />
<public:property name="id" />
<public:property name="label" />
<public:property name="value" />
<script type="text/javascript">
function build() {
var option = document.createElement("option");
var style=this.currentStyle;
option.setAttribute("id",id);
if(this.id!=null){option.setAttribute("id",this.id);}
if(this.value!=null){option.setAttribute("value",this.value);}
if(label!=null)
for(var prop in style){option.style[prop]=style[prop];}
this.outerHTML=option.outerHTML;
}
</script>
</public:htc>

menulist.htc :

Code:

<public:htc urn="window">
<public:attach event="ondocumentready" handler="build" />
<public:property name="id" />
<script type="text/javascript">
function build() {
var select = document.createElement("select");
var style=this.currentStyle;
select.setAttribute("id",id);
if(id!=null){
   select.setAttribute("id",this.id);
   select.setAttribute("name",this.id);
}
select.innerHTML=this.innerHTML;
for(var prop in style){
   select.style[prop]=style[prop];
}
select.style.width="100%";
this.outerHTML=select.outerHTML;
}
</script>
</public:htc>

menupopup.htc :

Code:

<public:htc urn="window">
<public:attach event="ondocumentready" handler="build" />
<public:property name="id" />
<public:property name="label" />
<public:property name="value" />
<script type="text/javascript">
function build() {
var optgroup = document.createElement("optgroup");
var style=this.currentStyle;
if(this.id!=null){optgroup.setAttribute("id",this.id);}
if(this.label!=null)
optgroup.innerHTML=this.innerHTML;
for(var prop in style){optgroup.style[prop]=style[prop];}
this.outerHTML=optgroup.outerHTML;
}
</script>
</public:htc>

textbox.htc :

Code:

<public:htc urn="window">
<public:attach event="ondocumentready" handler="build" />
<public:property name="id" />
<public:property name="value" />
<public:property name="type" />
<public:property name="maxlength" />
<script type="text/javascript">
function build() {
var input = document.createElement("input");
var style=this.currentStyle;
input.setAttribute("id",id);
if(value!=null){input.setAttribute("value",value);}
if(type!=null){input.setAttribute("type",type);}
if(maxlength!=null){input.setAttribute("maxlength",maxlength);}
for(var prop in style){input.style[prop]=style[prop];}
input.style.width="100%";
input.style.cursor="text";
input.style.borderStyle="inset";
input.style.borderColor="ActiveBorder";
input.style.borderWidth="2px";
input.style.backgroundColor="#FFFFFF";
input.style.paddingLeft="2px";
this.outerHTML=input.outerHTML;
}
</script>
</public:htc>

window.htc :


Code:
<public:htc urn="window"> <public:attach event="ondocumentready" handler="build" /> <public:property name="title" /> <script type="text/javascript"> function build() </script> </public:htc>

It's Funny ! Is'nt it ? Very Happy

The goal of a project like this on isn't to rise Internet Explorer but just to show a little overview to other ones (who haven't got Mozilla Web Browser) the technologies available with Mozilla Framework