XForms/Switch and Case

Motivation edit

You want to conditionally display different areas of the screen based on static IDs.

Screen Image edit

 

As you click on one of the three buttons on the top row, the view displayed below will change.

Link to XForms Application edit

Switch and Case

Sample Program edit

<html
 xmlns="http://www.w3.org/1999/xhtml"
 xmlns:xf="http://www.w3.org/2002/xforms"
 xmlns:ev="http://www.w3.org/2001/xml-events">
   <head>
      <title>Switch, case and toggle</title>
      <!-- Demonstration of switch/case and toggle -->
      <style type="text/css">
      <![CDATA[
      @namespace xf url("http://www.w3.org/2002/xforms");
      xf|group {
         border: solid black 2px;
         background-color: silver;
         height: 100px;
      }
      xf|group xf|label {
         position: relative;
         font-family: Helvetica, sans-serif;
         font-weight: bold;
         background-color: white;
         padding: 2px;
         top: -10px;
         left: 10px;
      }
      xf|group p {
         position: relative;
         top: -30px;
         padding: 5px;
      }
          ]]>
      </style>
      <xf:model />
   </head>
   <body>
      <xf:trigger>
         <xf:label>View One</xf:label>
         <xf:toggle case="case-1" ev:event="DOMActivate" />
      </xf:trigger>
      <xf:trigger>
         <xf:label>View Two</xf:label>
         <xf:toggle case="case-2" ev:event="DOMActivate" />
      </xf:trigger>
      <xf:trigger>
         <xf:label>View Three</xf:label>
         <xf:toggle case="case-3" ev:event="DOMActivate" />
      </xf:trigger>
      <br />
      <br />
      <!-- only a single group will be displayed at any time -->
      <xf:switch>
         <xf:case id="case-1">
            <xf:group>
               <xf:label>View One</xf:label>
               <p>One One One One One One One One One One One One One One One One One One</p>
            </xf:group>
         </xf:case>
         <xf:case id="case-2">
            <xf:group>
               <xf:label>View Two</xf:label>
               <p>Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two</p>
            </xf:group>
         </xf:case>
         <xf:case id="case-3">
            <xf:group>
               <xf:label>View Three</xf:label>
               <p>Three Three Three Three Three Three Three Three Three Three Three Three Three Three Three Three Three</p>
            </xf:group>
         </xf:case>
      </xf:switch>
   </body>
</html>

Discussion edit

XForms provides an easy ways to swap between views. This also shows how the XForms group and label can be used like the HTML fieldset and legend.

References edit

Next Page: Relevant | Previous Page: Output and Links
Home: XForms