![Close [x]](http://dw1.s81c.com/i/c.gif){kind=small}
IBM ® WebSphere® Studio Application Developer is an application development environment that supports the building of a large spectrum of applications using different technologies, such as JSPs, servlets, HTML, XML, Web services, databases, and EJBs. In particular, Application Developer provides tight integration between XML and relational data. Application Developer supports all of the databases that WebSphere Application Server supports, including DB2®, Oracle Sybase and Microsoft® SQL ServerTM.
This is Part 7 of a series of articles focusing on the XML tools provided with WebSphere Studio Application Developer. Part 7 demonstrates how to use some of the new XSL tools available in WebSphere Studio Application Developer Version 5.0 to develop your XSL stylesheets.
It is recommended that you read the other articles in this series:
- Part 1 Learn how to use Application Developer to develop XML Schema.
- Part 2 Learn how to create an SQL query using Application Developer's SQL Builder.
- Part 3 Learn about the Application Developer features available to incorporate data access and XML in your application.
- Part 4 Learn how to use the XML Editor, a visual tool for creating and editing XML documents.
- Part 5 Learn how to use the RDB to XML Mapping Editor to create DAD files for use with DB2 XML Extender.
- Part 6 Learn how to use the XML Schema Editor and the XML Editor together to develop XML applications that make use of XML namespaces.
We will create a new XSL stylesheet from scratch.
Before you start, download the xslExample1.zip file
provided below. Switch to the XML perspective.
Create a new project called Simple, and import the
videos.xml file from the xslExample1.zip
file into the Simple project. Launch the New XSL file
wizard as follows:
- Select File => New => XSL to launch the New XSL wizard.
- In the File name field, enter
videos.xsl. Click Next. - In the Select XML file page, select the
videos.xmlfile that you have imported. This associates thevideos.xmlfile with thevideos.xslfile. - Click Finish. The
videos.xslfile is created and the XSL Editor is automatically opened for you.
The XSL Editor provides a number of wizards to help you create the
content in your stylesheet. It also provides one-click transformation
to let you quickly see the results of a transform. In this section,
we will show how you can create a simple XSL stylesheet to format
your videos.xml data into an HTML table in three simple
steps:
Step 1: Add an HTML template header
To create an HTML document, we will add a template to generate HTML header information as well as to define the output method for the document.
- Position the cursor on an empty line after the
<xsl:stylesheet>element in thevideos.xslfile. - From the menu, select XSL => HTML Template. This will
create an
<xsl:output>element that will output the result in HTML, and a template that will emit an HTML header with an<xsl:apply-templates>rule to process all of the immediate children in thevideos.xmlfile.
Next, we will create a template that will produce an HTML table.
- Position the cursor on an empty line after the
</xsl:template>element that was generated in Step 1 above. - From the menu, select XSL => HTML Table. This launches the XSL Table Wizard as shown in Figure 1 below.
- Select the VIDEO element as the context node for building the HTML table. This implies that all of the children of the VIDEO element will be added as columns in the table.
- Select the Wrap table in a template check box to indicate that we want to wrap this table in a new template.
- Select the Include Header check box to indicate that we want to include a header in this table.
- Optionally, click Next to go to the next page to add a table border and background color for the table.
- Click Finish. This will create a new VIDEOS template
in your
videos.xslfile that will produce an HTML table.
Figure 1. XSL Table Wizard
- Select File => Save to save the
videos.xslfile. XSL Validation will be run on thevideos.xslfile. The completedvideos.xslfile is included in thexslExample1.zipfile. - From the menu, select Debug => Transform. This will
invoke the Xalan
processor to transform the XML file (
videos.xml) that is associated with this XSL file. The resulting HTML file is shown in Figure 2 below.
Figure 2. Simple HTML table for videos.xml
Associate a stylesheet with multiple XML documents
When we create the videos.xsl file,
we associate it with the videos.xml file. You can change
this association in the Associations dialog. Select the videos.xsl
file, and choose Properties. This launches the Properties
page for the videos.xsl file. Click the Associations
tab as shown in Figure 3 to launch the Associations dialog. You
can see that the videos.xml file is currently associated.
Figure 3. Associating XML documents with an XSL stylesheet
Using the Associations dialog, you can add or remove associations, as well as set the default association. If an XML file is set as the default association of an XSL file, any processing of an XSL file that involves the knowledge of an instance file (for example, transformation, debug, or XPath wizard invocation) will automatically use the default association for the processing.
It is quite common to have one XSL stylesheet that is applied to a number of XML documents with the same structure but different content. You can use the Associations dialog to set up all of the associations. When you make a change to the XSL stylesheet, you can select the Transform all XMLs action to transform all of the associated XML files with only one single mouse click.
Figure 4. Transform all XMLs
Improve the design of the video store
So far, I have demonstrated how you can use the wizards in the XSL Editor to quickly create a stylesheet from an XML document. However, for a real video store, the HTML table does not look very attractive. For example, would you rather see the real image of the video? A more appealing design might look like Figure 5 below. When you visit the video store, a list of the most popular movies is presented. You can then select a particular movie by clicking on the link; an image, together with a detail description, will be displayed as shown in Figure 6 below.
Figure 5. List of movies
Figure 6. A selected movie
Such a Web site can use the same videos.xml
as its data source. However, to create this Web site using XSL stylesheets
requires the following:
- Create stylesheets that can handle the hyperlinks (
hrefs). - Design and deploy the Web application that will transform the XSLs into HTML at run time.
In the remaining sections of this article, we will concentrate on the first task. We will examine the XSL Debugger that can be used for debugging your XSL stylesheets. In the next part of this series, we will discuss how to build your Web application that will apply these stylesheets to the input data to transform them into the HTML output in Figure 5 and Figure 6 above.
Create a new project called Scenario, and import all
of the files in the Scenario directory from xslExample1.zip
into this project. You will notice that in the xsl folder,
there are two XSL stylesheets: movieList.xsl and movieDetail.xsl.
The movieList.xsl stylesheet is used to present the list
of movies. The moveDetail.xsl stylesheet is used to show
the details of a particular movie.
To figure out how movieList.xsl works, we will examine
it using the XSL Debugger. Select both the movieList.xsl
and the videos.xml files. Select Apply XSL =>As HTML.
This launches the XSL Debugger in the XSL Debug perspective, as
shown in Figure 7 below:
Figure 7. XSL Debugger
The XSL Debugger has the following views:
- Sessions View Shows the list of debug sessions. You can
use the toolbar buttons from this view to step forward
or backward
on the current transformation, run to a breakpoint
if breakpoints are set on the XSL source, or open the browser
on the result document.
- Current XSL Element View Shows the details of an element
in the XSL stylesheet as you are stepping through the transform.
The Actual Value column displays the actual value of the XSL element
as it is being evaluated.
- Breakpoints View Shows the list of breakpoints that are
set on the XSL stylesheet. You can use this view to remove breakpoints.
- Template Call Stack View Shows the list of templates that are in the call stack. As a template is entered, an entry will be added. When a template completes its execution, it is removed from the stack.
The XSL Debugger also opens the input XML and XSL in a tile editor so that the XML and XSL can be positioned side by side for easy visualization when you step through the transform. However, if your XSL stylesheet includes other stylesheets, or if your XSL stylesheet transforms multiple documents, a tile editor could be hard to read and you might want to simply stack the editors instead. You can change this by selecting Windows => Preference => XML => XSL Debugging, and deselecting the check box for showing all debugging files in a tile editor, as shown in Figure 8 below:
Figure 8. XSL Debugging Preference
Examine the movieList.xsl file with the XSL Debugger
In the Session View, click on the
button to start stepping through the transform. The XSL rule that
is being executed is highlighted in the XSL source editor. Continue
stepping forward until you reach this line that defines the variable,
id.
<xsl:variable name="id" select="VID_ID"/> |
The XSL Debugger evaluates a variable when an end tag is encountered.
In this simple case, the variable ends in the same line, but for more
complicated variable declarations, the value of a variable can involve
calling another template that can span multiple lines. Examine the
Current XSL Element View to see the evaluated result when the </xsl:variable>
tag is displayed. You will see the context node is evaluated to be
100, which is the value of the VID_ID element for the
current iteration.
Continue to step forward until you reach the line that defines
the href link attribute as follows:
<a href="/VideoWeb/main/detail?videoId={$id}"> |
This href attribute defines the link to the page when
the link is clicked. So, what is in this href? The first
part of this href defines a URL /VideoWeb/main/detail
that has meaning when running in a Web application. We will revisit
this part in the next article in this series. The second part of this
href defines a parameter videoId whose value
is computed from the value of the {$id} variable. To
find out the exact value of this href when a transformation
is applied against the videos.xml file, examine it in
the Current XSL Element View as shown in Figure 9 below. Note
that you can use the ... button to bring up a dialog if the
actual value is very long.
Figure 9. Evaluating the href attribute
You can either single step through the <xsl:for-each>
loop to examine each XSL element as they are being executed, or
you can set a breakpoint if you are only interested in examining
certain values. Let's set a breakpoint on the <a href>
element by double-clicking on that line. You will notice a breakpoint
(a green circle) being added as shown in Figure 7 on line 28.
Now click on the
button to run to the breakpoint. Notice that at each click, the Current XSL Element View shows a new href attribute
value corresponding to the VID_ID element that is in
the videos.xml file.
Examine the movieDetail.xsl file with the XSL Debugger
Next, we will review the movieDetail.xsl file using the
XSL Debugger. Select both the movieDetail.xsl and the videos.xml
files, and select Apply XSL => As HTML to start a new debug
session.
Recall that the movieDetail.xsl file
is designed to show the details of a selected movie. An identifier
for the movie, videoId, must be passed to this stylesheet.
In the next article in this series, we will show you how to dynamically
pass in such a parameter from a servlet when a URL is requested.
As you will see, for the purposes of designing this stylesheet,
you can use a scaffolding value instead.
In the XSL source editor, set a breakpoint on the following line
which tests the VID_ID value against the variable $videoId.
<xsl:if test="VID_ID=$videoId"> |
In the Session View, click on the
button to run to the breakpoint. In the Current XSL Element View,
notice that <xsl:if test> is evaluated to be true.
This is because this variable is set to the value 100
in this line, and it matches the first element value from the vidoes.xml
file.
<xsl:variable name="videoId" select="100"/> |
If you click on the
button again, the <xsl:if test> element will return
false since the next VID_ID value does
not match the current value of 100.
You can make changes to the XSL or XML source
and relaunch the XSL Debugger to see the immediate result. Let's
change the videoId value to 103 as follows,
and save the file.
<xsl:variable name="videoId" select="103"></xsl:variable> |
In the Session View, select the current session
and launch the pop-up menu (see Figure 10). Select Relaunch
to start a new transform. Click on the
button to open the browser on the new transform. You will see a
different movie description.
Figure 10. Relaunch a new debug session
This article described how to use some of the new XSL tools in WebSphere Studio Application Developer Version 5.0. These tools can help beginners get started quickly with XSL, and help enhance the productivity of expert XSL programmers.
Other XSL-related tools in WebSphere Studio Application Developer 5.0 that are not described here include:
- An XSL from XHTML wizard. It generates XSL stylesheets from an XHTML file. Optionally, it can also extract data into XML format if you want to migrate existing HTML files into an XSL and XML infrastructure.
- A Java bean XML/XSL Web client wizard. It takes a Java bean and generates a DOM, the associated XSL stylesheets that can be applied to the DOM, and a servlet that applies the XSL stylesheets to the DOM so that you can quickly create the front-end of a Web application using XML and XSL.
- Compiled XSL stylesheets support using XSLTC.
- An XPath wizard that helps you build and test XPath expressions.
In the next article in this series, we will look at developing and deploying a Web application that will make use of the XSL stylesheets that we created in this article.
| Name | Size | Download method |
|---|---|---|
| xslExample1.zip | 46 KB | FTP |HTTP |
Information about download methods
Christina Lau is a Senior Technical Staff Member at IBM. She currently leads the XML and Data Tools effort for WebSphere Studio Application Developer. She can be reached at clau@ca.ibm.com.
Table of contents
Local resources
Tags
Use the slider bar to see more or fewer tags.
For articles in technology zones (such as Java technology, Linux, Open source, XML), Popular tags shows the top tags for all technology zones. For articles in product zones (such as Info Mgmt, Rational, WebSphere), Popular tags shows the top tags for just that product zone.
For articles in technology zones (such as Java technology, Linux, Open source, XML), My tags shows your tags for all technology zones. For articles in product zones (such as Info Mgmt, Rational, WebSphere), My tags shows your tags for just that product zone.
Popular article tags |
My article tagsSkip to tags list
Popular article tags |
My article tags
