Describing microformats in JavaScript

  • Revision slug: Describing_microformats_in_JavaScript
  • Revision title: Describing microformats in JavaScript
  • Revision id: 166739
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment /* A simple example */

Revision Content

{{template.Fx_minversion_header(3)}} {{template.Draft()}} Microformats are described in JavaScript by using a standardized structure format that has several standard members that describe the object.

Microformat definition format

The microformat definition must contain the following entries:

mfVersion
Specifies the version number of the microformat API to which the definition was written. For Firefox 3, this should be set to 0.8.
mfObject
The JavaScript object that implements the microformat.
className
A string specifying the name of the microformat's class as referenced in HTML (class="className").
required
An array indicating the names of any properties that must be specified. This may be left out if all properties are optional.
properties
A structure describing the properties of the microformat.

Property specifications

Each property in the properties structure is specified by its name, and may include additional attributes if the property so requires. Standard attributes are:

plural
A boolean value indicating that, if true indicates that the property can have multiple values. If a property is plural, it is returned as an array.
virtual
A boolean value indicating whether or not the property is virtual. If it's virtual, the virtualGetter() method will be called to attempt to create the property if it doesn't exist.
virtualGetter
A function that is called to get a virtual property's value. This is only used if virtual is true.
value
The property's default value.
subproperties
It's possible for a property to itself include more properties; to do so, include them in a subproperties structure within the property.
dataType
The type of data contained by the property. Possible values are:
dateTime
An ISO date
anyURI
A URI
email
An email address
tel
A telephone number
HTML
HTML including tags
float
A floating-point number
microformat
A microformat
microformat_property
A specific property within the microformat specified by microformat.
custom
Custom data

A simple example

The hCard microformat for defining contact information makes use of the adr microformat to define an address. The adr microformat is defined as follows:

var adr_definition = {
  mfVersion: 0.8,
  mfObject: adr,
  className: "adr",
  properties: {
    "type" : {
      plural: true,
      types: ["work", "home", "pref", "postal", "dom", "intl", "parcel"]
    },
    "post-office-box" : {
    },
    "street-address" : {
      plural: true
    },
    "extended-address" : {
    },
    "locality" : {
    },
    "region" : {
    },
    "postal-code" : {
    },
    "country-name" : {
    }
  }
};

The properties are quite simple here. The type property indicates the type of address represented by the object (work, home, and so forth). Since the plural property is true, multiple types can be specified. This allows an address to be marked as being, for example, a work address for receiving parcels.

The street-address property is plural as well. This allows multiple lines of address information to be contained in the street-address array.

The microformat is registered with the microformat API by calling Microformats.add(), like this:

Microformats.add("adr", adr_definition);

{{template.Note("To be clear: since the <code>adr</code> microformat is included by default in Firefox 3 and later, you don\'t need to add it yourself if you wish to make use of it.")}}

See also

Using microformats, Parsing microformats in JavaScript

Revision Source

<p>{{template.Fx_minversion_header(3)}}
{{template.Draft()}}
Microformats are described in JavaScript by using a standardized structure format that has several standard members that describe the object.
</p>
<h3 name="Microformat_definition_format">Microformat definition format</h3>
<p>The microformat definition must contain the following entries:
</p>
<dl><dt><code>mfVersion</code>
</dt><dd>Specifies the version number of the microformat API to which the definition was written. For Firefox 3, this should be set to 0.8.
</dd><dt><code>mfObject</code>
</dt><dd>The JavaScript object that implements the microformat.
</dd><dt><code>className</code>
</dt><dd>A string specifying the name of the microformat's class as referenced in HTML (<code>class="<i>className</i>"</code>).
</dd><dt><code>required</code>
</dt><dd>An array indicating the names of any properties that must be specified.  This may be left out if all properties are optional.
</dd><dt><code>properties</code>
</dt><dd>A structure describing the properties of the microformat.
</dd></dl>
<h3 name="Property_specifications">Property specifications</h3>
<p>Each property in the <code>properties</code> structure is specified by its name, and may include additional attributes if the property so requires.  Standard attributes are:
</p>
<dl><dt><code>plural</code>
</dt><dd>A boolean value indicating that, if <code>true</code> indicates that the property can have multiple values.  If a property is plural, it is returned as an array.
</dd><dt><code>virtual</code>
</dt><dd>A boolean value indicating whether or not the property is virtual.  If it's virtual, the <code>virtualGetter()</code> method will be called to attempt to create the property if it doesn't exist.
</dd><dt><code>virtualGetter</code>
</dt><dd>A function that is called to get a virtual property's value.  This is only used if <code>virtual</code> is <code>true</code>.
</dd><dt><code>value</code>
</dt><dd>The property's default value.
</dd><dt><code>subproperties</code>
</dt><dd>It's possible for a property to itself include more properties; to do so, include them in a <code>subproperties</code> structure within the property.
</dd><dt><code>dataType</code>
</dt><dd>The type of data contained by the property.  Possible values are:<blockquote>
</blockquote></dd><dt><code>dateTime</code>
</dt><dd>An ISO date
</dd><dt><code>anyURI</code>
</dt><dd>A URI
</dd><dt><code>email</code>
</dt><dd>An email address
</dd><dt><code>tel</code>
</dt><dd>A telephone number
</dd><dt><code>HTML</code>
</dt><dd>HTML including tags
</dd><dt><code>float</code>
</dt><dd>A floating-point number
</dd><dt><code>microformat</code>
</dt><dd>A microformat
</dd><dt><code>microformat_property</code>
</dt><dd>A specific property within the microformat specified by <code>microformat</code>.
</dd><dt><code>custom</code>
</dt><dd>Custom data
</dd></dl>
<h3 name="A_simple_example">A simple example</h3>
<p>The hCard microformat for defining contact information makes use of the <code>adr</code> microformat to define an address.  The <code>adr</code> microformat is defined as follows:
</p>
<pre>var adr_definition = {
  mfVersion: 0.8,
  mfObject: adr,
  className: "adr",
  properties: {
    "type" : {
      plural: true,
      types: ["work", "home", "pref", "postal", "dom", "intl", "parcel"]
    },
    "post-office-box" : {
    },
    "street-address" : {
      plural: true
    },
    "extended-address" : {
    },
    "locality" : {
    },
    "region" : {
    },
    "postal-code" : {
    },
    "country-name" : {
    }
  }
};
</pre>
<p>The properties are quite simple here.  The <code>type</code> property indicates the type of address represented by the object (work, home, and so forth).  Since the <code>plural</code> property is <code>true</code>, multiple types can be specified.  This allows an address to be marked as being, for example, a work address for receiving parcels.
</p><p>The <code>street-address</code> property is <code>plural</code> as well.  This allows multiple lines of address information to be contained in the <code>street-address</code> array.
</p><p>The microformat is registered with the microformat API by calling <code><a href="en/Using_microformats#add.28.29">Microformats.add()</a></code>, like this:
</p>
<pre class="eval">Microformats.add("adr", adr_definition);
</pre>
<p>{{template.Note("To be clear: since the &lt;code&gt;adr&lt;/code&gt; microformat is included by default in Firefox 3 and later, you don\'t need to add it yourself if you wish to make use of it.")}}
</p>
<h3 name="See_also">See also</h3>
<p><a href="en/Using_microformats">Using microformats</a>, <a href="en/Parsing_microformats_in_JavaScript">Parsing microformats in JavaScript</a>
</p>
Revert to this revision