XUL Questions and Answers

Return to mozilla-dev-tech-xul summaries

The frequently asked questions should be moved to XUL FAQ (make sure they have a clear answer.)

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.

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:

By building your menupopup from an RDF datasource, which could be generated on the server.
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).
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 JavaScript?

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.
*/

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.

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.

Too specific questions or unclear answers

How do I remove the file location header included in the default printing setting?

See http://www.xulplanet.com/references/...ef_iframe.html, the first user note at the bottom. Change this line

var settings = PrintUtils.getPrintSettings();

to this

var settings = PrintUtils.getPrintSettings().clone();
settings.docURL = " "; // suppress URL on printout

Other options you can modify are documented here:
http://www.xulplanet.com/references/...tSettings.html

How can I send XML/XUL document fragment to the server instead of using GET or POST variables?

You can send documents using send(document), so you should be able to insert the fragment into an empty document.

How can I manage scrolling outside the browser?

This problem can be solved by capturing the focus events and giving the focus to another xul element or capturing and canceling the keypress events.

How to display addressbook RDF and MenuList on the same list?

Mailing lists are children of directories. As such, you cannot use a template to display them in the same list. The best you can do is a cascading menu along the lines of the move/copy menus, but then of course you lose the ability to easily select from the list.

Instead of

<menulist id="abPopup">
  <menupopup id="abPopup-menupopup"
    ref="moz-abdirectory://"
    datasources="rdf:addressdirectory"
    sortActive="true"
    sortDirection="ascending"
    sortResource="http://home.netscape.com/NC-rdf#DirTreeNameSort">
    <template>
      <rule nc:IsWriteable="false"/>
      <rule nc:IsMailList="false">
        <menuitem uri="..."
          label="rdf:http://home.netscape.com/NC-rdf#DirName"
          value="rdf:http://home.netscape.com/NC-rdf#DirUri"/>
      </rule>
      <rule nc:IsMailList="true">
        <menuitem uri="..."
          label="rdf:http://home.netscape.com/NC-rdf#DirName"
          value="rdf:http://home.netscape.com/NC-rdf#DirUri"/>
      </rule>
    </template>
  </menupopup>
</menulist>

It should be written as follows:

<menulist id="abPopup22">
  <menupopup id="abPopup-menupopup"
    ref="moz-abmdbdirectory://abook.mab"
    datasources="rdf:addressdirectory"
    sortActive="true"
    sortDirection="ascending"
    sortResource="http://home.netscape.com/NC-rdf#DirTreeNameSort">
    <template>
      <rule nc:IsWriteable="false"/>
      <rule nc:IsMailList="true">
        <menuitem uri="..."
          label="rdf:http://home.netscape.com/NC-rdf#DirName"
          value="rdf:http://home.netscape.com/NC-rdf#DirUri"/>
      </rule>
    </template>
  </menupopup>
</menulist>

DrawWindow with transparent background possible?

With Mozilla trunk
---------------------------------------------------------
nsIDOMCanvasRenderingContext2D* c2d = //coming from <canvas>
nsIDOMWindow* window = //coming from <iframe>
c2d->DrawWindow( window, ..., "rgba(0,0,0,0)");
---------------------------------------------------------

This makes canvas background transparent if background is transparent but when "window" is coming from top level content window, background is not transparent.

So how can I do this same way as <iframe>? You can't right now

I want to create dynamically multiple elements with datasource attribute. I want to create XUL element in the javascript, assign datasources/ref/template attribute to it so that the content is generated from the rdf datasource

Create the element, set the datasources attribute then add the element to the document. This should then create the database.

XULRunner questions

These don't really belong on this page.

someelement {
  font-family: "My Font", "Trebuchet MS";
}

For more information about platform specific questions, please visit mozilla.dev.platform