XML PRESENTATION OF DOCUMENTS

Transcription

1 Network Europe - Russia - Asia of Masters in Informatics as a Second Competence TEMPUS FR-TEMPUS-JPCR Sergio Luján Mora Department of Software and Computing Systems University of Alicante XML PRESENTATION OF DOCUMENTS 1

2 Contents Introduction Cascading Style Sheets (CSS) XSL Introduction Style sheets define how to display a document: On a screen On a printer On a mobile device On 2

3 Introduction XML document Style sheet Style sheet processor Introduction Two technologies: CSS XSL 3

4 Introduction CSS and XSL overlap to some extent XSL is more powerful than CSS, but XSL is also more complex and harder to learn and use than CSS CSS is more broadly supported than XSL But CSS only allows to format element content: CSS does not allow you to change or reorder the content CSS only apply to element content, not to attributes Introduction Feature CSS XSL Can it be used with HTML? Yes No Can it be used with XHTML? Yes Yes Can it be used with XML? Yes Yes Is it a transformation language? No Yes What is its syntax? Own XML 4

5 CSS Cascading Style Sheets (CSS) is a declarative language used to format the presentation of web pages (HTML) CSS can also be used to format any XML document CSS A CSS style sheet contains a list of rules Each rule gives the names of the elements it applies to and the styles to apply to those elements 5

6 CSS Fundamental properties: display position width, height float, clear overflow margin (margin-top, margin-right, etc.) border (border-top, border-right, etc.) padding (padding-top, padding-right, etc.) font (font-family, font-size, font-weight, etc.) background (background-color, background-image, etc.) color CSS Length values: Inches: in Centimeters: cm Millimeters: mm Points: pt Picas: pc Pixels: px Ems: em (the width of the letter m in the current font) Exs: ex (the height of the letter x in the current font) Percentage: % 6

7 CSS Color values: Color name Decimal RGB Hexadecimal RGB Short hexadecimal RGB Percentage RGB CSS Color name Decimal RGB Hexadecimal RGB Short hexadecimal RGB Percentage RGB red rgb(255, 0, 0) #FF0000 #F00 rgb(100%, 0%, 0%) green rgb(0, 255, 0) #00FF00 #0F0 rgb(0%, 100%, 0%) blue rgb(0, 0, 255) #0000FF #00F rgb(0%, 0%, 100%) white rgb(255, 255, 255) #FFFFFF #FFF rgb(100%, 100%, 100%) black rgb(0, 0, 0) # #000 rgb(0%, 0%, 0%) yellow rgb(255, 255, 0) #FFFF00 #FF0 rgb(100%, 100%, 0%) magenta rgb(255, 0, 255) #FF00FF #F0F rgb(100%, 0, 100%) cyan rgb(0, 255, 255) #00FFFF #0FF rgb(0%, 100%, 100%) 7

8 CSS How to attach a style sheet to a document: <?xml version="1.0"?> <?xml-stylesheet type="text/css" href="style.css"?> CSS Example: XML document about a library and its books 8

9 <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/css" href="library.css"?> <!DOCTYPE library SYSTEM "library.dtd"> <library name="my personal library"> <book> <title>xml 1.1 Bible</title> <edition>3</edition> <author>elliotte Rusty Harold</author> <editor>wiley Publishing, Inc.</editor> <pages>1022</pages> <year>2004</year> <isbn> </isbn> </book> <book> <title>el elemento</title> <author>sir Ken Robinson</author> <author>lou Aronica</author> <editor>random House Mondadori, S.A.</editor> <pages>359</pages> <year>2011</year> <isbn> </isbn> </book> <book> <title>ruso fácil</title> <edition>7</edition> <author>claudio Klotchkov</author> <editor>espasa Calpe, S.A.</editor> <pages>254</pages> <year>2009</year> <isbn> </isbn> </book> </library> 9

10 10

11 library { display: block; book { display: block; title { display: block; margin: 15px; font-weight: bold; font-size: 2em; edition, author, editor, pages, year, isbn { display: list-item; margin-left: 3em; list-style-type: disc; edition:before { content: "Edition: "; author:before { content: "Author: "; editor:before { content: "Edition: "; pages:before { content: "Pages: "; year:before { content: "Year: "; isbn:before { content: "ISBN: "; 11

12 XSL 12

13 XSL Extensible Stylesheet Language (XSL) is divided into two parts: XSL Transformations (XSLT) XSL Formatting Objects (XSL-FO) XSL XSLT: XSLT enables you to replace one tag with another XSLT can reorder elements in the document XSLT can add additional content not present in the XML document 13

14 XSL XSL-FO: XSL-FO enables you to specify the appearance and layout of a page: multiple columns, text flow around objects, line spacing, widow and orphan lines, font faces, sizes, etc. No current web browser yet support XSL-FO XSL How to attach a XSLT to a document: <?xml version="1.0"?> <?xml-stylesheet type="application/xml" href="style.xsl"?>

15 XSL Example: XML document about a library and its books XSLT instructions: <xsl:template match="" /> <xsl:value-of select=""/> <xsl:apply-templates/> <xsl:for-each select="" /> <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="application/xml" href="library.xsl"?> <!DOCTYPE library SYSTEM "library.dtd"> <library name="my personal library"> <book> <title>xml 1.1 Bible</title> <edition>3</edition> <author>elliotte Rusty Harold</author> <editor>wiley Publishing, Inc.</editor> <pages>1022</pages> <year>2004</year> <isbn> </isbn> </book> <book> <title>el elemento</title> <author>sir Ken Robinson</author> <author>lou Aronica</author> <editor>random House Mondadori, S.A.</editor> <pages>359</pages> <year>2011</year> <isbn> </isbn> </book> 15

16 <book> <title>ruso fácil</title> <edition>7</edition> <author>claudio Klotchkov</author> <editor>espasa Calpe, S.A.</editor> <pages>254</pages> <year>2009</year> <isbn> </isbn> </book> </library> <?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0 xmlns:xsl=" <xsl:output method="html"/> <xsl:template match="library"> <html> <head> <title><xsl:value-of </head> <body> <xsl:apply-templates/> </body> </html> </xsl:template> 16

17 <xsl:template match="book"> <h1><xsl:value-of select="title"/></h1> <ul> <li>edition: <xsl:value-of select="edition"/></li> <li>authors: <ul><xsl:for-each select="author"> <li><xsl:value-of select="."/></li></xsl:for-each> </ul> </li> <li>editor: <xsl:value-of select="editor"/></li> <li>pages: <xsl:value-of select="pages"/></li> <li>year: <xsl:value-of select="year"/></li> <li>isbn: <xsl:value-of select="isbn"/></li> </ul> </xsl:template> </xsl:stylesheet> 17

18 18