1 Präsentation von XML- Dokumenten durch Browser mit Stylesheets Thomas Schramm Mai 2003

2 Einleitung Wie kann ich meine XML-Dokumente im Browser darstellen? Antwort : DSSSL (Document Style Semantics and Specification Language) CSS (Cascading Stylesheets) XSL (Extensible Style Language)

3 CSS (Cascading Stylesheets) Allgemein...eine Sprache, bei der die Auszeichnung des XML- Dokuments nicht verändert wird, es werden lediglich Stile auf den Inhalt angewand, der bereits existiert....eine nicht-XML-Syntax, die benutzt wird, um das Aussehen bestimmter Elemente in einem Dokument zu beschreiben....eine direkte Sprache (es ist keine Umwandlung des XML- Dokumentes nötig). CSS ist....

4 CSS (Cascading Stylesheets) Level Im Moment gibt es 3 Level (Versionen) von CSS: Level 1: Anwendung nur auf HTML Level 2: Erweiterung auf XML Level 3: Erweiterung der Funktionalität

5 CSS (Cascading Stylesheets) Syntax Element1, Element2,... { EigenschaftA : WertA; EigenschaftB : WertB;... } Element3,... { EigenschaftC : WertC;... }... Wie sieht die Syntax von CSS aus? Liste von Elementen Gruppierung von Elementen mit gleichen Eigenschaften Wertzuweisung

6 CSS (Cascading Stylesheets) Beispiel zur Syntax pcdarstellung.css computer { font-size: 12pt; } name { display: block; /*Zeilenumbruch*/ font-family: Helvetica, Arial, sans-serif; font-size: 20pt; font-weight: bold; text-align: center; } ip, betriebssystem { display: block; text-align: center; }

7 CSS (Cascading Stylesheets) Verbindung mit XML-Dokumenten Für die Verbindung gibt es eine XML-Anweisung: Es gibt folgende Parameter: type: der MIME-Typ des Stylesheets, bei CSS text/css href: die relative oder absolute URL, unter der das Stylesheet gefunden werden kann title: Benennung des Stylesheets media: Medientyp (z.B. handheld, print oder screen) charset: verwendeter Zeichensatz Wie verknüpfe ich die CSS-Datei mit dem XML-Dokument ?

8 CSS (Cascading Stylesheets) Beispiel zur Verbindung Xml-beispiel1.xml <?xml:stylesheet type="text/css" href="pcdarstellung.css" media="screen" alternate="no" title="Für Webbrowser" charset="ISO "?> Hyper-Base Windows 2000 Ausgabe im Browser: Hyper-Base Windows 2000

9 CSS (Cascading Stylesheets) Selektoren Wie kann ich Elemente auswählen, um auf sie eine bestimmte Regel anzuwenden?

10 CSS (Cascading Stylesheets) Selektoren

11 CSS (Cascading Stylesheets) Formatierung Was hab ich für Möglichkeiten bei der Formatierung? Schriftformatierung: Es ist möglich Schriftart, Schriftstil, Schriftvariante, Schriftgröße, Schriftgewicht, Wortabstände, Zeichenabstände, Textdekorationen, Textfarben oder Textschatten einzustellen. Ausrichtung und Absatzkonrolle: Textblöcke oder Textabsätze können ausgerichtet werden. Es sind Texteinrückungen, Ausrichtungen, Umbruchkontrolle und die Festlegung einer Zeilenhöhe möglich.

12 CSS (Cascading Stylesheets) Formatierung Außenrand, Abstand und Rahmen Die Baumstruktur in einem XML- Dokument kann in einem Box-Modell dargestellt werden.

13 CSS (Cascading Stylesheets) Formatierung Positionierung und Anzeige von Elementen Element können auf den Pixel genau positioniert werden. Dabei kann man Regeln z.B. zum Umfließen oder Ausdehnen von Elementen angeben. Hintergrundbilder und Hintergrundfarben Jede der Boxen kann man mit einem Hintergrund versehen. Listenformatierung Bei Listen kann man die Listeneinrückung oder die Listendarstellung ändern (z.B. ein beliebiges Aufzählungssymbol einfügen)

14 CSS (Cascading Stylesheets) Formatierung Sprachausgabe Eine Sprachausgabe ist von CSS 2 schon komplett vorgesehen. So kann man sich mit syntetischen Stimmen Texte vorlesen lassen. Leider unterstützen die heutigen Browser dieses Feature noch nicht. Filter und Fenster Bilder können durch Filter angesehen werden (z.B. eine Gammakorrektur). Außerdem kann auch das Browserfenster angepasst werden (z.B. Scrollbars färben). Tabellenformatierung Wie bei Boxen, können hier die Rahmen und Ausrichtung der Tabelle festgelegt werden. Überschriften können über Tabellen gesetzt werden und Breiten von Tabellenspalten verändert werden.

15 CSS (Cascading Stylesheets) Formatierung Wo kann ich die genauen Befehle nachlesen? Auf dieser Seite befinden sich fast alle Befehle mit einem entsprechenden Beispiel!

16 CSS (Cascading Stylesheets) Beispiel (XML-Datei) Xml-beispiel2.xml <?xml:stylesheet type="text/css" href="buchdarstellung.css" media="screen" alternate="no" title="Für Webbrowser" charset="ISO "?> JAVA Max Maier Springer 2000 Dies ist das Vorwort! Dies ist ein Kapitel1! public function a (i: int) : test; { return i;} Kapitel1 geht noch weiter! Dies ist ein zweites Kapitel!

17 CSS (Cascading Stylesheets) Beispiel (CSS-Datei) buchdarstellung.css * { font-size: 12 pt} titel { display: block; font-size: 20 pt; } buchteil { display: block; border-style: dashed; border-width: thin; border-color: black; margin-left: 5 pt; margin-right: 5 pt; margin-top: 5 pt; margin-bottom: 5pt; padding: 5pt 5pt 5pt 5pt; } buchteil#quelltext{ display: block; font-style: italic; } buchteil buchteil { font-family: Arial; } funktionname {font-weight: bold;} funktionsrumpf {display: block;}

18 DSSSL Allgemein DSSSL ist eine Sprache, die für die Darstellung von SGML entwickelt wurde.... die von einer funktionalen Programmiersprache aus der Lisp Familie abstammt, mit der wesentlich komplexere Operationen möglich sind, als mit CSS.... die auf Rekursion basiert.... die zwei Prozesse beschreibt: Transformationsprozess und Formatierungsprozess

19 DSSSL Allgemein DSSSL besteht aus vier Teilsprachen:

20 DSSSL Groves Zur Verarbeitung eines XML-Dokuments müssen wir zunächst mit einem DSSSL-Prozessor eine interne Repräsentation (Grove) erstellen. Diese Repräsentation ist ein Baum: Wurzelknoten Kind1Kind2Kind3... Kindn erster Tag Blatt1Blatt2... Inhalt

21 DSSSL Flow Objects Sogenannte Flow Objects legen die Darstellung des Groves fest. Durch Konstruktionsregeln werden die Elemente des Groves in Flow Objects umgewandelt. Dabei entsteht ein Flow Object Tree. Dabei werden die die Flow Objects druch Sosofos (Specification of a Sequence of Flow Objects) mit der Style-Language beschrieben. Wie stelle ich die Groves denn dar?

22 DSSSL Konstruktionsregel (was (wie)) Elemente query ID element default root Charakteristika Sosofos

23 DSSSL Konstruktionsregel – Sosofos make: Flussobjekt erzeugen empty-sosofo: Leeres Flussobjekt anlegen Literal zeichenkette: Wandelt eine Zeichenkette in ein Flussobjekt process-children: Fordert den DSSSL- Prozessor auf alle Kinder des Knotens im Grove zu durchlaufen. process-children-trim: Arbeitet wie process-children, doch es werden alle Leerzeichen, Tabulatoren oder Zeilenumbrüche am Anfang und am Ende der Elementdaten gelöscht.

24 DSSSL Konstruktionsregel – Sosofos process-matching-children Muster: Arbeitet wie process-children, aber es werden nur die Kinder durchlaufen, auf die das Muster passt. process-element-with-id zeichenkette: Bearbeitet nur das eine Element, dessen eindeutiges ID-Attribut den Wert der Zeichenkette trägt. process-node-list nodes: Während process- children nur die untergeordneten Knoten des aktuellen Knotens verarbeiten lassen, läßt sich mit process-node-list eine beliebige Liste zuvor gesammelter Knoten bearbeiten.

25 DSSSL Konstruktionsregel-Stile Es gibt in DSSSL die Möglichkeit zur Definition von Stilen. Ein Stil trägt einen Stilnamen und fasst Eigenschaften in diesem Namen zusammen. Danach kann man mit dem Schlüsselwort use den Stil anwenden. (define %absatz% (style font-weight: medium font-size: baseFontSize language: 'DE )) (define baseFontSize 10pt) Beispiel: (element kunde (make paragraph use: %absatz% (process-children)))

26 DSSSL Beispiel Xml-Beispiel3.xml The Cookbook Cake 500g Flour 200g Sugar 300g Butter Das folgende Beispiel zeigt den Zusammenhang zwischen XML- Dokument, Grove, FlowObject-Tree und der Ausgabe, sowie die Anwendung der Konstruktionsregeln:

27 DSSSL Beispiel

28 DSSSL Verarbeitungsmodus Um in einem Grove eines XML-Dokumentes einen Knoten mehrfach in verschiedenen Darstellungen auszugeben werden Modi benötigt. Im folgenden Beispiel gehe ich auf das Buch/Inhaltsverzeichnis-Problem ein.

29 DSSSL Beispiel-Verarbeitungsmodus Xml-Beispiel-4.xml <!DOCTYPE DOC [ ]> Einleitung In diesem Referat geht es um Präsentation von XML im Browser. CSS Die Cascading Stylesheets sind ein Mittel zur Darstellung. Zurück zu Konvertierung

30 DSSSL Beispiel-Verarbeitungsmodus (mode inhalt (default (empty-sosofo)) (element kapitel (process-matching-children titel)) (element titel (make paragraph font-size: 26pt line-spacing: 26pt (process-children)))) (element buch (make simple-page-sequence (with-mode inhalt (process-children)) (process-children)))

31 DSSSL Von DSSSL zu HTML Problem: Wie kann ich ein XML-Dokument, mit Hilfe der DSSSL-Datei, im Browser darstellen? Lösung: Die XML-Datei muss mit einem DSSSL Prozessor in eine HTML-Datei umgewandelt werden! Leider muss man diese Umwandlung selber beschreiben, was schnell unübersichtlich wird.

32 DSSSL Von DSSSL zu HTML Die Umwandlung von XML zu HTML geschieht mit Hilfe folgender Regeln: (element xml.element (make element gi: html.element)) Die entstandenen HTML-Tags können auch mit Attributen versehen werden. Dabei Hilft eine zweielementige Liste: attributes: ((attributname wert)) Für das folgende Beispiel benutze ich einen DSSSL-Prozessor namens Jade.

33 DSSSL Beispiel-Konvertierung Buch.dsl <!DOCTYPE style-sheet PUBLIC "-//James Clark//DTD DSSSL Style Sheet//EN"[ ]> (declare-flow-object-class element "UNREGISTERED::James Clark//Flow Object Class::element") (declare-flow-object-class document-type "UNREGISTERED::James Clark//Flow Object Class::document-type") (declare-flow-object-class empty-element "UNREGISTERED::James Clark//Flow Object Class::empty-element") (declare-flow-object-class formatting-instruction "UNREGISTERED::James Clark//Flow Object Class::formatting-instruction") geht noch weiter NICHT ERSCHRECKEN, diese Standardzeilen muss man nicht verstehen, doch sie müssen immer angegeben werden, damit die Umwandlung funktioniert.

34 DSSSL Beispiel-Konvertierung (element doc (sosofo-append (make document-type name: "HTML" public-id: "-//W3C//DTD HTML 3.2//EN") (make element gi: "HTML" (sosofo-append (make element gi: "HEAD" (make element gi: "TITLE" (sosofo-append (literal "XML zu HTML konvertieren mit DSSSL")))) (make element gi: "BODY" (process-children)))))) geht noch weiter Standard HTML-Gerüst:

35 DSSSL Beispiel-Konvertierung (mode inhalt (default (empty-sosofo)) (element kapitel (process-matching-children "titel")) (element titel (make element gi: "br" (sosofo-append (make element gi: "font" attributes: '(("size" "2")) (sosofo-append (literal "-") (process-children))))))) (element buch (make simple-page-sequence (with-mode inhalt (process-children)) (process-children))) (element titel (make element gi: "H1")) zum XML-Datei Beispiel: Verarbeitungsmodus

36 DSSSL Beispiel-Konvertierung Mit Hilfe des XML-Dokuments und der DSSSL-Datei ist es nun möglich mit Hilfe des Jade Prozessors ein HTML- Dokument zu erhalten. Die entsprechende Befehlszeile mit der wir Jade auf die Dateien aufrufen lautet: Jade –d buch.dsl –t sgml Xml-beispiel4.xml>buch.html

37 DSSSL Beispiel-Konvertierung Ruft man die buch.html mit einem Browser auf, sieht man folgendes:

38 XSL Allgemein XSL besteht aus zwei wesentlichen Teilen: XSLT (XSL Transform): eine Sprache zum Umwandeln von XML-Dokumenten in eine neue Struktur. Für die identifizierung von Knoten wird die Xpath-Syntax verwendet. XSL-FO (XSL-Formatting Objects): ein solches Dokument beschreibt das Layout in einer Reihe von geschachtelten Kästen. Zum Anzeigen im Browser ist allerdings erst ein Abspeichern im.pdf-Format nötig. XSL-FO wird vorrangig für hochqualitativen Druck verwendet.

39 XSL im Browser