ZimletTemplateFiles

You are looking at legacy Zimlet documentation. For Zimbra Modern UI Zimlet development go to: https://wiki.zimbra.com/wiki/DevelopersGuide#Zimlet_Development_Guide.

 - This is archive documentation, which means it is not supported or valid for recent versions of Zimbra Collaboration.

Note:	The instructions on this page only apply to versions of ZCS prior to 6.0.4. Since ZCS 6.0.4, deploying or installing a zimlet will automatically compile files with the .template extension.

Zimlet template files (actually Zimbra template files) are Javascript templates that work in a similar fashion to JSP - they are compiled from a html-fragment into a .js files using a tool found in Zimbra.

for example,

export CLASSPATH=/opt/zimbra/jetty/webapps/zimbraAdmin/WEB-INF/classes
~/bin/zmjava com/zimbra/kabuki/tools/templates/Template -p com_zimbra_hello_world.templates. MainView.template

will generate the MainView.template.js file that is then sent to the browser if needed by the Zimlet. (NOTE: the dot at the end of the -p prefix is significant)

declare template.js in the config.xml

     <include>templates/MainView.template.js</include>	

Template tool commandline parameters

• -p <prefix> - adds a prefix when registering the template
• -d - registers the template using AjxTemplate.define()
• -a - make template authorative

  This allows skin templates to override default templates

• -i <dir> - input dir
• -o <dir> - output dir

using template files from javascript

this.getHtmlElement().innerHTML = AjxTemplate.expand("com_zimbra_hello_world.templates.MainView#HelloWorldView_Main", params);

Syntax

• ${variable} - for direct variable substitution from the 'data' parameter

  Can use dot notation for sub-properties and call functions

  • e.g. ${name}, ${person.name}, ${person.getName()}

• <$ code $> - multiline javascript code
• <$= something $> - inline output from javascript code

Template input example

from AndyClark's OSCON2008 talk

<template id=’ZButton’> 
<table class="ZWidgetTable ZButtonTable ZButtonBorder"> 
<tr> 
<td class="ZLeftIcon ZWidgetIcon" id="${id}_image”></td> 
<td class="ZWidgetTitle" id="${id}_text”></td> 
</tr> 
</table> 
</template>

Compiled JS output example

var i = 0, html = []; 
html[i++] = ‘<table class="ZWidgetTable ZButtonTable ZButtonBorder">’; 
html[i++] = ‘<tr>’; 

html[i++] = ‘<td class="ZLeftIcon ZWidgetIcon" id="’ + id + ‘_image”>’; html[i++] = ‘<td class="ZWidgetTitle" id="’ + id + ‘_text”></td>’; html[i++] = ‘</tr></table>’; var buttonHtml = html.join(“”);

Future development suggestions

it seem to me that .template -> .template.js generation is currently rather haphazard. The .template.js is included in the zimlet config.xml in the same way as a hand written .js - Zimbra is not aware that this is actually a compiled artifact. It would (to my mind) be better for the config.xml to list package source, which it can then deal with as appropriate.

oddly, when developing the zimlet in the _dev dir, AjxTemplate seems to work, _but_ is gets a 404 error from requesting (incorrectly) the template.js file from

https://zimbra/zimbra/templates/com_zimbra_hello_world/templates/MainView.template.js?v=080815215848

even though the js class was found, due to its registration in the config.xml - suggesting that templates, and other lazy loaded resources _should_ be annotated differently in the config, so zimbra knows what it needs to do.