Model mapping with visual representation (for instance HTML DOM)

Model visualization needs a way to map Model concepts to a visualization concepts. Templates are common techniques for the pretty printing of a complex object.

This technique is enabled for the JVM and the JS version of KMF, however this documentation focuses on DOM templates with models.

First you need to include a template engine. Here we will use the mustache language and the handlebars implementation in JS. So download the JS library file at http://handlebarsjs.com

<script src="lib/handlebars.js"></script> 

Then you need a little hack to allow the use of the keyword each on KMF collections: So in you JS code add:

Handlebars.registerHelper('each', function(context, options) {
  var ret = "";
  if(typeof context == 'function'){ 
      context = context.call(this).array; 
  } 
  if(context.array != undefined){
 context = context.array;
  }
  for(var i=0, j=context.length; i<j; i++) {
    ret = ret + options.fn(context[i]);
  }
  return ret;
});  

Include your KMF as usual (you should use the compressed version for production) Then you can declare your HTML code template as follow (this example uses the metamodel Cloud from the KMF playground):

Warning if using the ECMA3 option , nodes become getNodes.

<script id="cloud-template" type="text/x-handlebars-template">
  <ul class='tree'>
      <li>Cloud
          <ul>
              {{#each nodes}}
              <li>Node:{{id}}
                    <ul>
                        {{#each softwares}}
                            <li>Soft:{{name}}</li>
                        {{/each}}
                    </ul>
              </li>
              {{/each}}
           </ul>
      </li>
    </ul>
</script>

Then you can use it anywhere in your JS code:

//compile the template
var compiledTemplate2 = Handlebars.compile($('#cloud-template').html());
//transform a cloud model to HTML representation
domCloud = compiledTemplate2(cloud)
//Attach to the DOM 
$('#drawPanel').append(domCloud);

This code snippet is the one responsible of the model visualization in the right part of the playground.

(Any mustache engine will work directly in the JVM)

Enjoy templates and models!

François