Top

Treeview

In this guide you will learn how to design your own treeview in a very easy way. Normally the treeview is one of the most frustrating component, but in aria templates is very simple to use it.

This guide shows you how to write the very basic treeview component.

By referring to this guide, you will be able to:

  • Create the treeview template.
  • Create the module controller to manage the treeview logic.
  • Use filter to simulate a server to fecth data from an external xml file.
  • Use the submitJsonRequest to request data.
  • Use the aria templates asynch paradigm.
  • Use aria widgets.
  • Use a section with automatic refresh bound to the data model.

Tutorial

Step 1

Create a file using your favourite editor and call it index.html. This will be the bootstrap for your app.

Save it inside the root of your project (e.g. /guides/treeview/).

Step 2

Inside index.html you will have to load the aria templates framework, define the container div and load the template that you will create.

To load the framework:

<script type="text/javascript" src="/aria/ariatemplates-1.2.0.js"></script>
<script type="text/javascript" src="/aria/css/atskin-1.2.0.js"></script>

To define the div container:

<div id="root"></div>
To load the template:
<script type="text/javascript">
Aria.loadTemplate({
  classpath:'ariadoc.guides.treeview.view.Main',
  div:"root",
  moduleCtrl: {
    classpath : "ariadoc.guides.treeview.Controller"
  }
});
</script>
Inside the bootstrap you are defining also the module controller.

Step 3

Create a file and call it Main.tpl. This is the template that will be used to display the treeview.

Save it inside the view folder inside your project (/guides/treeview/view/).

Step 4

Define the classpath of your template, define that your template has some CSS style and a script:
{Template {
    $classpath:'ariadoc.guides.treeview.view.Main',
    $hasScript: true,
    $css: ['ariadoc.guides.treeview.view.MainStyle']
}}
Define inside the macro main() the @aria:Link widget to load the data inside the treeview and call the treview() macro:
{macro main()}
  {@aria:Link {
    label:"Load Data",
    onclick:{
      fn:"loadData"
    }
  }/}
  {call treeview()/}
{/macro}
Define the macro treeview() to display the html using a section:
{macro treeview()}
  <div class="mainMenu">
  {section {
    id:"treeviewSection",
    bindRefreshTo: [{to:"menu", inside:data, recursive:false}]
  }}
    {if !data.menu}
       [no data]
    {else/}
       {call tv2_array(data.menu.menus)/}
    {/if}
  {/section}
  </div>
{/macro}
Define the tv2_array() macro and the tv2() macro to create the treeview content:
{macro tv2_array(mnuArray)}
  {if mnuArray}
   <ul>
     {foreach submenu inArray mnuArray}
        {call tv2(submenu)/}
     {/foreach}
   </ul>
  {/if}
{/macro}
/**
 * tv2: list with expand/collapse links
 */

{macro tv2(mnu)}
  {if !mnu.menus}
      // no sub-menu
      <li class="tv">${mnu.text}</li>
  {else/}
      // this menu has sub menus
      {section {
          id:"treeviewSection"+mnu.id,
          type:"LI",
          cssClass:"tv",
          bindRefreshTo: [{to:"data:expanded", inside:mnu}]
      }}
       // process css class
       {var cls=(mnu["data:expanded"]==true)?"tvOpen" : "tvClosed"/}
          <span class="tvIcon ${cls}">
              &nbsp;
              ${mnu.text}
          </span>
          {if mnu["data:expanded"]}
             {call tv2_array(mnu.menus)/}
          {/if}
      {/section}
  {/if}
{/macro}

Note: To get more info about sections take a look at this page.

Step 5

Create a file and call it MainScript.js.

Save it inside the view folder inside your project (/guides/treeview/view/).

Step 6

Define the classpath, the dependencies and the costructor:
Aria.tplScriptDefinition({
  $classpath : 'ariadoc.guides.treeview.view.MainScript',
  $dependencies: ['aria.utils.Json'],
  $constructor : function () {}
Define the function loadData() to call the controller method to load the data from the xml file:
loadData:function(evt) {
   this.moduleCtrl.loadData("some param");
}
Define the function toggleMenu() to expand or not the treeview:
toggleMenu:function(evt,args) {
   var mnu=args;
   var expanded=(mnu["data:expanded"]==true);
   aria.utils.Json.setValue(mnu,"data:expanded",!expanded);
}

Note: If you have a doubt about the template script syntax please take a look at this page.

Step 7

Create a file and call it ControllerInterface.js.

Save it inside the root folder inside your project (/guides/treeview/).

Step 8

Define the classpath, which class the controller interface extends, that is always aria.templates.IModuleCtrl and write the signature of all the methods of your controller:
Aria.interfaceDefinition({
   $classpath : 'ariadoc.guides.treeview.ControllerInterface',
   $extends : 'aria.templates.IModuleCtrl',
   $interface : {
      loadData : {$type : "Function",$callbackParam: 1}
   }
});

Step 9

Create a file and call it Controller.js.

Save it inside the root folder inside your project (/guides/treeview/).

Step 10

Define the classpath, which class the controller extends, that is always aria.templates.ModuleCtrl, which controller interface implements, in our case ariadoc.guides.treeview.ControllerInterface (that's the controller interface defined in the previous step), define the constructor and the destructor:
Aria.classDefinition({
   $classpath : 'ariadoc.guides.treeview.Controller',
   $extends : 'aria.templates.ModuleCtrl',
   $implements : ['ariadoc.guides.treeview.ControllerInterface'],
   $constructor : function () {
     this.$ModuleCtrl.constructor.call(this);
   $destructor : function () {
     this.$ModuleCtrl.$destructor.call(this);
   }
Add the filter in order to simulate the server to fetch the data:
aria.core.IOFiltersMgr.addFilter('ariadoc.guides.treeview.mocks.TestMsgHandler');
Define the function loadData() to fetch the data from the xml file to load them inside the treeview using a submitJsonRequest and add the callback to set the values returned:
/**
  * Load some data to display in the treeview
  * @param {String} param sample parameter
  * @param {aria.core.JsObject.Callback} cb callback
  */

loadData : function (param,cb) {
   var requestData = {myparam:param}; // set json rewquest params here
   this.submitJsonRequest("getData", requestData, {
      fn : "_loadData",
      scope : this,
      args : cb
   });
},

/**
  * loadDataset callback - called when server response is received
  * @param {Object} res the return value of submitJsonrequest
  * @param {Callback} args the callback arcugment passed by loadDataset
  */

  _loadData: function (res, args) {
    var cb=args;
    if (res.error) {
      this.$callback(cb);
      return;
    }
    var ds = res.response;

    // add dataset to the list and select it
    this.json.setValue(this._data,"menu",ds.menu);
    this.$callback(cb);
  }
}

Step 11

Create a file and call it MainStyle.tpl.css.

Save it inside the root folder inside your project (/guides/treeview/).

Step 12

Give some style to your todo app.

Note: If you have a doubt about the CSS template syntax please take a look at this page.

Step 13

That's it! Open the index.html with your favourite browser (e.g. Chrome) and enjoy.