**"XML Essentials for Web Design: A Practical Guide"**

1. INFSY 547: WEB-Based Technologies Gayle J Yaverbaum, PhD Professor of Information Systems Penn State Harrisburg

2. 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!

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

4. 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>

5. XML Environment

6. Attributes • Another XML Building Block • Adds richer metadata to elements • Information to help describe an XML element • Contained in the element tag

7. More about XML Example: <O2 class = “ "> • Name/value pair • Value is bounded by quotes

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

9. Example from PortfolioProject <OTHER> <OPT type="mailto"> <url>gjy1@psu.edu</url> <text>Gayle J Yaverbaum</text> </OPT> </OTHER>

10. Comments <!-- ………--> <!--Updated Jan 15--> Example

11. Predefined Entities • 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) Example

12. Parsing with XSLTXML Stylesheet Language Transformation

13. 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

14. 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 

15. 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

16. How It Works! X Y Z aa Y bb XSLT Processor (saxon) Result: HTML Page Data/Information X aa Z bb W cc Transformation of XML to a different format.

17. 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

18. 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"

19. 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)

20. XSL: Extensible Stylesheet Language • XSL transforms documents to XHTML • Specifies how the data should be rendered

21. XML (from last week’s lab)

22. <?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>

23. <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>

24. <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>

25. </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>

26. 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

27. 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

28. 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.

29. XSLT <?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>

30. 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="/">

31. The Process Parser will always look for the root of the XML document Typically will be: <xsl:template match=“/”> 3. Each template has a match attribute.

32. XSL • A very special XLST Instruction (xsl:apply-templates) • Identifies the node-set • Will match all child nodes to templates

33. 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

34. <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>

35. “/” 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

36. 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

37. 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>

38. 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

39. Images XML File <PICS> <ANYIMAGE>XML.jpg</ANYIMAGE> </PICS>

40. 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>

41. Batch File to Run Processor java net.sf.saxon.Transform bookstore.xml bookstore.xsl > bookstore.html pause

42. 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

43. <?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>