Præsentation 3: Opsummering af Client-Side Teknologier del 2 Internetteknologi 2 (ITNET2)

Præsentation 3:

Opsummering af Client-Side Teknologier del 2

Internetteknologi 2 (ITNET2)

Ingeniørhøjskolen i ÅrhusSlide 2 af 61

Indhold i denne præsentation

• En hvirvelvind introduktion til:– XML – DTD– XML Schema– XSL– XSL-FO– XSLT– XPath– XML-programmering

Grundlæggende XML


XML markup

• eXtended Markup Language• XML based on SGML (subset of)• Like SGML for structure not layout (as HTML)• XML targets the Internet – but is also being used

for application exchange formats (Open Office, XMI) – CSVs

• XML is an W3C Recommendation– http://www.w3.org/TR/REC-xml

• Structure decided by DTD or Schema (more later)• Wide spread support for XML (hype)


Examples of XML usage

• GUI for “thin” clients– XHTML– WML (we shall look closer at this shortly)

• Inter-process communication– SOAP– BizTalk– ebXML

• Databases– XML Databases– XQuery– XLink, XPointer

• Representation / exchange of data– XMI (UML diagrams exchange format)– MathXML– CML– Proprietary

• Example: EPJ XML –good thing when every danish county makes its own• Easy to comprehend due to the nature of XML• Open office


Article.xml

1 <?xml version = "1.0"?>2 3 4 5 6 <article>7 8 <title>Simple XML</title>9 10 <date>September 19, 2001</date>11 12 <author>13 <firstName>Tem</firstName>14 <lastName>Nieto</lastName>15 </author>16 17 <summary>XML is pretty easy.</summary>18 19 <content>Once you have mastered XHTML, XML is easily20 learned. You must remember that XML is not for21 displaying information but for managing information.22 </content>23 24 </article>

Element article is the root element.

Elements title, date, author, summary and content are child elements of article.


Namespace.xml

1 <?xml version = "1.0"?> 3 4 5 6 <text:directory xmlns:text = "urn:deitel:textInfo"7 xmlns:image = "urn:deitel:imageInfo">8 9 <text:file filename = "book.xml">10 <text:description>A book list</text:description>11 </text:file>12 13 <image:file filename = "funny.jpg">14 <image:description>A funny picture</image:description>15 <image:size width = "200" height = "100"/>16 </image:file>17 18 </text:directory>

Keyword xmlns creates two namespace prefixes, text and image.

URIs ensure that a namespace is unique.

Use of XML Namespaces

• XML namespaces used to avoid naming conflicts• When several different elements are involved• <book> isnt always a book• Keyword ”xmlns”

XML skemadefinitioner:

Document Type Definition (DTD) og XML Schema


DTDs

• Document Type Definition• Extended Backus-Naur Form• Defines how an XML document is structured

– Required elements

– Nesting of elements

– Does not define types or behaviour

• If DTD is used – some parsers can decide if XML document is “valid” – which is more than just “wellformed”


Letter.dtd

1 2 3 4 <!ELEMENT letter ( contact+, salutation, paragraph+, 5 closing, signature )>6 7 <!ELEMENT contact ( name, address1, address2, city, state,8 zip, phone, flag )>9 <!ATTLIST contact type CDATA #IMPLIED>10 11 <!ELEMENT name ( #PCDATA )>12 <!ELEMENT address1 ( #PCDATA )>13 <!ELEMENT address2 ( #PCDATA )>14 <!ELEMENT city ( #PCDATA )>15 <!ELEMENT state ( #PCDATA )>16 <!ELEMENT zip ( #PCDATA )>17 <!ELEMENT phone ( #PCDATA )>18 <!ELEMENT flag EMPTY>19 <!ATTLIST flag gender (M | F) "M">20 21 <!ELEMENT salutation ( #PCDATA )>22 <!ELEMENT closing ( #PCDATA )>23 <!ELEMENT paragraph ( #PCDATA )>24 <!ELEMENT signature ( #PCDATA )>

The ELEMENT element type declaration defines the rules for element letter.

The plus sign (+) occurrence indicator specifies that the DTD allows one or more occurrences of an element. (2 contacs in our example)

The contact element definition specifies that element contact contains child elements name, address1, address2, city, state, zip, phone and flag— in that order.


Letter.xml

1 <?xml version = "1.0"?>6 <!DOCTYPE letter SYSTEM "letter.dtd">8 <letter>10 <contact type = "from">11 <name>John Doe</name>12 <address1>123 Main St.</address1>13 <address2></address2>14 <city>Anytown</city>15 <state>Anystate</state>16 <zip>12345</zip>17 <phone>555-1234</phone>18 <flag gender = "M"/>19 </contact>20 21 <contact type = "to">22 <name>Joe Schmoe</name>23 <address1>Box 12345</address1>24 <address2>15 Any Ave.</address2>25 <city>Othertown</city>26 <state>Otherstate</state>27 <zip>67890</zip>28 <phone>555-4321</phone>29 <flag gender = "M"/>30 </contact> 32 <salutation>Dear Sir:</salutation>33 34 <paragraph>It is our privilege to inform you about our new35 database managed with XML. This new system allows36 you to reduce the load of your inventory list server by37 having the client machine perform the work of sorting38 and filtering the data.</paragraph>39 <closing>Sincerely</closing>40 <signature>Mr. Doe</signature>41 42 </letter>


XML Schema

• DTD works OK – but– Is in Ex. Backus-Naur Form – why not use XML to describe?– Cannot declare a type to of an element – <amount>hundrede kr</amount>

• Could give problems

– Several other problems

• W3C XML Schema– Use XML to describe the structure of XML documents …– Possible to give type information to XML definitions

• Not supported by all parsers yet• Will live besides DTDs for a while


Book.xsd1 <?xml version = "1.0"?>2 3 4 5 6 <xsd:schema xmlns:xsd = "http://www.w3.org/2000/10/XMLSchema"7 xmlns:deitel = "http://www.deitel.com/booklist"8 targetNamespace = "http://www.deitel.com/booklist">9 10 <xsd:element name = "books" type = "deitel:BooksType"/>11 12 <xsd:complexType name = "BooksType">13 <xsd:element name = "book" type = "deitel:BookType"14 minOccurs = "1" maxOccurs = "unbounded"/>15 </xsd:complexType>16 17 <xsd:complexType name = "BookType">18 <xsd:element name = "title" type = "xsd:string"/>19 </xsd:complexType>20 21 </xsd:schema>

Namespace prefix.

Element element defines an element to be included in the XML document structure.

Attributes name and type specify the element’s name and data type, respectively.

Element complexType defines an element type that has a child element named book.

Attribute minOccurs specifies that books must contain a minimum of one book element.

The resulting namespace.


Local definitions vs public in XML Schema

• Instead of using the ”type” system• Use local definitions

• Another public variant is using ”ref”

How may this be done using the ”type” approach instead?

Accessing XML


How to use XML?

• Need a parser (or a parser API) to access XML (as with CSV)• Two commonly used methods:

– DOM (Document Object Model)• W3C Recommendation• Makes a tree structure representation of an XML document in memory

– SAX (Simple API for XML)• Supported by diff. vendors• Parses document line by line and sends events to subscribers• Needs to parse every time access to XML document is needed

• DOM is better for– Slow to load XML document (need all)– Quick access to random read or update of XML (like WWW browser - BOM)– Requires a lot of memory (need to hold entire XML in mem)

• SAX is better for– Applications subscribing to certain parts of XML (event subscription)– Slow for random access to XML document (must parse every time)

XSL: XSLT, XSL_FO, XPath


Formatting XSL & CSS

• XML is only content – no formatting

• Possible to transform the data to XHTML (or other) using JavaScript and server-side

• The W3C ideal is using CSS or XSL – eXtensible Style Sheets

• CSS is most common today– but XSL has more features


XSL vs CSS• W3C made both XSL and CSS:

– The Extensible StyleSheet Language– XML based language for the formatting of document– … which by some is regarded as more advantageous

compared with the more cryptic CSS– XSL consists of XSL-FO (Formatting Objects), the XSL

Transformations language (XSLT) and XPath for defining and accessing part of the XML document

– Exactly the same job may however be solved by using server-side programming

– … but of course XSLT may be used client-side to relief the server (it can also be applied server-side)


The 3 Main Technologies of XSL

• XSLT, a language for transforming information

• XSL or XSL-FO, a language for formatting information

• XPath, a language for defining parts of an XML document and accessing them

• Each of these elements could fill an entire class.• You will only need to be acquainted with the overall

functionality of these


XPath

• Flexible notation for navigating around trees• Resembles notation used in Unix filesystems• A basic technology that is widely used

– uniqueness and scope in XML Schema

– pattern matching an selection in XSLT

– relations in XLink and XPointer

– computations on values in XSLT and XQuery

• XPath is not written in XML • XPath is a W3C Standard


Location Paths in XPath• location path evaluates to a sequence of nodes • sequence is sorted in document order • sequence will never contain duplicates

• The location path is a sequence of different steps • A location step consists of

– an axis (a direction of selection– successors, descendants)– a nodetest (indtifies a node within the axis)– Some predicates (a statement/expression yielding a boolean)

axis :: nodetest [predicate] child::price[price=9.90] (example)


Evaluating Location Paths

• Location Paths may consist of several steps• A step maps a context node into a sequence • This also maps sequences to sequences

– each node is used as context node – and is replaced with the result of applying the step

• The path then applies each step in turn, using the former step as the sequence to work on

• It may be absolute or relative (/cd/price or cd/price)


Example – finding all C nodes


What are we looking for here?


XPath Node Tests

• text() - child::text() all text nodes of current node

• comment() - child::comment() • processing-instruction() • node() - child::node() all children of current node

• * - attribute::* all attributes of current node

• More node tests exists


XPath Predicates

• General XPath expressions Evaluated with the current node as context

• Result is coerced (translated) into a boolean – a number yields true if it equals the context position– a string yields true if it is not empty– a sequence yields true if it is not empty – Example: child::price[price=9.90] - selects all price

elements that are children of the current node with a price element that equals 9.90

– Example: child::cd[position()<6] Selects the first five cd children of the current node


XPath Abrivated Syntax

• Tedious work entering XPath syntax• Enter: the abrivated syntax

Table from http://www.w3schools.com


XPath Examples


XSLT

• XSL Transformations• Language for transforming a format neutral XML

document into another XML document – e.g. XHTML or WML for presentation

• May also add new elements or remove elements• XSLT relies heavily on XPath for pattern

matching– Specifying patterns for template rules – Selecting nodes for processing – Computing boolean conditions – Generating text contents for the output document


XSLT Template rules

• An XSLT stylesheet contains template rules • The processor finds the most specific rule for the document

root • It then executes the template body

• Find the template rules that match the contex node • Select the most specific one • Evaluate the body (a sequence constructor)


Applying Templates

• <xsl:apply-templates> element applies a template rule to the current element or to the current element's child nodes


XSL/XSLT example• Transforming a XML document using XSLT invovles

2 tree structures– Source tree (original XML document)– Result tree (the transformed document)– AND of course the XSL document! (so totally 3)

• In this example– We take an XML document which could have been generated

from a RDBMS database – We want to transform this XML document into an XHTML

document for browsers– And maybe we COULD transform it into a PDF, and a WML

document (for mobile phones) or whatever we might need in the future


XML dokument“Source tree”Games.xml

1 <?xml version = "1.0"?>2 <?xml:stylesheet type = "text/xsl" href = "games.xsl"?>3 4 5 6 7 <sports>8 9 <game id = "783">10 <name>Cricket</name>11 12 <paragraph>13 More popular among commonwealth nations.14 </paragraph>15 </game>16 17 <game id = "239">18 <name>Baseball</name>19 20 <paragraph>21 More popular in America.22 </paragraph>23 </game>24 25 <game id = "418">26 <name>Soccer (Football)</name>27 28 <paragraph>29 Most popular sport in the world.30 </paragraph>31 </game>32 33 </sports>

A processing instruction that references the XSL stylesheet games.xsl..

Wait – isn’t there something wrong here – why do we have XSL embedded in the XML documet?

We will look at this later

Value type specifies that games.xsl is a text/xsl file.


XSL dokumentElements.xsl

1 <?xml version = "1.0"?>2 3 4 5 6 7 <xsl:stylesheet version = "1.0" 8 xmlns:xsl = "http://www.w3.org/1999/XSL/Transform">9 10 <xsl:output method = "html" omit-xml-declaration = "no" 11 doctype-system = 12 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" 13 doctype-public = "-//W3C//DTD XHTML 1.0 Strict//EN"/>14 15 <xsl:template match = "/">16 17 <html xmlns="http://www.w3.org/1999/xhtml">18 19 <head>20 <title>Sports</title>21 </head>22 23 <body>24 25 <table border = "1" bgcolor = "cyan">26 27 <thead>28 29 <tr>30 <th>ID</th>31 <th>Sport</th>32 <th>Information</th>33 </tr>34 35 </thead>

The stylesheet start tag—which begins the XSL stylesheet.

Element xsl:output writes an XHTML document type declaration to the result tree.

The match attribute to select the document root of the source document (i.e., game.xml).


Elements.xsl

36 37 38 39 <xsl:for-each select = "sports/game">40 41 <tr>42 <td><xsl:value-of select = "@id"/></td>43 <td><xsl:value-of select = "name"/></td>44 <td><xsl:value-of select = "paragraph"/></td>45 </tr>46 47 </xsl:for-each>48 49 </table>50 51 </body>52 53 </html>54 55 </xsl:template>56 57 </xsl:stylesheet>

Element xsl:for-each iterates through the source XML document and search for game elements.

These three select values are all XPath expressions.

Other types of XPath uses include / for navigating to child nodes, and using * wildcards for selecting unknown elements. Other types of usage includes indexing e.g. [1] and selecting attributes using @

Element value-of retrieves attribute id’s value and place it in a td element in the result tree.


XHTML dokument“result” treeResult of XSLT tranformation


More examples?

• Will only sedate you with boredom and a sad feeling of helplessness

• Please go try it out yourself instead– Plenty of examples at:

– http://www.w3schools.com/xsl/default.asp

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


Not nice with embedded XSL?

• You may use JavaScript to separate gracefully <html><body> <script type="text/javascript"> // Load XML var xml = new ActiveXObject("Microsoft.XMLDOM") xml.async = false xml.load("cdcatalog.xml") // Load XSL var xsl = new ActiveXObject("Microsoft.XMLDOM") xsl.async = false xsl.load("cdcatalog.xsl") // Transform document.write(xml.transformNode(xsl)) </script></body></html>

• Detect type of browser and load proper XSL doc


… and server-side as well

• You may also use server-side programming for this <%

'Load XMLset xml = Server.CreateObject("Microsoft.XMLDOM")xml.async = falsexml.load(Server.MapPath("cdcatalog.xml"))

'Load XSLset xsl = Server.CreateObject("Microsoft.XMLDOM")xsl.async = falsexsl.load(Server.MapPath("cdcatalog.xsl"))

'Transform fileResponse.Write(xml.transformNode(xsl))%>

• … and of course – you dont really need XSL then – as the same job may be done in Java, C#, VB etc


Browser Troubles in Paradise

• “XSLT in Internet Explorer 5 (and 5.5) is NOT compatible with the official W3C XSL Recommendation.”

• “Internet Explorer 6 fully supports the official W3C XSLT Recommendation. “

• “ Netscape 6 isn't fully supporting the official W3C XSLT Recommendation.”

• “ Netscape 7 supports the official W3C XSLT Recommendation.” – http://www.w3schools.com/xsl/xsl_browsers.asp

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


XSL-FO

• XSL-FO is a language for formatting XML data • XSL-FO stands for Extensible Stylesheet

Language Formatting Objects • XSL-FO is a W3C Recommendation • XSL-FO is now formally named XSL

• XSL-FO is not used extensively with WWW technologies yet, as CSS and XSLT may be used together. This may change however!


XSL-FO Formatting instructions:• Block Margin, Border, Padding, Background• Block Styling Attributes:

– font-family – font-weight – font-style – font-size – font-variant – text-align – text-align-last – text-indent – start-indent – end-indent – wrap-option (defines word wrap) – break-before (defines page breaks) – break-after (defines page breaks) – reference-orientation (defines text rotation in 90" increments)

• Which in general will handle the same stuff as CSS


Other XSL-FO elements

• Areas, Output, Flow, Pages, List, Tables• All of which we will not cover here!


XSL-FO Example

Below is a XSL-FO document

And the output would be


XML, XML-FO & XSLT ExampleBelow is a XML document

We apply some XSLT including XML-FO

And we get a result

XML Programming


Programmatic XML access?

• Many API’s & framework for XML handling• For Java:

– JDOM: http://www.jdom.org/

– JAXP: http://java.sun.com/xml/jaxp/

– SAX: http://www.saxproject.org/

http://www.jdom.org/

http://java.sun.com/xml/jaxp/

http://www.saxproject.org/

XML Tools


Tools

• XML-Spy: www.xml-spy.com• Sun’s Stylus Studio: www.stylusstudio.com • Others:

– API’s for programmatic access

Documents

Præsentation 3: Opsummering af Client-Side Teknologier del 2 Internetteknologi 2 (ITNET2)