The following describes how to style a tree.
You can style the tree border and the column headers in the same way as other elements. Style added to the treetreecol
The body of the tree must be styled in a somewhat different way than other elements. This is because the tree body is stored in a different way to other elements. The outer treechildren
Instead, you must use the properties
Set the property on a row or cell, as in the following example:
<treerow properties="makeItBlue">
The style sheet can take this property and use it to change the appearance of the row for unread messages or labels. You can think of the properties as functioning much like style classes, although they require a somewhat more complex syntax to use in a style sheet. This is because you can specify the style for a number of parts of the cell individually. You can style not only the cell and its text, but the twisty and indentation. The following is the syntax that needs to be used:
treechildren::-moz-tree-row(makeItBlue)
{
background-color: blue;
}
This style which has a complex selector is used to style the background color of rows that have the 'makeItBlue' property. This special syntax is needed because the cells themselves are not separate elements. All of the content inside the tree's body is rendered by the treechildrentreechildrentreechildren
The text '::-moz-tree-row' specifies what content area is desired, which in this case is a row. You can also use the following values:
type attribute on the column to progressmeter.You can check for multiple properties by separating them with commas. The example below sets the background color to grey for rows that have the 'readonly' and 'unread' properties. For properties that are 'readonly', it adds a red border around the row. Note that the first rule will apply to any row that is 'readonly' regardless of whether other properties such as 'unread' are set.
treechildren::-moz-tree-row(readonly)
{
border: 1px solid red;
}
treechildren::-moz-tree-row(readonly, unread)
{
background-color: rgb(80%, 80%, 80%);
}
The properties list for tree elements contain a small number of default properties, which you can also use in a style sheet. You can use these extra properties to set the appearance of containers or selected rows. The following properties are automatically set as needed:
The properties are set for rows or cells in rows with the necessary state. For columns and cells, one additional property, the id of the column or column the cell is in will be set.
For RDF-built trees, you can use the same syntax. However, you will often set the properties based on values in the datasource.
For trees with a custom view script, you can set properties by supplying the functions getRowProperties(), getColumnProperties() and getCellProperties() in the view. These return information about an individual row, column and cell. Arguments to these functions indicate which row and/or column.
Prior to Gecko 22 the last argument to each of these functions is a properties list which the view is expected to fill with a list of properties. The function getColumnProperties() also supplies the corresponding treecol
getRowProperties : function(row,prop){}
getColumnProperties : function(column,columnElement,prop){}
getCellProperties : function(row,column,prop){}
From Gecko 22 you can return a string of space-separated property names from these functions.
getRowProperties : function(row){ return ''}
getColumnProperties : function(column,columnElement){ return ''}
getCellProperties : function(row,column){ return ''}
Let's look at an example of changing a specific cell. Let's make every fourth row have blue text, using the example from a previous section. We'll need to add code to the getCellProperties() function, to add a property 'makeItBlue' for cells in every fourth row. (We don't use getRowProperties() as the text color will not be inherited into each cell.)
Prior to Gecko 22 the properties object that is passed as the last argument to the getCellProperties() is an XPCOM object that implements nsISupportsArray. It is really just an XPCOM version of an array. It contains a function AppendElement() which can be used to add an element to the array. We can use the interface nsIAtomService to construct string atoms for the properties.
getCellProperties: function(row,col,props){
if ((row %4) == 0){
var aserv=Components.classes["@mozilla.org/atom-service;1"].
getService(Components.interfaces.nsIAtomService);
props.AppendElement(aserv.getAtom("makeItBlue"));
}
}
The properties list requires an array of atom objects, which can be thought of as constant strings. We create them using the XPCOM interface nsIAtomService and add them to the array using the AppendElement() function. Here, we create an atom 'makeItBlue'. You can call AppendElement() again to add additional properties.
From Gecko 22 your function should return a string containing the property.
getCellProperties: function(row,col){
if ((row %4) == 0){
return "makeItBlue";
}
}
To support Gecko versions before and after this change use.
getCellProperties: function(row,col,props){
if ((row %4) == 0){
if (props) {
var aserv=Components.classes["@mozilla.org/atom-service;1"].
getService(Components.interfaces.nsIAtomService);
props.AppendElement(aserv.getAtom("makeItBlue"));
} else {
return "makeItBlue";
}
}
}
This function would be defined as part of a view object. It first checks to see which row is being requested and sets a property for cells in every fourth row.
treechildren::-moz-tree-row(selected) { background-color: #FFFFAA; }
treechildren::-moz-tree-row(odd) { background-color: #EEEEEE; }
treechildren::-moz-tree-row(odd, selected) { background-color: #FFFFAA; }
treechildren::-moz-tree-cell-text(selected) { color: #000000; }
treechildren::-moz-tree-cell-text(odd, selected) { color: #000000; }
Note that you can also style e.g. all rows, without the need of using properties; see Building Trees for an example.
Next, we'll look at how to modify the default skin.