Someone called me with a project, they sent me the content for their website, which I would then upload to Microsoft Frontpage or a text editor, insert some HTML tags for formatting and some graphics to make the site colorful, and the job was finished.

The wireless revolution changed everything. Almost every electronic device now comes equipped with access to the web and email. Palm tops, laptops, cell phones, even computer screens installed in automobiles are now connected to the internet. The web browsers and operating systems installed on these wireless devices are often very different from what is installed on an ordinary desktop PC. Many elements of the HTML programming language are not compatible with some of these wireless platforms. As a result, web design has completely changed. Cross-platform programming languages and specifications have been created so that websites can be viewed on any PC or wireless gadget.

These new innovations include languages such as XML, XHTML, and XSL, to name a few. XML was probably the most important of all of them, because it allowed a programmer to define data without telling the browser how to display it. The problem with HTML is that it defines data and also tells the browser how to display it. XML is different in that it merely defines the data, and allows the browser to display the data as it sees fit. Languages such as XHTML and XSL were developed in order to convert XML documents into web pages that could be displayed in a manner that was compatible with all browsers.

Now that you have some background on how and why web design has changed, you are now ready to learn about Document Type Definition (DTD). DTD is a tool that enables a programmer to define the format to be used for the data in an XML document. Remember, XML does not tell the web browser how to display or format content. DTD helps to establish the format.

An XML document consists of five different components. There are elements, attributes, entities, PCDATA, and CDATA. We will start with elements. Elements of XML are the tags. There are no predefined tags with XML; you can create your own tags. HTML does not work this way. All of the tags used in HTML are predefined, such as the paragraph tag and the body tag. Attributes provide additional information about the tags, such as the source file for an image, or the alignment to be used for a paragraph. Entities are variables that define commonly used text, such as the no-breaking-space entity. PCDATA is used to mark data that is to be parsed or separated into more easily processed components and to cause tags within that data to be interpreted as markup instead of as ordinary data. CDATA is used to mark data that is not to be parsed and to cause the tags within that portion of the text to not be treated as markup. As an aside, markup is any language that defines how certain text is to be displayed or structured.

For novice programmers, DTD is a little hard to get used to. I recommend that you search for tutorials on any major search engine, or perhaps find some courses offline at a local college or computer science institute. If you have never studied XML, XHTML, or XSL before, then you should find a broad-based curriculum of computer programming courses that teach you all of these languages so that you can learn to incorporate them together when you create web sites.

Learning to use these new specifications and languages is essential for any web designer. With so many people using cell phones and other wireless devices to surf the net, by creating your web sites exclusively with HTML you run the risk of your site being invisible to a wireless internet user. Designing web sites that are cross-platform compatible is a must in the wireless age we now inhabit.

Tag:

Add to Del.icio.us | Digg | Yahoo! My Web | Furl

Bookmark WebProNews:

Jim Pretin is the owner of http://www.forms4free.com, a service that helps programmers make email forms.

You could just slap some graphics and text into a file, insert some HTML tags into the document to tell the web browser how the text should appear and what the structure of the page should be, and presto, the job was finished.

As time went on, web design became more arduous. Businesses, especially ecommerce businesses that depended upon their internet storefronts to make a living, began to present web designers with near impossible projects that were too difficult to complete with basic HTML. The data being used and the designs that were being implemented for websites required more versatile programming specifications.

What resulted was the evolution of new specifications and languages for creating web sites. Languages and sub-languages such as XML, XHTML, style sheets, and a host of other more refined and yet more flexible specifications were spliced together to take web design to a new level.

One of the most important languages that came to be in recent years is called XSL. What is XSL, you ask? Well, to totally understand what XSL is and why it is so important, you must first understand XML.

XML is a markup language just like HTML. XML was created to deal with the fact that HTML was limited in that all of its tags were predefined and it displayed data a certain way. XML has no predefined tags, and does not tell a computer how data should appear, it merely defines the data. So, using XML, a web designer can define all sorts of data and more effectively transmit this data to web browsers installed on different platforms that run on a variety of electronic gadgets such as cell phones and other handheld devices that now come equipped with internet access. In a nutshell, XML was created to deal with the fact that so many different electronic products now come equipped with access to the internet and email. These new devices run on platforms that do not always display data properly if it is coded using HTML. XML fixed this situation by simply defining data and not forcing the web browser to display it a certain way, because an XML file is merely a simple text file.

So, again you ask, what is XSL and why is it important? XSL stands for Extensible Stylesheet Language. You have probably heard of Cascading Style Sheets (CSS). CSS is a style sheet language that evolved to make it easier for web designers to create a style for an HTML web page. Because XML is now so important, and because XML tags, as explained in the previous paragraph, do not tell the web browser how data should appear, a stylesheet language that was XML-based became a necessity.

XSL consists of 3 components. The first and most important component is XSLT. XSLT transforms an XML document into another XML document that can actually be understood and displayed by a computer. It accomplishes this by transforming most of the document into XHTML, which is a more versatile, cross-platform, XML-based version of HTML.

The second part of XSL is XPath. XPath is used as the navigator for XSL. XSL uses XPath to find parts of the source document that should match a certain predefined template. When XPath finds what it is looking for, then XSLT takes over and performs a transformation, turning the source document into what is called the result document.

The final part of XSL is known as XSL-FO. This component is for the final formatting. Once XPath has searched through the source document and used XSLT to transform the source document into the result document, the document then needs to be formatted so that the web browser will be able to present the document with the proper layout and structure. Simply put, XSL-FO is the part of XSL that produces the final output.

There are all sorts of helpful online tutorials for programmers and web designers to begin to learn how to use and implement XSL, but it would probably be best take a course in XSL at a local institute, college, or wherever you can find one. If web design is your career, learning it is not an option, it is a necessity, as most web browsers are now capable of understanding XSL. Since the advent of wireless internet access, everything from cell phones, to palm tops, to computer screens in automobiles can be used to connect to the internet. These different devices run on different platforms and have different web browsers that cannot properly display many elements of the HTML programming language. As a result, it is critical for all web designers to be able to create web pages using cross-platform specifications with the adaptability provided by XSL.

Tag:

Add to Del.icio.us | Digg | Yahoo! My Web | Furl

Bookmark WebProNews:

Jim Pretin is the owner of http://www.forms4free.com, a service that helps programmers make email forms.

How is it better than HTML and what does it do? For starters, XML is far more powerful than HTML, and the power resides in the “X” in XML (which stands for extensible). Rather than providing a set of pre-defined tags (as in the case of HTML), XML specifies the standards with which you can define your own markup languages with their own sets of tags. XML is therefore a meta-markup language, allowing you to define an infinite number of markup languages based upon the standards defined by XML.

XML was created so that richly structured documents could be used over the web. The only viable alternatives, HTML and SGML, are not practical for this purpose. XML allows you to define all sorts of tags with all sorts of rules, such as tags representing business rules or tags representing data description or data relationships.

In this article we’re going to take a look at some of the terminology that comes with using XML and its related technologies, as well as how to create and transform XML documents with XSL using Microsoft’s MSXML parser. To test the code samples shown in this article you should be running Windows NT/2000/XP with IIS installed. You should also have SQL server 2000 installed on the same machine.

XML Definitions

As with any technology, XML has its own acronym-riddled lingo. Some of the important acronyms include:

XSL: The Extensible Style Language (XSL) is the style language for XML that allows us to transform XML nodes using a set of patterns and templates.

Why XML Should Be Used?

Using XML provides us as developers with a number of benefits. Some of the most obvious benefits include:

XML compresses exceedingly well. Since data compression algorithms operate on the concept of maximizing the entropy of a given input stream, it stands to reason that a highly ordered input stream consisting of regular, repeating tag sequences will compress exceedingly well… much better than standard text which contains generally far less order thus resulting in a decrease in performance.

Weaknesses of XML

XML is obviously not a cure-all language free of any disadvantages… otherwise we would be using XML to markup/represent all of our data, and nothing else! There are of course some drawbacks and weaknesses of XML, namely:

Performance of XML

When you’re designing an XML-based Web application, what kind of performance hit do you expect to put on your web server? It’s hard to generalize because there are so many variables (such as the size of the XML document, the amount of script code required to process the document, the amount of output generated, etc) to take into consideration, however the following list shows the major variables that can affect the performance of parsing XML:

XML and DOM

Microsoft have provided us with the MSXML parser, which exposes an XML document in the form of a DOM (Document Object Model). With the XML DOM, you can load and parse XML files, gather information about those files, navigate through and manipulate those files. To learn more about the details of the XML DOM, please refer to this site.

Now that we’ve discussed the reasons for using XML, it’s time to look at some source code. We will examine some ASP scripts that create and display XML data. We’re going to create an XML file using both static data and data from a database using ADO. The DOM methods createNode and appendChild, as well as the text property are used to construct an in-memory XML tree.

XML with ASP

The following example illustrates how to create an XML tree (in memory) and then persist is to disk using the save method:

<%

%>

In the example above we create an XMLDOM Object. We then create a root node and its child node using the createNode function. Next, we append the nodes after assigning the text property to each of them. Finally, we save the in-memory XML tree to a file, savedI2.xml.

We can also build an XML file from the results of a database query. I’ve included two files with the support material for this article: pubtest.asp and saved.xsl. Pubtest.asp connects to the SQL Server 2000 pubs database, retrieving several records from the author’s table, formatting them as a new XML document and saving that document as saved.xml.

The saved.xsl file contains an XSL style sheet which is used by pubtest.asp to format saved.xml as HTML. You should download the support material before continuing.

Here’s an exert from pubtest.asp:

Do While Not rs.EOF
Set onode = xmldoc.createNode("element", "Employee", "")
xmldoc.documentElement.appendChild (onode)
Set inode = xmldoc.createNode("element", "Name", "")
inode.Text = rs.fields(0) & " " & rs.fields(1)
onode.appendChild (inode)

rs.movenext
Loop

One of the XML elements that results from the ASP code shown above looks like this:

<Hi-Tech>
<Employee>
<Name>Bennet Abraham</Name>
<Titles>
<TitleId>BU1032</TitleId>
<royalty>60</royalty>
</Titles>
</Employee>

Here’s an extract from the XSL style sheet file, saved.xsl:

<xsl:for-each select="Hi-Tech/Employee">
<TR>
<TD WIDTH="40%" BGCOLOR="lightyellow">
<FONT FACE="Verdana" SIZE="2" COLOR="black">
<xsl:value-of select="Name" />
</FONT>
</TD>
<TD WIDTH="30%" BGCOLOR="lightyellow">
<FONT FACE="Verdana" SIZE="2" COLOR="black">
<xsl:value-of select="Titles/TitleId" />
</FONT>
</TD>
<TD WIDTH="30%" BGCOLOR="lightyellow">
<FONT FACE="Verdana" SIZE="2" COLOR="black">
<xsl:value-of select="Titles/royalty" />
</FONT>
</TD>
</TR>
</xsl:for-each>

When I ran pubtest.asp in my browser, here’s what it looked like:

Let’s now run through the entire process of retrieving data from the pubs database, saving it to an XML file, and loading and transforming this document as XSL with the MSXML parser.

Our XML example explained

Firstly, we connect to SQL Server 2000 using a system DSN. The DSN is called “pubs”, and you should create the DSN using control panel. It should connect to your SQL server, more specifically to its pubs database. We instantiate an ADO connection object, passing in the DSN to its open method:

'Open database connection
Set conn = Server.CreateObject("ADODB.Connection")
dsn = "DSN=pubs;UID=sa;PWD="
conn.Open dsn

Once we’re connect to our database, we create a new XML document and assign it a root element called “Hi-Tech”. We then proceed to retrieve a recordset from the authors table of our pubs database:

If (xmldoc.childNodes.length = 0) Then
' Build the XML document
Set root = xmldoc.createNode("element", "Hi-Tech", "")
xmldoc.appendChild (root)
' Queries the database for customer data
Sql = "select au_lname,au_fname,au_id from authors"
Set rs = conn.Execute(Sql)
rs.MoveFirst

We then loop through each record in the recordset, appending its title, titleID and royalty fields to the XML document that we created earlier. We use the createNode and appendChild methods to do so:

Set inode = xmldoc.createNode("element", "Titles", "")
onode.appendChild (inode)
Set child = xmldoc.createNode("element", "TitleId", "")
child.Text = rs2.fields(0)
inode.appendChild (child)
Set child = xmldoc.createNode("element", "royalty", "")
child.Text = rs2.fields(1)
inode.appendChild (child)

Once we’ve retrieved each of the records from the recordset and appended them to our XML document, we save the XML document to our local machine using MSXML’s save method:

xmldoc.save server.mappath("saved.xml")

We’re now at the point where we have an XML file called saved.xml, as well as the style sheet that’s included in the support material for this article, called saved.xml. We instantiate a new XMLDOM object for each of these files, calling the transformNode method of the XML DOM object with a reference to the XML DOM object that contains the XSL file:

sourceFile = Server.MapPath("saved.xml")
styleFile = Server.MapPath("saved.xsl")
set source = Server.CreateObject("Microsoft.XMLDOM")
source.async = false
source.load(sourceFile)
set style = Server.CreateObject("Microsoft.XMLDOM")
style.async = false
style.load(styleFile)

Lastly, we use Response.Write to output the transformed XML to the browser:

Response.Write source.transformNode(style)

Conclusion

Well, I hope this article has answered some of your questions on XML. Hopefully you’ve learned a thing or two about the advantages and disadvantages of using XML, when it can be used, and most importantly, how it can be used.

Nakul Goyal : A Master of Sciences in Information Technology from Panjab University, Chandigarh and a Bachelor of Computer Applications from Punjab Technical University, Jalandhar, India. He is passionate towards the Cyber World & he likes to write about Technology. He’s a Microsoft Certified Professional, a Brainbench Certified ‘MVP’ (Most Valuable Professional), Brainbench Certified Internet professional and a CIW (Certified Internet Webmaster) Associate. Professionally, Nakul is the co-founder of a Web Designing, Search Engine Optimization Company.

Website: http://www.nakulgoyal.com

Almost every web project has a part where a large list of items needs to be shown on the user’s browser. Imagine that we have a list with thousands of items, we do not want to show them on one web page, but rather have a navigation bar to scroll between different pages of the list. The goal is clear and there are plenty of ideas how to accomplish that generating dynamic pages with JSP, PHP, and ASP for example. But how about a pure XML+XSLT solution, where there is no logic on the server to generate the dynamic content, but all happens on the user’s browser.

1. The XML

The XML (mylist.xml) is pretty simple. It has a list of items. Every item has element1 and element2 children. The idea is that the items to be many, but for simplicity the example has only 10 and the goal is to show them by 3 on one page having “Prev” and “Next” links to navigate. Click on driver.html (IE only) for a working example.

<?xml version="1.0"?>
<list>
&nbsp <item>
&nbsp&nbsp <element1>item 1 - element 1</element1>
&nbsp&nbsp <element2>item 1 - element 2</element2>
&nbsp </item>
&nbsp <item>
&nbsp&nbsp <element1>item 2 - element 1</element1>
&nbsp&nbsp <element2>item 2 - element 2</element2>
&nbsp </item>
&nbsp <item>
&nbsp&nbsp <element1>item 3 - element 1</element1>
&nbsp&nbsp <element2>item 3 - element 2</element2>
&nbsp </item>
&nbsp <item>
&nbsp&nbsp <element1>item 4 - element 1</element1>
&nbsp&nbsp <element2>item 4 - element 2</element2>
&nbsp </item>
&nbsp <item>
&nbsp&nbsp <element1>item 5 - element 1</element1>
&nbsp&nbsp <element2>item 5 - element 2</element2>
&nbsp </item>
&nbsp <item>
&nbsp&nbsp <element1>item 6 - element 1</element1>
&nbsp&nbsp <element2>item 6 - element 2</element2>
&nbsp </item>
&nbsp <item>
&nbsp&nbsp <element1>item 7 - element 1</element1>
&nbsp&nbsp <element2>item 7 - element 2</element2>
&nbsp </item>
&nbsp <item>
&nbsp&nbsp <element1>item 8 - element 1</element1>
&nbsp&nbsp <element2>item 8 - element 2</element2>
&nbsp </item>
&nbsp <item>
&nbsp&nbsp <element1>item 9 - element 1</element1>
&nbsp&nbsp <element2>item 9 - element 2</element2>
&nbsp </item>
&nbsp <item>
&nbsp&nbsp <element1>item 10 - element 1</element1>
&nbsp&nbsp <element2>item 10 - element 2</element2>
&nbsp </item>
</list>

2. The controller XML

The main question is how to pass arguments to XSL that will be used for the transforming of our original mylist.xml. The answer is that we create a very simple XML. It has elements and attributes that can be treated as arguments when parsed from the XSL. We are going to have 3 arguments:

We call this a controller XML:

<?xml version="1.0"?>
<xml-controller>
&nbsp <xml-doc-name start="1" limit="3">mylist.xml</xml-doc-name>
</xml-controller>

3. The XSL

First, the XSL matches the /xml-controller/xml-doc-name element (line 4) from the controller XML to grab all arguments (lines 5-7).

Second, it loads the original XML document (lines 9-10) using the document XSL function. The interesting part (line 10) is that it uses XPath expression to select only elements that have position greater or equal than the start variable and less or equal than the end variable. This part is essential of implementing the paging mechanism.

The rest (lines 12-38) generates the HTML and shows the elements in a table. Lines 18-20 generate the “Prev” link if necessary and line 23 generates the “Next” link. Lines 30-35 generate all elements that have matched our criteria at line 10.

4. The JavaScript

Remember that our goal was everything to happen on the user’s browser (no server side logic), so finally, we need an HTML page that has JavaScript, which drives the XSLT transformation.

We assume that the XML and XSL documents are in the same folder where this page is, so the JavaScript gets the portion of the URL up to the page name (lines 10-12). This part will be used later when we load the XML document with the document XSL function, otherwise we will get an “Access Denied”.

We parse the URL this page is loaded from and get all arguments (lines 15-17), which we will use to build the controller XML that is being processed by the XSL.

We build the controller XML (lines 20-24), then load it (lines 27-29), load the XSL (lines 32-34), and proceed with the transformation (line 37).

Notice that this JavaScript uses the Microsoft.XMLDOM object, which makes it work only under Internet Explorer. However with a small change you can make it work under Netscape as well.

5. Conclusion

This example does not use server side logic, which is interesting, but makes the whole XML to be loaded from the browser first and then only a part of it shown. Although this is not a good practice, it gives the idea of passing arguments to an XSL via a very simple XML that we called a controller.

All source codes are available for download: mylist.xml, mylist.xsl, and driver.html (IE only)

My name is Stanimir Stanev. I am working as Senior Java Developer for
CEO Consulting in Austin Texas. The last 4 years I am working on several
Java projects at IBM that are part of self-monitoring systems.

www.stanev.com

The next task that faces us is creating the DisplayNewsItems.aspx Web page. This page should display the titles of the news items in the selected syndication feed as hyperlinks such that when the hyperlink is clicked the description of the news item is shown in the bottom right frame. This task presents us with two primary challenges:

Fortunately with the .NET Framework, neither of these two challenges is particularly daunting. For the first task, realize that remote XML data can be loaded into an XmlDocument object with just two lines of code. For the second task, displaying XML in an ASP.NET Web page is a cinch with the ASP.NET XML Web control.

The XML Web control is designed to display raw or transformed XML data on a Web page. The first step in using the XML Web control is specifying the XML data source. This can be accomplished in a bevy of ways through three different properties. Using the Document property, you can assign an XmlDocument instance as the XML data source for the XML Web control. If the XML data exists in a file on the Web server’s file system, you can use the DocumentSource property, providing either a relative or absolute path to the XML file. Finally, if you have the XML data in a string, you can set this string to the XML Web control’s DocumentContent property. Any of these three approaches can be used to associate XML data with the XML Web control.

Typically we’ll want to transform the XML data in some manner before displaying it on the Web page. The XML Web control allows us to specify an XSLT stylesheet that will apply the transformation. Similar to the XML data, the XSLT stylesheet can be specified in one of two ways through one of two properties: the Transform property can be assigned an XslTransform instance or the TransformSource property can be set to a relative or absolute file path to the XSLT stylesheet on the local Web server. In a moment, we’ll see an example of the XML Web control in action.

Let’s get to creating the DisplayNewsItems.aspx Web page. Before we add an XML Web control and start creating the code-behind class, we need to add a small bit of client-side JavaScript to the HTML portion. Specifically, add the following <script> block in the <head> tag of the HTML portion:

<script language="javascript">
&nbsp // display a blank page in the bottom frame when the news items loads
&nbsp parent.rbottom.location.href = "about:blank";
</script>

This client-side JavaScript displays a blank page in the bottom right frame whenever DisplayNewsItems.aspx is loaded. To understand why we want to do this consider the following situation that can unfold if we omit this <script>block:

1. The user clicks on a syndication feed from the left frame, thereby loading the feed’s news items in the top right frame.

2. The user then clicks one of the news items from the top right frame, thereby loading the news item’s details in the bottom right frame.

3. Now the user clicks on a different syndication feed from the left frame, thereby loading the new feed’s news items in the top right frame.
At this point, the details from the previous syndication feed’s news item are still in the bottom right frame! The above client-side script code alleviates this glitch by “whipping out” the contents of the bottom right frame every time a syndication feed from the left frame is clicked.

Now that we have taken care of that client-side scripting issue, let’s turn our attention to adding the needed XML Web controls. Once you have added the XML Web control, set its ID property to xsltNewsItems and its TransformSource property to NewsItems.xslt (the name of the XSLT stylesheet we’ll create next). Now, in the Page_Load event handler we need to retrieve the remote RSS syndication file in an XmlDocument instance, and then set the XML Web control’s Document property to this XmlDocument instance.

private void Page_Load(object sender, System.EventArgs e)
{
&nbsp &nbsp // See if the news items for this feed are in the Data Cache
&nbsp&nbsp int feedID = Int32.Parse(Request.QueryString["FeedID"]);

&nbsp&nbsp xmlNewsItems.Document = feedXML;
}
The most germane lines of code in the Page_Load event handler are the last three. These three lines of code create the new XmlDocument object, load in the remote RSS feed, and assign the XmlDocument object to the XML Web control’s Document property. Isn’t it impressive how simple it is to access remote XML data and display it in an ASP.NET Web page?

All that we have left to do now is create the XSLT stylesheet, NewsItems.aspx. This first draft of this stylesheet can be seen below:

<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0"
&nbsp &nbsp&nbsp&nbsp xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
&nbsp <xsl:output method="html" omit-xml-declaration="yes" />

&nbsp <xsl:template match="/rss/channel">
&nbsp&nbsp <b><xsl:value-of select="title"
&nbsp&nbsp&nbsp&nbsp disable-output-escaping="yes" /></b>
&nbsp&nbsp <xsl:for-each select="item">
&nbsp&nbsp&nbsp <li>
&nbsp&nbsp&nbsp&nbsp <a>
&nbsp&nbsp&nbsp&nbsp&nbsp <xsl:attribute name="href">
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp DisplayItem.aspx?ID=<xsl:number value="position()" />
</xsl:attribute>
&nbsp&nbsp&nbsp <xsl:attribute name="target">rbottom</xsl:attribute>
&nbsp&nbsp&nbsp&nbsp <xsl:value-of select="title"
&nbsp&nbsp&nbsp&nbsp&nbsp disable-output-escaping="yes" />
&nbsp&nbsp&nbsp &nbsp </a>
&nbsp&nbsp&nbsp (<xsl:value-of select="pubDate" />)
&nbsp&nbsp&nbsp </li>
&nbsp&nbsp </xsl:for-each>
&nbsp </xsl:template>
</xsl:stylesheet>

This XSLT stylesheet has a single template that matches on the /rss/channel XPath expression, outputting the value of the <title> element in a bold font. Next, it iterates through each of the <item> elements and, for each, displays a hyperlink to DisplayItem.aspx, passing the element’s position through the querystring. Note that this hyperlink also has its target attribute set to rbottom, the name of the bottom right frame. Finally, it displays the value of the <pubDate> element after each news item title.

There are a couple of items in the XSLT stylesheet that not everyone may be familiar with. The first of these is the disable-output-escaping=”yes” attribute in the elements. Essentially, this attribute setting informs the XSLT engine that it should not escape those illegal XML characters-&, < , >, ” and ‘. To understand what this accomplishes, realize that if this attribute were not set (or was set to the default value, “no”), then if the title contained an escaped & as &, the resulting HTML would have & in it as well, as opposed to just &. If you think about this for a bit, you can see that this can cause a multitude of problems. For example, if the title for a syndication file is: “Matt’s <i>Cool</i> Blog”, then if output escaping is not disabled, then the output would remain “Matt’s <i>Cool</i> Blog” and would be shown in the Web page as, “Matt’s <i>Cool</i> Blog”. With disable-output-escaping=”yes”, however, the output is not escaped and is read as “Matt’s <i>Cool</i> Blog”, thereby displaying in the Web page as the desired “Matt’s Cool Blog”.

Another thing to note is the <a> element. Realize that this funky syntax ends up generating the following output:

<a href="DisplayItem.aspx?ID=position">news item title</a>

The reason we have to use this syntax is because in order to add an attribute to an element in an XSLT stylesheet you need to create the element and then inside of the element’s tags, use the <xsl:attribute> syntax. There are some examples of this syntax available online at W3Schools, The <xsl:attribute> Element page.

Finally, note that the ID querystring value in the hyperlink is assigned the value from the <xsl:number> element, with a value of the position() function. The element simply emits a number. The position() function is an XPath function that returns the ordinal position of the current node in the XML document. This means the first news item will have a position() value of 1; the second, a position() value of 2; and so on. We need to record this value and pass it along via the querystring so that when the DisplayItem.aspx Web page is called, it knows what item from the RSS syndication feed we are interested in viewing.

The astute reader may have realized that our XSLT stylesheet is not complete due to the fact that the FeedID parameter is not passed through the querystring to the DisplayItem.aspx Web page. To see why this is a problem, recall that we are sending in the ID querystring parameter the ordinal position of the element the user is interested in viewing the details for. That is, if the user clicks on the fourth news item, the page DisplayItem.aspx?ID=4 will be loaded in the bottom right frame. The problem is that DisplayItem.aspx cannot determine what feed the user is interested in viewing. There are a couple of ways to figure this out, such as having the bottom right frame use client-side JavaScript to read the URL of the top right frame, thereby ascertaining the value of FeedID. A simpler way, in my opinion, is to merely pass along the FeedID value through the querystring along with the ID parameter.

One difficulty that arises from this is that FeedID is not present in the RSS XML data, which is what the XSLT stylesheet is working with. The DisplayNewsItems.aspx Web page knows the FeedID, though, and needs to somehow let the XSLT stylesheet know this value. This can be accomplished through the use of XSLT parameters.

Using XSLT parameters is fairly straightforward. In the XSLT stylesheet, you need to add inside the <xsl:template> element an <xsl:param> element, which provides the name for the parameter. Let’s call this parameter FeedID:

<xsl:stylesheet version="1.0"
&nbsp&nbsp xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

...
</xsl:template>
</xsl:stylesheet>

Now, the parameter can be used in an <xsl:value-of> element using the following syntax:

<xsl:value-of select="$parameterName" />

Therefore, we can add the FeedID querystring parameter to the hyperlink by adding the following to our existing XSLT stylesheet:

<a>
&nbsp <xsl:attribute name="href">DisplayItem.aspx?ID=<xsl:number
&nbsp&nbsp value="position()" /> &FeedID=<xsl:value-of select="$FeedID"
&nbsp&nbsp&nbsp /></xsl:attribute>

Note that we have an ampersand (escaped to &) after the ID querystring parameter, and then have the querystring parameter FeedID with the value from the FeedID parameter. That’s all we have to add to our XSLT stylesheet.

What remains is to set the parameter’s value programmatically in the Page_Load event handler of the DisplayNewsItems.aspx Web page. This is accomplished using the XsltArgumentList class. This class contains an AddParameter() method. Once we have created an instance of this class and added the parameter, we simply set the class instance to the XML Web control’s TransformArgumentList parameter. The following code shows the updated Page_Load event handler for DisplayNewsItems.aspx:

private void Page_Load(object sender, System.EventArgs e)
{
...

&nbsp // Add the FeedID parameter to the XSLT stylesheet
&nbsp XsltArgumentList xsltArgList = new XsltArgumentList();
&nbsp xsltArgList.AddParam("FeedID", "", feedID);
&nbsp xmlNewsItems.TransformArgumentList = xsltArgList;}

*This article originally appeared on the ASP.NET Dev Center at MSDN

Scott Mitchell, author of five ASP/ASP.NET books and founder of 4GuysFromRolla.com, has been working with Microsoft Web technologies for the past five years. An active member in the ASP and ASP.NET community, Scott is passionate about ASP and ASP.NET and enjoys helping others learn more about these exciting technologies. For more on the DataGrid, DataList, and Repeater controls, check out Scott’s book ASP.NET Data Web Controls Kick Start (ISBN: 0672325012). Read his blog at : http://scottonwriting.net

All that remains left to do is to display the detailed information for the particular news item the user selected. This detailed information will be displayed in the bottom right frame, and will show the title of the news item entry, its description, and a link to the news item. As with the DisplayNewsItem.aspx Web page, DisplayItem.aspx starts by retrieving the remote RSS syndication feed based on the passed-in FeedID querystring parameter. It then uses an XML Web control to display the detailed information. In fact, the Page_Load event handler for the DisplayItem.aspx Web page is identical to the DisplayNewsItem.aspx Web page’s Page_Load event handler save for two minor differences:

As with DisplayNewsItem.aspx, DisplayItem.aspx needs to pass in a parameter into the XSLT stylesheet. Whereas DisplayNewsItem.aspx passed in the querystring parameter for FeedID, DisplayItem.aspx needs to pass in the ID querystring parameter, which indicates what news item the XSLT stylesheet should display. These minor changes are shown in the Page_Load event handler below in a bold font; code identical to the Page_Load event handler from DisplayNewsItems.aspx has been omitted:

private void Page_Load(object sender, System.EventArgs e)
{
&nbsp // See if the news items for this feed are in the Data Cache
&nbsp int feedID = Int32.Parse(Request.QueryString["FeedID"]);
&nbsp int ID = Int32.Parse(Request.QueryString["ID"]);

&nbsp // Add the ID parameter to the XSLT stylesheet
&nbsp XsltArgumentList xsltArgList = new XsltArgumentList();
&nbsp xsltArgList.AddParam("ID", "", ID);
&nbsp xmlItem.TransformArgumentList = xsltArgList;}

The XSLT stylesheet to transform the XML data can be seen below:

<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0"
&nbsp&nbsp&nbsp xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
&nbsp <xsl:output method="html" omit-xml-declaration="yes" />
&nbsp <xsl:param name="ID" />

&nbsp <xsl:template match="/rss/channel">
&nbsp&nbsp <b><xsl:value-of select="item[$ID]/title"
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp disable-output-escaping="yes" /></b>
&nbsp&nbsp <p>
&nbsp&nbsp&nbsp <xsl:value-of select="item[$ID]/description"
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp disable-output-escaping="yes" />
&nbsp&nbsp </p>
&nbsp&nbsp <a>
&nbsp&nbsp <xsl:attribute name="href"><xsl:value-of
&nbsp&nbsp select="item[$ID]/link" /></xsl:attribute>
&nbsp&nbsp&nbsp <xsl:attribute name="target">_blank</xsl:attribute>
&nbsp&nbsp&nbsp Read More...
&nbsp&nbsp </a>
&nbsp </xsl:template>
</xsl:stylesheet>

Note that an <xsl:param> element is used to declare the ID XSLT parameter. Then, in the various <xsl:value-of> elements, the ID parameter is used to grab just the specific <item> element from the list of item elements. Realize that in XPath the syntax elementName[i] accesses just the Ith element with the appropriate element name. For example, item[1] would retrieve just the first <item> element, while item[2] would retrieve just the second. Therefore, item[$ID] retrieves just the <item> element as specified by the ID XSLT parameter.

Finally, note that the Read More hyperlink, outputted near the end of the XSLT stylesheet, has its target attribute set to blank, thereby causing a new window to be opened when a user clicks on the Read More link.

Future Enhancements and Current Shortcomings

One glaring shortcoming with the code we examined in this article is that each time the user clicks on a syndication feed from the left frame, or clicks on a news item title from the top right frame, the remote RSS syndication feed is loaded and parsed. Clearly this is inefficient since once you click on a syndication feed all of the items are loaded; it is wasteful to reload the entire remote syndication feed each time the user clicks on one of the feed’s news item titles. Not only is this approach inefficient, but impolite to the person or company providing the syndication service, as these incessant and needless requests are placing an unnecessary load on their Web server.

This shortcoming is overcome in the source code you can download with this article. Specifically, the .NET Data Cache is used to store the XmlDocument object for the various feeds. The cache duration is set to the value of the feed’s UpdateInterval field in the Feeds table. (Of course, the feed’s XmlDocument object could be evicted from the cache at an earlier point in time for a variety of reasons.)

Another shortcoming of the system is that there is no state between the top right and bottom right frames. To see where this can lead to trouble, consider the following actions:

1. A user clicks on a syndication feed link from the left frame, loading the feed’s news items in the top right frame. Assume that this syndication has an UpdateInterval value of 30, meaning that is expires in 30 minutes.

2. In loading the news items in the top right frame, the feed is cached in the data cache.

3. The user leaves for lunch.

4. The Web site providing the syndication service adds a new news item.

5. Our user returns from an hour lunch, meaning the XmlDocument for this feed in the data cache has expired.

6. The user clicks on the first news item from the top right frame. This loads DisplayItem.aspx in the bottom frame, passing in an ID parameter value of 1.

7. DisplayItem.aspx cannot find the XmlDocument in the cache, so it request the syndication feed from the remote source. In response it gets the new syndication feed (remember, a new news item was added back in step 4) and displays the first item (since the ID parameter equals 1).

8. The user is displayed the new news item, which is a bit perplexing to the new news item is not displayed in the top right frame and was not the one they thought they clicked on.

This problem arises because the ID parameter does not uniquely identify each news item; rather, it is only an offset of the news item from a list of news items at a particular point in time. A good way of fixing this would be to stop using the data cache to store each syndication feed, and start using a database, or some other means of persistent storage (such as XML files on the Web server’s local file system). By using a database, each news item can be given a unique identifier, which can then be passed down to the bottom right frame. This approach guarantees against the problem outlined above. Of course this adds some additional complexities, such as deciding when to clear old items out of the database.

The existing application also lacks any exception handling. This should definitely be added. In particular, exception handling needs to be added for retrieving and loading the remote RSS syndication file into the XmlDocument object. The file might not exist, or might be malformed.

There are a plethora of enhancements that one could easily add to this online news aggregator. One obvious one would be an administration page to allow the user to add, remove and edit their existing syndication feeds. Also, it would be nice to allow the user to group their syndication feeds by user-created categories. The user interface is a bit hard on the eyes, but this could be quickly fixed by either augmenting the HTML generated by the XSLT stylesheets or adding stylesheets to the various frames to allow for a more aesthetic appearance. Finally, it would be worthwhile to add some HTML tags to cause the top right frame to refresh periodically so that the user can see new news items for a particular syndication feed without having to manually refresh the Web page.

Note (August 4, 2003): After publication of this article, a few people emailed me informing me of two potential issues with displaying the of a particular RSS syndication item the way I show in the article:

1. Disable-output-encoding, which is used in the , is not uniformly implemented by all XSLT parsers. The .NET XSLT parser supports disable-output-encoding, but just be aware of this in case you attempt to port this application to other platforms.

2. The HTML content in the <description> element is blindly emitted. This HTML might contain malicious code, such as <script> or <embed> blocks which should, ideally, be stripped out. In order to strip out these potentially offensive HTML elements, you would likely need to use extension functions (See Extending XSLT with JScript, C#, and Visual Basic .NET). For more information on the need for stripping HTML content from an RSS feed, refer to this ‘Dive Into Mark’ blog entry.

Summary

In this article we examined building not only a syndication engine, but an online news aggregator as well. In building both products we worked with displaying XML data in an ASP.NET Web page. With the syndication engine, we displayed database data in an XML format using a Repeater control. In the news aggregator, we used XML Web controls with XSLT stylesheets.

I invite you to download the online news aggregator and make enhancements to it as you see fit. If you have any questions with regards to the application or the concepts discussed in this article, don’t hesitate to shoot me an email; I can be reached at mitchell@4guysfromrolla.com.

Happy Programming!

Recommended Links

Caching with ASP.NET

*This article originally appeared on the ASP.NET Dev Center at MSDN

Scott Mitchell, author of five ASP/ASP.NET books and founder of 4GuysFromRolla.com, has been working with Microsoft Web technologies for the past five years. An active member in the ASP and ASP.NET community, Scott is passionate about ASP and ASP.NET and enjoys helping others learn more about these exciting technologies. For more on the DataGrid, DataList, and Repeater controls, check out Scott’s book ASP.NET Data Web Controls Kick Start (ISBN: 0672325012). Read his blog at : http://scottonwriting.net

This month we start a two part series on Data Islands. Part 1 explores how we can use Data Islands to embed XML and XSLT into a browser, and manipulate that data using DHTML. Part 2 will illustrate Data Islands and Data Binding, and how to update data from the browser with Web Services and XMLHTTP.

Before you begin you should have a general idea of XML and XSLT. If you are new to these technologies there are a number of resources out there that cover them in detail. You’ll want to take a look at XML, XPath, and XSLT. So off we go …

First up, what is a data island? A data island provides the means to embed XML into the browser. The following snippets show two possible ways to create a data island.

<xml id="demoXML">
<Some XML Here.....
</xml>
or
<xml id="demoXSL" src="your-source.xml|xsl"/>

The most important attribute of the xml is the id attribute, this is how you will refer to the Data Island in the browser. Once your page loads you can manipulate the XML with the same syntax as the MSXML Parser.

Our example uses two Data Islands, one for XML and one for XSLT. We will use DHTML to manipulate the XML and then transform the results.

Now that you have the XML in the browser you need a way to manipulate it. Our example uses two functions; the first function manipulates the XML by altering a “selected” attribute. In the example that follows a grid is created with “where to buy” links. The onclick event of the link calls the SetSelected function which manipulates the XML in the Data Island.

function SetSelected(id)
{
  //Build the XPath Query based on the id passed in
  var query = "/my-list/my-item[@id='" + id + "']";
   //clear previously selected items
  var lst= demoXML.selectNodes("/my-list/my-item")
  for(ctr=0;ctr!=lst.length;ctr++)
  {
    lst[ctr].setAttribute("selected",0);
  }
  //Set the selected attribute of the currently selected node
  var elm = demoXML.selectSingleNode(query);
  elm.setAttribute("selected",1);
  Render();
}

The second function simply does a transformation on the XML Island using the XSL Island and places the results in a div.

function Render()
{
  list.innerHTML= demoXML.transformNode(demoXSL);
}

Here’s our smart little page (kept to the minimum) that shows the Islands and functions in action.

Note – if you receive errors on this page make sure your box is running the latest greatest updates. See the MSDN site for help pertaining to particular errors.

The browser currently contains two data islands. One for XML and one for XSL. Start with the render link. The where to buy links will call the SetSelected function. If you click on a where to buy link and then click the Show XML link, you will see the selected attribute is set according to the ID of the item selected.

To see the XML, XSL, or to render, click here.

That’s it folks! At this point you should be able to create a Data Island and manipulate it in the browser. Our example used the onclick event of an tag to manipulate the XML (although we could have used any event). If you’re the creative type I hope I got your wheels spinning.

Click here to sign up for FREE Tech. newsletters from iEntry!

Alan Hyneman has been working with and using computers in numerous applications for over 20 years. His experiences range from Graphic Design and Desktop Publishing, through developing enterprise level back end engines utilizing SQL, ASP, VB, XML, XSLT, and C++. He holds Microsoft’s MCSD certification, Microsoft’s highest certification for software developers. He is available on a consultant or contract basis and is always ready to meet the needs of clients.

There are plenty of articles on the web that already do this, but most them only focus on presenting data through HTML. This is what this article is for to give more examples of XSL other then with HTML. A recent article on “Using PHP and XSL to Transform XML into Web Content” by Benson Wong is available at Zend.com.

As well an installation on how to do a “Step by Step Install of Apache PHP SSL and more”, also includes XSL module, is available at
http://www3.telus.net/jasonlam604/linux002.html. As well you can refer to
http://www.xslt.com or
http://www.w3schools.com/default.asp for more information on XSL.

Brief Recap of XSL and XML

XSL (eXtensible Stylesheet Language) is used to transform XML into data/form for a particular device whether it be a screen, voice or paper so that it can understand what the XML data is. Reason being XML tags are not predefined so devices like browsers are unable to understand XML and that is what XSL is for. At the same time it allows for different stylesheets to be applied to the same XML data for different devices as the following examples will show.

The Familiar HTML

Okay, let us start with the familiar HTML example first. As well present the PHP code used to transform the stylesheet and the XML data itself.

PHP Source Code:

 <?php
include_once("./xslt.class.php");
$xslt = new Xslt("c://data//books_html.xsl", "c://data//books.xml");
header("Content-type: text/html");
print ($xslt->transform());
?>

PHP Helper Class Source Code:

 class Xslt {
  var $xsl_file;
  var $xml_file;
  var $fileName;
  function Xslt($xsl_file = '', $xml_file = '') {
    $this->xsl_string = "file://" . $xsl_file;
    $this->xml_string = "file://" . $xml_file;
  }
  function transform() {
    $this->result = '';
    $xsltHandle = xslt_create();
    //xslt_set_base($xsltHandle,'file://c://php//xslxml//');
    $this->result = xslt_process($xsltHandle,$this->xml_string,$this->xsl_string);
    //$this->result = xslt_process($xsltHandle,'file://d://' . $this->xml_string,$this->xsl_string);
    if (!$this->result)
      die("Transformation failed");
    xslt_free($xsltHandle);
    return $this->result;
  }
}

XML File

<?xml version="1.0" encoding="UTF-8"?>
<books>
&nbsp&nbsp <book>
&nbsp&nbsp&nbsp&nbsp <title>Professional PHP4 Programming </title>
&nbsp&nbsp&nbsp&nbsp <author>Deepak Thomas </author>
&nbsp&nbsp&nbsp&nbsp <price> 49.99 </price>
&nbsp&nbsp&nbsp&nbsp <special> 34.99 </special>
&nbsp&nbsp&nbsp&nbsp <size> Paperback 974 pages ; Dimensions (in inches): 2.08 x 9.00 x 7.26 </size>
&nbsp&nbsp&nbsp&nbsp <publisher> Wrox Press Inc; 1st edition (January 2002) </publisher>
&nbsp&nbsp&nbsp&nbsp <isbn> 1861006918 </isbn>
&nbsp&nbsp < /book>
&nbsp&nbsp <book>
&nbsp&nbsp&nbsp&nbsp <title> PHP Fast and Easy Web Development, 2nd Edition </title>
&nbsp&nbsp&nbsp&nbsp <author> Julie C. Meloni </author>
&nbsp&nbsp&nbsp&nbsp <price> 29.99 </price>
&nbsp&nbsp&nbsp&nbsp <special> 0.00 </special>
&nbsp&nbsp&nbsp&nbsp <size> Paperback 504 pages ; Dimensions (in inches): 1.03 x 9.24 x 7.32 </size>
&nbsp&nbsp&nbsp&nbsp <publisher> Premier Press; 2 edition (August 26, 2002) </publisher>
&nbsp&nbsp&nbsp&nbsp <isbn> 193184187X </isbn>
&nbsp&nbsp </book >
&nbsp&nbsp <book>
&nbsp&nbsp&nbsp&nbsp <title >PHP MySQL Website Programming: Problem - Design - Solution </title>
&nbsp&nbsp&nbsp&nbsp <author >Chris Lea </author>
&nbsp&nbsp&nbsp&nbsp <price> 34.99 </price>
&nbsp&nbsp&nbsp&nbsp <special >24.99 </special>
&nbsp&nbsp&nbsp&nbsp <size> Hard Cover 500 pages ; Dimensions (in inches): 1.15 x 9.08 x 7.22 </size>
&nbsp&nbsp&nbsp&nbsp <publisher> Wrox Press Inc; (March 2003) </publisher>
&nbsp&nbsp&nbsp&nbsp <isbn> 1861008279 </isbn>
&nbsp&nbsp </book >
</books>


XSL File

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format" >
<xsl:template match="/">
&nbsp &nbsp <html>
&nbsp &nbsp <body>
&nbsp &nbsp&nbsp &nbsp <h2>PHP Books </h2>
&nbsp &nbsp&nbsp &nbsp < table border="0" cellspacing="0" cellpadding="0">
&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp < xsl:for-each select="books/book">
&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp < tr>
&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp < td>
&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp < u> < b> < xsl:value-of select="title"/> < /b> < /u> < br/>
&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp < b> < xsl:text> Author: < /xsl:text> < /b> < xsl:value-of select="author"/> < br/>
&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp < b> < xsl:text> Price: < /xsl:text> < /b> < xsl:value-of select="price"/>
< xsl:if test="special > 0">
&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp < b> < xsl:text> On Sale For: < /xsl:text> < xsl:value-of select="special"/> < /b>
&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp < /xsl:if> < br/>
&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp < b> < xsl:text> Paperback: < /xsl:text> < /b> < xsl:value-of select="size"/> < br/>
< b> < xsl:text> Publisher: < /xsl:text> < /b> < xsl:value-of select="publisher"/> < br/>
< b> < xsl:text> ISBN: < /xsl:text> < /b> < xsl:value-of select="isbn"/> < br/>
&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp < br/>
&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp < /td>
&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp < /tr>
&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp < /xsl:for-each>
&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp < /table>
&nbsp &nbsp&nbsp &nbsp < /body>
&nbsp &nbsp< /html>
< /xsl:template>
< /xsl:stylesheet>


Output:

The XML file is your key file where dynamic data is stored, changed or removed. It does not affect any the layout of the pages themselves. This you should already know. After looking at the above code and from your experience working with XSL to transform XML files to HTML output, you are probably saying to yourself this is not worth it.

I agree with you one hundred percent, not only is it a lot of work; but also requires you add to your skill set XSL and XML. In fact, if there is no requirement to output the data to anything but a regular browser it might be in your best interest to simply stick to PHP and HTML. But if you are going to support other devices or media you should seriously consider using PHP and XSL.

The following three XSL transformations will demonstrate this, the technologies used will be WML, cHTML and VXML,

WML

PHP Source Code:

 <?php
include_once("./xslt.class.php");
$xslt = new Xslt("c://data//books_wml.xsl", "c://data//books.xml");
header("Content-type: text/vnd.wap.wml");
print ($xslt->transform());
?> 

XSL File

< ?xml version="1.0" encoding="UTF-8"?>
< xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
< xsl:template match="/">
&nbsp < wml>
&nbsp&nbsp < template>
&nbsp &nbsp&nbsp < do type="accept" label="Back"> < prev/> < /do>
&nbsp &nbsp < /template>
&nbsp&nbsp < xsl:element name="card">
&nbsp&nbsp&nbsp < xsl:attribute name="id"> books< /xsl:attribute>
&nbsp&nbsp&nbsp < xsl:attribute name="books"> PHP Books< /xsl:attribute>
&nbsp&nbsp&nbsp < p>
&nbsp&nbsp&nbsp&nbsp < small>
&nbsp&nbsp&nbsp&nbsp&nbsp < xsl:for-each select="books/book">
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp < u> < b> < xsl:value-of select="title"/> < /b> < /u> < br/>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp < b> < xsl:text> Author: < /xsl:text> < /b> < xsl:value-of select="author"/> < br/>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp < b> < xsl:text> Price: < /xsl:text> < /b> < xsl:value-of select="price"/>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp < xsl:if test="special > 0">
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp < b> < xsl:text> On Sale For: < /xsl:text> < xsl:value-of select="special"/> < /b>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp < /xsl:if> < br/>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp < b> < xsl:text> Paperback: < /xsl:text> < /b> < xsl:value-of select="size"/> < br/>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp < b> < xsl:text> Publisher: < /xsl:text> < /b> < xsl:value-of select="publisher"/> < br/>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp < b> < xsl:text> ISBN: < /xsl:text> < /b> < xsl:value-of select="isbn"/> < br/>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp < br/>
&nbsp&nbsp&nbsp&nbsp&nbsp < /xsl:for-each>
&nbsp&nbsp&nbsp&nbsp < /small>
&nbsp&nbsp&nbsp < /p>
&nbsp&nbsp < /xsl:element>
&nbsp < /wml>
< /xsl:template>

Output:

cHTML

PHP Source Code:

  <?php
include_once("./xslt.class.php");
$xslt = new Xslt("c://data//books_chtml.xsl", "c://data//books.xml");
header("Content-type: text/html");
print ($xslt->transform());
?>  

XSL File

< ?xml version="1.0" encoding="UTF-8"?>
< xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
< xsl:template match="/">
&nbsp < html>
&nbsp &nbsp < head>
&nbsp &nbsp &nbsp < title>< xsl:value-of select="page/title"/>< /title>
&nbsp &nbsp < /head>
&nbsp &nbsp < body>
&nbsp &nbsp < xsl:for-each select="books/book">
&nbsp &nbsp &nbsp < small>
&nbsp &nbsp &nbsp &nbsp < u>< b>< xsl:value-of select="title"/>< /b>< /u>< br/>
&nbsp &nbsp &nbsp &nbsp < b>< xsl:text>Author: < /xsl:text>< /b>< xsl:value-of select="author"/>< br/>
&nbsp &nbsp &nbsp &nbsp < b>< xsl:text>Price: < /xsl:text>< /b>< xsl:value-of select="price"/>
&nbsp &nbsp &nbsp &nbsp < xsl:if test="special > 0">
&nbsp &nbsp &nbsp &nbsp &nbsp < b>< xsl:text> On Sale For: < /xsl:text>< xsl:value-of select="special"/>< /b>
&nbsp &nbsp &nbsp &nbsp < /xsl:if>< br/>
&nbsp &nbsp &nbsp &nbsp < b>< xsl:text>Paperback: < /xsl:text>< /b>< xsl:value-of select="size"/>< br/>
&nbsp &nbsp &nbsp &nbsp < b>< xsl:text>Publisher: < /xsl:text>< /b>< xsl:value-of select="publisher"/>< br/>
&nbsp &nbsp &nbsp &nbsp < b>< xsl:text>ISBN: < /xsl:text>< /b>< xsl:value-of select="isbn"/>< br/>
&nbsp &nbsp &nbsp &nbsp < br/>
&nbsp &nbsp &nbsp < /small>
&nbsp &nbsp < /xsl:for-each>
&nbsp &nbsp < /body>
&nbsp < /html>
< /xsl:template>
< /xsl:stylesheet>

Output:

VXML

PHP Source Code:

 <?php
include_once("./xslt.class.php");
$xslt = new Xslt("c://data//books_vxml.xsl", "c://data//books.xml");
header("Content-type: text/xml");
print ($xslt->transform());
?>

XSL File

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
<xsl:template match="/">
&nbsp <vxml version="2.0">
&nbsp &nbsp <form id="intro">
&nbsp &nbsp &nbsp <block>
&nbsp &nbsp &nbsp &nbsp <xsl:for-each select="books/book">
&nbsp &nbsp &nbsp &nbsp <xsl:value-of select="title"/><break size="large"/><break size="large"/>
&nbsp &nbsp &nbsp &nbsp <xsl:text>Author </xsl:text><xsl:value-of select="author"/><break size="large"/>
&nbsp &nbsp &nbsp &nbsp <xsl:text>Price </xsl:text><xsl:value-of select="price"/><break size="large"/>
&nbsp &nbsp &nbsp &nbsp <xsl:if test="special > 0">
&nbsp &nbsp &nbsp &nbsp &nbsp <xsl:text>On Sale For </xsl:text><xsl:value-of select="special"/><break size="large"/>
&nbsp &nbsp &nbsp &nbsp </xsl:if>
&nbsp &nbsp &nbsp &nbsp <xsl:text>Paperback: </xsl:text><xsl:value-of select="size"/><break size="large"/>
&nbsp &nbsp &nbsp &nbsp <xsl:text>Publisher: </xsl:text><xsl:value-of select="publisher"/><break size="large"/>
&nbsp &nbsp &nbsp &nbsp <xsl:text>ISBN: </xsl:text><xsl:value-of select="isbn"/><break size="large"/>
&nbsp &nbsp &nbsp &nbsp </xsl:for-each>
&nbsp &nbsp &nbsp </block>
&nbsp &nbsp </form>
&nbsp </vxml>
</xsl:template>
</xsl:stylesheet>

Output:

It is unlikely you will have the voice-recognition technology equipment to run the VXML example. However, you can visit one of the VoiceXML providers such as VoiceGenie.com or Tellme.com. As well in this demonstration the output will stream the entire information from start to finish. When developing VoiceXML applications you should tailor the application towards voice interaction.

In this example, it would probably be better to list out the titles of the books in menu like fashion, possible as abbreviated titles. From there the user should select an option and thereafter the details of the book would be told to the user. The implementation of this is beyond the scope of this article.

The Benefits

Because we are using the same content in all cases, whether it is HTML, WML, cHTML or VXML the same XML data file is used. If additional books are added, books need to be removed or changes need to be made such as sales price all you really have to do is change the data in the XML file. As well this provides another layer of abstraction between the presentation layer and server-side code.

It keeps your code a lot cleaner rather then having several different files or several if statements in your PHP code to output the appropriate content for the appropriate viewer. As well it prevents you from inserting difficult to find and difficult to debug PHP code in all the different files for all the different devices being supported.

However, you will notice the Sale price is only displayed based upon the if statement in the XSL stylesheet, if this for some reason needed to be changed you would have to make the change in each XSL stylesheet. To avoid this, simply generate dynamic XML files with PHP and have your logic in the PHP code determine what goes into the XML file.

As well you can then use PHP to determine which appropriate pre-defined XSL stylesheet to use. This way your XML files are purely used as means of holding data in meaningful structure without any processing logic at all.

Furthermore, you have not only saved maintenance time but as well reduced the amount of effort needed if you were to support other features such as:

Reports in PDF format
RSS feeds
WebServices
SVG
ChessML
AvantGo
AIML
XHTML
HDML

the list goes on and on.

Web Services is especially important when you want to start sharing the same information to other businesses or simply to other devices that are not script based such as SymbianOS devices, Palm, J2ME enabled devices and SmartPhones. This is because you are working with an agreed upon industry standard largely based on XML.

Summary

Even though there were several different types of technologies being used the over all goal was to demonstrate XSL is indeed beneficial when providing the same content to several different types of devices. As well if you aren’t familiar with some of the above wireless technologies that this article has now peeked your interests into something new.

Jason is a wireless and open source developer enthusiast who enjoys creating synergy and sharing knowledge in the software development world. To learn more about him visit his personal site at http://www.jasonlam604.com/

The saving and displaying process is nearly always required. In this article I will show you how you can easily use an ASP form to add data into a XML file and how you can retrieve this data to display it in a well formed table. We will create an example ASP page, in which the user will be able to enter his Name, Age, Gender and a Postalcode. This data will be stored in a XML file. To display the data we will use XSL. The example ASP page and the resulting table look like this:

Its has always been important for me to divide the ASP Page in two parts and I would suggest you to do the same. Some people are mixing the asp and html code, but I would not recommend it to you. But sometimes it isn`t possible to spilt the ASP Page in two parts, in this case you will need to find your own and best suitable way. But anyway, try it! Here an image of the structure how my ASP page always looks like:

The first part contains a simple Form, and the second part contains the ASP Code which will do the saving for us. For a better understanding we will start with the Form.

Part I the Form:

You can create any simple form, with any controls you like. In addition to the other controls, we also need a submit and a reset button.

In my example I have created a simple form called frmPerson, which contains three textfields and a drop down field.

This form will use the post method to process the entered data.

Here is the code of my form:

<form action="VerifyPerson.asp" method="post" name="frmPerson" id="frmPerson">
<INPUT name=Name>
<INPUT name=Age>
<SELECT style="WIDTH: 154px" name=Gender>
    <OPTION value=Male selected>Male</OPTION>
    <OPTION value=Female>Female</OPTION>
</SELECT>
<INPUT name=Postalcode>
<INPUT type=submit value=Submit name=submit><INPUT type=reset value=Reset name=reset>
</form>

It is very important to give each used TAG which will hold the data, a variable name.

For Example: The name textfield <INPUT name=Name> contains the variable Name. In order to retrieve the data from the form we will use this and other variables in the next ASP paragraph.

You dont need to write down this code, because the examples covered in this Article are available for download. To get familar with ASP and XML I suggest you download the examples and try to work with it. To give the form a better and professional look I have included a table with some effects, so dont get worried about the whole code. As you can see this was the first easy part of the ASP page and the second part will be even easier.

Part II the ASP code:

In this paragraph I will show you in 7 easy steps how you can retrieve the data from the form and how you can save the data to a XML
file.

1. The first step is to check whether the user has pressed the submit button or not! For this we will use the JScript function count.

var submit = Request.Form("submit").Count;
if( submit > 0 ){
  // The user has pressed the submit button
  // So the code to save the data will take place here.
}
else{
  // We could also place our form in this part of code, which must be then written in JScript.
  //But I would not recommend that !!!
}

2. Now we need to retrieve the data from the form. This data will be stored in some variables. To retrieve the data we will use the Request.Form("variable_name");
function. So let us create 4 variables and retrieve the required data.

var name = Request.Form("Name");
var age = Request.Form("Age");
var gender	= Request.Form("Gender");
var pcode	= Request.Form("PostalCode");

3.The third step is to check whether the user has entered some data, or not. For this we can just check whether the variables in step 2 are still empty or not.

var error = "";
if ( name == "" )
  error = "Name ";
if ( age == "" )
  error += "Age ";
if ( pcode == "")
  error += "PostalCode ";

4. In step 3 we have saved the result in the var error. Now we need to check, if "error" consists some data or not. If yes, then we have found an error, and we will display it. If not, then we will start with the saving procedure.

if(error!=""){
  //We have found an error, so display this to the user!
  Response.Write("Please enter the following data:<br>");
  Response.Write(<b>);
  Response.Write(error);
  Response.Write("</b>");
}
else{
//Everything is fine, so let us start to save the data.

5. Now we have done the nessesary checks and can start with saving the data. For that we will load the Person.xml in a xmlDocument. Then we will load the current node list to get the current root node. To get the current root node, we will use the function xmlDoc.getElementsByTagName. After that we need to create the required nodes, this can be achived with the function xmlDoc.createElement("AnyNodeName"). At last we only need to save the entered data from the form to the approriate xml variables. So here is the code, how it could look like:

.
.
.
else{
  // here we are loading the requried xml file
  var xmlDoc=Server.CreateObject("MICROSOFT.FreeThreadedXMLDOM");
  xmlDoc.async="false";
  xmlDoc.load(Server.MapPath("Person.xml"));
  // Get the current root
  var nodeList = xmlDoc.getElementsByTagName("PersonList");
  if(nodeList.length > 0){
    var parentNode = nodeList(0) ;
    // Create the required nodes
    var personNode = xmlDoc.createElement("Person");
    var nameNode   = xmlDoc.createElement("Name");
    var ageNode    = xmlDoc.createElement("Age");
    var genderNode = xmlDoc.createElement("Gender");
    var pcodeNode  = xmlDoc.createElement("PostalCode");
    // Assign the variables, which we have retrieved in step 2 to the xml variables.
    nameNode.text  = name;
    ageNode.text   = age;
    genderNode.text= gender;
    pcodeNode.text = pcode;
	.
	.
	.

6. We have done nearly everything to save the data, but there are still two steps left. In this step we will append the created nodes to the parent node. This can be done with the function parentNode.appendChild("personNode");

   .
   .
   .
   parentNode.appendChild(personNode);
   personNode.appendChild(nameNode);
   personNode.appendChild(ageNode);
   personNode.appendChild(genderNode);
   personNode.appendChild(pcodeNode);
   .
   .
   .

7. Finally we only need to save the nodes to the xml file. For this you can use the function xmlDoc.save(Server.MapPath("Person.xml"));.

   // 7) Now save the nodes to the file
   xmlDoc.save(Server.MapPath("Person.xml"));

XSL:

With this example you can save easily the data of any Person into a XML file. Right now we have only seen how to save the data, but how do we display it ? The answer is again easy. We will use ASP and XSL to display the data. The first thing you need to do is to load the XML file, this can be achieved with a XML Parser. The XML parser from Microsoft is available directly with Internet Explorer 5.0. After you have loaded the XML file in the document Object, you can retrieve the XML data with the help of a DOM Object. In the same way you must load the XSL file. 

   // This part is used to display the data 
   var objXMLDoc = Server.CreateObject("MICROSOFT.FreeThreadedXMLDOM");
   objXMLDoc.async = false;
   objXMLDoc.load(Server.MapPath("person.xml"));
   var xsl=Server.CreateObject("MICROSOFT.FreeThreadedXMLDOM");
   xsl.async = false;
   xsl.load(Server.MapPath("person.xsl"));

Now you have loaded both files, each one DOM Object. Now you only need to create a query which will select the nodes for us. Of course we could select some specific nodes, but for our needs we will just select the root node, so all other nodes will be selected automatically.

   var xmlQuery="//Person";
   var docHeadlines=objXMLDoc.documentElement.selectNodes(xmlQuery);

After that you only need to iterate through the nodes to display each stored item.

   var numNodes;
   numNodes=docHeadlines.length;
   var nn;
   for(var i=0;i<numNodes;i++){
     nn = docHeadlines.nextNode();
     Response.Write(nn.transformNode(xsl));
   }

Conclusion:

That’s it ! Now you have created a fully functional system which can save, read and display data from a form. You have learned the advantages of ASP,XML and XSL. To practice a little bit more, I suggest you to modify the ASP page, to create your own Address book. Once you have mastered and created your own ASP page you will understand much more.

Download examples

First published at SitePoint.com

Codefinger was founded 2000 by Sonu Kapoor. Sonu has studied E-Commerce in India and currently lives in Germany. After graduation he worked for several companies in Germany. He currently works as a Network Consultant and Software Developer. He has written many applications in various programming languages like VC++, ASP, ASP.NET, XML or XSL. Besides his passion for developing applications, Sonu writes articles for several major websites like Developer.com. He also works as a freelancer for CodeGuru.

In this article, I will explain how to retrieve XML elements with ASP and how to retrieve specific values from XML files with the help of XPath. I will also introduce the usage of XSL.

XML:

XML ( Extensible Markup Language ) is designed to hold data in user defined tags. XML doesn’t contain any predefined tags, you must create your own tags, which can hold the required data. Its important to understand that XML does not perform any task by itself. Its only usage is to store information that can be sent in a portable way. You can imagine an XML file like a plain text database file. The XML-tags are similar with the tables of a database. In a database you will also have to define your tables, which will hold your data.

Here is a sample of a simple XML file:

-==-

This way, you could enter any number of ‘Person’ records you like. To load and display the XML data you will need an XML Parser. The Microsoft XML Parser is a COM component and is directly available with IE 5.0. Once you have loaded your XML file in the document object, you can easily retrieve the data via a DOM object. Here is a snippet of code which will display the data using ASP.

-==-

XPath:

The above example will display each and every person. In order to retrieve a specific ‘Person’ or to display the ‘Person’s name only we can make use of XPath. You can compare XPath with the select statement of a database. We can use the XPath for XML the same way we would use the select syntax to get a specific record from a database. You can say that XPath is the answer, if you need to make a specific selection. I will use the same example as above to show you the usage of XPath.

-==-

XSL:

By now, you have seen how to load data and how to select specific data. But what if we need to display the data in a table or in a form, so that it looks much more user friendly than now? For this purpose we will use XSL. XSL is a language to transform XML into HTML code. XSL will give your XML data a user friendly look. But XSL can do much more. With XSL you will also be able to sort and filter of any XML data. We will extend our example to see the usage of XSL.

NOTE: XSL in not compatible with IE 5.0. IE6 fully supports XSL.

Person.xsl

-==-

Here your modified XML file:

-==-

After completing the project, I have learned how to use XML with ASP, how to use XPath and the power of XSL. I hope my article provided you with some useful information, too.

Download the example

Article appeared at Codefinger.de

Codefinger was founded 2000 by Sonu Kapoor. Sonu has studied E-Commerce in India and currently lives in Germany. After graduation he worked for several companies in Germany. He currently works as a Network Consultant and Software Developer. He has written many applications in various programming languages like VC++, ASP, ASP.NET, XML or XSL. Besides his passion for developing applications, Sonu writes articles for several major websites like Developer.com. He also works as a freelancer for CodeGuru.