A pane is used to contain one of the following:
The pane itself can also have a physical appearance, such as a border or a different background color, that visually groups the items for the user.
active, bgcolor, border, borderinfo, first, focused, itemlocation, itemnext, itemprevious, last, label, labelbgcolor, labelfontcolor, labelfontinfo, next, padding, previous, printbgcolor, printlabelbgcolor, printlabelfontcolor, printvisible, suppresslabel, url, visible, xformsenabled, xformsreadonly, xformsrequired, xformsvalid, xforms:group, xforms:switch
The following example shows a data model that we will link to a group of items contained within a pane:
<xformsmodels>
<xforms:model>
<xforms:instance xlmns="" id="customerInfo">
<customerData>
<name></name>
<address>
<street></street>
<city></city>
<country></country>
</address>
</customerData>
</xforms:instance>
</xforms:model>
</xformsmodels>
The following pane contains a group of items in an xforms:group that link to the data model:
<pane sid="Address">
<xforms:group ref="address">
<field sid="street">
<xforms:input ref="street">
<xforms:label>Street:</xforms:label>
</xforms:input>
</field>
<field sid="City">
<xforms:input ref="city">
<xforms:label>City:</xforms:label>
</xforms:input>
</field>
<field sid="Country">
<xforms:input ref="country">
<xforms:label>Country:</xforms:label>
</xforms:input>
</field>
</xforms:group>
</pane>
The following example shows a pane that contains an xforms:switch. This pane creates a "wizard" style form, in which the user completes one section then clicks a button to move to the next section. Each section is enclosed by an xforms:case within the xforms:switch, and each section except the last contains a button that changes the switch to the next case:
<pane sid="wizard">
<xforms:switch>
<xforms:case id="applicantName" selected="true">
<field sid="firstName">
<xforms:input ref="applicant/firstname">
<xforms:label>Enter your first name:</xforms:label>
</xforms:input>
</field>
<field sid="lastName">
<xforms:input ref="applicant/lastname">
<xforms:label>Enter your last name:</xforms:label>
</xforms:input>
</field>
<button sid="nextCase1">
<xforms:trigger>
<xforms:label>Next</xforms:label>
<xforms:toggle case="spouseName"
ev:event="DOMActivate"/>
</xforms:trigger>
</button>
</xforms:case>
<xforms:case id="spouseName" selected="false">
<field sid="spouseFirstName">
<xforms:input ref="spouse/firstname">
<xforms:label
>Enter the first name of your spouse:</xforms:label>
</xforms:input>
</field>
<field sid="spouseLastName">
<xforms:input ref="spouse/lastname">
<xforms:label
>Enter the last name of your spouse:</xforms:label>
</xforms:input>
</field>
<button sid="nextCase2">
<xforms:trigger>
<xforms:label>Next</xforms:label>
<xforms:toggle case="address"
ev:event="DOMActivate"/>
</xforms:trigger>
</button>
</xforms:case>
<xforms:case id="address" selected="false">
<field sid="street">
<xforms:input ref="address/street">
<xforms:label
>Enter your street address:</xforms:label>
</xforms:input>
</field>
<field sid="city">
<xforms:input ref="address/city">
<xforms:label
>Enter the city you live in:</xforms:label>
</xforms:input>
</field>
</xforms:case>
</xforms:switch>
</pane>
The following example shows a pane that displays a web page. The xforms:group provides the content that is printed and a spacer option for defining the size of the display area.
<pane sid="PANE1">
<xforms:group>
<label sid="LABEL1">
<value>This is printed.</value>
</label>
<spacer sid="vfd_spacer">
<itemlocation>
<x>220</x>
<y>160</y>
</itemlocation>
</spacer>
</xforms:group>
<url>http://example.com/colorPalette.html</url>
</pane>