E-Book Startseite Karteikarten-Programm
0

Allgemeines

Nun ist es endlich soweit: Sie haben den Unterbereich XSL-FO von dem Bereich XSL-Kurs von dem Hauptkapitel "XML, XSL und DTD lernen" nun fast absolviert. Der letzte Teil dieses Bereichs sind die Beispiele. Hier im XSL-FO-Bereich haben wir 2 XSL-FO Beispiele erstellt. Wir wollen diese Beispiele für Sie Schritt für Schritt erklären. Wir machen nur aus diesem Grund eine Schritt für Schritt Anleitung um Ihnen das Programmieren etwas näher zu bringen und dass Sie dafür ein Gefühl bekommen, wie man Webseitenteile im Gesamten programmiert. Bei dem ersten Beispiel handelt es sich um eine Vokabelsammlung (Deutsch - Englisch). Die Wörter werden in einer XML-Datei gespeichert. Mit der Stylesheet-Datei wird nun eine XSL-FO-Tabelle erstellt. Mithilfe einer for-each-Schleife wird dann jedes Wortpaar in eine Zeile geschrieben. In der linken Spalte erscheint das deutsche Wort, in der rechten das englische. Das 2. Beispiel ist schon ein wenig Komplexer. Auch hier werden die Daten in der XML-Datei gespeichert. In der Stylesheet-Datei werden die XSLT-Elemente für Schleifen und Abfrage-Reihen verwendet. Im Gebiet XSL-FO werden Grafiken eingebunden und Blöcke mit verschiedenen Einstellungen genutzt. Das Beispiel zeigt ein großes Spektrum, zu was XSL-FO alles fähig ist.


Glossar

Wir beginnen nun mit dem Programmierung der XML-Datei. In der XML-Datei benötigen wir am Anfang die XML-Deklaration und den Verweis zur XSL-Stylesheet-Datei. Unser Hauptelement in der XML-Datei heißt glossar. Für jeden Eintrag im Wörterbuch / Glossar benötigen wir das Element namens wort. Untergeordnet von wort gibt es die Elemente deutsch und englisch. Innerhalb der Elemente werden nun die jeweiligen Wörter notiert. Hier der Code:

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet href="index.xsl" type="text/xsl"?>
 
<glossar>
  <wort>
    <deutsch>was, wie, welche, welcher, welches</deutsch>
    <englisch>what</englisch>
  </wort>
  <wort>
    <deutsch>uns</deutsch>
    <englisch>us</englisch>
  </wort>
  <wort>
    <deutsch>Tag</deutsch>
    <englisch>day</englisch>
  </wort>
  <wort>
    <deutsch>Welt</deutsch>
    <englisch>world</englisch>
  </wort>
  <wort>
    <deutsch>Darstellung, Bild</deutsch>
    <englisch>picture</englisch>
  </wort>
  <wort>
    <deutsch>Deutschland</deutsch>
    <englisch>Germany</englisch>
  </wort>
  <wort>
    <deutsch>immer</deutsch>
    <englisch>always</englisch>
  </wort>
  <wort>
    <deutsch>da, dort</deutsch>
    <englisch>there</englisch>
  </wort>
  <wort>
    <deutsch>Musik</deutsch>
    <englisch>music</englisch>
  </wort>
  <wort>
    <deutsch>Land</deutsch>
    <englisch>country</englisch>
  </wort>
</glossar>

In der XSL-Datei benötigen wir wieder den Grundaufbau von XSL-FO, welchen wir sonst hier auch verwendet haben. Jedoch mit ein paar Änderungen. Innerhalb von fo:simple-page-master werden die Regionen fo:region-start und fo:region-end gestrichen, da wir diese in dem Beispiel nicht benötigen. Die Attribut und deren Werte in fo:region-body, fo:region-after und fo:region-before werden auch verändert. Hier nun also der Code des ersten Teils der XSL-FO-Datei:

<?xml version="1.0" encoding="ISO-8859-1"?>
 
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
<xsl:template match="/">
  <fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
    <fo:layout-master-set>
      <fo:simple-page-master master-name="seite" page-height="29.7cm" page-width="21cm" margin-top="1cm" margin-bottom="1cm" margin-left="1cm" margin-right="1cm">
        <fo:region-body margin-top="3cm" margin-bottom="1cm" />
        <fo:region-before region-name="top" extent="2.5cm" background-color="#D2D2D2" />
        <fo:region-after region-name="bottom" extent="0.5cm" background-color="#D2D2D2" />
      </fo:simple-page-master>
    </fo:layout-master-set>

In unsere XSL-Datei wollen wir nun den statischen Inhalt mit Daten füllen. Dazu muss als erstes das fo:page-sequence-Element geöffnet werden. Untergeordnet von diesem Element kommen nun die statischen Inhalte für die Region before und dann für die Region after. Im Kopfbereich (also region-before) wird unser Banner eingefügt. Dieses Bild wird durch margin-Angaben genau in die Mitte gesetzt. Im Fußbereich folgt nur ein kleiner Copyright-Hinweis. Hier der Code dazu:

    <fo:page-sequence master-reference="seite">
      <fo:static-content flow-name="top">
        <fo:block margin-top="0.25cm" margin-left="5.5cm"><fo:external-graphic src="Banner.jpg" 
         content-height="2cm" /></fo:block>
      </fo:static-content>
      <fo:static-content flow-name="bottom">
        <fo:block font-style="italic">&#160;&#169; Homepage-Webhilfe, Benjamin Jung</fo:block>
      </fo:static-content>

Zum Schluss brauchen wir noch den eigentlichen Inhaltsbereich. Dort wird eine Tabelle erstellt inklusive einem Tabellenkopf. Im Tabellenkopf werden die Sprachnamen fettgedruckt, dass es wie eine kleine Überschrift aussieht. Im Tabellenkörper kommt dann eine for-each-Schleife zum Einsatz, welche für jedes Element wort in der XML-Datei eine Zeile in der Tabelle anlegt, in der das deutsche Wort in die linke Spalte und das englische in die rechte eingefügt wird. Des Weiteren werden in allen table-cell-Elementen dieselben Rahmen Einstellungen vorgenommen.

      <fo:flow flow-name="xsl-region-body">
        <fo:table>
          <fo:table-header>
            <fo:table-row>
              <fo:table-cell border-color="black" border-width="1px" border-style="solid">
                <fo:block font-weight="700">Deutsch</fo:block>
              </fo:table-cell>
              <fo:table-cell border-color="black" border-width="1px" border-style="solid">
                <fo:block font-weight="700">Englisch</fo:block>
              </fo:table-cell>
            </fo:table-row>
          </fo:table-header>
          <fo:table-body>
            <xsl:for-each select="glossar/wort">
              <fo:table-row>
                <fo:table-cell border-color="black" border-width="1px" border-style="solid">
                  <fo:block><xsl:value-of select="deutsch" /></fo:block>
                </fo:table-cell>
                <fo:table-cell border-color="black" border-width="1px" border-style="solid">
                  <fo:block><xsl:value-of select="englisch" /></fo:block>
                </fo:table-cell>
              </fo:table-row>
            </fo:for-each>
          </fo:table-body>
        </fo:table>
      </fo:flow>
    </fo:page-sequence>
  </fo:root>
</xsl:template>
</xsl:stylesheet>

Hier nochmals beide Codes in vollständiger Version:

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet href="index.xsl" type="text/xsl"?>
 
<glossar>
  <wort>
    <deutsch>was, wie, welche, welcher, welches</deutsch>
    <englisch>what</englisch>
  </wort>
  <wort>
    <deutsch>uns</deutsch>
    <englisch>us</englisch>
  </wort>
  <wort>
    <deutsch>Tag</deutsch>
    <englisch>day</englisch>
  </wort>
  <wort>
    <deutsch>Welt</deutsch>
    <englisch>world</englisch>
  </wort>
  <wort>
    <deutsch>Darstellung, Bild</deutsch>
    <englisch>picture</englisch>
  </wort>
  <wort>
    <deutsch>Deutschland</deutsch>
    <englisch>Germany</englisch>
  </wort>
  <wort>
    <deutsch>immer</deutsch>
    <englisch>always</englisch>
  </wort>
  <wort>
    <deutsch>da, dort</deutsch>
    <englisch>there</englisch>
  </wort>
  <wort>
    <deutsch>Musik</deutsch>
    <englisch>music</englisch>
  </wort>
  <wort>
    <deutsch>Land</deutsch>
    <englisch>country</englisch>
  </wort>
</glossar>
<?xml version="1.0" encoding="ISO-8859-1"?>
 
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
<xsl:template match="/">
  <fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
    <fo:layout-master-set>
      <fo:simple-page-master master-name="seite" page-height="29.7cm" page-width="21cm" margin-top="1cm" margin-bottom="1cm" margin-left="1cm" margin-right="1cm">
        <fo:region-body margin-top="3cm" margin-bottom="1cm" />
        <fo:region-before region-name="top" extent="2.5cm" background-color="#D2D2D2" />
        <fo:region-after region-name="bottom" extent="0.5cm" background-color="#D2D2D2" />
      </fo:simple-page-master>
    </fo:layout-master-set>
    <fo:page-sequence master-reference="seite">
      <fo:static-content flow-name="top">
        <fo:block margin-top="0.25cm" margin-left="5.5cm"><fo:external-graphic src="Banner.jpg" 
         content-height="2cm" /></fo:block>
      </fo:static-content>
      <fo:static-content flow-name="bottom">
        <fo:block font-style="italic">&#160;&#169; Homepage-Webhilfe, Benjamin Jung</fo:block>
      </fo:static-content>
      <fo:flow flow-name="xsl-region-body">
        <fo:table>
          <fo:table-header>
            <fo:table-row>
              <fo:table-cell border-color="black" border-width="1px" border-style="solid">
                <fo:block font-weight="700">Deutsch</fo:block>
              </fo:table-cell>
              <fo:table-cell border-color="black" border-width="1px" border-style="solid">
                <fo:block font-weight="700">Englisch</fo:block>
              </fo:table-cell>
            </fo:table-row>
          </fo:table-header>
          <fo:table-body>
            <xsl:for-each select="glossar/wort">
              <fo:table-row>
                <fo:table-cell border-color="black" border-width="1px" border-style="solid">
                  <fo:block><xsl:value-of select="deutsch" /></fo:block>
                </fo:table-cell>
                <fo:table-cell border-color="black" border-width="1px" border-style="solid">
                  <fo:block><xsl:value-of select="englisch" /></fo:block>
                </fo:table-cell>
              </fo:table-row>
            </fo:for-each>
          </fo:table-body>
        </fo:table>
      </fo:flow>
    </fo:page-sequence>
  </fo:root>
</xsl:template>
</xsl:stylesheet>
Anzeigebeispiel
Anzeigebeispiel (XML-Datei)



Anzeigebeispiel
Anzeigebeispiel (PDF-Datei)



Informationen über Browser

Bei dem 2. Beispiel handelt es sich um ein kleines "Buch", mit Informationen über Browser. Die Texte die darin vorkommen, entsprechen denen im Menüpunkt Browser des Kapitels Software. In der XML-Datei werden die Überschriften und der Text gespeichert. Für jeden Browser gibt es das XML-Element browser. Untergeordnet von diesem Element kommt dann das Element titel (für die Überschrift) und text (für den Text) vor, in denen letztendlich die Informationen enthalten sind. Nachdem es sich hierbei um viel Text handelt werden die Textstellen hier im Beispielcode durch ... ersetzt.

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet href="index.xsl" type="text/xsl"?>
 
<beschreibung>
  <browser>
    <titel>Microsoft Internet Explorer</titel>
    <text>...</text>
  </browser>
  <browser>
    <titel>Mozilla Firefox</titel>
    <text>...</text>
  </browser>
  <browser>
    <titel>Google Chrome</titel>
    <text>...</text>
  </browser>
  <browser>
    <titel>Opera</titel>
    <text>...</text>
  </browser>
  <browser>
    <titel>Apple Safari</titel>
    <text>...</text>
  </browser>
</beschreibung>

Machen wir bei der XSL-Datei weiter: Hier wird wieder als erstes die XML-Deklaration gemacht und im fo:layout-master-set die Seitenspezifischen Informationen festgelegt. Fast alles bleibt gleich: Das einzigste was hier anders ist, ist ein 2. fo:simple-page-master-Element. Dort werden besondere Seitenspezifische Informationen für das Deckblatt vorgenommen, welches es bei diesem kleinen Buch gibt. Der Unterschied zwischen dem Deckblatt und den anderen Seiten ist, dass es hier keinen Kopf- und Fußbereich gibt.

<?xml version="1.0" encoding="ISO-8859-1"?>
 
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
<xsl:template match="/">
  <fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
    <fo:layout-master-set>
      <fo:simple-page-master master-name="deckblatt" page-height="29.7cm" page-width="21cm" margin-top="1cm" margin-bottom="1cm" margin-left="1cm" margin-right="1cm">
        <fo:region-body />
      </fo:simple-page-master>
      <fo:simple-page-master master-name="seite" page-height="29.7cm" page-width="21cm" margin-top="1cm" margin-bottom="1cm" margin-left="1cm" margin-right="1cm">
        <fo:region-body margin-top="3cm" margin-bottom="1cm" />
        <fo:region-before region-name="top" extent="2.5cm" background-color="#D2D2D2" />
        <fo:region-after region-name="bottom" extent="0.5cm" background-color="#D2D2D2" />
      </fo:simple-page-master>
    </fo:layout-master-set>

Der nächste Punkt in unserer XSL-Datei ist das fo:page-sequence-Element für das Deckblatt. Im Deckblatt wird ein Bild (unser Banner) eingebunden. Darunter folgt ein leerer Block mit einem Leerzeichen. Dieser Block ist dafür da, um Platz zu schaffen, zwischen dem Bild und dem nächsten Block. Durch die Angabe des Attributs font-family und font-size kann die Größe der Blocks bestimmt werden. Selbstverständlich könnte man an dieser Stelle auch ein Block mit fo:block-container verwenden. In der nächsten Zeile haben wir einen Block mit einem Titel darin. Nun folgt wieder ein leerer Block, jedoch mit kleineren Schriftgröße, durch das der Abstand kleiner ist als oben. Nun folgt noch ein Block, jedoch wieder mit Inhalt. So sieht das dann als Code aus:

    <fo:page-sequence master-reference="deckblatt">
      <fo:flow flow-name="xsl-region-body">
        <fo:block margin-top="6cm"><fo:external-graphic src="Banner.jpg" content-width="19cm" /></fo:block>
        <fo:block font-family="Times" font-size="26px">&#160;</fo:block>
        <fo:block font-family="Times" font-size="30px" text-align="center">Softwarevorstellung</fo:block>
        <fo:block font-family="Times" font-size="18px">&#160;</fo:block>
        <fo:block font-family="Times" font-size="25px" text-align="center">Browser</fo:block>
      </fo:flow>
    </fo:page-sequence>

Als nächstes müssen wir wieder den Kopf- und Fußbereich mit Informationen füllen. Dazu verwenden wir wieder den gleichen Code wie bei Beispiel 1:

    <fo:page-sequence master-reference="seite">
      <fo:static-content flow-name="top">
        <fo:block margin-top="0.25cm" margin-left="5.5cm"><fo:external-graphic src="Banner.jpg" content-height="2cm" /></fo:block>
      </fo:static-content>
      <fo:static-content flow-name="bottom">
        <fo:block font-style="italic">&#160;&#169; Homepage-Webhilfe, Benjamin Jung</fo:block>
      </fo:static-content>

Nun müssen wir den Hauptbereich der normalen Seite programmieren. Dazu benötigen wir das flow-Element. Direkt untergeordnet kommt eine for-each-Schleife zum Einsatz. Diese Schleife macht für jedes browser-Element in der XML-Datei einen Durchgang. Innerhalb der Schleife werden nun verschiedene Anweisungen eingegeben: Der Titel wird innerhalb von einem Block (Schriftart Times - Schriftgröße 23px) eingebettet. Es folgt ein weiterer Block. Dort wird der eigentliche Text eingebettet (Schriftart Times - Schriftgröße 15px). Darunter folgt eine Abfrage-Reihe. In der Abfrage-Reihe wird überprüft welcher Wert innerhalb der titel-Tags steht. Handelt es sich dabei um ein Titel der sozusagen erlaubt ist, wird je nachdem welcher Titel es ist, dass entsprechende Bild eingefügt. Ein kleines Beispiel. Entspricht der Wert bei titel "Microsoft Internet Explorer", wird das Bild I-Explorer.bmp angezeigt. Handelt es sich bei dem Wert in titel nicht um einen der fünf "erlaubten" Titel, wird kein Bild eingefügt (kommt in unserem Beispiel nicht vor!). Hier der Code dazu:

      <fo:flow flow-name="xsl-region-body">
        <xsl:for-each select="beschreibung/browser">
          <fo:block font-family="Times" font-size="23px">
            <xsl:value-of select="titel" />
          </fo:block>
          <fo:block font-family="Times" font-size="15px" text-align="justify">
            <xsl:value-of select="text" />
          </fo:block>
          <xsl:choose>
            <xsl:when test="titel = 'Microsoft Internet Explorer'">
              <fo:block><fo:external-graphic src="I-Explorer.bmp" /></fo:block>
            </xsl:when>
            <xsl:when test="titel = 'Mozilla Firefox'">
              <fo:block><fo:external-graphic src="Firefox.bmp" /></fo:block>
            </xsl:when>
            <xsl:when test="titel = 'Google Chrome'">
              <fo:block><fo:external-graphic src="Chrome.bmp" /></fo:block>
            </xsl:when>
            <xsl:when test="titel = 'Opera'">
              <fo:block><fo:external-graphic src="Opera.bmp" /></fo:block>
            </xsl:when>
            <xsl:when test="titel = 'Apple Safari'">
              <fo:block><fo:external-graphic src="Safari.bmp" /></fo:block>
            </xsl:when>
          </xsl:choose>
          <fo:block font-family="Times" font-size="20px">&#160;</fo:block>
        </xsl:for-each>
      </fo:flow>
    </fo:page-sequence>
  </fo:root>
</xsl:template>
</xsl:stylesheet>

Hier nochmals beide Codes zusammengefasst:

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet href="index.xsl" type="text/xsl"?>
 
<beschreibung>
  <browser>
    <titel>Microsoft Internet Explorer</titel>
    <text>...</text>
  </browser>
  <browser>
    <titel>Mozilla Firefox</titel>
    <text>...</text>
  </browser>
  <browser>
    <titel>Google Chrome</titel>
    <text>...</text>
  </browser>
  <browser>
    <titel>Opera</titel>
    <text>...</text>
  </browser>
  <browser>
    <titel>Apple Safari</titel>
    <text>...</text>
  </browser>
</beschreibung>
<?xml version="1.0" encoding="ISO-8859-1"?>
 
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
<xsl:template match="/">
  <fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
    <fo:layout-master-set>
      <fo:simple-page-master master-name="deckblatt" page-height="29.7cm" page-width="21cm" margin-top="1cm" margin-bottom="1cm" margin-left="1cm" margin-right="1cm">
        <fo:region-body />
      </fo:simple-page-master>
      <fo:simple-page-master master-name="seite" page-height="29.7cm" page-width="21cm" margin-top="1cm" margin-bottom="1cm" margin-left="1cm" margin-right="1cm">
        <fo:region-body margin-top="3cm" margin-bottom="1cm" />
        <fo:region-before region-name="top" extent="2.5cm" background-color="#D2D2D2" />
        <fo:region-after region-name="bottom" extent="0.5cm" background-color="#D2D2D2" />
      </fo:simple-page-master>
    </fo:layout-master-set>
    <fo:page-sequence master-reference="deckblatt">
      <fo:flow flow-name="xsl-region-body">
        <fo:block margin-top="6cm"><fo:external-graphic src="Banner.jpg" content-width="19cm" /></fo:block>
        <fo:block font-family="Times" font-size="26px">&#160;</fo:block>
        <fo:block font-family="Times" font-size="30px" text-align="center">Softwarevorstellung</fo:block>
        <fo:block font-family="Times" font-size="18px">&#160;</fo:block>
        <fo:block font-family="Times" font-size="25px" text-align="center">Browser</fo:block>
      </fo:flow>
    </fo:page-sequence>
    <fo:page-sequence master-reference="seite">
      <fo:static-content flow-name="top">
        <fo:block margin-top="0.25cm" margin-left="5.5cm"><fo:external-graphic src="Banner.jpg" content-height="2cm" /></fo:block>
      </fo:static-content>
      <fo:static-content flow-name="bottom">
        <fo:block font-style="italic">&#160;&#169; Homepage-Webhilfe, Benjamin Jung</fo:block>
      </fo:static-content>
      <fo:flow flow-name="xsl-region-body">
        <xsl:for-each select="beschreibung/browser">
          <fo:block font-family="Times" font-size="23px">
            <xsl:value-of select="titel" />
          </fo:block>
          <fo:block font-family="Times" font-size="15px" text-align="justify">
            <xsl:value-of select="text" />
          </fo:block>
          <xsl:choose>
            <xsl:when test="titel = 'Microsoft Internet Explorer'">
              <fo:block><fo:external-graphic src="I-Explorer.bmp" /></fo:block>
            </xsl:when>
            <xsl:when test="titel = 'Mozilla Firefox'">
              <fo:block><fo:external-graphic src="Firefox.bmp" /></fo:block>
            </xsl:when>
            <xsl:when test="titel = 'Google Chrome'">
              <fo:block><fo:external-graphic src="Chrome.bmp" /></fo:block>
            </xsl:when>
            <xsl:when test="titel = 'Opera'">
              <fo:block><fo:external-graphic src="Opera.bmp" /></fo:block>
            </xsl:when>
            <xsl:when test="titel = 'Apple Safari'">
              <fo:block><fo:external-graphic src="Safari.bmp" /></fo:block>
            </xsl:when>
          </xsl:choose>
          <fo:block font-family="Times" font-size="20px">&#160;</fo:block>
        </xsl:for-each>
      </fo:flow>
    </fo:page-sequence>
  </fo:root>
</xsl:template>
</xsl:stylesheet>
Anzeigebeispiel
Anzeigebeispiel (XML-Datei)



Anzeigebeispiel
Anzeigebeispiel (PDF-Datei)



Design:
 


Logo
Benjamin Jung
Krummstr. 9/3
73054 Eislingen

E-Mail: info@homepage-webhilfe.de
Webseite: www.homepage-webhilfe.de