Difference between revisions of "ZimletTemplateFiles"

(Template input example)
(Syntax)
Line 25: Line 25:
  
 
== Syntax ==
 
== Syntax ==
* ${variable} - for direct variable substitution from the params 'hash'
+
* ${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
 
* <$ code $> - multiline javascript code
* <$= something $> - not sure what the difference (or need) is...
+
* <$= something $> - inline output from javascript code
  
 
== Template input example ==
 
== Template input example ==

Revision as of 18:51, 5 May 2009

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 AjxRegitering the template - *NEEDS EXPLAINATION OF UTILITY*
  • -d - defines an AjxPackage - *NEEDS EXPLAINATION OF UTILITY*
  • -a - authorative *WHAT?*
  • -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”></td>’; 
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.


Verified Against: Date Created: 2008
Article ID: https://wiki.zimbra.com/index.php?title=ZimletTemplateFiles Date Modified: 2009-05-05



Try Zimbra

Try Zimbra Collaboration with a 60-day free trial.
Get it now »

Want to get involved?

You can contribute in the Community, Wiki, Code, or development of Zimlets.
Find out more. »

Looking for a Video?

Visit our YouTube channel to get the latest webinars, technology news, product overviews, and so much more.
Go to the YouTube channel »

Jump to: navigation, search