8.4.3 Präsentation

Die Präsentationsdarstellung der XML-Daten soll in einem animierbaren Format realisiert werden. Dazu bietet sich SVG an, da es nicht nur animiert sondern auch XML-basierend ist. Bei der Realisierung sind allerdings einige Schwachstellen von SVG aufgedeckt worden. So gibt es in SVG keine Möglichkeit wie etwa in HTML oder XSL-FO Texte beliebiger Länge vernünftig darzustellen. So können die Texte zwar beliebig lang sein, aber sie werden nicht umgebrochen und damit in dem Fall unvollständig angezeigt. Auch die Anzahl der Texte, die auf eine Seite passen, müsste im Vorfeld von Hand berechnet werden. In den Anforderungen an einen neuen SVG-Standard in der Version 1.2 oder 2.0 [W3CSVGR] sind aus dem hohen Bedarf an derartige Manipulationsmöglichkeiten für Texte auch die Forderungen nach Textumbrüchen und Positionierungseigenschaften wie zentrieren eingegangen. Erst mit Unterstützung dieser Funktionalitäten kann eine ansprechende Präsentation mit SVG erzeugt werden. In der Umsetzung werden die Daten, die auf jeweils einer Folie erscheinen sollen, innerhalb einer Gruppe dort positioniert und als unsichtbar deklariert. Damit werden alle Folien erstellt und nur die erste Folie mit dem Titel und dem Autor wird als erstes sichtbar eingefügt und dargestellt.

Code-Beispiel 13:
Für die Folie des Inhaltes werden alle Titel zusammen in den Text einer Gruppe eingefasst. Zu Begin der Präsentation ist diese Gruppe unsichtbar. Alle in ihr enthaltenen Elemente wie der Text besitzen die Sichtbarkeitseigenschaft inherit, das bedeutet, dass sie die Sichtbarkeit ihrer übergeordneten Gruppe erben. Über die Nummerierung aller Knoten im Dokument kann die Nummer als ID für den Text verwendet werden, da sie eindeutig ist. Die ID's dienen zum Wiederfinden der verschiedenen Folien in der weiteren Verarbeitung und damit der Abfolge der Präsentation. Ein durchsichtiges Rechteck wird über die gesamte Gruppe gelegt, um auf einen Mausklick reagieren zu können.

<!-- Inhaltsverzeichnis in einer Gruppe -->
<g style="font-family:Verdana" visibility="hidden">
 <!-- Bestimmung der ID anhand der Knotenposition -->
 <xsl:variable name="textid">
   <xsl:number count="*" level="any"/>
 </xsl:variable>
 <!-- Knotenposition als ID-Attribut setzen -->
 <xsl:attribute name="id"><xsl:value-of select="$textid"/>
 </xsl:attribute>
 
 <!-- Durchsichtiges Rechteck zum Klicken -->
 <rect width="800" height="600" fill="blue" 
       visibility="visibile" opacity="0">
 <!-- Funktion bestimmen, die bei Klick aufgerufen wird 
      mit Uebergabe des ausloesenden Events, der aktuellen ID, 
      der folgenden ID und der maximalen Knoten im Baum -->       
   <xsl:attribute name="onclick">clicked(evt,'<xsl:value-of 
    select="$textid"/>','<xsl:value-of select="$textid +1"/>','
    <xsl:value-of select="$nodenr"/>')</xsl:attribute>
 </rect>
 
 <!-- Text einfuegen mit geerbter Sichtbarkeit -->
 <text x="5%" y="10%" fill="blue" style="font-size:20"  
  visibility="inherit">
  <!-- Textzeile fuer die Ueberschrift -->
  <tspan style="font-size:25" visibility="inherit">
   <xsl:value-of select="$inhaltsverzeichnis"/>
  </tspan>
  <!-- Alle Titel einfuegen -->
  <xsl:apply-templates 
   select="/lec:lecture/lec:content//lec:title" 
   mode="list-of-content"/>
 </text>
</g>

Alle Inhalte wurden zudem mit einer Funktion versehen, die bei einem Klick auf den Text aufgerufen wird. Diese Funktion kümmert sich um die Darstellung der neuen Folie, indem diese sichtbar und die alte unsichtbar gemacht wird. Die Definition der Funktion wird in dem zu Begin der SVG-Datei stehenden script-Tag innerhalb eines CDATA-Abschnittes mittels ECMA-Script vorgenommen.

Code-Beispiel 14:
Die clicked-Funktion soll immer dann aufgerufen werden, wenn auf einen Text oder ein Bild geklickt wurde und die nächste Folie sichbar gemacht werden soll. Dazu wird rekursiv nach der nächsten vorhandenen ID im SVG-Baum gesucht. Wenn diese gefunden wurde, wird der alte Text unsichtbar und der neue sichtbar gemacht, indem die dazugehörigen Attribute gesetzt werden.

<script type="text/ecmascript"><![CDATA[
//beim Klick newtextid-Element fuer textid-Element setzen
  aufhoeren bei maxcount
  function clicked(evt,textid,newtextid,maxcount) {
    var newText = svgDocument.getElementById(newtextid);
    //neues text-Element gefunden
    if(newText) {        
      var oldText = svgDocument.getElementById(textid);
      newText.setAttribute('visibility','visible');
      oldText.setAttribute('visibility','hidden');
    } else {
      var newid = parseInt(newtextid)+1;
      if(maxcount > newid) {
        clicked(evt,textid,newid,maxcount);
      }
    }
  }  
]]></script>

Das Ergebnis und die Funktionsweise der Anwendung ist am besten in dem Beispiel zu sehen, das im folgenden Kapitel beschrieben wird.