1. ITB6227 - Web programming for E- Commerce 1 ITB6227 Programming for E-COMMERCE Lecture Presentation of XML Documents

2. ITB6227 - Web programming for E- Commerce 2 XML Document Presentation XML documents are designed to describe data. Eventually we will need to present XML data in a viewable format Three options exist for formatting XML data Cascading style sheets (CSS) Extensible style sheet Language Programmatically reading and presenting XML data

3. ITB6227 - Web programming for E- Commerce 3 CSS Approach Cascading Style Sheets can be applied to both HTML, XHTML and XML files Reviewing CSS – In CSS a style rule is declared which associates formatting instructions with an element h1 { Font-size: 12pt; Font-family: arial; } address { Font-size: 12pt; Font-family: arial; }

4. ITB6227 - Web programming for E- Commerce 4 CSS Approach All CSS formatting is placed in a text file with a.css extension Linking declaration in the header of an HTML document Linking declaration in an XML document

5. ITB6227 - Web programming for E- Commerce 5 XML and CSS Example: emails.xml joe@acmeshipping.com brenda@xyzcompany.com 02/12/01 Order 10011 Joe, Please let me know if order number 10011 has shipped. Thanks, Brenda

6. ITB6227 - Web programming for E- Commerce 6 XML and CSS Example: style.css to, from { font-weight:bold; text-align:left; border-style:solid } date_sent { font-style:italic; color:blue } subject { text-decoration:underline; background-color:green; color:yellow } body { margin-top:10; display:block }

7. ITB6227 - Web programming for E- Commerce 7 XML and CSS Example

8. ITB6227 - Web programming for E- Commerce 8 CSS Approach The CSS formatting is applied to the XML element hierarchy via property inheritance The CSS style rule applied to a parent element also applies to child elements unless the child element overrules these with its own style rule

9. ITB6227 - Web programming for E- Commerce 9 CSS Disadvantages When using CSS, XML Elements can only ever be displayed in the same order in which they appear in the XML document CSS has no way to rearrange these elements when displaying them in a web browser CSS cannot perform computations or logical decisions on the XML data applying traffic light formatting to numeric data red, yellow, green applied to ranges of values

10. ITB6227 - Web programming for E- Commerce 10 CSS Disadvantages CSS cannot automatically generate additional text or content to be used in the presentation of XML data. For example, it cannot display page numbers or header/footer information if displaying XML data as part of a report

11. ITB6227 - Web programming for E- Commerce 11 Extensible Stylesheet Language Addresses the short comings of using CSS on XML documents Provides an enhanced means for formatting an XML document XSL is applied to an XML document using an XSL processor software component and is designed to transform an XML document into another XML document format

12. ITB6227 - Web programming for E- Commerce 12 Possible XSL Transformations XML  XHTML, XML  HTML5 Displaying XML data for public websites, intranets XML  SVG (silicon vector graphics) Displaying xml data in charts XML  X3D (extensible 3D modeling language) Displaying xml data as 3D representations

13. ITB6227 - Web programming for E- Commerce 13 XSL Processors XSL Processors built into current versions of web browsers Command line XSL Processors available – as XHTML is not always the transformation target msxsl (microsoft xsl processor) Altova xsl processor

14. ITB6227 - Web programming for E- Commerce 14 Online XSL Processor Source: http://xslt.online-toolz.com/tools/xslt-transformation.php

15. ITB6227 - Web programming for E- Commerce 15 XSL Processors Web programming languages such as PHP have XSL libraries with XSL processor classes

16. ITB6227 - Web programming for E- Commerce 16 Initial Look at XSL XSL Style sheets typically make use of templates as a means of performing XSL transformations Define the template and then call the template instructions and formatting in the body of the template applied to XML elements or attributes XSL provides programming constructs such as looping, decisions etc. These are used in a declarative manner

17. ITB6227 - Web programming for E- Commerce 17 Simple XML File to Transform Technicians Lawrence Diaz Colton Doyle linked to XSL document

18. ITB6227 - Web programming for E- Commerce 18 Basic Template My First Transformation Group:

19. ITB6227 - Web programming for E- Commerce 19 XSL Transformation using Chrome

20. ITB6227 - Web programming for E- Commerce 20 Basic Template XSL derived from XML – you can perform a syntax check by loading the document into the browser xsl:output defines format of the output document, generates HTML5 doctype xsl:template match=“/” Match attribute associates a template with an XML element. In this case the “/” represents the root of the document, so the template is matched with the entire XML document

21. ITB6227 - Web programming for E- Commerce 21 Basic Template xsl:value-of select=“users/group” Selects and outputs the value of an element or an attribute Select attribute specifies a path to the element or attribute xsl:for-each select="users/user“ Selects and iterates over a group of elements

22. ITB6227 - Web programming for E- Commerce 22 Output of Transformation My First Transformation Group: Technicians Lawrence Diaz Colton Doyle xsl:output xsl:value-of xsl:for-each xsl:template

23. ITB6227 - Web programming for E- Commerce 23 Navigating XML using XPATH For navigation purposes, XML is treated as a “tree” containing several nodes. The common node types are Element, Attribute, and Text nodes (There are more …) Jeff Pat Pat Class Student Text: Jeff Text: Pat Classes Student Rep Student Text: Dave

24. ITB6227 - Web programming for E- Commerce 24 Navigating XML using XPATH We can navigate an XML document by specifying a path, much in the same way we would specify file system paths class//Student Assuming that the current node is classes, moves into the class node and will select all student nodes Jeff Pat Pat Class Student Text: Jeff Text: Pat Classes Student Rep Student Text: Dave

25. ITB6227 - Web programming for E- Commerce 25 Navigating XML using XPATH The path example is referred to as an XPath expression and looks just like a file path Elements are accessed as / / Attributes are accessed as @attribute

26. ITB6227 - Web programming for E- Commerce 26 Navigating XML using XPATH Jeff Pat //Class/Student/@id Selects all id attribute nodes for all students //Class/Student[@id=“20095847”] Selects the student node with the id attribute value 20095847. [@id=“20095847”] referred to as an attribute constraint

27. ITB6227 - Web programming for E- Commerce 27 XPATH Context Context – your current focus in an XML document Use: //… Select nodes that start after the current node no matter where they are located / To start from root node of XML document

28. ITB6227 - Web programming for E- Commerce 28 XPATH Context Student Text: Jeff Text: Pat Prof Text: Gehrke ListLocation Attr: Olin Class From this node use List/Student From this node use Student How to access all Student Nodes based on Context. Similar to relative file system paths

29. ITB6227 - Web programming for E- Commerce 29 XPATH examples … Select all of the red apples: //Basket/Apple[@color=‘red’]

30. ITB6227 - Web programming for E- Commerce 30 XPATH examples … Select the cherries that have some flavor: //Basket/Cherry[@flavor]

31. ITB6227 - Web programming for E- Commerce 31 XPATH examples Select all the apples in the orchard: //orchard/descendant()/apple

32. Some other XSL instructions Perform conditional tests on XML data Sort a group of nodes Equivalent of switch statement, used to perform multiple conditional tests on xml data Apply a template to an element