411 REFERENCE · Wikibooks
XForms/Switch and Case
Reference material by Wikibooks contributors. This retains its source identity and is not 411 news reporting.
Motivation
You want to conditionally display different areas of the screen based on static IDs.
Screen Image
frame|center
As you click on one of the three buttons on the top row, the view displayed below will change.
Link to XForms Application
Switch and Case
Sample Program
<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
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
Relevant Output and Links