cf2:on

Purpose

Registers an event handler on a component.

The observed component can either be specified explicitly using the observer attribute, or it implicitly refers to the containing component of the handler. The containing component is not necessarily the containing element. The default component for the do and set attributes, if they do not specify it explicitly, is the observed component of the cf2:on element.

The markup has a number of different forms which correspond to the different tasks that event handlers can perform. Please note that these forms are mutually exclusive.

  1. The do attribute specifies the action to invoke on a selected component. In this case it is an error if the body is not empty, or any of the attributes used by any of the other forms are specified.

  2. The set attribute specifies the property to set on a selected component. In this case it is an error if the body is not empty, or the do attribute is specified. The value of the property is specified by a value attribute.

  3. The href attribute references a frame page. In this case the body of the element can contain cf2:param but cannot contain non-white space content. The cf2:param elements are used to construct the set of parameters to pass to the page, and each one must have the name attribute and a value but must not have the type attribute. Refer to the topic entitled Frames to learn more about the frames model.

  4. If neither of the previous attributes is set, then the body of the cf2:on element must contain a custom event handler. Its type is specified by the type attribute. In this case it is an error if any of the attributes used by the other two forms are specified. The body can contain both text content that defines the body of the script handler, and the param elements which define parameters for the script handler.

See also cf2:OnEventHandler.

Note:

An observer of a cf2:on element can only be an element that can throw an event, e.g. ui:button. In addition, cf2:on implicitly treats its parent element as the observer only if it is a ui:button element.

Contained by

Contains

Attribute groups

Attributes

Attribute Description Type Default Options Use
do The optional component reference to use and the action to perform upon it when the event occurs. xs:string     optional 
href The optional fragment identifier that references the page to which the user will navigate when the event occurs. xs:anyURI     optional 
set

The optional component reference to use and the property to set when the event occurs.

It is an error if the referenced component does not exist, does not have methods from V$.cf2.OPSet, or the property of the component referenced by the attribute does not exist within the component.

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">
  <head>
    <title>cf2:on</title>
   </head>
  <body>
    <div>
      <a id="mylink"/>
      <ui:box id="fi-summary">
        <ui:button>
          <span style="float: left">Click me!</span>
          <ui:inline id="fi-plus" initial-displayed-state="true"/>
          <ui:inline id="fi-minus" initial-displayed-state="false"/>
          <cf2:on event="cf2:activate">
            <cf2:param name="disp" property="fi-details#displayed"/>
            <cf2:param name="dispM" property="fi-minus#displayed"/>
            <cf2:param name="dispP" property="fi-plus#displayed"/>
            if(!disp.get()) {
              disp.set(true);
              dispM.set(true);
              dispP.set(false);
              window.location.href='#mylink';
            } else {
              disp.set(false);
              dispM.set(false);
              dispP.set(true);
            }
          </cf2:on>
        </ui:button>
        <div style="clear: both"/>
      </ui:box>
      <ui:box id="fi-details" initial-displayed-state="false">
        <p>Item 1</p>
        <p>Item 2</p>
        <p>Item 3</p>
      </ui:box>
    </div>
  </body>
</html>

Related topics