cst:a

Purpose

Defines an anchor slot within a client-side template.

See also cf2:cst.AnchorSlot.

If a slot references a frame page component, then it will change the page in the associated frame. If the slot references a history component, this it will revert the history back to the point specified by the entry. If the value is a string then it is used as the destination to which the page will be redirected.

Styles

The cst:a element supports all the style properties that apply to an anchor element; by default:

cst|a {
  display: inline;
}

Contained by

Attribute groups

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 
href

The JSON path pointing to the value which must be used as the href attribute of an anchor element. It is resolved relative to the property-value attribute if specified, or the current context property-value. If the path evaluates to null, then the href attribute will be omitted. 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