Usingnamespace - Blog » XML http://www.usingnamespace.org C#, XUL, Javascript, C++ ... Tue, 17 Jul 2012 14:53:13 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 [XUL] xml-combobox and xml-radiobox http://www.usingnamespace.org/xul-xml-combobox-and-xml-radiobox.html http://www.usingnamespace.org/xul-xml-combobox-and-xml-radiobox.html#comments Wed, 17 Feb 2010 15:14:29 +0000 admin http://www.usingnamespace.org/?p=36 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
xml-radiobox

<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;
}
]]> http://www.usingnamespace.org/xul-xml-combobox-and-xml-radiobox.html/feed 0