Thursday, February 14th, 2008

OnionML: Server Side JavaScript Layout Engine

Category: CSS, Framework, JavaScript

Marcello Bastéa-Forte has developed OnionML, a layout template language that uses server side JavaScript with Rhino and E4X on the back end.

The high-level goal of the template engine is to be something with utility not unlike CSS, but for intended layout and composition. The actual functionality is similar to XSLT, but with the design goal of being simple and easily extensible.

Onion ML is an XML template system designed with a bias toward modularity.

Onion ML lets you easily custom XML tags to make modular content design simple and easy to mix with HTML. It is somewhat comparable to XSLT and JSF, but intended to be easier to understand.

You define custom tags either as markup in XML files or as custom JavaScript functions which generate output.

Onion ML also provides several control flow methods necessary for dynamic content. Methods for iterating over data sets and conditionally displaying tags are core to Onion ML’s functionality.

You end up building nested tag layouts. For example, you first define a tag:

  1. <tag :mylayout>
  2. <html>
  3.  <head>
  4.   <title><arg :title/></title>
  5.   <style> ... </style>
  6.  </head>
  7.  <body>
  8.   <h1><arg :title/></h1>
  9.   <div id="contents"><arg :body/></div>
  10.   <div id="footer"><copyright><arg :year/></copyright></div>
  11.  </body>
  12. </html>
  13. </tag>
  14.  
  15. <tag :copyright>Copyright <arg :all/> All rights reserved</tag>

and then you can use it:

  1. <mylayout>
  2.  <title>Hello world!</title>
  3.  <body>This is my <b>world</b>, too.</body>
  4.  <year>2008</year>
  5. </mylayout>

You can also do the work directly in JavaScript:

javascript

  1. var onion = new Onion(
  2.  <onion>
  3.   <tag :mytag>woot, <arg :all/>!</tag>
  4.  </onion>
  5. );
  6.  
  7. onion.add(
  8.  <tag :anothertag>play the <mytag>tuba</mytag></tag>
  9. );
  10.  
  11. onion.add("date", function() {
  12.   return new Date().toString()
  13. });

Posted by Dion Almaer at 6:27 am
1 Comment

+++--
3.7 rating from 32 votes

1 Comment »

Comments feed TrackBack URI

Thanks for posting this! I am looking to get feedback on the language and suggestions on the open questions: namely how to deal with assigning attributes and data processing.

Comment by Marcello — February 14, 2008

Leave a comment

You must be logged in to post a comment.