1 präsentation von xml- dokumenten durch browser mit stylesheets thomas schramm mai 2003
Post on 05-Apr-2015
102 Views
Preview:
TRANSCRIPT
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 "&#60;"> <!ENTITY gt ">"> ]> (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
top related