XUL Questions and Answers

Where can I get more information about creating MozSearch plugins?

Creating MozSearch plugins contains more help information about creating MozSearch plugin on Firefox 2. More documentation on Search plugins is available in the Search plugins category.

Event listeners lost after moving an element?

When an element is removed from the DOM or simply moved around, all attached event listeners are lost. Event listeners must be added again if needed. This is bug 286619 , fixed for Gecko 1.9.

Is localizing remote XUL possible?

Loading remote DTDs for XML documents is currenty not supported in XUL. The following bugs were reported on this issue: bug 22942 , bug 133698 .

Is there an editor widget in XUL that supports syntax highlighting?

Daniel Glazman has been working on this for his projects. He said the code will be open-source, but it is not released yet (as of Oct 2006). Some teasers are on his blog.

Overlaying elements without IDs

The original developers only tend to put IDs where they need them. As an extension author, you have at least two options:

• use DOM methods to dynamically create or rearrange elements
• file an enhancement request in Bugzilla to have extra IDs added.

Displaying graphics and animation in XUL?

There are several options for displaying graphics and animation in XUL:

• <html:canvas>
• SVG
• <xul:image> (static images or animated GIF; support for APNG is planned)
• Plugins

Templates with non-RDF datasources?

Support for non-RDF datasources for XUL template is planned ( bug 321170 ):

• XML datasources ( bug 321171 )
• Storage (sqlite) datasources ( bug 321172 )

When loading an XSLT stylesheet into an XML I get the error: "Error loading stylesheet: An XSLT stylesheet load was blocked for security reasons."

That error is from a security check that has been put up to safeguard against cross-site-scripting attacks.

A scheme is in development to allow servers to open up their site for cross-site access, but that's not yet done.

hidechrome="true" doesn’t work on a Mac?

Unfortunately, no simple solution to this was posted. A workaround is to open the content in a new window using "window.open" and send titlebar=”no” as one of the flags in the 3rd argument.

Is it possible to have checkbox support for multi column lists?

The current issue is a person exploring if it is possible to have checkbox support for multi column lists. The following is the code they wrote:

<?xml version="1.0"?>

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window id="test-window" title="Check List Test"

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

xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul">

<listbox rows="4">

<listhead>

<listheader label="multi-column"/>

</listhead>

<listcols>

<listcol flex="1"/>

</listcols>

<listitem>

<listcell type="checkbox" value="1" label="vghkvghk"/>

</listitem>

<listitem>

<listcell type="checkbox" value="2" label="vghjkvk" checked="true"/>

</listitem>

<listitem>

<listcell type="checkbox" value="3" label="hukfzgjcfj"

disabled="true"/>

</listitem>

</listbox>

<listbox rows="4">

<listhead>

<listheader label="single-column"/>

</listhead>

<listitem type="checkbox" value="1" label="vghkvghk"/>

<listitem type="checkbox" value="2" label="vghjkvk" checked="true"/>

<listitem type="checkbox" value="3" label="hukfzgjcfj"

disabled="true"/>

</listbox>

</window>

List box handlers can only check for listitems not listcells. If user wants checkbox support for multicolumn lists, then they will have to implement one.

Are XUL attributes integers?

XUL attributes such as left="100" or top="200", as well as corresponding properties, look as if they're integers but they are actually handled as strings. To convert them to integers use the parseInt() JavaScript function.

While the attributes are always strings per the DOM specification, the properties will eventually be fixed to return the value with the correct type.

Using the "icon" attribute on a button

From XULPlanet.com reference:

This attribute should be used to set the usage for common buttons. Some platforms display these buttons with a small icon indicating their usage. This should be used in place of the image attribute. Possible values include: accept, cancel, help, open, save, find, clear, yes, no, apply, close, print, add, remove, refresh, go-forward, go-back, properties, select-font, select-color, network. If you are using a button that matches one of these common usages, use the icon attribute to indicate this.

How to use Dynamic Objects in Toolbar

There may be a few ways to implement this:

1. By building your menupopup from an RDF datasource, which could be generated on the server.
2. By getting data (e.g. JSON string) from the server, parsing it on client, and building the menupopup using DOM methods (such as document.createElementNS).
3. By getting data as XML from the server. (server can just send the XUL code to use for popup - alternatively it can send generic XML describing the attributes of the items in the menu and you generate the XUL on client by applying an XSLT transform.)

Can I change a XUL tree cell/row/item background color with Javacript?

To set the background color you need to set the property for the cell/row and not for the item. An example of this is:

var tree = document.getElementById('treeId');

selectedtreeitem = tree.view.getItemAtIndex(tree.currentIndex);

selectedtreeitem.firstChild.setAttribute('style', 'background: #FF0000');

What is an example of tab browser in XUL?

An example of tab browswer in XUL

How can i get URIs on open tabs?

Using the following code sample,

// Get browsers object

var browsers=document.getElementById('content').browsers;

var numBrowsers=browsers.length;

for (var i=0; numBrowsers>i; i++)

{

var thisURI=browsers[i].currentURI.spec;

// do something with it.

}

The person can get the titles too using the .contentTitle tag.

How to add and remove values to/from, set up inside a <prefwindow> container to handle the preference?

<prefwindow> can contain any control, just like a regular window. Some of them can be tied to a preference so that the preference is automatically updated as the control is manipulated. Others, like <listbox>, cannot be so tied, but one can always write a script that updates preferences explicitly, via nsIPrefBranch interface.

Can a XUL template be used for RSS?

You should be able to use a XUL template to display feeds, although you may have to write the feed data to an RDF datasource first.

Specifying window.onload function

To specify a function to run when the window is loaded,add the following code between the script tags in the XUL file:

window.addEventListener("load", function(e) { startup(); }, false);

Similarly, for onunload use the code:

window.addEventListener("unload", function(e) { shutdown(); }, false);

Is there an event which is called when the Firefox browser is initialized?

An event is initiated when the application starts up and when the profile is changed. For more information please look at the following link: nsExtensionManager.js

Is nsIVariant fully supported using python?

Python has full support for variants. Pass a Python string/int/etc to the method requiring an nsIVariant. A Python object is convered when implmenting an interface taking an nsIVariant.

How do I close the "showPopup" which is automatically opened when the "oncontextmenu" event is called?

If you have a similar code base as the following:

onBookmarkContextMenu: function(event, id) {

document.getElementById("bookmarkPopup").showPopup(document.getElementById(id),

event.screenX + 6, event.screenY + 6, "popup", "bottomright",

"bottomright");

}

Use the hidePopup() function to solve this issue.

What is an example of addProgressListener?

An example of this is this:

// Associate the progress listener for a "browser" to a listener object

browserObject.addProgressListener( listObj,

Components.interfaces.nsIWebProgress.NOTIFY_STATE_WINDOW );

// Remember to define the object, something like this:

listObj = new Object();

listObj.wpl = Components.interfaces.nsIWebProgressListener;

listObj.QueryInterface = function(aIID) {

if (aIID.equals(listObj.wpl) ||

aIID.equals(Components.interfaces.nsISupportsWeakReference) ||

aIID.equals(Components.interfaces.nsISupports)) return this;

throw Components.results.NS_NOINTERFACE;

}

listObj.onStateChange = function(aProgress, aRequest, aFlag, aStatus) {

if (aFlag & listObj.wpl.STATE_START) {

// This fires when the load event is initiated

} else {

if (aFlag & listObj.wpl.STATE_STOP) {

if ( aFlag & listObj.wpl.STATE_IS_WINDOW ) {

// This fires when ALL load finish

}

if ( aFlag & listObj.wpl.STATE_IS_NETWORK ) {

// Fires when ALL load are REALLY over,

// do something "final" here

// (my two cents)

} else {

// This fires when a load finishes

}

}

}

return 0;

}

// This fires when the location bar changes i.e load event is confirmed

// or when the user switches tabs

listObj.onLocationChange = function(aProgress, aRequest, aURI) {

// do whatever you want to do

return 0;

}

// For definitions of the remaining functions see XulPlanet.com

listObj.onProgressChange = function() { return 0 };

listObj.onStatusChange = function() { return 0 };

listObj.onSecurityChange = function() { return 0 };

listObj.onLinkIconAvailable = function() { return 0 };

/*

I use the progress listener to trap the end of a local HTML

"template" file loading, and run XSLT transormations.

In addition I need to evaluate the browser contentDocument DOM

in order to clean "target" attributes on links, and so on.

HTH

• /

How do I create XUL elements dynamically in JavaScript?

Use the following snippet of code to add a new element under an existing element:

var elem = document.getElementById(XUL_ELEMENT_ID);
var node = document.createElement(XUL_ELEMENT_NAME);

node.setAttribute(ATTRIBUTE, VALUE);
node.setAttribute(ATTRIBUTE, VALUE);
elem.appendChild(node);

How do I access XUL elements in a sidebar from the context menu JavaScript?

The sidebar's content is a separate document, so you should use document.getElementById("sidebar").contentDocument.getElementById(...)

This is something you could see using the DOMi.

See also http://developer.mozilla.org/en/docs...in_chrome_code

How can I include a .js document from inside a JavaScript document?

Use the following snippet of code to reference a js file within a js file:

objScriptLoader = Components.classes["@mozilla.org/moz/jssubscript-loader;1"].getService(Components.interfaces.mozIJSSubScriptLoader);

objScriptLoader.loadSubScript(strURL);

See http://www.xulplanet.com/references/...iptLoader.html for more information.