The template element within the Client Framework 2 user interface.
See also cf2:cst.Template.
The template supports all the style properties that apply to block elements. In addition, templates support the layout and container style properties because each template is bound to an anonymous layout container, i.e. all content within the template ends up in the template. The following style properties are specified by default:
cst|template {
display: block;
overflow: hidden;
}| Attribute | Description | Type | Default | Options | Use |
|---|---|---|---|---|---|
| data | The identifier of the client-side object to which the template should first be bound. The attribute must refer to the id of a JavaScript component, not an XML element. It sets this component as the current component, and data as the default property. Refer to Client-side templates for further information about current components and default properties. |
xs:IDREF | required |
<?xml version="1.0" encoding="UTF-8"?>
<html
xmlns="http://www.w3.org/2002/06/xhtml2"
xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs"
xmlns:cf2="http://www.volantis.com/xmlns/2009/07/cf2"
xmlns:ui="http://www.volantis.com/xmlns/2009/07/cf2/ui"
xmlns:event="http://www.w3.org/2001/xml-events"
xmlns:template="http://www.volantis.com/xmlns/marlin-template"
xmlns:cst="http://www.volantis.com/xmlns/2009/07/cf2/template"
xmlns:json="http://www.volantis.com/xmlns/2009/07/json">
<head>
<title>Client Side Template</title>
</head>
<body>
<div>
<p>Template with switch property containing several slots linked to json
data</p>
<cst:template id="t1" data="json1">
<cst:switch path="datatype">
<cst:case string="image">
<cst:a href="href">
<cst:image path="icon"/>
</cst:a>
</cst:case>
<cst:case string="text">
<cst:a href="href">
<cst:value path="name"/>
</cst:a>
</cst:case>
<cst:otherwise style="display: block">
<span>unknown type '<cst:value path="datatype"/>'</span>
</cst:otherwise>
</cst:switch>
</cst:template>
<mcs:br/>
<ui:button id="b1">
<span>Use first (image) data set</span>
<cf2:on event="cf2:activate" set="t1#data" component="json1"/>
</ui:button>
<ui:button id="b2">
<span>Use second (text) data set</span>
<cf2:on event="cf2:activate" set="t1#data" component="json2"/>
</ui:button>
<ui:button id="b3">
<span>Use third (unknown) data set</span>
<cf2:on event="cf2:activate" set="t1#data" component="json3"/>
</ui:button>
</div>
<div>
<json:inline id="json1">
<json:object>
<json:property name="datatype">
<json:string>image</json:string>
</json:property>
<json:property name="name">
<json:string>Cow</json:string>
</json:property>
<json:property name="icon">
<json:object>
<json:property name="src">
<json:string>assets/images/gallery/photos/img5.jpg</json:string>
</json:property>
<json:property name="alt">
<json:string>Cow alternate text</json:string>
</json:property>
</json:object>
</json:property>
<json:property name="href">
<json:string>http://www.google.com/m/search?site=images&q=cow</json:string>
</json:property>
</json:object>
</json:inline>
<json:inline id="json2">
<json:object>
<json:property name="datatype">
<json:string>text</json:string>
</json:property>
<json:property name="name">
<json:string>Horse</json:string>
</json:property>
<json:property name="icon">
<json:object>
<json:property name="src">
<json:string>assets/images/gallery/photos/img4.jpg</json:string>
</json:property>
<json:property name="alt">
<json:string>Horse alternate text</json:string>
</json:property>
</json:object>
</json:property>
<json:property name="href">
<json:string>http://www.google.com/m/search?site=images&q=horse</json:string>
</json:property>
</json:object>
</json:inline>
<json:inline id="json3">
<json:object>
<json:property name="datatype">
<json:string>non-existing-datatype</json:string>
</json:property>
</json:object>
</json:inline>
</div>
</body>
</html>Please note that the cst:template element is not obligatory, i.e. the cst:a, cst:image, cst:value and cst:switch elements can be used on a page without being enclosed in cst:template. If the cst:template element is omitted, then the XDIME page must contain a JavaScript code similar to the following code:
<?xml version="1.0" encoding="UTF-8"?>
<html
xmlns="http://www.w3.org/2002/06/xhtml2"
xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs"
xmlns:cf2="http://www.volantis.com/xmlns/2009/07/cf2"
xmlns:ui="http://www.volantis.com/xmlns/2009/07/cf2/ui"
xmlns:event="http://www.w3.org/2001/xml-events"
xmlns:cst="http://www.volantis.com/xmlns/2009/07/cf2/template"
xmlns:json="http://www.volantis.com/xmlns/2009/07/json">
<head>
<title>Slots without a template</title>
</head>
<body>
<div>
<mcs:script type="text/javascript">
var MyTest = V$.Class.create();
MyTest.mixin(V$.cf2.OPSet);
V$.cf2.OPProto.add(MyTest, "d1", {});
V$.cf2.OPProto.add(MyTest, "d2", {});
MyTest.methods({
initialize: function() {
var res = V$.cf2.OPProto.init(this);
}
});
V$C.creation(function(c) {
var obj = new MyTest();
c.add('obj', obj);
});
V$C.starting(function(c) {
c.get('obj').setD1(c.get('json1'));
c.get('obj').setD2(c.get('json2'));
});
</mcs:script>
<p>Anchor slot with nested image slot and value slot using inherited default property</p>
<cst:a id="a1" property-value="obj#d1" href="href">
<cst:image id="a1i1" path="icon"/>
<mcs:br/>
<cst:value id="a1v1" path="name"/>
</cst:a>
<mcs:br/>
<ui:button id="b11">
<span>Use first data set</span>
<cf2:on event="cf2:activate" set="obj#d1" component="json1"/>
</ui:button>
<ui:button id="b12">
<span>Use second data set</span>
<cf2:on event="cf2:activate" set="obj#d1" component="json2"/>
</ui:button>
<p>Anchor slot with nested image slot and value slot setting its own
property-values</p>
<cst:a id="a2" property-value="obj#d2" href="href">
<cst:image id="a2i1" property-value="obj#d2" path="icon"/>
<mcs:br/>
<cst:value id="a2v1" property-value="#d2" path="name"/>
</cst:a>
<mcs:br/>
<ui:button id="b21">
<span>Use first data set</span>
<cf2:on event="cf2:activate" set="obj#d2" component="json1"/>
</ui:button>
<ui:button id="b22">
<span>Use second data set</span>
<cf2:on event="cf2:activate" set="obj#d2" component="json2"/>
</ui:button>
<json:inline id="json1">
<json:object>
<json:property name="name">
<json:string>Cow</json:string>
</json:property>
<json:property name="icon">
<json:object>
<json:property name="src">
<json:string>assets/images/gallery/photos/img5.jpg</json:string>
</json:property>
<json:property name="alt">
<json:string>Cow alternate text</json:string>
</json:property>
</json:object>
</json:property>
<json:property name="href">
<json:string>http://www.google.com/m/search?site=images&q=cow</json:string>
</json:property>
</json:object>
</json:inline>
<json:inline id="json2">
<json:object>
<json:property name="name">
<json:string>Horse</json:string>
</json:property>
<json:property name="icon">
<json:object>
<json:property name="src">
<json:string>assets/images/gallery/photos/img4.jpg</json:string>
</json:property>
<json:property name="alt">
<json:string>Horse alternate text</json:string>
</json:property>
</json:object>
</json:property>
<json:property name="href">
<json:string>http://www.google.com/m/search?site=images&q=horse</json:string>
</json:property>
</json:object>
</json:inline>
</div>
</body>
</html>