XForms/Switch and Case
Appearance
< XForms
Motivation
[edit | edit source]You want to conditionally display different areas of the screen based on static IDs.
Screen Image
[edit | edit source]As you click on one of the three buttons on the top row, the view displayed below will change.
Link to XForms Application
[edit | edit source]Sample Program
[edit | edit source]<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 | edit source]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.