Creating a Widget with Mustache - tooltwist/documentation GitHub Wiki

In the Designer, select File->New... and select the Mustache Widget option.

The template.mustache file can be edited as a regular HTML file containing Mustache variables.

The files cssHeader.css and jsHeader.js contain CSS and Javascript to be included in the generated page, and input.json contains mock data that will be fed into the template when the widget is displayed in the Designer.

In the conf.xml, rather than specifying a Java widget class we have written, we specific the GenericMustacheWidget class.

<widget>
    <widgetClass>tooltwist.wbd.GenericMustacheWidget</widgetClass>
    <imageFile>/ttsvr/mall/widgetti/icons/bookmark.png</imageFile>
    <sampleImage>/ttsvr/mall/widgetti/icons/bookmark.png</sampleImage>
    <label>Mustache Test</label>

    <editableSnippet>
	<name>template.mustache</name>
    </editableSnippet>
    <editableSnippet>
	<name>input.json</name>
    </editableSnippet>
    <editableSnippet>
	<name>jsHeader.js</name>
    </editableSnippet>
    <editableSnippet>
	<name>cssHeader.css</name>
    </editableSnippet>
</widget>

The Mustache template has the ability to be used on three different occasions.

• Variables using the default delimiters {{ and }} are used when the page is accessed by a user.

• Variables surrounded by and are used at the time the page is generated.

• Variables surrounded by << and >> are ignored, so pass unaffected through to the browser, where they can be used as client-side Mustache templates.