INFSY 547: WEB-Based Technologies

Gayle J Yaverbaum, PhD

Professor of Information Systems

Penn State Harrisburg

Breeze• https://breeze.psu.edu/gjy

– Input PSU Access ID– Feel free to enter the “room” anytime

• Download prompted software; it only takes a minute

• With a camera: – start camera – talk into the microphone

• Without a camera, feel free to join in using the “chat” pod!

XML Reviewed<?xml version="1.0"?><!DOCTYPE example SYSTEM “PortfolioProject.dtd"><PORTFOLIO> . .</PORTFOLIO>

Element: Building Block of XML

• Each element has a name and content

• Each element has a start and end tag

• XML does NOT define elements

Example: <PORTFOLIO> </PORTFOLIO>

E lem en ts E n tit ies C om m en ts P rocess in gIn s tru c tion s

Ig n ored S ec tion s

XML Environment

Attributes

• Another XML Building Block– Adds richer metadata to elements

– Information to help describe an XML element

– Contained in the element tag

More about XML

Example:

<O2 class = “ ">

Name/value pair Value is bounded by quotes

<?xml version="1.0"?><!DOCTYPE PortfolioProject SYSTEM “PortfolioProject.dtd"><PORTFOLIO> . . <O2 class=“1">…………………..</O2> . .</PORTFOLIO>

class = ……………………………..Attribute:

Example from PortfolioProject

<OTHER><OPT type="mailto">

<url>gjy1@psu.edu</url><text>Gayle J Yaverbaum</text>

</OPT></OTHER>

Comments

<!-- ………-->

<!--Updated Jan 15-->Example

• References that are immediately replaced by the character they represent.

• Predefined e.g. &lt; &gt; (as in HTML)

<equation>50 &lt; 100 </equation>

• Programmer defined entities (to be

demonstrated later)

Predefined Entities

Example

Parsing with XSLTXML Stylesheet Language Transformation

Review of Course Software

Sun Java (jdk1.5.0_01 or above) • Saxon will not work with earlier versions of JAVA

. Java will need environment variables adjusted for the directories in which you placed JAVA

JAVA_HOME c:/JDK1.5.0_CLASSPATH c:/jdk1.5.0_01/lib; c:/jdk1.5.0_01/bin

Eclipse 3.2

. Write xml and xsl files (and others)

. Produce and test JAVA code

. See Eclipse instructions

. Install AFTER Java

Saxon

Download Saxon from http://saxon.sourceforge.net/ Select the open source and freeware version: i.e. Saxon-B 8.8 Select the download for JAVA (saxon will use XML parser supplied with the Java VM.

Unzip files into a suitable directory.  eg saxon8 

Saxon

Saxon Environment Variables( adjust for directory in which you place SAXON:

C:\saxon8\saxon8.jar;C:\saxon8\saxon8-jdom.jar;C:\saxon8\saxon8-xom.jar;C:\saxon8\saxon8-sql.jar 

XYZ

XSLTProcessor(saxon)

aaYbb

X aaZ bbW cc

How It Works!

Result: HTML PageData/Information

Transformation of XML to a different format.

Transforming XML to XHTML Format

• SAXON 8.n XSLT implements the XSLT 2.0 and XPath 1.0 recommendations from the World Wide Web Consortium

• Referred to collectively as "XSLT"Saxon parser

XSL Stylesheets

• Must contain “attribute version” (2.0)

• Must include xmlms:xsl– Is a namespace declaration. – value of xmlns:xsl is always

"http://www.w3.org/1999/XSL/Transform"

Template

• Each xsl:template element must contain either

• match or • name attribute

• Match templates are the basic building block of xsl

• Name templates are associated with reuse of code (later)

XSL: Extensible Stylesheet Language

• XSL transforms documents to XHTML

• Specifies how the data should be rendered

XML (from last week’s lab)

<?xml version="1.0" encoding="utf-8"?><?xml-stylesheet type="text/xsl" href="PortfolioProjectShell.xsl" ?><!DOCTYPE PORTFOLIO SYSTEM "PortfolioProjectShell.dtd"><PORTFOLIO>

<SECTION><TITLE>VIRTUAL PORTFOLIO</TITLE>

<O1><O11> Used to convey to others the skill level of the person who is maintaining the portfolio. </O11>

<O11> Artists typically demonstrate skills via a portfolio. Relevant here because skills are mastered throughout the

semester. Output is a measure of skill level. The objective of a portfolio is to track, evaluate, and improve

performance by providing work examples. </O11>

<O11> An electronic portfolio is: [1]</O11> <O2>* a collection of authentic and diverse evidence,</O2> <O2> * drawn from a larger archive representing what a person or organization has learned over time</O2> <O2>* on which the person or organization has reflected,

and</O2> <O2> * designed for presentation to one or more audiences for a articular rhetorical purpose.</O2> <REFS> <reflink> http://electronicportfolios.org/systems/paradigms.html </reflink> <reftitle>[1] Barrett, H., Wilkerson, J. (2004), Conflicting Paradigms in

Electronic Portfolio Approaches Choosing an Electronic Portfolio Strategy that Matches your Conceptual Framework

</reftitle> </REFS> </O1></SECTION>

<SECTION> <TITLE>INFSY 547 PORTFOLIO</TITLE> <O1>

<O11> A collection of work that an individual completes this semester.</O11> <O11>Private WEB space (PASS) rather than paper output. Portfolio becomes an evolutionary development of all work</O11> <O11>Using your virtual drive</O11> <O2>Available when you log on to any PSU machine</O2> <O2>See PASS on syllabus resources for further information about how to access your personal space.</O2> <REFS>

<reflink>http://aset.its.psu.edu/accounts/personal.html</reflink> <reftitle>Form to Open PASS Space</reftitle>

</REFS> <REF2></REF2>

</O1>

</SECTION><SECTION>

<O1><O11>Sample XML (for discussion purposes) </O11><PICS>

<ANYIMAGE>XML.jpg</ANYIMAGE></PICS>

</O1></SECTION><RESOURCES> <address>https://portfolio.du.edu/pc/port.detail?id=33150</address> <title1>The Structure of a Portfolio</title1></RESOURCES><OTHER>

<OPT type="mailto"><url>gjy1@psu.edu</url><text>Gayle J Yaverbaum</text>

</OPT></OTHER>

</PORTFOLIO>

XSLT Documents Explained!• XSLT Documents: Differentiated by a root element, called

stylesheet.

<xsl:stylesheet version = “2.0" xmlns:xsl =

"http://www.w3.org/1999/XSL/Transform">

• Each template describes how to transform the data elements.

• Uses one or more templates or instructions

TEMPLATES

An XSLT document is an XML document Has a root element of stylesheet The stylesheet namespace is: http://www.w3.org/1999/XSL/Transform

Explanation: Root template

<xsl:template match="/"> . . </xsl:template>

The “/” is a pattern that matches root The xsl: indicates a “namespace” and is essential here to distinguish XSLT from non XSLT elements.

<?xml version="1.0" encoding="ISO-8859-1" ?><xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/TR/REC-html40"

version="2.0"><xsl:template match="/">

<HTML><HEAD>

<TITLE>Projects</TITLE><link rel="stylesheet" type="text/css“

href="PortfolioProject.css" /></HEAD><DIV ID="heading">INFSY 547<BR/><BR/></DIV><BODY> <xsl:apply-templates select="PORTFOLIO" /></BODY>

</HTML></xsl:template>

XSLT

Templates Matches the document root node <xsl:template match=“/”> Matches any element nodes Applies templates to child nodes

<?xml version="1.0" encoding="ISO-8859-1"?><xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"xmlns="http://www.w3.org/TR/REC-html40" version="2.0"><xsl:template match="/">

The Process

1. Parser will always look for the root of the XML document

2. Typically will be:

<xsl:template match=“/”>3. Each template has a match attribute.

XSL

A very special XLST Instruction (xsl:apply-templates)

Identifies the node-set Will match all child nodes to templates

Patterns• Templates contain patterns

• Patterns match elements.

<xsl:template match=“SECTION" >

• Patterns define a condition that a node may or may not satisfy

• Whenever you have a beginning template, you will need an ending eg

</xsl:template >

element

<xsl:template match="SECTION"> <TABLE border="O" width="780"> <TR> <TD> <xsl:for-each select="TITLE"> <xsl:value-of select="." /> </xsl:for-each> </TD> </TR> <xsl:for-each select="O1"> <TR> <TD><xsl:for-each select="O11"> <P><xsl:value-of select="." /></P> </xsl:for-each> </TD></TR> <TR> <TD><xsl:for-each select="PICS">

<img><xsl:attribute name="src">

<xsl:value-of select="ANYIMAGE" /></xsl:attribute></img> <br />

</xsl:for-each> . .</xsl;template>

“/” Symbol

■ Use the “/” symbol to match specific hierarchies

<xsl:template match=“O1/O11" >

■ Use the “/” to specify deeper matches also■ Use // slash to select deeper levels

for-each

■ Processes each element chosen by its select attribute in turn

<xsl:for-each select="O11"><P><xsl:value-of select="." /></P>

</xsl:for-each>

■ The “/” after title is a short form

Matching attributes

■ The “@” selects nodes based upon attribute names.

■ Assume an attribute “lang” associated with every book in a bookstore file

<TD WIDTH="5%"> <xsl:value-of select="@lang"/> </TD>

Sorting Output Elements

Assume an AUTHOR element with two children:

<author> <last>Arch</last> <first>Frank</first> </AUTHOR>

To Sort and display by LAST:

<xsl:for-each select=“group"> <xsl:sort select=“author/last" order="descending"/>

any other code for group

</xsl:for-each>

Or ascending

Images

XML File

<PICS><ANYIMAGE>XML.jpg</ANYIMAGE>

</PICS>

Images

XSL File

<xsl:for-each select="PICS"><img> <xsl:attribute name="src">

<xsl:value-of select="ANYIMAGE" /> </xsl:attribute></img><br />

</xsl:for-each>

Batch File to Run Processorjava net.sf.saxon.Transform bookstore.xml bookstore.xsl > bookstore.html

pause

Lab Assignment• Copy the bookstore.xml from my Web space into an Eclipse

General Project called BookStore • Create the .xsl file to present bookstore.xml

– Only list the books that are in English– Create a 2 column table to display the book title and

the price

• Link this lab into your portfolio. Recommended is a lab section.– .xml– .xsl– .html– .bat

<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet href="bookstore.xsl" type="text/xsl" ?><bookstore>

<book lang="sph"> <title>Harry Potter</title> <price>29.99</price>

</book><book lang="eng">

<title>Learning XML</title> <price>39.95</price>

</book><book lang="frh">

<title>French History</title> <price>89.99</price>

</book></bookstore>