G.1
XForms in XHTML
<html xmlns:my="http://commerce.example.com/payment"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xsd="http://www.w3.org/2001/XMLSchema"
xmlns:xforms="http://www.w3.org/2002/xforms" xmlns="http://www.w3.org/2002/06/xhtml2">
<head>
<title xml:lang="fr">XForms en XHTML</title>
<xforms:model schema="payschema.xsd">
<xforms:instance>
<
my:payment
as="credit">
<
my:cc
/>
<
my:exp
/>
</
my:payment>
</xforms:instance>
<xforms:submission action="http://www.example.com/buy.rb"
method="post" id="s00" />
<xforms:bind nodeset="my:cc" relevant="../@as='credit'" required="true()" />
<xforms:bind nodeset="my:exp" relevant="../@as='credit'" required="true()" />
</xforms:model>
</head>
<body>
...
<group xmlns="http://www.w3.org/2002/xforms">
<trigger>
<
label>Français</label>
<
toggle case="fr" ev:event="DOMActivate" />
</trigger>
<trigger>
<
label>English</label>
<
toggle case="en" ev:event="DOMActivate" />
</trigger>
</group>
<switch xmlns="http://www.w3.org/2002/xforms">
<case id="fr">
<
select1 ref="@as">
<
label xml:lang="fr">Choisissez un mode de paiement</
label>
<
choices>
<
item>
<
label xml:lang="fr">Comptant</label>
<
value>cash</value>
<
message level="modeless" ev:event="xforms-select" xml:lang="fr">
Ne pas envoyer d'argent comptant par la poste.</
message>
</
item>
<
item>
<
label xml:lang="fr">Carte bancaire</label>
<
value>credit</value>
</
item>
</
choices>
</
select1>
<
input ref="my:cc">
<
label xml:lang="fr">Numéro de carte bancaire</
label>
<
alert xml:lang="fr">Saississez un numéro de carte bancaire en cours
(séparez par un espace ou un trait d'union chaque groupe de chiffres)</
alert>
</
input>
<
input ref="my:exp">
<
label xml:lang="fr">Date d'échéance</label>
</
input>
<
submit submission="s00">
<
label xml:lang="fr">Achetez</label>
</
submit>
</case>
<case id="en">
<
select1 ref="@as">
<
label xml:lang="en">Select Payment Method</
label>
<
choices>
<
item>
<
label xml:lang="en">Cash</label>
<
value>cash</value>
<
message level="modeless" ev:event="xforms-select" xml:lang="en">
Please do not mail cash.</
message>
</
item>
<
item>
<
label xml:lang="en">Credit</label>
<
value>credit</value>
</
item>
</
choices>
</
select1>
<
input ref="my:cc">
<
label xml:lang="en">Credit Card Number</label>
<
alert xml:lang="en">Please specify a valid credit card number
(use spaces or hyphens between digit groups)</
alert>
</
input>
<
input ref="my:exp">
<
label xml:lang="en">Expiration Date</label>
</
input>
<
submit submission="s00">
<
label xml:lang="en">Buy</label>
</
submit>
</case>
</switch>
...
</body>
</html>
Schema file payschema.xsd
:
<!---->
<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema"
xmlns:my="http://commerce.example.com/payment"
targetNamespace="
http://commerce.example.com/payment" elementFormDefault="qualified">
<xsd:element name="payment">
<xsd:complexType>
<xsd:sequence minOccurs="0" maxOccurs="unbounded">
<
xsd:choice>
<
xsd:element
ref="my:cc" />
<
xsd:element
ref="my:exp" />
</
xsd:choice>
</xsd:sequence>
<xsd:attribute name="as" type="my:paymentAs" />
</xsd:complexType>
</xsd:element>
<xsd:element name="cc" type="my:cc" />
<xsd:element name="exp" type="xsd:gYearMonth" />
<xsd:simpleType name="cc">
<xsd:restriction base="xsd:string">
<xsd:minLength value="12" />
<xsd:maxLength value="19" />
<xsd:pattern value="[0-9]+" />
</xsd:restriction>
</xsd:simpleType>
<xsd:simpleType name="paymentAs">
<xsd:restriction base="xsd:string">
<xsd:enumeration value="cash" />
<xsd:enumeration value="credit" />
</xsd:restriction>
</xsd:simpleType>
</xsd:schema>
G.2 Editing Hierarchical Bookmarks
Using XForms
<html xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:my="http://commerce.example.com/payment"
xmlns:xsd="http://www.w3.org/2001/XMLSchema"
xmlns:xforms="http://www.w3.org/2002/xforms" xmlns="http://www.w3.org/2002/06/xhtml2"
xml:lang="en">
<head>
<style type="text/css">
xforms|input.editField {
font-weight:bold; font-size:20px; width:500px
}
xforms|label.sectionLabel {
font-weight:bold; color:white; background-color:blue
}
xforms|submit {
font-family: Arial; font-size: 20px; font-style: bold; color: red
}
</style>
<title>Editing Hierarchical Bookmarks In X-Smiles </
title>
<xforms:model id="bookmarks">
<xforms:instance src="bookmarks.xml" />
<xforms:submission id="s01" method="post" action="http://examples.com/"
/>
</xforms:model>
</head>
<body>
<xforms:repeat nodeset="section" id="repeatSections">
<xforms:input ref="@name" class="editField">
<
xforms:label
class="sectionLabel">Section</xforms:label>
</xforms:input>
<!---->
<xforms:repeat nodeset="bookmark" id="repeatBookmarks">
<
xforms:input
ref="@name">
<
xforms:label>Bookmark name</xforms:label>
</
xforms:input>
<
xforms:input
ref="@href">
<
xforms:label>URL</xforms:label>
</
xforms:input>
</xforms:repeat>
</xforms:repeat>
<p>
<!---->
<xforms:trigger id="insertbutton">
<
xforms:label>Insert bookmark</xforms:label>
<
xforms:insert
nodeset="section[index('repeatSections')]/bookmark"
at="index('repeatBookmarks')"
position="after" ev:event="DOMActivate" />
</xforms:trigger>
<!---->
<xforms:trigger id="delete">
<
xforms:label>Delete bookmark</xforms:label>
<
xforms:delete
nodeset="section[index('repeatSections')]/bookmark"
at="index('repeatBookmarks')"
ev:event="DOMActivate" />
</xforms:trigger>
</p>
<p>
<!---->
<xforms:trigger id="insertsectionbutton">
<
xforms:label>Insert section</xforms:label>
<
xforms:insert
nodeset="section" at="index('repeatSections')" position="after" ev:event="DOMActivate" />
</xforms:trigger>
<!---->
<xforms:trigger id="deletesectionbutton">
<
xforms:label>Delete section</xforms:label>
<
xforms:delete
nodeset="section" at="index('repeatSections')" ev:event="DOMActivate" />
</xforms:trigger>
</p>
<!---->
<xforms:submit submission="s01">
<xforms:label>Save</xforms:label>
<xforms:hint>Click to submit</xforms:hint>
</xforms:submit>
</body>
</html>
Initial instance file bookmarks.xml
:
<!---->
<bookmarks>
<section name="main">
<bookmark href="http://www.example.com/xforms.xml"
name="Main page" />
</section>
<section name="demos">
<bookmark href="http://www.example.com/demo/images.fo"
name="images" />
<bookmark href="http://www.example.com/demo/xf-ecma.xml"
name="ecma" />
<bookmark href="http://www.example.com/demo/sip.fo"
name="sip" />
</section>
<section name="XForms">
<bookmark href="file:///C/source/xmlevents.xml"
name="XML events" />
<bookmark href="file:///C/source/model3.xml"
name="model3" />
<bookmark href="file:///C/source/repeat.fo"
name="repeat" />
</section>
</bookmarks>
G.3 Survey Using XForms
and SVG
The following example shows one possible way of integrating
XForms with [SVG 1.1]. Note
that the complete set of rules for integrating XForms and SVG are
not fully specified at the time this specification was published.
Future versions of the XForms, SVG, or other W3C specifications
might define more complete rules for integrating XForms and SVG
which might not be compatible with the example below.
Note that the example below does not use SVG's
switch
and requiredExtensions
features,
which are commonly used in conjunction with
foreignObject
.
<!---->
<svg xmlns:s="http://example.com/survey" xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xforms="http://www.w3.org/2002/xforms" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="700px" height="600px" viewBox="0 0 700 600">
<defs>
<polygon id="bullet" points="-30,-30, -10,-10, -20,10"
fill="#007138" />
<xforms:model id="form1" schema="surveyschema.xsd">
<xforms:instance id="instance1">
<
s:survey
xmlns="http://example.com/survey">
<
s:drink>none</s:drink>
<
s:espressoPrefs>
<
s:numberPerWeek>0</s:numberPerWeek>
<
s:sugar>0</s:sugar>
<
s:lemon>Always</s:lemon>
</
s:espressoPrefs>
</
s:survey>
</xforms:instance>
<xforms:submission id="submit1" method="post" action="http://www.example.org/surveyhandler"
/>
</xforms:model>
</defs>
<title>Espresso survey</title>
<desc>Sample SVG and XForms - espresso customer survey</
desc>
<g>
<text x="50" y="70" font-size="40" font-family="Arial Black, sans-serif" font-weight="900">Customer Survey: Espresso</
text>
<g font-family="Arial, Helvetica, sans-serif"
font-size="18">
<foreignObject x="80" y="150" width="250" height="40">
<
xforms:select1
appearance="minimal" model="form1" ref="s:drink">
<
xforms:label>
<
g transform="translate(80, 140)">
<
use xlink:href="#bullet" />
<
text>Your usual coffee drink is:</
text>
</
g>
</
xforms:label>
<
xforms:item>
<
xforms:label>Rich, dark espresso</
xforms:label>
<
xforms:value>espresso</xforms:value>
</
xforms:item>
<
xforms:item>
<
xforms:label>Creamy cappuccino</xforms:label>
<
xforms:value>cappuccino</xforms:value>
</
xforms:item>
<
xforms:item>
<
xforms:label>Long, milky latt�</
xforms:label>
<
xforms:value>latt�</xforms:value>
</
xforms:item>
<
xforms:item>
<
xforms:label>Don't like coffee!</xforms:label>
<
xforms:value>none</xforms:value>
</
xforms:item>
</
xforms:select1>
</foreignObject>
<foreignObject x="80" y="240" width="250" height="40">
<
xforms:range
model="form1" start="0" end="30" step="5" ref="s:espressoPrefs/s:numberPerWeek">
<
xforms:label>
<
g transform="translate(80, 230)">
<
use xlink:href="#bullet" />
<
text>Shots of espresso per week:</
text>
</
g>
</
xforms:label>
</
xforms:range>
</foreignObject>
<foreignObject x="80" y="350" width="250" height="40">
<
xforms:select
model="form1" ref="s:espressoPrefs/s:sugar">
<
xforms:label>
<
g transform="translate(80, 340)">
<
use xlink:href="#bullet" />
<
text>Sugar?</text>
</
g>
</
xforms:label>
<
xforms:item>
<
xforms:label>Yes</xforms:label>
<
xforms:value>X</xforms:value>
</
xforms:item>
</
xforms:select>
</foreignObject>
<foreignObject x="80" y="420" width="250" height="90">
<
xforms:select1
appearance="full" model="form1" ref="s:espressoPrefs/s:lemon">
<
xforms:label>
<
g transform="translate(80, 410)">
<
use xlink:href="#bullet" />
<
text>Lemon?</text>
</
g>
</
xforms:label>
<
xforms:item>
<
xforms:label>Required for the full experience</
xforms:label>
<
xforms:value>Always</xforms:value>
</
xforms:item>
<
xforms:item>
<
xforms:label>Whatever</xforms:label>
<
xforms:value>Indifferent</xforms:value>
</
xforms:item>
<
xforms:item>
<
xforms:label>Keep that citrus to yourself</
xforms:label>
<
xforms:value>Never</xforms:value>
</
xforms:item>
</
xforms:select1>
</foreignObject>
</g>
<use xlink:href="#bullet" x="101" y="64" transform="scale(7,3)" />
<foreignObject y="150" x="500" height="60" width="100">
<xforms:submit model="form1">
<
xforms:label>Send survey</xforms:label>
</xforms:submit>
</foreignObject>
<!---->
<image xlink:href="espresso.svg" x="400" y="230" width="280" height="270" />
</g>
</svg>