All about XUL, XBL, XPCOM etc.

Sorting XUL tree using Javascript and XPCOM

2006-09-04T13:50:00.000-07:00

When I was working on a firefox extension I wanted to display the bookmarks in the sorted order. Bookmarks in firefox are stored in bookmarks.html file, but access to this file is through the rdf datasource called rdf:bookmarks. There is no service to sort the content of the rdf datasource. Only way I thought of and is also done in firefox is to have a dummy tree with collapsed flag set to true.

In the tree element flags atribute should be set to dont-build-conent. builder property of tree element is available only when datasources and ref attributes are set. Se datasources attribute to rdf:bookmarks and ref to NC:BookmarksRoot. The builder property of the tree element can be used to sort the tree using the javascript. Here is what you need to do:

var tree = document.getElementById( "my-tree" );

tree.builder.QueryInterface(Components.interfaces.nsIXULTreeBuilder);

tree.builder.sort( document.getElementById( "sort-column" ) );

Here sort-column should have 2 attributes set. They are sort and sortDirection. sortActive is an optional attribute. This attribute is set by sort method of nsIXULTreeBuilder.

sort attribute of the treecol element must be set to the resource name, which will populate the content of the corresponding treecell. If a column is populated with the last visit date of the bookmark, set the source attribute to rdf:http://home.netscape.com/NC-rdf#LastVisitDate.

The sort method does not work as expected. Here is the state diagram of the sort method.

Initial Sort Direction Sort Direction After sort method call

---------------------------------------------------

natural descending

descending ascending

ascending natural

Here the caller of the sort method should set the value of sortDirection attribute before calling the sort method in-order to get the correct sort order.

Another way to sort the tree content is to use xul-sort-service of XPCOM.

var sortService = Components.classes["@mozilla.org/xul/xul-sort-service;1"].

getService(Components.interfaces.nsIXULSortService);

sortService.sort(tree, "rdf:http://home.netscape.com/NC-rdf#LastVisitDate", "ascending" );

With this caller need not worry about the treecol and its sortDirection attribute as in the previous case.

I like to use this to sort the elements. I am yet to test this service for XUL elements other than tree. I will try this service to sort the elements within the list element.

technorati tags:xul, firefox, firefoxextension, xpcom

Context Menu for XUL Trees

2005-06-26T10:07:00.000-07:00

Tree widget in XUL is one of the most useful widget. Bookmarks is one of the good example using tree widget.

I found adding context menu to tree widget is the difficult one specially when context menu changes depending on the treerow. The documentation says that having contextmenu attribute of treecell or treerow set to the id of popup element will do the trick. But sadly that is not the case. contextmenu attribute is applicable only to the first treechildren element of tree element. Then the question is how to generate context sensative context popup menu. Answer is pretty easy, but difficult to figure out. I spend quite a lot of time figuring it out. So I thought of making this knowledge useful for the interested group.

Javascript in onpopupshowing attribute of popup element gets called just before popup is actually rendered. This is the place to change the menuitem's in the context popup menu.

<popup id="my_popup" onpopupshowing="changePopup(event);">

   .... Menu items ......

</popup>

<tree>

<treecols>

    

    <treecol id="a" label="bookmarks" primary="true"/>

</treecols>

<treechildren contextmenu="my_popup">

   <treeitem container="true">

     <treerow>

       <treecell label="Books" properties="folder"/>

     </treerow>

     <treechildren>

       <treeitem>

         <treerow>

            <treecell label="Oreilly" properties="bookmark"/>

         </treerow>

       </treeitem>

       <treeitem>

         <treerow>

           <treecell label="Amazon" properties="bookmark"/>

         </treerow>

       </treeitem>

   </treechildren>

</treeitem>

</treechildren>

</tree>

First step of changePopup is to find the row and column number of the treecell.

var treeElement = event.rangeParent; // returns the reference to tree xul element

var row = new Object();

var col = new Object();

var childElement = new Object();

treeElement.treeBoxObject.getCellAt(event.clientX, event.clientY, row, col, childElement);

After the above step row.value and col.value will have the row and column number of selected treecell element. Now is the tricky part of get the properties of the cell.

var arrayComp = Components.classes['@mozilla.org/supports-array;1'].createInstance();

var properties = arrayComp.QueryInterface(Components.interfaces.nsISupportsArray);

treeElement.view.getCellProperties(row.value, col.value, properties);

properties variable will get populated with the properties of the selected cell. Each element of this array is an instance of nsIAtom interface.

To get the property names,

for (count = 0; count < properties.Coun(); ++count) {

    var property = properties.GetElementAt(count);

    property.QueryInterface(Components.interfaces.nsIAtom);



}

Above snippet of code can be used to write a function to check the property of the treecell element, say cellHasProperty(properties, name).

In changePopup function, this function can be used to determine the menu items of the popup.

if (cellHashProperty(properties, "folder") {

    showFolderMenu(event.target);

} else if (cellHasProperty(properties, "bookmark")) {

    showBookmarkMenu(event.target);

}

Here event.target refer to popup element.

view member of treeElement has other methods to get the rowProperties and column properties.

view member implement nsITreeView interface.

treeBoxObject member of tree element implement nsITreeBoxObject interface.

Some useful annotations of XUL programming can be found here

XUL trick to create round edge for tab element

2005-06-26T10:03:00.000-07:00

Again XUL is poorly documented. This time it was for applying CSS for XUL elements.

Mozilla has defined few custom CSS rules for getting the cool round edge for any elementes having borders (-moz-border-radius).

For tab element using this did not give me the desired result. I was getting native tab look. After trial and error I figured that -moz-appearance should be set to none.

So there is the final CSS rule.

tab {

-moz-appearance: none;

-moz-border-radius: 10px 10px 0px 0px;

padding: 10px;

}

Resoruces:

Mozilla CSS extensions

Tab styling

XUL tab reference