Top

Hello World

As a developer, when you want to start with a new development framework you will try to write the "Hello World" and see how easy it is. Well, with aria templates, it's pretty easy.

This guide shows you how to write the very basic Hello World example and how to add few little things in 2 simple steps.

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

  • Write the very basic "Hello World" app.
  • Add some logic and style to your app.

Tutorial Hello World - Sample 1

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/hello/sample_1/).

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 include these scripts:

<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 display your template you need to target a div that will contain it, so you have to define the div container like this:

<div id="myContainer"></div>
To load the template you need to call the Aria.loadTemplate() function and specify the template classpath and the div container (defined previously):
<script type="text/javascript">
Aria.loadTemplate({
  classpath:"ariadoc.guides.hello.sample_1.view.Hello",
  div:"myContainer",
  data:{
    msg:"Hello World, this is AriaTemplates!"
  }
});
</script>
In this case we have defined also the data model inside the Aria.loadTemplate() function using the data object.
To have more info about how to load a template take a look at this article.

Step 3

Create a file and call it Hello.tpl. This is the template that will be used to display the message "Hello World".

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

Step 4

Define the classpath of your template and display the message that you have defined inside the data model, in this case "Hello World, this is aria templates!":
{Template {
    $classpath:'ariadoc.guides.hello.sample_1.view.Hello'
}}
  {macro main()}
    <h1>${data.msg}</h1>
  {/macro}
{/Template}

Step 5

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

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

Tutorial Hello World - Sample 2

Step 1

Create the index.html file like you did in sample 1 step 1.

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

Step 2

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

To load the framework and to define the div container use the same code used inside sample1 step 2.

To load the template:
<script type="text/javascript">
Aria.loadTemplate({
 classpath:"ariadoc.guides.hello.sample_2.view.Hello",
 div:"myContainer",
 data:{
  people:[
   {name:"John",age:27},
   {name:"Mary",age:25},
   {name:"David",age:35},
   {name:"Fabien",age:28}
  ]
 }
});
</script>
Here we are defining a data model with some people with name and age.

Step 3

Create a file and call it Hello.tpl.

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

Step 4

Define the classpath of your template, specify that your template will have some CSS style and a script:
{Template {
   $classpath:'ariadoc.guides.hello.sample_2.view.Hello',
   $css: ['ariadoc.guides.hello.sample_2.view.HelloStyle'],
   $hasScript:true
}}
Declare the macro main() and inside of it display all people's name using a foreach and display all the people's attribute using a repeater:
{macro main()}
  <div class="travelerForm">
   <div class="formHelpMsg">Hello
    {foreach people inArray data.people}
      ${people.name}
    {/foreach}, this is Aria Templates!
    <br /><br />Click on a person to view its personal details:
   </div>
   {repeater {
     loopType: "array",
     content: data.people,
     type: "DIV",
     childSections : {
        id: "psection",
        macro: "personDisplay",
        bindRefreshTo:{fn:"getRepeaterSectionBinding"},
        type: "DIV"
     }
   }/}
  </div>
{/macro}
Define the macro to manage the sections inside the repeater and define the on click event on them:
{macro personDisplay(repeaterItem)}
  {var person=repeaterItem.item/}
  {var detailsVisible=(person["data:detailsVisible"]==true)/}
  {var cls=(detailsVisible)? "pwdetails" : "pnodetail"/}
  <div class="${cls}">
    ${person.name}
    {if detailsVisible}: ${person.age} years old {/if}
  </div>
{/macro}
Finally, don't forget to close the opening Template tag:
{/Template}

Step 5

Create a file and call it HelloScript.js.

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

Step 6

Define the classpath, the dependencies and the constructor:
$classpath : 'ariadoc.guides.hello.sample_2.view.HelloScript',
$dependencies: ['aria.utils.Json'],
$constructor : function () {}
Define the functions to manage the on click event to display the age for the clicked person:
getRepeaterSectionBinding:function(repItem) {
  var person=repItem.item;
  return [{to:"data:detailsVisible", inside:person}];
}
toggleDetailDisplay:function(evt,args) {
  var person=args;
  var detailsVisible=(person["data:detailsVisible"]==true);
  aria.utils.Json.setValue(person,"data:detailsVisible",!detailsVisible);
}

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 HelloStyle.tpl.css.

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

Step 8

Give some style to your app.

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

Step 9

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