HTML Code In XUL

At the cost of an additional namespace definition, you can include HTML code in your XUL interface:

xmlns: html="http://www.w3.org/1999/xhtml"

This attribute is added to the attributes of window, and thus stays besides the namespace for XUL.

The global format being XML, the tags without contents are finished by "/>" as in XHTML and not by ">" as in HTML 4.
The names of tags and attributes must be entirely in small letters.

How to use HTML

All HTML tags can be integrated among XUL tags, providing they are prefixed of "html:", for the opening and closing markers.
For example:

<box>
    <html:div>
        My text
    </html:div>
</box>

While the following example would not function:

<box>
    <div>
        My text
    </div>
</box>

because the div tag is not part of the default namespace, that of XUL.
Not more than this other example:

<box>
    <html:div>
        My text
    </html:div>
        Another text
</box>

Indeed, the second text is not placed into a XUL tag nor HTML.

Example

We use an input field and an HTML button. When the user clicks on the button, the entered text is transferred to a XUL component, actually a simple label.

HTML code:

<html:input id="hin" type="text" value="Type a text" />
<html:input type="button" value="Submit" onclick="pass();"/>

A onclick event handler calls a JavaScript function when one clicks on the button.
XUL code:

<label id="xlab" value="Empty" />

The Javascript function:

function pass()
{
	var source = document.getElementById("hin");
	var target = document.getElementById("xlab");
	target.value = source.value;
}

The HTML element is found by its ID, just as the XUL element.

• Demo code.zip.

See also

• Canvas. Drawing on a surface.