Zimlet Developers Guide:Templates

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 a template involves these stages:

  1. Creating the Template
  2. Compiling the Template
  3. Including the Template
  4. Calling the Template

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

  1. Browse to your zimlet base directory:
    cd com_zimbra_simpletemplate
    
  2. Create a "template directory:
    mkdir templates
    
  3. Create a file named "Simple.template".
  4. 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>
    
  5. Save the file. You now have created the template.

Compiling the Template

!!!

Including the Template

!!!

Calling the Template

!!!

Jump to: navigation, search