cst:template

Purpose

The template element within the Client Framework 2 user interface.

See also cf2:cst.Template.

Styles

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;
}

Contains

Attribute groups

Attribute

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 

Examples

<?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&amp;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&amp;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&amp;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&amp;q=horse</json:string>
          </json:property>
        </json:object>
      </json:inline>
    </div>
  </body>
</html>

Related topics