mostlylucid

STATIC ARCHIVE of mostlylucid.co.uk of old
posts - 916, comments - 758, trackbacks - 11

My Links

News

Archives

Post Categories

Misc. Coding

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

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(){this.innerHTML=this.value;}
</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){option.innerHTML=label;}
   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.label;}
   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(){window.status=this.title;}
</script>
</public:htc>



It's Funny ! Is'nt it ?

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
  

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

Feedback

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

I've used HTCs in a number of apps and there are some performance problems I have found. Instead, use the client-side XML capability of IE6, but use XSLT as the stylesheet instead of CSS...

Top of the XUL file...

<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet type="text/xsl" href="xul.xsl"?>

Then, point it to an XSL to convert the XML to an HTML representation...

xul.xsl

<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<xsl:template match="/">
<xsl:apply-templates/>
</xsl:template>

<xsl:template match="xul:window">
<html>
<head>
<title><xsl:value-of select="@title"/></title>
<link rel="stylesheet" href="theme.css" type="text/css"/>
</head>
<body class="xul-window" style="{@style}">
<xsl:choose>
<xsl:when test="translate(@orient, 'HORIZONTAL', 'horizontal') = 'horizontal'">
<table style="{@style}" class="{@class} xul-hbox"><tr><td><xsl:apply-templates/></td></tr></table>
</xsl:when>
<xsl:otherwise>
<table style="{@style}" class="{@class} xul-vbox"><tr><td><xsl:apply-templates/></td></tr></table>
</xsl:otherwise>
</xsl:choose>
<script>window.alert(document.body.outerHTML);</script>
</body>
</html>
</xsl:template>

<xsl:template match="xul:label">
<label for="{@control}" class="{@class} xul-description"><xsl:apply-templates/></label>
</xsl:template>

<xsl:template match="xul:textbox">
<xsl:choose>
<xsl:when test="translate(@multiline, 'TRUE', 'true') = 'true'">
<textarea id="{@id}" rows="{@rows+1}" cols="{@cols}" style="{@style}" class="{@class} xul-textbox"><xsl:value-of select="@value"/></textarea>
</xsl:when>
<xsl:otherwise>
<input id="{@id}" type="{@type}" value="{@value}" maxlength="{@maxlength}" style="{@style}" class="{@class} xul-textbox"/>
</xsl:otherwise>
</xsl:choose>
</xsl:template>

... ETC ...
</xsl:stylesheet>

----
I think if we create a master XSLT that handles all XUL elements (and the box positioning), we can run XUL in IE. The hardest bit will be getting XBL to integrate (since it is bound through CSS) also, each of the more complicated controls (like trees) will take some effort. Also, what about XPCOM, etc? That is a tough one in just regular IE.

Jason Kichline
12/14/2004 4:00 AM | Don't use HTCs

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

Good Idea ! :-)
1/25/2005 1:01 AM | Jean-Yves CRONIER
Comments have been closed on this topic.

Powered by: