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 a template involves these stages:
This section will walk through the creation of a Template for an example zimlet called "com_zimbra_simpletemplate".
Creating the Template
This stage involves writing the HTML code for the template in the .template
file (i.e. the "Template File"). The Template File basically looks like an HTML file but with some dynamic capabilities.
The HTML code in the Template File should be wrapped in a <template>
tag and have a template ID specified. The Template File should be placed in a "templates" directory below the zimlet base directory.
Example
- Browse to your zimlet base directory:
cd com_zimbra_simpletemplate
- Create a "template directory:
mkdir templates
- Create a file named "Simple.template".
- Open the file and insert the following text:
<template id="Simple"> <table cellpadding="2" cellspacing="0" border="0" width="100%"> <tr> <td colspan="2"> This is a sample table HTML code... </td> </tr> </table> </template>
- Save the file.
Compiling the Template
!!!
Including the Template
!!!
Calling the Template
!!!