1

Präsentation von XML-Dokumenten durch

Browser mit Stylesheets

Thomas SchrammMai 2003

2

EinleitungWie 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:

<?xml:stylesheet Parameter?>

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 version="1.0" encoding="ISO-8859-1" standalone="yes"?><?xml:stylesheet type="text/css" href="pcdarstellung.css" media="screen" alternate="no" title="Für Webbrowser"

charset="ISO-8859-1"?>

<computer> <name>Hyper-Base</name><ip>127.0.0.1</ip><betriebssystem>Windows 2000</betriebssystem></computer>

Ausgabe im Browser:

Hyper-Base127.0.0.1

Windows 2000

9

CSS (Cascading Stylesheets) Selektoren

Wie kann ich Elemente auswählen, um auf sie eine bestimmte Regel anzuwenden?

Bezeichnung Muster Beschreibung Universal-Selektor

* J edes Element passt

Typ-Selektor E Passt zu jedem Element E Abkömmlings-Selektor

E F Passt zu jedem Element F, welches Abkömmling von E ist

Kind-Selektor E > F Passt zu jedem F, welches direkter Nachfahre von E ist

E:first-child

Passt auf das erste Kindelement des genannten Elements

E: link Passt auf einen Link, welcher noch nicht besucht wurde.

E:visited Passt auf einen besuchten Link E:active Passt auf ein aktiviertes (angeklicktes)

Element E:hover Passt auf das Element, auf welchem der

Cursor gerade ruht E: focus Passt auf das Element, welches gerade den

Fokus besitzt

Pseudoklassen-Selektor

E: lang(c) Passt auf das Element E in der Sprache c.

10

CSS (Cascading Stylesheets) Selektoren

Bezeichnung Muster Beschreibung Pseudoelement-Selektor

E:first-letter

Wählt den ersten Buchstaben eines Elementes E. (weitere ähnliche: before, after, first-line)

Geschwister-Selektor

E + F Passt auf das Element E, welches Element F unmittelbar, als nächstes Geschwisterelement hat.

E[att] Passt auf das Element E, welches das Attribut att besitzt.

Attribut-Selektor

E[att=“a“] Passt auf das Element E, welches das Attribut att mit dem Wert a besitzt. Statt dem =Operator gibt es noch den ~= Operator, welcher Elemente auswählt, die ein bestimmtes Wort als Teil eines angegebenen Attributwerts besitzen. Die Attribute sind dabei mit Leerzeichen getrennt. Der |=Operator prüft gegen das erste Wort einer durch Bindestrichen getrennten Liste mit Attributwerten.

ID-Selektor E#myid Passt auf das Element E, mit dem ID-Wert myid.

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 ElementenElement können auf den Pixel genau positioniert werden. Dabei kann man Regeln z.B. zum Umfließen oder Ausdehnen von Elementen angeben.

• Hintergrundbilder und HintergrundfarbenJede der Boxen kann man mit einem Hintergrund versehen.

• ListenformatierungBei Listen kann man die Listeneinrückung oder die Listendarstellung ändern (z.B. ein beliebiges Aufzählungssymbol einfügen)

14

CSS (Cascading Stylesheets) Formatierung

• SprachausgabeEine 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 FensterBilder können durch Filter angesehen werden (z.B. eine Gammakorrektur). Außerdem kann auch das Browserfenster angepasst werden (z.B. Scrollbars färben).

• TabellenformatierungWie 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?

http://selfhtml.teamone.de/css/index.htm

Auf dieser Seite befinden sich fast alle Befehle mit einem entsprechenden Beispiel!

16

CSS (Cascading Stylesheets) Beispiel (XML-Datei)

Xml-beispiel2.xml<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?><?xml:stylesheet type="text/css" href="buchdarstellung.css" media="screen" alternate="no" title="Für Webbrowser" charset="ISO-8859-1"?> <buch><daten> <titel>JAVA</titel> <autor>Max Maier</autor> <verlag>Springer</verlag> <jahr>2000</jahr></daten><buchteil id="vorwort">Dies ist das Vorwort! </buchteil><buchteil id="kapitel1">Dies ist ein Kapitel1! <buchteil id="quelltext">

<funktionname>public function a (i: int) : test;</funktionname><funktionsrumpf> { return i;}</funktionsrumpf>

</buchteil> Kapitel1 geht noch weiter!</buchteil><buchteil id="kapitel2"> Dies ist ein zweites Kapitel!</buchteil></buch>

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

DSSSLAllgemein

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

DSSSLAllgemein

DSSSL besteht aus vier Teilsprachen:

20

DSSSLGroves

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

Kind1 Kind2 Kind3 ... Kindn

erster Tag

Blatt1 Blatt2

... ... ...

Inhalt

21

DSSSLFlow 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

DSSSLKonstruktionsregel

(was (wie))

Elemente

• query• ID• element• default• root

Charakteristika

Sosofos

23

DSSSLKonstruktionsregel – 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

DSSSLKonstruktionsregel – 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

DSSSLKonstruktionsregel-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: mediumfont-size: baseFontSize

language: 'DE’ ))

(define baseFontSize 10pt)

Beispiel:

(element kunde (make paragraph use: %absatz% (process-children)))

26

DSSSLBeispiel

Xml-Beispiel3.xml

<cookbook> <ctitle>The Cookbook</ctitle> <recipe> <title>Cake</title> <ingredient>500g Flour</ingredient> <ingredient>200g Sugar</ingredient> <ingredient>300g Butter</ingredient> </recipe></cookbook>

Das folgende Beispiel zeigt den Zusammenhang zwischen XML-Dokument, Grove, FlowObject-Tree und der Ausgabe, sowie die Anwendung der Konstruktionsregeln:

27

DSSSLBeispiel

28

DSSSLVerarbeitungsmodus

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

DSSSLBeispiel-VerarbeitungsmodusXml-Beispiel-4.xml

<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?> <!DOCTYPE DOC [<!ELEMENT kapitel (titel,text)><!ELEMENT titel (#PCDATA)><!ELEMENT buch (kapitel*)><!ELEMENT text (#PCDATA)><!ELEMENT DOC (buch*)> ]>

<DOC><buch> <kapitel> <titel>Einleitung</titel> <text>In diesem Referat geht es um Präsentation von XML im Browser. </text> </kapitel> <kapitel> <titel>CSS</titel> <text>Die Cascading Stylesheets sind ein Mittel zur Darstellung. </text> </kapitel></buch></DOC>

Zurück zu Konvertierung

30

DSSSLBeispiel-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

DSSSLVon 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

DSSSLVon 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

DSSSLBeispiel-Konvertierung

Buch.dsl<!DOCTYPE style-sheet PUBLIC "-//James Clark//DTD DSSSL Style Sheet//EN"[

<!ENTITY lt "&#38;#60;"> <!ENTITY gt "&#62;"> ]> (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

DSSSLBeispiel-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

DSSSLBeispiel-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

DSSSLBeispiel-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

DSSSLBeispiel-Konvertierung

Ruft man die buch.html mit einem Browser auf, sieht man folgendes:

38

XSLAllgemein

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

XSLim Browser