[xsl] A simple XSLT transformation -> XForms output

Subject: [xsl] A simple XSLT transformation -> XForms output
From: Andrew Watt <andrew@xxxxxxxxxxxxxx>
Date: Fri, 18 Apr 2003 21:03:21 +0100
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


Current Thread