XSLT (Extensible Stylesheet Language Transformations) can be intimidating for web developers, especially if you are already comfortable in your ASP/HTML/JavaScript/CSS worlds, which a lot of us have been happily living in for some time. Years back, along came XML, and not long after the need to display this data in web applications became apparent. XML can be a beautiful thing, and its ability to describe itself and be adaptable to so many different platforms means its here to stay. So unless you want your web data to be shown in the not-so-sexy XML format, its time you finally dove into XSLT.
My favorite way to describe what XSLT does is to think of your old Play-Dough factory. (You know you had one) Dig that sucker out from behind the Lite-Brite, and imagine it as your .xsl file.
The PlayDough represents your XML data, and your HTML web page is represented by your mom's new carpet. The XML is run through the XSL, transforming the XML data into almost any style of web output you can imagine, directly into your desired output page. One of the great things about using XSLT is that you are not limited to doing all of your layout and styling in the XSL file, the web browser will still apply any style sheet formatting you normally would use. Think of this as a two pass process, the first transforms data into malleable web content; the second takes the output and transforms the page into your desired webpage. If I haven't killed the metaphor yet, think of clients-side scripting (JavaScript & VBScript) and CSS as the little PlayDough molds and presses...they let you change the output just before content is delivered to the user.
Here is my sample XML file:
<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet href="schools.xsl" type="text/xsl" title="demoapps style" media="screen" ?>
<Content>
<School Name="University of Iowa" Mascot="Hawkeyes" City="Iowa City" />
<School Name="University of Illinois" Mascot="Fighting Illini" City="Urbana-Champaign"/>
<School Name="University of Michigan" Mascot="Wolverines" City="Ann Arbor"/>
<School Name="University of Minnesota" Mascot="Golden Gophers" City="Minneapolis"/>
<School Name="Indiana University" Mascot="Hoosiers" City="Bloomington"/>
<School Name="Michigan State University" Mascot="Spartans" City="East Lansing" />
<School Name="University of Wisconsin" Mascot="Badgers" City="Madison" />
<School Name="Purdue University" Mascot="Boilermakers" City="West Lafayette"/>
<School Name="Penn State University" Mascot="Nittany Lions" City="Happy Valley"/>
<School Name="Ohio State University" Mascot="Buckeyes" City="Columbus"/>
</Content>
And here's the XSL file we'll use to apply the transformation:
<?xml version="1.0" encoding="utf-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" indent="yes"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<!-- link to our CSS -->
<link rel="stylesheet" type="text/css" href="start.css"/>
<head>
<title>Fun with XSLT</title>
</head>
<body>
<div id="mainContent">
<div>
Here comes our fancy XSLT transformation:
</div>
<!-- Loop through content, gleaning school data -->
<xsl:for-each select="Content/School">
<!-- create our div element -->
<xsl:element name="div">
<!-- set the ID attribute with autogenerated ID-->
<xsl:attribute name="id">
<xsl:text>school</xsl:text>
<xsl:value-of select="generate-id()"/>
</xsl:attribute>
<!-- set the CSS class -->
<xsl:attribute name="class">
<xsl:text>schoolName</xsl:text>
</xsl:attribute>
<!-- retrive values to display, adding spacer text (ugly) -->
<xsl:value-of select="@Name"/>
<xsl:text>, </xsl:text>
<xsl:value-of select="@Mascot"/>
<xsl:text>, </xsl:text>
<xsl:value-of select="@City"/>
</xsl:element>
</xsl:for-each>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Finally, let's look at the simple style sheet. This is able to style just like any other CSS
/* CSS Document */
html, body
{
color: Navy;
}
#mainContent
{
background: white;
font-size: 16px;
}
.schoolName
{
margin: 5px 0px 0px 20px;
font-variant:small-caps;
color: Gray;
}
That's all you need, you can view the result here.
Every time I start to passively browse Microsoft's MSDN site, I can't help but come away with some emerging technology that I can't wait to get home and hammer at. Hmm, the fiancee's working, the dog is sleeping....let's do this. Tonight's episode: ASP.NET's Hands On Lab featuring Atlas.
"Atlas" is the codename for ASP.NET adding support for Asynchronous JavaScript and XML (AJAX). The beauty of AJAX is the ability for client-side browsers to call a web service asynchronously to render content to the page without requiring the page to re-post. This method has been used by large websites, but was cumbersome and required a lot of code to maintain. ASP.NET implements the Atlas template to allow a developer to have a simple AJAX enabled website up in less than 30 minutes. Here's an overview of how to pull this off:
(Note: installing the Atlas template and creating a new website will open the lab's step-by-step instructions, so I won't rehash the details here)
The Basics:
Prerequisites: Beta 2 or an RTM installation of Microsoft Visual Studio 2005 and the .NET Framework version 2.0.
1) Install the ASP.NET Atlas template (download it here).
2) Create a new website, and select the Atlas Template
3) Add a New Item to the project, and select "Master Page".
4) The Master Page holds the core setup of the AJAX process, setting the required scripts and formatting child pages. This form is not required for AJAX, but for simplicity the lab recommends using it. You'll modify the DocType of this form, and the asp:contentplaceholder control to allow for dynamic content. Notice the scripts being set to handle different browsers. These scripts play an important role in this project, as they allow the client browser to contact the web service. Modify the source to look like Microsoft's example:
5) Now you need a web service to handle requests and generate content for the client browser. Add a new web service to the project.
6) Modify the source as follows; the web service has one WebMethod that accepts input and retuns a value. This method is the same as any other .NET web service, and can access local services, databases, file stores, or other assemblies.
7) Right-click on your Master Page, and select "Add Content Page" to create a child form. This form will contain your form and AJAX content. You'll add a method to submit the user's query to the web service, and a callback method the web service will use to notify the form that a response is ready. This is an asynchronous call, remember, so the callback is necessary to alert the form its time to go.
8) You're all set! Save and build your project, then right click on the content form in Solution Explorer, and select 'View in Browser'. You'll see your initial form, and entering text and submitting the form results in new content rendering to the page, without having to repost itself.
Like I said, Microsoft's lab does a good job of explaining why you are adding specific code to the forms. Give this lab a half hour, and you'll be amazed how easy AJAX implentation is using Visual Studio.NET 2005!