Laboratory Five

searchcoilSoftware and s/w Development

Aug 15, 2012 (5 years and 4 months ago)

232 views

Intranet Systems Development: Laboratory Three

Introduction to XSLT

Tutorial

1)

Browse to the following web site

http://www.w3schools.com/xsl/

and work through the XSL tutorial sections provided there, up to and including the
section on the <xsl:apply
-
templat
es> element.

Practical

In this particular lab, we are interested in using XSLT to make simple transformations
of XML source into XHTML.

2)

We will begin by implementing the Turing
-
Feynman XML example from Lecture
Four. Use the
Lab 3 Resources

archive from the

Laboratories section
of the
module

website
. Open
people.xml
in NetBeans

and check it for well
-
formedness.
Now create the default XSLT stylesheet by selecting
File | New

File
.

In the
dialogue window select XML and XSL Stylesheet as shown.


Call the styles
heet
peopleStyle1.xsl
. NetBeans produces a default style template
that transforms any XML into a default empty web page
.

3)

We will now transform
people.xml

into
people
.
html

using
peopleStyle1.xsl
.
Right click on the file icon for
people.xml
. Select
XSL Trans
formation...

. In the
dialogue box the source box is already completed and points to
people.xml
.
Browse to
peopleStyle1.xsl

to complete the second input box. Change the output
file name to
people
.
html
.
Select the “
open

in browser” option in the XSL
Transfo
rmation dialogue box and click
OK
. Your browser should pop up a blank
web page. View the source and check that it is what you expect.

4)

Now
, as in exercise 2,

re
-
create the NetBeans default transforming stylesheet,
calling it
peopleStyle2.xsl
.
. This time,

remove the
<xsl:output>

and
<xsl:template>

tags and all of their contents. You now have the
empty
stylesheet

used in example 1 of Lecture D.
Transform
people.xml

with
peopleStyle2.xsl

but deselect Preview in Browser.

Run the transformation again,
this tim
e outputting to the file
people.txt
. This time, the result appears in the
NetBeans browser window. Compare the layout with the content of
people.xml

noting how whitespace has also been preserved.
.

5)

Implement stylesheet examples 3
-
5 from Lecture

D
, and run

t
he transformations.

6)

Write an XSLT,
fellowNames.xsl
, for
fellowship1.xml
. This should result in an
HTML page
fellowship1.html

with the title and heading “The Fellowship of the
Ring” followed by an unordered list of the names of all members.
[Hint: put the
b
oilerplate HTML, including the opening and closing
<ul>

tags, in the template
rule for the root element. Then apply a template for the member element that
returns the name of each member inserted as the content of
<li>

tags.]


7)

Flushed with success, let’s b
e a little more elaborate. Write another XSLT,
fellowTable.xsl
, for
fellowship1.xml
. This should display the data in
fellowship1.xml

in a table headed
Name Age Height Country
.
[Hint: this is
essentially the same as the last example, except this time your m
ember template
creates rows of a table rather than list items.]

8)

Finally, how ingenious can you be? Write a stylesheet
shadowBands.xsl

that
produces the same t
able
, but with the Name and Age
columns

shaded grey.

Other XSLT processors

9)

First,
we will use
(an
old but free version of)
the Instant Saxon XSLT processor.
This
is a

separate

application

and has a command line interface.
Copy the
saxon.exe

file to the directory in which you are developing your XML files.
Select an XSLT file and
transform your xml file

into html using the syntax:

saxon myfile.xml mystyle.xsl > target.html

in an MSDOS command window.

10)

Now
re
-
read the section of the online tutorial entitled
XSL on the Client
.
This
demonstrates how Internet Explorer has a built
-
in XSLT processor. Essentiall
y,
you use JavaScript to load in an XML source file and a transform file. You then
use a JavaScript to transform the source with the transform file, invoking the in
-
built XSLT processor.
Adapt the JavaScript code
in the tutorial
to write your own
transform
ing web page
transformer.html
. The page should provide a form
containing two text fields in which to type the names of the source and XSLT file.
The result should be displayed in a
separate display layer

(see below)
.

Try it out
on the sources and transform
s from earlier exercises.