cf2:property

Purpose

Adds a custom property to an existing component or element. There are two ways in which a property can be added: as a new property or as an alias for another property. Refer to the topic entitled cf2:Property for further information.

If one of the fixed value attributes is specified, then its value will be used as the initial value of the property.

Note:

In order to access a custom property of an element, the property must be set for that element on the initial XDIME page. Otherwise MCS will not create the property for the selected element and as a consequence a custom JavaScript code or a cf2:on element may try to use the non-existent property.

Attribute groups

Attributes

Attribute Description Type Default Options Use
alias

The reference to the property to alias. It refers to the component and the property, via an xs:IDREF, followed by a '#' and an identifier. The component identifier is optional. Please note that the '#' character is required even if the component identifier is omitted. If the component is not specified, then it defaults to the parent element. Please note that it must be a component element, i.e. it cannot be provided as a component through custom JavaScript, although it can be a component provided using the custom component markup. The alias attribute and the fixed value attributes are mutually exclusive.

Note:

If the name attribute is not specified, then the name of the aliased property must start with 'cx'.

 xs:string     optional  
name

The name of the property to add. If the alias attribute is set, then this attribute is optional and defaults to the same name as the aliased property. Otherwise, the attribute is required.

Note:

The name of a property must start with 'cx'.

 xs:string     optional  
owner

The reference to the component that owns the property, i.e. the one in which the property will be stored. If not specified, then it defaults to the parent element. The following constraints apply to the owner and it is an error if any of them are not satisfied:

  • It must be an element within the body of the page, i.e. the body element or one of its descendants.

  • It cannot be provided as a component through custom JavaScript, although it can be a component provided using the custom component markup.

  • If it is not a component element, then it must be a visual element, i.e. one whose appearance is affected by styles.

xs:string     optional  

Example

<html xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:ui="http://www.volantis.com/xmlns/2009/07/cf2/ui"
  xmlns:cf2="http://www.volantis.com/xmlns/2009/07/cf2"
  xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs"
  xmlns:my="http://my.com/">
  <head>
    <title>cf2:property</title>
    <style type="text/css">
      @namespace my "http://my.com/";
      @ui|dynamic-property {
        name: cx-buttonClicked;
        type: string;
        my|clicked2: "clicked2";
        my|clicked: "clicked";
        my|clicked3: "clicked3";
      }
      .test:my|clicked {
        background-color: red;
      }
      .test:my|clicked2 {
        background-color: orange;
      }
      .test2:my|clicked {
        background-color: green;
      }
      .test2:my|clicked2 {
        background-color: yellow;
      }
      .box:my|clicked {
        border: dashed black;
      }
      .box:my|clicked2 {
        border: double;
      }
      .box:my|clicked3 {
        border: red solid;
      }
      ui|box {
        width: 100px;
        height: 100px;
        border: solid olive;
        margin: 20px;
        padding: 5px;
      }
  </style>
  </head>
  <body id="page">
    <cf2:property name="cx-buttonClicked"/>
    <cf2:property alias="page#cx-buttonClicked" owner="box"/>
    <div>
      <ui:button id="button">
        <span>Click here</span>
        <cf2:on event="cf2:activate" set="page#cx-buttonClicked" string="clicked"/>
      </ui:button>
    </div>
    <div>
      <ui:button id="button2">
        <span>Undo</span>
        <cf2:on event="cf2:activate" set="page#cx-buttonClicked" string="clicked2"/>
      </ui:button>
    </div>
    <div class="test">
      <cf2:property alias="page#cx-buttonClicked"/>Box 1</div>
    <div class="test2">
      <cf2:property alias="page#cx-buttonClicked"/>Box 2 </div>
    <ui:box class="box" id="box">
      <span>Box 3</span>
    </ui:box>
    <ui:box initial-state="my:clicked" class="box" id="box123">
      <ui:button>
        <span>Click to change the border color to red</span>
        <cf2:on event="cf2:activate" set="box123#cx-buttonClicked" string="clicked3"/>
      </ui:button>
      <span/>
    </ui:box>
  </body>
</html>

Related topics