Orbeon Search

Comments? Feedback?

This wiki does not yet support public comments (a limitation of Google Sites), so we encourage you to post your comments either:

On Twitter by responding to @orbeon.

On our community mailing list: subscribe sending an email to ops-users-subscribe@ow2.org (content of subject/body doesn't matter), you'll get a response with the email to use to send your message to the community mailing list.

Recent site activity

Tab View

Contents

  1. 1 Overview
  2. 2 Hiding and disabling tabs
  3. 3 Events
    1. 3.1 Knowing when users changed tab
    2. 3.2 Switching to another tab
  4. 4 Limitations


Overview

The tab view component allows you to group UI element in different tabs, as done in the XForms controls example:


The basic syntax goes as follows:

<fr:tabview>
    <fr:tab>
        <fr:label>Label of first tab</fr:label>
        Content of first tab.
    </fr:tab>
    <fr:tab>
        <fr:label>Label of second tab</fr:label>
        Content of second tab.
    </fr:tab>
</fr:tabview>

Hiding and disabling tabs

You can bind the fr:tab to a node in your instance (single-node binding). When doing this:
  • If the node is non-relevant, then the tab will be completely hidden.
  • If the node is readonly, then the tab will be disabled (grayed out).
  • The context for XForms inside the fr:tab is changed to the node. If you want to bind the fr:tab to a node, but don't want the context to be changed, set the following property to false (its default value is true):

    <property as="xs:boolean" name="oxf.xforms.xbl.fr.tabview.tab-changes-context" value="true"/>

When the fr:tabview becomes enabled, the first relevant tab becomes the current tab. If you want another tab to be current tab, dispatch the fr-toggle event to that tab (more on this below).

It is your responsibility as an XForms author not to hide or to disable the current tab. The tabview component doesn't stop you from doing this, which might lead to inconsistent UI state.

Events

Knowing when users changed tab

The events fr-select and fr-deselect are notification events that tell you when users switch between tabs. You do not need to listen to those events for the tab view to work effectively. Even if you don't put listeners on those events, the tab view will switch between tab as users click on the labels for those tabs.

The fr-select event is dispatched to the fr:tab the user selected, while fr-deselect is dispatched to the fr:tab the user came from. Those events are dispatched after the UI is updated, and so they can't be used to cancel the user going to another tab before the switch to that tab happens.

You can use those events to lazily load data into a tab, i.e. to only load the data needed to display a tab when users switch to those tabs, as done in the following snippet:

<fr:tab>
    <fr:label>Target tab</fr:label>
    <xforms:action ev:event="fr-select">
        <xforms:send submission="load-data-submission"/>
        <xforms:toggle case="data-loaded"/>
    </xforms:action>
    <xforms:switch>
        <xforms:case>
            <xhtml:img src="/ops/images/yui/loading.gif" style="vertical-align: middle"/>
            <xhtml:span>Loading data...</xhtml:span>
        </xforms:case>
        <xforms:case id="data-loaded">
            <xhtml:img src="/apps/fr/style/images/silk/tick.png" style="vertical-align: middle"/>
            <xhtml:span>Data loaded.</xhtml:span>
            ... Display data here ....
        </xforms:case>
    </xforms:switch>
</fr:tab>

Switching to another tab

You can programmatically switch to a tab by dispatching the event fr-toggle to the fr:tab you want to switch to.
  1. Make sure you have an id on the fr:tab corresponding to the tabs you want to switch to, as in: <fr:tab id="my-tab">.
  2. Switch to that tab with the following action: <xforms:dispatch targetid="my-tab" name="fr-toggle"/>.
  3. When the switch is done, the fr-select and fr-deselect events are dispatched, as if the user had done the switch by clicking on the tab label.
Also, if you set the focus to a control with <xforms:setfocus>, and that control is not in a visible tab, then the fr:tabview will automatically switch to tab so the control becomes visible.

Limitations

  • Children of fr:tabview can only be fr:tab elements. Other XForms markup is not support at this point; a consequence, you can't dynamically generate tabs by using an xforms:repeat around fr:tab.