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>