Zimlet Developers Guide:Templates
Introduction | Getting Started | Dev Environment Setup |
|
API Specifications | Example Zimlets |
Overview
As you start writing user interfaces for your zimlet (for example, in the form of dialogs), you'll start writing more and more HTML code. Simple HTML code can be written in JavaScript in your zimlet. For example, this is the HTML code that displays a simple table:
<table cellpadding="2" cellspacing="0" border="0" width="100%"> <tr> <td colspan="2"> This is a sample table HTML code... </td> </tr> </table>
If you want to use this HTML in your zimlet, you can use an Array
to generate the code:
var html = new Array(); var i = 0; html[i++] = "<table cellpadding=\"2\" cellspacing=\"0\" border=\"0\" width=\"100%\"><tr><td colspan=\"2\">"; html[i++] = "This is a sample table HTML code..."; html[i++] = "</td></table>"; return html.join("");
As your pages get more advanced, keeping track of escaping the double-quotes and making sure your HTML code is properly formatted, to name a few, makes this method more difficult to manage.
That's where Templates come in. Templates provide a mechanism to write HTML code in a file and compile that code into JavaScript to be used with your zimlet. This allows you to separate the HTML presentation logic from the zimlet application code, making it easier to write HTML for your zimlets.
Template Life Cycle
The life cycle of templates involves three steps: