XForms Switch Module

Introduction

XForms Switch Module define a switch construct that allows the creation of user interfaces where the user interface can be varied based on user actions and events. The module defines for this switch, case and toggle elements.

Switch Element

The element (see the spec) is used in conjunction with case and toggle elements. The switch element contains case elements which in turn contain markup. Only the contents of a single case may be displayed at one time. The toggle element is an action that when triggered will make a case selected and visible and thereby hiding all other case elements contained by the same switch.

Attributes

• Single-Node Binding

Type restrictions

The switch element can be bound to a node containing data of any type. Actually, the switch element doesn't interact with the data in the bound node. However, having a relevant model item property on the bound node has an effect on a switch. Binding a switch to a data node will also set a context that the expressions contained inside the case elements can build upon.

Representations

The switch element doesn't have a visual representation.

Case Element

This element (see the spec) encloses markup to be conditionally rendered. The content elements (e.g. form controls, groups, switches, repeats and host language elements) within a non-selected case are not rendered. Correspondingly, content elements in a case that becomes selected are visible.

Attributes

• Special
  • selected - determines the initial selected state of the case. If multiple cases within a switch are marked as selected="true", the first selected case will appear and all others will not be visible. If no case is initially selected, the first case inside the switch becomes selected and visible.

Representations

The case element doesn't have a visual representation.

Toggle Element

The element (see the spec) selects one possible case from an exclusive list of alternatives in a switch. A toggle can be designated as an event handler using XML Events or may also be contained in an action element. In either scenario, it would be triggered by an event.

Attributes

• Events
• Special
  • case - the IDREF of a case element to select

Representations

The case element doesn't have a visual representation.

Example

<switch>
  <case id="in" selected="true">
    <input ref="yourname">
      <label>Please tell me your name</label>
      <toggle ev:event="DOMActivate" case="out"/>
    </input>
  </case>
  <case id="out" selected="false">
    <html:p>Hello <output ref="yourname" />
      <trigger id="editButton">
        <label>Edit</label>
        <toggle ev:event="DOMActivate" case="in"/>
      </trigger>
    </html:p>
  </case>
</switch>