Templating

This won't be a very long one...


What if you want to keep the look and feel of your webpages constant, yet let the data they display, dynamic in nature?

To make it clearer, imagine this:
You have a Login Page. The end user Logs in (validation etc is done... skipping that part) and then he is redirected to a page that greets him ( yes the standard "Hello World" !).

How would this happen in a Servlet-JSP way?

• The servlet (or whatever form your business logic is in) would perform the validation (checking for nulls and blanks etc) and authentication (checking against a Database of valid users) and do this:

• if invalid: redirect to an error page or display some error message.

• if valid and authenticated successfully: stores the username as a session variable

• Next the JSP uses this session variable to do the greeting bit.

This is great.

Templates are an alternative to this. I have used two types of templating systems:

Templates are the Markup that is used to display the data. In the templates, there are Placeholders (variables) for the Data.
So typically you would have your template content as 'hello $name' and the data that you pas to the template will substitute the $name for the real name.

Javascript templates (with Ajax)

I used the API available at http://code.google.com/p/trimpath/wiki/JavaScriptTemplates
for this. In this scenario, the template is stored on the serverside as a .jst file. There is one ajax call to retrieve the template content. This is kept in a string(say tempStr). The data to be substituted is in the form of a JSON variable (say data). Then using the API a method

result = tempStr.process(data)

would be invoked. This would cause the result variable to contain the markup fully equipped with the correct data. All you need to do now is to assign that to the innerHTML of some 'div' and you're done

Velocity Templates

These are even cooler. The essential element here is a 'context'. The backend basically populates the velocity context with actual Java Objects. The template code then uses these objects. The BEST part is that you can actually access the public methods of the object in the Velocity Code.

So, if you have a shopping cart type of application, where the user has added 3 items to his cart on the last login, and this time he chooses two more... how would you do it?

The backend would be a Java Object from the Collection Framework.. say an ArrayList. Each item in the list would be an object of type 'item'. Item here would be a POJO on the lines of this:

public class Item{

private String name;

private long price;

/*Accessors and Mutators for both of the above*/

}

So when the user Logs in, and you want to display his current items, you would so the following in yor template:

#foreach ($item in $currentItems)
$item.getName() $item.getPrice

#end

where currentItems is the ArrayList that you have placed in the context. Here i have used the accessor methods for private variables. You can directly use the variables names too, if you have the proper accessor methods.

Similarly to display his current bill you would do:

#set($bill=0)
#foreach ($item in $currentItems)
$bill = $item.getPrice + $bill
#end

Your bill is $bill

For much detail on Velocity Templates, and the API you need in order to use it please see :

http://www.javaworld.com/javaworld/jw-12-2001/jw-1228-velocity.html

http://velocity.apache.org/


Thats all folks.... (imagine it the looney toons way :-) )