The following code is from documentlist.get.html.ftl and illustrates how the 4.2 markup is used. All of the web script rendered components will adopt this template to introduce greater consistency.
<#include "include/documentlist.lib.ftl" />
<#include "../form/form.dependencies.inc">
<@markup id="css">
<#-- CSS Dependencies -->
<@link rel="stylesheet" href="${url.context}/res/components/documentlibrary/documentlist.css" group="documentlibrary"/>
</@>
<@markup id="js">
<#-- JavaScript Dependencies -->
<@script type="text/javascript" src="${url.context}/res/components/documentlibrary/documentlist.js" group="documentlibrary"/>
</@>
<@markup id="widgets">
<@createWidgets group="documentlibrary"/>
</@>
<@uniqueIdDiv>
<@markup id="html">
<@documentlistTemplate/>
</@>
</@>
The template is divided into six separate <@markup> directives:
- css declares the CSS files required for the web script
- js declares the JavaScript files required for the web script
- widgets is used for instantiating all the client-side JavaScript widgets
- html defines the HTML fragment that acts as the placeholder for the widget to anchor to.
By introducing a greater number of <@markup>directives into the template we make it easier to make finer-grained changes to the template; for example, to remove, replace or add new dependencies or to modify the HTML fragment.