displaying xf:item of a xf:select1 in a "table way"

I'll try to do something funky using Orbeon and generated XForms. I'd like to have my select1's items displayed in different columns of a table. I can't use the xf:repeat here, because it should be repeated inside the select1.

To illustrate, let's imagine I want to ask for several cars which is the best color. And I want to display these questions in a table way, with each question for a car in a TR and each color-item in a td.
Here what I would do in a dirty perfect world :

<xhtml:table>
      <xf:repeat nodeset="/cars">            
         <xhtml:tr>
           <xhtml:td><xf:output ref="car/name"/><xh:td/>
           <xf:select1>
                <xhtml:td><xf:item>Blue</xf:item></xhtml:td>
                <xhtml:td><xf:item>Green</xf:item></xhtml:td>
                <xhtml:td><xf:item>Yellow</xf:item></xhtml:td>
                <xhtml:td><xf:item>Red</xf:item></xhtml:td>
           </xf:select1>
         </xhtml:tr>         
      </xf:repeat>      
</xhtml:table>

But this can't work because I can't use the xf:repeat inside the xf:select1. I can't use only css, because I want to generate the Xforms and the css will depend of the number of rows and columns (suppose number of cars AND colors may change)... So I should generate the css too (maybe it's the right way...)... Any idea anyone ?

Solution

Using pure, portable XForms I don't see any other solution than using an instance in which each choice would live in its own node such as:

<xf:instance id="cars">
<cars xmlns="">
    <car>
        <name>Car 1</name>
        <is-blue></is-blue>
        <is-green></is-green>
        <is-yellow></is-yellow>
        <is-red></is-red>
    </car>
    <car>
        <name>Car 2</name>
        <is-blue></is-blue>
        <is-green></is-green>
        <is-yellow></is-yellow>
        <is-red></is-red>
    </car>
   .../...
</cars>

You can then have an <xf:select1> in each <td>:

<xf:repeat nodeset="car">
<tr>
    <td><xf:output ref="name"></xf:output></td>
    <td>
        <xf:select1 ref="is-blue" appearance="full">
            <xf:label></xf:label>
            <xf:item>
                <xf:label>Blue</xf:label>
                <xf:value>yes</xf:value>
            </xf:item>
        </xf:select1>
    </td>
    <td>
        <xf:select1 ref="is-green" appearance="full">
            <xf:label></xf:label>
            <xf:item>
                <xf:label>Green</xf:label>
                <xf:value>yes</xf:value>
            </xf:item>
        </xf:select1>
    </td>...

Of course you'll need to add actions to deselect the other choices when on of them is selected. And if you want to keep your original instance you'll have to use a secondary instance for these controls and write the actions to synchronize these two instances.

I wouldn't say that this would be fun to write but I have no doubt this can be done.

Now, if you are not afraid of using implementations specif tricks you can style the HTML generated by your favorite implementation (Orbeon in that case) to be displayed as a table.

To do so you need to write your controls, see what is generated and how you can rely on this markup to get the presentation you're trying to achieve.

For instance, if your controls are:

<xf:repeat nodeset="car">
<div class="table">
    <xf:select1 ref="color" appearance="full">
        <xf:label ref="../name"></xf:label>
        <xf:item>
            <xf:label>Blue</xf:label>
            <xf:value>blue</xf:value>
        </xf:item>
        <xf:item>
            <xf:label>Green</xf:label>
            <xf:value>green</xf:value>
        </xf:item>
        <xf:item>
            <xf:label>Yellow</xf:label>
            <xf:value>yellow</xf:value>
        </xf:item>
        <xf:item>
            <xf:label>Red</xf:label>
            <xf:value>red</xf:value>
        </xf:item>
    </xf:select1>
</div>

The following CSS rules would do the trick:

<style type="text/css">
.table{
    display:table;
}

.table .xforms-select1{
    display:table-row;
}

.table .xforms-select1 *{
    display:table-cell;
}</style>