ZimletTemplateFiles: Difference between revisions
(→Syntax) |
|||
Line 25: | Line 25: | ||
== Syntax == | == Syntax == | ||
* ${variable} - for direct variable substitution from the | * ${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 $> - | * <$= 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()}
- Can use dot notation for sub-properties and call functions
- <$ 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.