cst:switch

Purpose

Container for one or more cst:case elements and an optional cst:otherwise element. It is used to choose between a number of mutually exclusive alternatives.

See also cf2:cst.Switch.

Styles

This element does not support styles itself, however, the cst:case and cst:otherwise elements support styles; by default:

cst|case {
  display: inline;
}
cst|otherwise {
  display: inline;
}

Contained by

Contains

Attributes

Attribute Description Type Default Options Use
component A reference to a component. The client-side value is the object representation of the component. xs:string     optional 
path

The expression that identifies the path to the value to test. It is resolved relative to the property-value attribute if specified, or the current context property-value. See also Client-side templates.

 cf2:JSONPath     optional 
property-value

A reference to an observable property of a component. The client-side value is the value of the property retrieved immediately prior to it being needed. It clears the current component, and sets the property used by this component as the default property. Refer to Client-side templates for further information about current components and default properties.

 xs:string     optional 

Example

<?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>

Related topics