ClarkePeter’s Weblog

Learning by example, my exposure to Switch/Case in xforms was as a tool for navigating a page. The idea being basically that you divide your page into “cases” and then navigate those cases via toggle switches. In this scenario, you are viewing only one section of the page at a time, navigating back and forth between them.

Quite by accident, I discovered that Switch/Case can also be used to toggle a small section opened or closed. With this approach, the page doesnt’ change, only the item that is being toggled opens and closes–sort of like a drop box (and if you enclose this in a html fieldset, that’s exactly what it looks like)

This is done by creating two cases. The real key, however, is that the first case should be empty. The two cases then toggle back and forth between each other by referring to each others’ ids.

Here is the code (the fieldset is not necessary, i just like the drop box look).
This snippet of code can be encased in other “case” elements without any conflicts.

Here are some images of the switch/case as a dropdown.

another example:

Here ’s the code. Enjoy!

<fieldset>

<xf:switch>

<xf:case id=’instructionsClosed’>

<xf:trigger appearance=’minimal’>
<xf:label>:: Instructions :: </xf:label>
<xf:toggle case=’instructionsOpened’ ev:event=’DOMActivate’/>
</xf:trigger>

</xf:case>

<xf:case id=’instructionsOpened’>

<xf:trigger appearance=’minimal’>
<xf:label>:: Close Instructions :: </xf:label>
<xf:toggle case=’instructionsClosed’ ev:event=’DOMActivate’/>
</xf:trigger>

<p> Type something here (as little or as much text as you like). You could even
put some form controls in here. You could even put another switch/case
drop box in here. Yadda Yadda Yadaa ………….

I use “Instructions” and “Close Instructions” but you can use any titles you like.

Notice that the trigger below this text is identical to the trigger above this text. This last trigger is
not necessary, but would come in handy if you had a lot of text so that the user wouldn’t have to
scroll up to close the “view.”
</p>

<xf:trigger appearance=’minimal’>
<xf:label>:: Close Instructions :: </xf:label>
<xf:toggle case=’instructionsClosed’ ev:event=’DOMActivate’/>
</xf:trigger>

</xf:case>

</xf:switch>
<fieldset>

Also, rather than having a different label name for the “instructions” and “close instructions”, you could keep the same label name and span it with another color so it will act more like a true toggle.

Instead of this:

Code:

+=

                    <xf:trigger appearance='minimal'>
                            <xf:label>:: Close Instructions :: </xf:label>
                            <xf:toggle case='instructionsClosed' ev:event='DOMActivate'/>
                    </xf:trigger>

use this (notice the <span>)

Code:

+=

                    <xf:trigger appearance='minimal'>
                            <span style="color:grey">
                                    <xf:label>:: Instructions :: </xf:label>
                            </span>
                            <xf:toggle case='instructionsClosed' ev:event='DOMActivate'/>
                    </xf:trigger>