Zimlet Developers Guide:Templates: Difference between revisions

Line 59: Line 59:


The life cycle of templates involves three steps:
The life cycle of templates involves three steps:
{| cellpadding="5" cellspacing="0" border="1" width="100%"
|style="background-color:#ffffcc;text-align: center" width="15%" |'''Stage'''
|style="background-color:#ffffcc;text-align: center" |'''Description'''
|-
|'''Stage 1: Creation'''
|!!!
|-
|'''Stage 2: Compiling'''
|!!!
|-
|'''Stage 3: Including'''
|!!!
|-
|'''Stage 4: Calling'''
|!!!
|}
=== Stage 1: Creation ===
!!!
=== Stage 2: Compiling ===
!!!
=== Stage 3: Including ===
!!!
=== Stage 4: Calling ===
!!!

Revision as of 01:13, 23 December 2009

Zdg-6-menu-icon-zimbra.jpg Introduction Zdg-6-menu-icon-green-flag.png Getting Started Zdg-6-menu-icon-terminal.png Dev Environment Setup Zdg-6-menu-icon-gear.png
Developing Zimlets
Proxy Servlet Setup
Firefox and Firebug
Templates
Troubleshooting
Zdg-6-menu-icon-library.jpg API Specifications Zdg-6-menu-icon-checkbox.jpg 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:

Stage Description
Stage 1: Creation !!!
Stage 2: Compiling !!!
Stage 3: Including !!!
Stage 4: Calling !!!

Stage 1: Creation

!!!

Stage 2: Compiling

!!!

Stage 3: Including

!!!

Stage 4: Calling

!!!

Jump to: navigation, search