Guides

Beginners

Hello try step 1 - step 2

This is the most simple guide. It allows you to understand how a small Hello World application could be achieved in only few lines of code.

Take a look to the sample:

  • Inside the first sample you can see how simple is to create the Hello World application in aria templates, using the bootstrap to load the framework and to load the template with the message.
  • Inside the second sample you can see how to use a Template Script to interact with the template and how to give some style, using a CSS Template, to your template.

TreeView try it

A treeview is the most common component that can be turned into a nightmare. Thanks to the templating engine, Aria Templates makes it really easy to code your own treeview.

The guide loads the template and define the module controller inside the bootstrap. It uses the @aria:Link widget to load the data.
In this example we simulate the server using a filter and an xml file. The filter intercepts the JSON request and provides the response taking the data from data.xml.
To display the treeview the guide uses a section with automatic refresh bound to the data model.

Applications

Todo try it

This guide has been written in the scope of an opensource project: TodoMVC.
This project is about building a common todo application for the most popular JavaScript MVC frameworks.

To add a task to the list the guide uses the on keydown DOM event inside the template. To display all the tasks it uses a repeater, to manage the 'mark all' and the 'task left' functionalities uses a section bound to the data model. The remove action for a task is made by the on click DOM event and to modify a single task the application display an input text when the on blur event is raised on a task.

View step by step instructions - Click on the image to download the guide

Drench try it

This application is about a funny game.
The goal is to clear the board with the lowest possible number of moves, using the different colors.

This application is created by four sections (level, timer, board, banner) and all of them are bound to the data model (level, timer, moves). To manage the interaction with the user the app uses the on click DOM event and to generate the colored board uses the foreach statement.

View step by step instructions - Click on the image to download the guide

More specific guides

Airport Map try it

This application simulate an airport map, showing airplanes parked and airplanes taking off.

In this guide we simulate the request/response mechanism using a filter, in order to load flights data from different xml files. The application polls the xml files to have the updated data about the flights. When the application starts, it loads the data using the $viewReady statement. To update the data the app uses the onModuleEvent method.

Inside this guide it is used an external library, Raphael, with aria templates.

View step by step instructions - Click on the image to download the guide

Message Console try it

This guide shows how to create a console that display incoming messages.

To simulate the incoming messages, the application uses a filter to fetch data from different xml files. It shows also how to stop and resume the requests. The interface is composed by sections, one containing the initial message and the info about the total messages and another one with the pause/resume button, both bound to the data model. Than there are three widgets: @aria:Tooltip, @aria:Text and @aria:Button. To display the incoming messages the app uses a repeater.

View step by step instructions - Click on the image to download the guide

Spreadsheet try it

This guide simulate a program to generate and use spreadsheets. It allows you to create a new spreadsheet, to load it, using external xml files, and to copy an existing one. The goal is to show how easy is to use a large amount of data with aria templates and how the partial refresh works with repeaters.

To load datasets the app uses a filter to fetch data from an xml file. It uses different macros, the @aria:Link and the @aria:TextField widgets and a repeater to create the interface.

View step by step instructions - Click on the image to download the guide