Short Tag – Web Development Blog

Entries Tagged ‘XUL’

Loop through a Combobox, Listbox in XUL/XPCOM

So, we have a XUL component, that looks like this:

<listbox id="listboxId">
<listitem label="1" />
<listitem label="2" />
<listitem label="3" />
</listbox>

We can loop through the elements of this componenet using XPCOM:

var lbox = document.getElementById(‘listboxId’);

for (var i =0; i<lbox.children.length; i++)
{
var child = lbox.children[i];
//do someting with child, like
alert(child.label)
}

Xul Javascript: Difference between getService() and createInstance()

When calling an XPCom component from Javascript we can use to functions: getService() and createInstance().
* getService() will get a singleton class, so a single object will do all the work no matter how many times you call it.
* createInstance() will create a new instance of that class, this is useful in situations where you make [...]

Get and Set Preferences in XUL

Below are two funtions that will set and get boolean values in your firefox profile. These can be used in standalone XULRunner applications or in Firefox extensions.
Use them to save the settings of your application / extensions.

function setSettingValue(setting, value)
{
var prefs = Components.classes["@mozilla.org/preferences-service;1"]
.getService(Components.interfaces.nsIPrefService).getBranch("accessibility.");

prefs.setBoolPref(setting, value);
}

function getSettingValue(setting)
{
var prefs = Components.classes["@mozilla.org/preferences-service;1"]
.getService(Components.interfaces.nsIPrefService).getBranch("accessibility.");

return prefs.getBoolPref(setting);
}

For setting/getting int type preference use: getIntPref() and [...]

Remove all children from an element using XUL Javascript

This is a small script that will remove all children of a XULElement:

var elem = document.getElementById(‘my_element’);
while (elem.firstChild)
elem.removeChild(elem.firstChild);

Open an URL with XUL and XPCom

Since the HTML <a> tag is not working in XUL we need another approach to open a URL.
You can use the function below in your project:

function gotoUrl(url)
{
var nsioservice= Components.classes["@mozilla.org/network/io-service;1"]
.getService(Components.interfaces.nsIIOService);

var uri = nsioservice.newURI(url, null, null);

var eps = Components.classes["@mozilla.org/uriloader/external-protocol-service;1"]
.getService(Components.interfaces.nsIExternalProtocolService);

eps.loadURI(uri, null);
}

Use it like this:

gotoUrl(‘http://www.short-tag.info’);

How to get an elements XY position with XUL javascript

In the XPCOM library there is a function called getBoundingClientRect() that is accesible for any visible element.
So, if you want to get a XUL element’s position:

var rect = item.getBoundingClientRect();
var x = rect.left;
var y = rect.top;
var height = rect.height;
var width = rect.width;

Remember, ‘item’ can be any XULElement. For example:

var item = document.getElementById(‘myObject’);
var rect = item.getBoundingClientRect();
var x [...]