XForms/Select1 Multi-Column
< XForms
Motivation
[edit | edit source]You want to select one item from multiple column of items.
Method
[edit | edit source]To do this we must unselect all of the column not selected so that only one column has a value in the output.
Source Code
[edit | edit source]<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:xf="http://www.w3.org/2002/xforms">
<head>
<title>Select1 Multi Column</title>
<style type="text/css"><![CDATA[
@namespace xf url("http://www.w3.org/2002/xforms");
body {
font-family: Helvetica, sans-serif;
font-size: 10pt;
}
/* vertical align the selectors in each column. I am not sure why none of these CSS selectors work */
.state-selector tr td {
vertical-align:text-top;
align: top;
valign: top;
}
/* this is also not working */
.state-selector xf\:label {
font-weight: bold;
}
]]>
</style>
<xf:model>
<xf:instance xmlns="" id="cols">
<data>
<col-1/>
<col-2/>
<col-3/>
<cols/>
</data>
</xf:instance>
<!-- this concatenates the three column values -->
<xf:bind nodeset="cols" calculate="concat(../col-1, ../col-2, ../col-3)"/>
<!-- this is where we log the events -->
<xf:instance id="log">
<data xmlns="">
<event/>
</data>
</xf:instance>
<xf:action ev:event="xforms-ready">
<xf:insert nodeset="instance('log')/event" at="last()" position="after"/>
<xf:setvalue ref="instance('log')/event[last()]" value="'xforms-ready'"/>
</xf:action>
</xf:model>
</head>
<body>
<p>Select1 Multi Column</p>
<table border="1">
<tr>
<td valign="top">
<xf:select1 ref="col-1" appearance="full">
<xf:item>
<xf:label>Red</xf:label>
<xf:value>red</xf:value>
</xf:item>
<xf:item>
<xf:label>Orange</xf:label>
<xf:value>orange</xf:value>
</xf:item>
<xf:action ev:event="DOMActivate">
<xf:setvalue ref="instance('cols')/col-2" value="''"/>
<xf:setvalue ref="instance('cols')/col-3" value="''"/>
<xf:insert nodeset="instance('log')/event" at="last()" position="after"/>
<xf:setvalue ref="instance('log')/event[last()]" value="'col 1 xforms-value-changed'"/>
</xf:action>
</xf:select1>
</td>
<td valign="top">
<xf:select1 ref="col-2" appearance="full">
<xf:item>
<xf:label>Yellow</xf:label>
<xf:value>yellow</xf:value>
</xf:item>
<xf:item>
<xf:label>Green</xf:label>
<xf:value>green</xf:value>
</xf:item>
<xf:action ev:event="DOMActivate">
<xf:setvalue ref="instance('cols')/col-1" value="''"/>
<xf:setvalue ref="instance('cols')/col-3" value="''"/>
<xf:insert nodeset="instance('log')/event" at="last()" position="after"/>
<xf:setvalue ref="instance('log')/event[last()]" value="'col 2 xforms-value-changed'"/>
</xf:action>
</xf:select1>
</td>
<td valign="top">
<xf:select1 ref="col-3" appearance="full">
<xf:item>
<xf:label>Blue</xf:label>
<xf:value>blue</xf:value>
</xf:item>
<xf:item>
<xf:label>Indigo</xf:label>
<xf:value>indigo</xf:value>
</xf:item>
<xf:action ev:event="DOMActivate">
<xf:setvalue ref="instance('cols')/col-1" value="''"/>
<xf:setvalue ref="instance('cols')/col-2" value="''"/>
<xf:insert nodeset="instance('log')/event" at="last()" position="after"/>
<xf:setvalue ref="instance('log')/event[last()]" value="'col 3 xforms-value-changed'"/>
</xf:action>
</xf:select1>
</td>
</tr>
</table>
<xf:trigger>
<xf:label>Clear</xf:label>
<xf:action ev:event="DOMActivate">
<xf:setvalue ref="col-1" value="''"/>
<xf:setvalue ref="col-2" value="''"/>
<xf:setvalue ref="col-3" value="''"/>
<xf:insert nodeset="instance('log')/event" at="last()" position="after"/>
<xf:setvalue ref="instance('log')/event[last()]" value="'clear'"/>
</xf:action>
</xf:trigger>
<br/>
<xf:trigger>
<xf:label>refresh</xf:label>
<xf:action ev:event="refresh">
<xf:setvalue ref="col-1" value="''"/>
<xf:setvalue ref="col-2" value="''"/>
<xf:setvalue ref="col-3" value="''"/>
<xf:insert nodeset="instance('log')/event" at="last()" position="after"/>
<xf:setvalue ref="instance('log')/event[last()]" value="'refresh'"/>
</xf:action>
</xf:trigger>
<br/>
<xf:output ref="cols">
<xf:label>Color selected: </xf:label>
</xf:output>
<br/>
<xf:output ref="col-1">
<xf:label>Column 1: </xf:label>
</xf:output>
<br/>
<xf:output ref="col-2">
<xf:label>Column 2: </xf:label>
</xf:output>
<br/>
<xf:output ref="col-3">
<xf:label>Column 3: </xf:label>
</xf:output>
<br/>
<div id="log">
<span>
<b>Event Log</b>
</span>
<xf:repeat id="results-repeat" nodeset="instance('log')/event">
<xf:output ref="."/>
</xf:repeat>
</div>
</body>
</html>