Dr. Chunbo Chu Week 3

XML Not a replacement for HTML. XML and HTML were designed with different goals: XML was designed to transport and store data, with focus on what data is. HTML was designed to display data, with focus on how data looks. HTML is about displaying information, while XML is about carrying information. XML does not DO anything. Was created to structure, store, and transport information. COMP205 - Survey of Computer Languages

Example Tove Jani Reminder Don't forget me this weekend! COMP205 - Survey of Computer Languages

Syntax Tree Structure Elements Empty: Non-Empty: stuff stuff may be other elements or text or comments -- or a mix Must Have a Closing Tag Tags are Case Sensitive Must be Properly Nested Must Have a Root Element Attribute Values Must be Quoted Tove Jani COMP205 - Survey of Computer Languages

Syntax Comment Entity References Some characters have a special meaning in XML. If you place a character like "<" inside an XML element, it will generate an error because the parser interprets it as the start of a new element. This will generate an XML error: if salary To avoid this error, replace the "<" character with an entity reference: if salary < 1000 then COMP205 - Survey of Computer Languages

Document Tree COMP205 - Survey of Computer Languages

Exercise Write an XML file for a bookstore Language as an attribute of the title Category as an attribute of the book Save your file as: bookstore.xml Category TitleLanguageAuthorYearPrice COOKING Everyday ItalianEnGiada CHILDREN Harry Potter EnRowling WEB Learning XMLEnErik COMP205 - Survey of Computer Languages

XML File Everyday Italian Giada De Laurentiis Harry Potter J K. Rowling Learning XML Erik T. Ray COMP205 - Survey of Computer Languages

XSLT: XML Stylesheet Language -Transforms COMP205 - Survey of Computer Languages Templates XSL Files Generating Text and Attributes Includes The “Pull” Approach

EXtensible Stylesheet Language CSS = Style Sheets for HTML HTML uses predefined tags, and the meaning of each tag is well understood. The tag in HTML defines a table - and a browser knows how to display it. Adding styles to HTML elements are simple. Telling a browser to display an element in a special font or color, is easy with CSS. COMP205 - Survey of Computer Languages

EXtensible Stylesheet Language XSL = Style Sheets for XML XML does not use predefined tags (we can use any tag- names we like), and therefore the meaning of each tag is not well understood. A tag could mean an HTML table, a piece of furniture, or something else - and a browser does not know how to display it. XSL describes how the XML document should be displayed! COMP205 - Survey of Computer Languages

XSL More Than a Style Sheet Language XSL consists of three parts: XSLT - a language for transforming XML documents XPath - a language for navigating in XML documents XSL-FO - a language for formatting XML documents COMP205 - Survey of Computer Languages

XSLT – An XML Transform Language XSLT is itself an XML language (that is, it uses tags that meet the XML rules) ‏ XSLT is standardized by the W3C: Stands for “XML Stylesheet Language – Transformations” It’s primary goal is to add presentation “style” to XML data For example, it can convert XML to HTML It has lots of other uses as well COMP205 - Survey of Computer Languages

XML Transforms Standard ways to transform XML files Into other XML files Into HTML or other visual presentation languages (for instance, for wireless and other handheld devices) ‏ What features would such a transform language have? How Does it Work? Uses XPath to define parts of the source document that should match one or more predefined templates. When a match is found, transform the matching part of the source document into the result document. COMP205 - Survey of Computer Languages

Browsers All major browsers have support for XML and XSLT. Mozilla Firefox Firefox 3 supports XML, XSLT, and XPath. Internet Explorer Internet Explorer 6 supports XML, XSLT, and XPath. Google Chrome Chrome 1 supports XML, XSLT, and XPath. Opera Opera 9 supports XML, XSLT, and XPath. Opera 8 supports only XML + CSS. Apple Safari Safari 3 supports XML and XSLT. COMP205 - Survey of Computer Languages

Templates Fundamental idea in XSLT: For each type of XML tag in the source document Provide a template consisting of the text to output Parameterize the templates to plug in tag attribute values, etc. Indicate in the templates where the text generated by contained tags goes COMP205 - Survey of Computer Languages

How Can We Define This Transformation? Course Day Time COMP 361 Wed 5:45 COMP 360 Tue 5:45 COMP205 - Survey of Computer Languages Wed 5:45 Tue 5:45

The Transformation Defined in Words Wherever there is a element, Generate a table with “Course”, “Day”, and “Time” as column headers Look at the content of Wherever there is a element Generate a table row Generate a cell, using the “name” attribute of the Generate a cell, using a element in the content Wherever there is a element Output the text content of the element Wherever there is a element Output the text content of the element COMP205 - Survey of Computer Languages

Writing Our Transform Specification in XSLT - 1 For the top element ( ), Generate a table with “Course”, “Day”, and “Time” as column headers Process the contents of... (i.e., elements) ‏ COMP205 - Survey of Computer Languages Course Day Time

Writing Our Transform Specification in XSLT - 2 For each element Generate a table row Generate a cell, using the “name” attribute of the Generate a cell, using a element in the content COMP205 - Survey of Computer Languages Tue 5:45

Writing Our Transform Specification in XSLT - 3 For each element Output the text content of the element For each element Output the text content of the element COMP205 - Survey of Computer Languages Actually, these templates are not needed since there are built-in (default) templates that do the same thing. But it’s a good idea to define them anyway while you're learning XSLT.

The Overall Structure of an XSL File <xsl:stylesheet version="1.0" xmlns:xsl=" > COMP205 - Survey of Computer Languages The XSL file: Demo: Specifies that the xsl: prefix is used for XSL Transforms, Version 1.0 Turns on special rules for outputting HTML (because HTML does not follow the XML rules)‏ View Source to see the XML

The HTML Output Method Tags in template must follow XML rules The HTML Output Method will convert the output to follow (old) HTML rules  Also, adds an HTML declaration tag. COMP205 - Survey of Computer Languages

Assigning an XSL File to Your XML File Add the following processing instruction to your XML file (just after the <?xml...): COMP205 - Survey of Computer Languages Your XSL file Tells the transform software that it is an XSL transform (There are other types of “stylesheets”)‏ Note the ?

More About the Element The match attribute can be a pattern The pattern language is quite different from that for JavaScript/Perl Its Goal: Find nodes in a tree defined by XML Elements Attributes Text blocks Comments (yes, even comments) ‏ COMP205 - Survey of Computer Languages

Patterns match="abc" – finds all elements match="abc/def" – finds all elements that are children of elements match="abc//def" – find all that are descendants of an COMP205 - Survey of Computer Languages Somewhere under an, not necessarily direct child elements The // means roughly “with anything in between”

Patterns for Attributes to indicate an attribute value Use = to indicate equality (not ==) ‏ Use […] to "qualify" a match Example: Find all elements whose name attribute is equal to “fred” COMP205 - Survey of Computer Languages

Matching a Specific Place in the Hierarchy match="/aaa/bbb" Find any tag that is under the top level tag COMP205 - Survey of Computer Languages Example: /aaa/bbb matches these, not this /aaa//bbb matches all the tags anywhere under the tag

Patterns and XPath The patterns in XSLT follow the XPath standards It support lots of other pattern features See COMP205 - Survey of Computer Languages

Generating Text Output COMP205 - Survey of Computer Languages Inserts the value of the “name” attribute of Select the child element and insert it’s string value. The string value of an element is the text in its content. Because the template for just outputs the value, xsl:value-of and xsl:apply- templates accomplish the same result in this case. Non xsl: tags are output as-is

Outputting Attributes Price: COMP205 - Survey of Computer Languages { … } allows you to put an expression inside the quotes in an attribute you are generating Tags are not allowed inside attributes in XML. Thus, works only for generating text outside of a tag You cannot write " />

Exercise Write an XSLT file that transform your bookstore.xml into an HTML file which displays like this: Save your XSLT file as: bookstoreTransform.xsl in the same directory as bookstore.xml. Run it in a browser. COMP205 - Survey of Computer Languages

Variables and Parameters value COMP205 - Survey of Computer Languages Defining Using xsl:variable defines a constant to be used in subsequent or subtending templates xsl:param defines a parameter passed in from outside the stylesheet or a parameter passed into a template

Using a Parameter to Select One Item from a List in XML Description: Price: COMP205 - Survey of Computer Languages

Including Other Templates COMP205 - Survey of Computer Languages URL to another XSL file. The templates in it are merged into the main XSL file. Can only be placed as child of the tag Think of as meaning "include some more templates" Don't think of as meaning "include something in the output"

The Pull Approach to XSL COMP205 - Survey of Computer Languages An alternative for certain types of problems and certain types of programmers NOT ALLOWED IN THE ASSIGNMENT!

The Original, Template-Oriented Description Wherever there is a element, Generate a table with “Course”, “Day”, and “Time” as column headers Look at the content of Wherever there is a element Generate a table row Generate a cell, using the “name” attribute of the Generate a cell, using a element in the content Wherever there is a element Output the text content of the element Wherever there is a element Output the text content of the element COMP205 - Survey of Computer Languages

The “Pull” Approach to Writing XSLT Rewording the description of the transform … Generate a table with “Course”, “Day”, and “Time” as column headers For each element under a element Generate a table row Generate a cell, using the “name” attribute of the Generate a cell, using the value of the element in the content COMP205 - Survey of Computer Languages More like the JSP/ASP/PHP approach Example:

Summary of the Pull Approach There is one template (match= " / " ) ‏ Its content defines the entire HTML output For substitutions – Analogous to in JSP For repeats (iterations) ‏ stuff to repeat Analogous to COMP205 - Survey of Computer Languages “Pulls” the value to substitute “Pulls” the set of elements to iterate over

Push vs. Pull Beneath the Underdog In other words, I am three. "Which one is real?" "They're all real." COMP205 - Survey of Computer Languages

Pull COMP205 - Survey of Computer Languages

Push COMP205 - Survey of Computer Languages

Choosing Your XSL Design Approach Many times, it’s just a matter of personal coding preference Use the “pull” approach When your XML file’s structure does not match well the structure of the desire HTML When you prefer a “JSP/ASP/PHP-like” coding style When you want to use XML information more than once in the output (pull it in multiple times) ‏ Use the template-per-element-type approach When particular type of XML information is formatted the same regardless of context COMP205 - Survey of Computer Languages

Advanced XSLT – For You to Explore Expressions: arithmetic, Boolean, and string operations Advanced Patterns: complex conditionals on values and position within the tree Conditionals Sorting Modes: switching to a different set of templates for a sub-tree of XML elements Lots more COMP205 - Survey of Computer Languages

Formatting – The Companion to XSLT (for you to explore)‏ Formerly known as XSL-FO Tags that specify user output at a higher level than HTML Can be used to generate HTML or other language for creating user output Used to permit one transform to generate output for multiple types of devices or uses (e.g., printer friendly alternative pages) ‏ COMP205 - Survey of Computer Languages

XSLT References Web Programming (course text) Chap. 3, 4. COMP 203 Key Points W3C Specification for XSLT W3C Specification for Xpath, the patterns used in XSLT: Online tutorial COMP205 - Survey of Computer Languages

XSLT References Web Programming (course text) Chap. 3, 4. COMP 203 Key Points W3C Specification for XSLT W3C Specification for Xpath, the patterns used in XSLT: Online tutorial COMP205 - Survey of Computer Languages