XForms, Selection and Deselection Events

Motivation

You want to perform actions based on a tab being selected or deselected. For example you may want to defer loading large parts of a complex model until a tab is selected.

Method

This example uses event logging to show how the selection and deselection events are used.

Screen Image

Logging tab selection and deselection events (Image: The original uploader was Dmccreary at English Wikibooks ., CC BY-SA 3.0)

Sample Code

xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events">;

Logging Tab Selection and Deselection Events
type="text/css">
@namespace xf url("http://www.w3.org/2002/xforms");
body {font-family: Helvetica, sans-serif;}
/* style each individual tab */
#tab-bar xf|trigger {
color: black;
border: 3px outset gray;
border-bottom: none;
font-weight: bold;
margin-right: 5px;
padding: 0.2em;
/* round the top corners - works only with FireFox */
-moz-border-radius: .5em .5em 0em 0em;
}

.log {
background: lavender;
border: solid blue 1px;
}

xmlns="" id="image">
/>

xmlns="" id="log">

log initialized

ev:event="xforms-ready">
nodeset="instance('log')/event" at="last()" position="after" />
ref="instance('log')/event[last()]" value="'xforms-ready event'" />

Logging Tab Selection and Deselection Events
The selection and deselection event will generate a message in the event log each time a tab is selected.

id="tab-bar">
appearance="minimal">
Tab One
case="case-1" ev:event="DOMActivate" />

appearance="minimal">
Tab Two
case="case-2" ev:event="DOMActivate" />

appearance="minimal">
Tab Three
case="case-3" ev:event="DOMActivate" />

id="case-1">
ev:event="xforms-select">
nodeset="instance('log')/event" at="last()" position="after" />
ref="instance('log')/event[last()]" value="'Tab One selected'" />

ev:event="xforms-deselect">
nodeset="instance('log')/event" at="last()" position="after" />
ref="instance('log')/event[last()]" value="'Tab One deselected'" />

Tab One

id="case-2">
ev:event="xforms-select">
nodeset="instance('log')/event" at="last()" position="after" />
ref="instance('log')/event[last()]" value="'Tab Two selected'" />

ev:event="xforms-deselect">
nodeset="instance('log')/event" at="last()" position="after" />
ref="instance('log')/event[last()]" value="'Tab Two deselected'" />

Tab Two

id="case-3">
ev:event="xforms-select">
nodeset="instance('log')/event" at="last()" position="after" />
ref="instance('log')/event[last()]" value="'Tab Three selected'" />

ev:event="xforms-deselect">
nodeset="instance('log')/event" at="last()" position="after" />
ref="instance('log')/event[last()]" value="'Tab Three deselected'" />

Tab Three

nodeset="instance('log')/event" class="log">
ref="." />

Discussion

Note that you must wrap the xf:setvalue values in a double quote and a single quote to append strings to the events.

Where this page came from

This page was imported from Wikibooks. From “XForms” on Wikibooks, by its contributors, under CC BY-SA 4.0. Changed here: set as a page; navigation and edit links left out; each image under its own licence, credited in its caption.

Nobody has written it yet — it is the source material at a new address, which is why search engines are asked to skip it and why no one earns from it. It is up for grabs: take it on, and it is yours to rewrite and to earn from.