I am pleased to share one creation of mine .
The following widget is a XBL binding based on the XUL’s XNL templates technology.
https://developer.mozilla.org/en/XUL/Template_Guide/XML_Templates
If you need to display xml data into a xul menulist -combobox- or in a radiogroup -radiobox-, without having to implement an XML parser, here is the solution :
<xml-combobox id="myid" datasources="chrome://application/pathtoxmlfile" expr=""/> <xml-radiobox id="myid" datasources="chrome://application/pathtoxmlfile" expr=""/>
Attributes :
datasources : URL of an XML document, either a local file or a remote web site.
expr : the expr attribute is a very simple XPath expression which simply retrieves the root elements of your query within the datasource.
label :
- starting with « ! » : an XPath expression corresponding to the node you want to use as a label.
- starting with « ? » : a property of the node corresponding to the expr result, you want to use as a label.
- Otherwise just a text used as a label for all the generated lines (can be empty).
value :
- starting with « ! » : an XPath expression corresponding to the node you want to use as a value.
- starting with « ? » : a property of the node corresponding to the expr result, you want to use as a value.
- Otherwise just a text used as a value for all the generated lines (can be empty).
image :
- starting with « ! » : an XPath expression corresponding to the node you want to use as an image.
- starting with « ? » : a property of the node corresponding to the expr result, you want to use as an image.
- Otherwise just a text used as an image for all the generated lines (can be empty).
imageBaseFolder : if the attribute image is used, the base folder where to look the images for. Useful if the image query result is just a file name, or a relative path. Must contain the final « / » or « \ ». Can be left empty.
orient : (xml-radiobox only) : « horizontal » or « vertical ».
onselect: occurs when selection changed.
Examples :
Example 1 : simple example using the properties of a XML node
<people> <person name="Napoleon Bonaparte" id="NB"/> <person name="Cleopatra" id="Cl"/> <person name="Julius Caesar" id="JC"/> <person name="Ferdinand Magellan" id="FM"/> <person name="Laura Secord" id="LS"/> </people>
<xml-combobox id="myid" datasources="chrome://application/pathtoxmlfile" expr="person/" label="?name" value="?id"/>
Example 2 : using a node property for the id and a XPath from the targeted node for the label (here the text contained in the subnode « name »)
<people> <person id="NB"> <name>Napoleon Bonaparte</name> <gender>Male</gender> </person> <person id="Cl"> <name>Cleopatra</name> <gender>Female</gender> </person> <person id="JC"> <name>Julius Caesar</name> <gender>Male</gender> </person> <person id="FM"> <name>Ferdinand Magellan</name> <gender>Male</gender> </person> <person id="LS"> <name>Laura Secord</name> <gender>Female</gender> </person> </people>
<xml-radiobox id="myid" datasources="chrome://application/pathtoxmlfile" expr="person/" label="!./name/text()" value="?id" orient="horizontal"/>
Example 3 : same as example 2 but with a xml-combobox and using the image property and imageBaseFolder to specify where the widget should look the images for
<people> <person id="NB"> <name>Napoleon Bonaparte</name> <gender>Male</gender> <picture>nap.png</picture> </person> <person id="Cl"> <name>Cleopatra</name> <gender>Female</gender> <picture>cleo.png</picture> </person> <person id="JC"> <name>Julius Caesar</name> <gender>Male</gender> <picture>julius.png</picture> </person> <person id="FM"> <name>Ferdinand Magellan</name> <gender>Male</gender> <picture>magellan.png</picture> </person> <person id="LS"> <name>Laura Secord</name> <gender>Female</gender> <picture>secord.png</picture> </person> </people>
<xml-combobox id="myid" datasources="chrome://application/pathtoxmlfile" expr="person/" label="!./name/text()" value="?id" imageBaseFolder="chrome://application/skin/pic_small/" image="!./picture/text()"/>
And like all the XBL widgets, the bindings need to be done in a CSS :
xml-combobox{ -moz-binding: url("chrome://application/content/bindings/xml-combobox.xml#xml-combobox") !important; } xml-radiobox{ -moz-binding: url("chrome://application/content/bindings/xml-radiobox.xml#xml-radiobox") !important; }
Commentaires
Ecrire un commentaire Trackback