JsonML.org

Links

DUEL

DUEL is the next generation of JBST (JsonML + Browser-Side Template). Templates are written in an improved syntax which can be executed in JavaScript as a client-side template or in Java as a server-side template.

JBST.net

An online JsonML + Browser-Side Template compiler, JBST.net lets you design and compile JBST controls without any server-side components. Quickly turn a static web page into a dynamic web app.

"Get to know JsonML"

A good JsonML article was published on IBM developerWorks. The author walks the reader through some good background on Ajax & JSON before delving into a specific tutorial of JsonML usage.

JsonML in JSON Libraries

Several JSON libraries provide built-in support for JsonML & JBST:

• P6R JDX™ XPath 2.0 for XML, JSON and JsonML provides XPath for JsonML
• JsonFx for .NET provides JBST build-time support
• Douglas Crockford's JSON library for Java provides JsonML encoding
• Jayrock for .NET provides JsonML encoding

JsonML jQuery Plugin

Trevor Norris put together a jQuery/JavaScript JsonML Plugin which makes JsonML easier to work with within a jQuery-based environment.

Array.prototype.toDomNodes

John Doherty built a light weight JsonML builder alternative.

Alternate XML-to-JsonML XSLT Implementations

Bram Stein has implemented an alternate XSLT for converting arbitrary XML to JSON: xsltjson-lite

XML-to-JsonML Client-Side Proxy

Dominiek ter Heide's XML-to-JSON Proxy is an interesting use of JsonML. The tool enables cross-domain XML service calls without the need for a server-side proxy.

More?

If you have a link relevant to JsonML, send an email to add it to the list.

Examples

To see JBST in action, play with the live JBST Example.

Other demonstrations give an idea of the expressive power of JsonML. They also demonstrate the power of the JsonML filter callback for binding behaviors to DOM elements.

Usage Recommendations

Tuple order: [tag-name, attributes, element-list]

Implementors MUST serialize the tag-name of the element before attributes or before any element-list. This is because any child text nodes will be siblings to the tag-name of the element.

Implementors MUST serialize attributes before any child element as it is more natural to finish populating element attributes before moving onto other elements.

XML Namespaces

JsonML supports namespaces the same way that namespaces were handled in XML 1.0. The element name is a concatenation of the namespace prefix, the colon ':' character, and the element local-name.

DOM Quirks

While the process is fairly straight forward to recursively hydrate a DOM element tree from JsonML, there are a number of inconsistencies and quirks to be aware of.

• Attribute name differences:
  Due primarily to reserved words within JavaScript, there are a number of DOM attributes which have a different name than their XHTML equivalent. e.g. CSS Class attribute is "class" in XHTML and "className" in DOM.
• CSS Style name differences:
  Due to reserved words within JavaScript and restrictions upon identifier names, there are a number of DOM styles which have a different name than their CSS equivalent. e.g. the positioning property "float" in CSS is "styleFloat" for IE DOM and "cssFloat" for Firefox DOM. Also, multi-word CSS properties such as "background-color" become camel-case "backgroundColor" in JavaScript.
• Microsoft Internet Explorer TableDOM:
  A quirk in IE requires <th> & <td> elements to sit directly within <thead> & <tbody>, respectively. It will not render them if they aren't direct children. As such, implementors should not expect there to be <thead> & <tbody> elements.
• Microsoft Internet Explorer Styles:
  IE does not allow inline styles to be set directly on the style property. Implementors must either parse the style attribute and set each style individually, or assign the value to the "cssText" property of the style object.

Bulleted List Example

Rendered in DOM:

• First Item
• Second Item
• Third Item

XHTML Markup (173 bytes):

JsonML Markup (184 bytes):