Top

Message Console

In this guide you will learn how to create a console to display on real time incoming messages.

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

  • Use filters 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 sections and repeaters.
  • Play with the refresh mechanism.
  • Use aria templates widgets (@aria:Tooltip, @aria:Text and @aria:Button)

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/msgconsole/).

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.msgconsole.view.Main',
    div:"root",
    moduleCtrl: {
      classpath : "ariadoc.guides.msgconsole.MsgController"
    }
  });
</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 message console.

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

Step 4

Define the classpath of your template and declare that it has a CSS template:
{Template {
    $classpath:'ariadoc.guides.msgconsole.view.Main',
    $hasScript: false,
    $css: ['ariadoc.guides.msgconsole.view.MainStyle']
}}
Define inside the macro main() the html and the section to manage the start button and the beginning message, than call the pauseBtn() macro:
<table class="toppanel">
   <tr><td class="topmsg">
         {section {
             id:"startBtn",
             bindRefreshTo: [
               {to:"retrievalStarted", inside:data} ,
               {to:"nbrOfMsgs", inside:data}
             ]
         }}
          {if !data.retrievalStarted}
            <div class="start">
              Message Retrieval has not started yet:
              <a>Start Retrieval</a>
            </div>
          {else/}
            Total messages: ${data.nbrOfMsgs}
            <i>(Open Firebug to see the message traffic)</i>
          {/if}
         {/section}
       </td>
       <td>
          {call pauseBtn()/}
       </td></tr>
</table>

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

Define a table with a repeater bound to the data model to display the incoming messages:
<div class="listcontainer">
   <table class="msglist">
      {repeater {
         loopType: "array",
         content: data.msgs,
         type: "TBODY",
         childSections : {
            id: "msgrow",
            macro: {
                name: "msgRow",
                args: [],
                scope:this
            },
            type: "TR"
         }
      }/}
   </table>
</div>

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

Define the pauseBtn() macro to display the pause button that allow the users to pause and resume the incoming messages:
  {macro pauseBtn()}
    {section {
        id:"pauseBtn",
        bindRefreshTo: [
           {to:"retrievalStarted", inside:data},
           {to:"retrievalPaused", inside:data}
        ]
    }}
     {if data.retrievalStarted}
       <div>
         {if !data.retrievalPaused}
           {@aria:Button {
              label:"Pause",
              width:80,
              onclick:{
                 fn:"pauseMsgRetrieval",
                 scope:moduleCtrl
              }
           }/}
         {else/}
           {@aria:Button {
              label:"Resume",
              width:80,
              onclick:{
                 fn:"startMsgRetrieval",
                 scope:moduleCtrl
              }
           }/}
         {/if}
       </div>
     {/if}
    {/section}
  {/macro}
Define the msgRow() macro to manage the single lines of the message console, with the @aria:Tooltip widget to add a tooltip and the @aria:Text widget for the message description:
 {macro msgRow(itm)}
    {set msg=itm.item/}
    {@aria:Tooltip {
      id:"msgTip"+msg.uid,
      width: 250,
      macro: {
        name: "msgTooltip",
        args: [msg]
      }
    }/}
    {set cls="sev"+msg.severity/}
    <td class="${cls} idx">${msg.id}</td>
    <td class="${cls} prio">${msg.severity}</td>
    <td class="${cls} date">${msg.date}</td>
    <td class="${cls} cat">${msg.cat}</td>
    <td class="${cls} loc">${msg.location}</td>
    <td class="${cls} desc">
      {@aria:Text {
          text: msg.description,
          tooltipId: "msgTip"+msg.uid,
          width: 240
        } /}
    <td class="${cls} auth">${msg.author}</td>
  {/macro}
Define the msgTooltip() macro to generate the tooltip over the message description:
  {macro msgTooltip(msg)}
    // macro generating the tooltip over the message description
    <b>Message Severity: </b> ${msg.severity}<br />
    <b>Message Category: </b> ${msg.cat}<br />
    <b>Location: </b> ${msg.location}<br />
    <b>Description: </b> ${msg.description}
  {/macro}

Step 5

Create a file and call it MsgControllerInterface.js.

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

Step 6

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.msgconsole.MsgControllerInterface',
      $extends : 'aria.templates.IModuleCtrl',
      $interface : {
           startMsgRetrieval : {$type : "Function"},
           pauseMsgRetrieval : {$type : "Function"}
      }
  });

Step 7

Create a file and call it MsgController.js.

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

Step 8

Define the classpath, which class the controller extends, that is always aria.templates.ModuleCtrl, which controller interface implements, in our case ariadoc.guides.msgconsole.MsgControllerInterface (that's the controller interface defined in the previous step), define the constructor and the destructor. Remember to add the filter to fetch the data from the xml file in order to simulate the server requests:
Aria.classDefinition({
  $classpath : 'ariadoc.guides.msgconsole.MsgController',
  $extends : 'aria.templates.ModuleCtrl',
  $implements : ['ariadoc.guides.msgconsole.MsgControllerInterface'],
  $dependencies: ['aria.core.Timer'],
  $constructor : function () {
     this.$ModuleCtrl.constructor.call(this);
     // Test handler to mock responses
     aria.core.IOFiltersMgr.addFilter('ariadoc.guides.msgconsole.mocks.TestMsgHandler');
     this._count=0; // internal counter used to retrieve different data
     this._msgCount=0;
     this._data = {
         retrievalStarted:false,
         retrievalPaused:false,
         lastMsgs: [],
         msgs : []
     };
  },
  $destructor : function () {
     this.$ModuleCtrl.$destructor.call(this);
  }
Define the functions: startMsgRetrieval() and pauseMsgRetrieval() to change the value of this._data when the user clicks on the start/pause button:
startMsgRetrieval : function (cb) {
  this.json.setValue(this._data,"retrievalStarted",true);
  this.json.setValue(this._data,"retrievalPaused",false);
  this._retrieveMsgs();
},
pauseMsgRetrieval : function (cb) {
  this.json.setValue(this._data,"retrievalPaused",true);
}
Than define this._retrieveMsgs() function to make the Json request to fetch the message and the callback to manage the server answer.

Step 9

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

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

Step 10

Give some style to your todo app.

Step 11

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