xsl-list
[Top] [All Lists]

A simple XSLT transformation -> XForms output

2003-04-18 13:03:21
A couple of people have asked on list about XSLT and XForms. The following is a very simple XSLT transformation to an XForms-containing document which offers simple login functionality.

The instance data for the form, which I chose to insert using XSLT is here:

<?xml version='1.0'?>
<xmml:LoginData
 xmlns:xmml="http://www.xmml.com"; >
 <xmml:title>A simple XForms Login Example</xmml:title>
 <xmml:Name>Enter your name here</xmml:Name>
 <xmml:Password>Password</xmml:Password>
</xmml:LoginData>

In real life one could reference the above file using the src attribute on the <xforms:instance> element. But I wanted something for the XSLT processor to do.

The XSLT stylesheet is here:

<?xml version='1.0'?>
<xsl:stylesheet
 version="2.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform";
 xmlns="http://www.w3.org/1999/xhtml";
 xmlns:ev="http://www.w3.org/2001/xml-events";
 xmlns:xforms="http://www.w3.org/2002/xforms/cr";
 xmlns:xmml="http://www.xmml.com";
  >
<xsl:output method="xhtml"
 indent="yes"
 doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
 doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"; />

<xsl:template match="/">
<html>
<link href="SimpleLogin.css" rel="stylesheet" type="text/css"/>
<head>
<title><xsl:value-of select="/xmml:LoginData/xmml:title" /></title>
<xforms:model>
 <xforms:submission action="LoginData.xml" method="post" replace="instance"/>
 <xforms:instance>
<xsl:apply-templates select="xmml:LoginData" />
 </xforms:instance>
</xforms:model>
</head>
<body>
<xsl:comment>The values of the ref attributes are XPath expressions binding to the XForms model.</xsl:comment>
 <xforms:input ref="/xmml:LoginData/xmml:Name" >
  <xforms:label>Enter your name:</xforms:label>
 </xforms:input>
 <xforms:secret ref="/xmml:LoginData/xmml:Password" style="width:100pt">
  <xforms:label>Enter your password:</xforms:label>
 </xforms:secret>
<p/>
<xforms:submit>
 <xforms:label>Login by clicking here</xforms:label>
</xforms:submit>
</body>
</html>
</xsl:template>

<xsl:template match="xmml:LoginData">
<!-- The values of the select attributes are XPath expressions addressing the source XML document. -->
  <xsl:copy>
   <xsl:copy-of select="/xmml:LoginData/xmml:Name" />
   <xsl:copy-of select="/xmml:LoginData/xmml:Password" />
  </xsl:copy>
</xsl:template>

</xsl:stylesheet>

The referenced CSS file, to be saved as SimpleLogin.css, is here:

body { font-style: normal; font-weight: 500; background-color: #CCCCCC; color: #000099;} input, secret {width: 200pt; color:black; background-color: #FFFFFF; border: inset green;}
label {color:#000099}

Some XForms CSS is, to coin a phrase written in CSS 2.5, i.e. it isn't yet finalised. It has several parts which are not included in "normal" CSS2. As far as I can see X-Smiles doesn't yet implement all of CSS 2.5. :)

The result of the transformation is here:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> <html xmlns="http://www.w3.org/1999/xhtml"; xmlns:ev="http://www.w3.org/2001/xml-events"; xmlns:xforms="http://www.w3.org/2002/xforms/cr"; xmlns:xmml="http://www.xmml.com";>
   <link href="SimpleLogin.css" rel="stylesheet" type="text/css" />
   <head>
      <title>A simple XForms Login Example</title>
      <xforms:model>
<xforms:submission action="LoginData.xml" method="post" replace="instance"></xforms:submission>
         <xforms:instance>
            <xmml:LoginData>
               <xmml:Name>Enter your name here</xmml:Name>
               <xmml:Password>Password</xmml:Password>
            </xmml:LoginData>
         </xforms:instance>
      </xforms:model>
   </head>
   <body>
<!--The values of the ref attributes are XPath expressions binding to the XForms model.-->
      <xforms:input ref="/xmml:LoginData/xmml:Name">
         <xforms:label>Enter your name:</xforms:label>
      </xforms:input>
      <xforms:secret ref="/xmml:LoginData/xmml:Password" style="width:100pt">
         <xforms:label>Enter your password:</xforms:label>
      </xforms:secret>
      <p></p>
      <xforms:submit>
         <xforms:label>Login by clicking here</xforms:label>
      </xforms:submit>
   </body>
</html>

I used Saxon 7.4 for the transformation.

The result, Transformed.xhtml, displays correctly in the X-Smiles browser. It doesn't submit correctly as far as I can see.

Note that XHTML documents with a DOCTYPE declaration are VERY slow to display in the current version of X-Smiles. If you want to speed up display (a lot) omit the DOCTYPE declaration in the result of the transformation by adjusting <xsl:output> in the stylesheet.

I hope I have copied everything correctly and have given enough explanation to get someone new to XForms started. Ask if not.

Andrew Watt



XSL-List info and archive:  http://www.mulberrytech.com/xsl/xsl-list