20.5 Unterschiedliche Layouts mit Templates 

Bisher haben wir das Layout unseres Moduls direkt aus dem Programm heraus generiert. Das ist in puncto Software-Design eher unschön. Hier wäre eine Trennung zwischen Darstellung und Programmlogik überaus wünschenswert. Das hat zum einen den ganz pragmatischen Grund, dass die Programme dann übersichtlicher werden. Zum anderen sind aber auch Veränderungen viel leichter vorzunehmen. Um das Layout zu ändern, muss ein Designer nicht mehr den gesamten Code lesen und verstehen können.

Sie kennen das Template-Konzept schon aus dem Joomla!-Hauptprogramm. Sehr ähnlich funktioniert das auch bei Modulen. Es wird zunächst eine separate Template-Datei erstellt, die an bestimmten Stellen Platzhalter und Markierungen enthält. Diese Markierungen können aus dem Modul-Programm heraus angesprochen und mit Inhalten gefüllt werden. Dafür ist das patTemplate-Objekt zuständig.

Ein Template für unser erstes Modul könnte folgendermaßen aussehen:

<mos:tmpl name="hallotemplate">
  <h1>{GRUSS}</h1>
</mos:tmpl>

Die Vorlage wird von einem <mos:tmpl>-Tag umschlossen. Im Attribut name enthält es eine Bezeichnung, unter der das Template angesprochen werden kann. Innerhalb des Tags finden Sie ganz normales HTML, das an einigen Stellen mit Variablen angereichert ist. Diese können beliebige Namen haben und werden in der Form {Variable} geschrieben.

Kopieren Sie das Template unter dem Namen hallotemplate.html in das Unterverzeichnis joomla/module/mod_hallotemplate. Das müssen Sie zuerst erstellen.

Jetzt müssen wir das Template aus dem Modul heraus ansprechen. Dazu sind mehrere Schritte notwendig. Zunächst muss das Template gelesen werden, dann werden die Variablen gesetzt, und zuletzt wird das Ergebnis ausgegeben.

1   <?php
2   defined( '_VALID_MOS' ) or die( 'Direct Access to this
3      script is not allowed');
4   require_once( $mosConfig_absolute_path
5      .'/includes/patTemplate/patTemplate.php' );
6   $tmpl =& patFactory::createTemplate( '' );
7   $tmpl->setRoot( 'modules/mod_hallotemplate' );
8   $tmpl->readTemplatesFromInput( 'hallotemplate.html' );
9   $tmpl->addVar('hallotemplate','gruss', 'Hallo Joomla!');
10  $tmpl->displayParsedTemplate( 'hallotemplate' );
11  ?>

Die Zeilen 2 und 3 stellen wie immer sicher, dass das Skript nicht ohne den Kontext der Joomla!-Anwendung ausgeführt wird. Da die patTemplate-Bibliothek nicht standardmäßig in PHP bekannt ist, muss sie in den Zeilen 4–5 eingebunden werden. Dabei enthält die Variable $mosConfig_absolute_path den absoluten Pfad zur Joomla!-Installation, wie er in der Datei configuration.php angegeben ist. In Zeile 6 kann nun das eigentliche Template-Objekt erstellt werden. Es wird in der Variable $tmpl gespeichert, über die im Folgenden auch auf das Objekt zugegriffen wird. Dann wird im Zeile 7 das Wurzelverzeichnis der Vorlage festgelegt. Damit müssen wir in Zeile 8, wenn wir unsere HTML-Datei einlesen, nicht mehr deren gesamten Pfad mit angeben. Das ist insbesondere dann sinnvoll, wenn mit mehreren Vorlagendateien gearbeitet wird. In Zeile 9 wird der Wert der Variablen gruss gesetzt. Der erste Parameter ist der Name des Templates, wie wir ihn in der HTML-Datei im <mos:tmpl>-Tag angegeben haben. Der zweite entspricht dem Namen der Variablen. Beachten Sie, dass hier die Groß-/Kleinschreibung keine Rolle spielt. Der dritte Parameter übergibt den einen Wert an die Variable. Zuletzt wird das Ergebnis in Zeile 10 ausgegeben.

Jetzt, da der grundlegende Mechanismus klar ist, können wir uns die Möglichkeiten ansehen, die patTemplate uns bietet. Im HTML-File sind fünf zusätzliche Tags möglich.

Es gibt mehrere Typen von Templates, die es unter anderem ermöglichen, häufige Wiederholungstypen abzubilden oder auf Bedingungen zu reagieren. Wiederholungen können durch loop ausgelöst werden oder indem man an eine Template-Variable ein Objekt übergibt (s.  u.). Ohne Angabe des Typs hat die Vorlage den Wert standard und wird nur einmal ausgegeben.

Der Typ oddeven unterscheidet zwischen zwei Zuständen. In jedem ersten Durchlauf ist die Bedingung __odd erfüllt, in jedem zweiten die Bedingung __even. Eine häufige Anwendung dieses Typs ist die Ausgabe von Tabellen, bei denen jede zweite Zeile farbig hinterlegt ist.

<mos:tmpl name="tab" type="oddeven">
   <mos:sub condition="__odd">
      <div style="background-color:#cccccc">{WERT}</div>
   </mos:sub>
   <mos:sub condition="__even">
      <div style="background-color:#ffffff">{WERT}</div>
   </mos:sub>
</mos:tmpl>

An diesen Mechanismus ist der Typ modulo angelehnt. Der einzige Unterschied ist, dass es sich hier nicht um zwei, sondern um mehrere abwechselnde Bedingungen handelt. Das Schema für drei Teile sieht so aus:

<mos:tmpl name="tab" type="modulo" modulo="3">
   <mos:sub condition="0">Fall 1</mos:sub>
   <mos:sub condition="1">Fall 2</mos:sub>
   <mos:sub condition="2">Fall 3</mos:sub>
</mos:tmpl>

Den Typ condition haben Sie in der obigen Tabelle bereits kennen gelernt. Ähnlich wie bei den ersten beiden Typen enthält ein bedingtes Template Untertemplates, die ausgegeben werden, wenn die Bedingung condition des Subtemplates erfüllt ist. Es muss nur noch angegeben werden, wie die Variable heißt, die die Bedingung erfüllen kann. Das geschieht über das Attribut conditionvar.

Eine starke Vereinfachung des bedingten Templates ist simplecondition. Hier benötigen Sie keine Subtemplates mehr. Es reicht eine Liste der Variablen, die gesetzt sein (also einen Wert haben) müssen, damit die Vorlage angezeigt wird. Diese Liste wird im requiredvars angegeben.

<mos:tmpl name="hallojoomla" type="simplecondition"
          requiredvars="gruss, name">
   <h1>{GRUSS}, {NAME}</h1>
</mos:tmpl>

Jetzt kennen Sie alle Template-Typen. Sehen wir uns die andere Seite einmal an. Wie Sie in der PHP-Datei ein Template-Objekt erzeugen, haben Sie im vorherigen Beispiel schon gesehen. Wichtige Methoden im Überblick:

Mit diesem Wissen können wir nun daran gehen, in unserem Benutzerseiten-Modul die Programmlogik von der Darstellung zu trennen. Sehen wir uns zunächst das Template an:

1   <mos:tmpl name="usercontent">
2      <h1><mos:var name="uname" modifier="htmlentities" />
3      <mos:tmpl name="tt_text" type="simplecondition"
4                requiredvars="TOOLTIP">
5         <script type="text/javascript"
6                 src="includes/js/overlib_mini.js">
7         </script>
8         {TOOLTIP}
9      </mos:tmpl>
10     </h1>
11     <mos:tmpl name="artikel" type="simplecondition"
12               requiredvars="output">
13        <div>
14        <a href="index.php?ð
15           option=com_content&amp;task=edit&amp;id={ID}">
16        <img src="images/M_images/edit.png"
17             height="12" border="0" />
18        </a>
19        <mos:tmpl name="pub" type="condition"
20                  conditionvar="state"
21                  varscope="artikel">
22           <mos:sub condition="1">
23               <a href="{URI}&h_act=unpub&h_pid={ID}">
24               <img src='administrator/imagesð
25                         /publish_g.png' border='0'>
26               </a>
27           </mos:sub>
28           <mos:sub condition="0">
29              <a href="{URI}&h_act=pub&h_pid={ID}">
30              <img src='administrator/imagesð
31                        /publish_x.png' border='0'>
32              </a>
33           </mos:sub>
34        </mos:tmpl>
35        <a href="index.php?ð
36           option=com_content&amp;task=view&amp;id={ID}">
37           {TITLE}
38        </a>
39        </div>
40     </mos:tmpl>
41  </mos:tmpl>

Der Username wird in den Zeilen 2 bis 10 ausgegeben. In Zeile 2 finden Sie einen Verweis auf die Variable uname, die vorsichtshalber über die erweiterte Syntax ausgegeben wird, die Sonderzeichen in HTML-Entities verwandelt. Das stellt sicher, dass auch Umlaute richtig ausgegeben werden. In Zeile 3 wird ein neues Template tt_text geöffnet. Sie sehen also, dass auch verschachtelte Templates möglich sind. Ob tt_text angezeigt wird, hängt davon ab, ob die Variable TOOLTIP vom Programm übergeben wird. Dazu später mehr. Das eigentliche Tooltip-Tag lassen wir uns nach wie vor von der Joomla!-API erzeugen, so dass dieses hier einfach über die Variable {TOOLTIP} eingebaut wird (Zeile 8).

Das nächste Template artikel (Zeilen 11 – 40) regelt die Ausgabe der Artikel des Users. Wir müssen hier nur dafür sorgen, dass eine einzige Zeile richtig zusammengesetzt wird, den Rest erledigt das Programm dann für uns. Da nicht immer Artikel vorhanden sind (z.  B. wenn sich ein Besucher auf der Seite befindet), ist auch die Ausgabe dieses Templates von der Bedingung abhängig, dass eine Variable namens output gesetzt wird (Zeilen 11/12). Die Variablennamen sind nicht zufällig mit denen der Datenbankspalten identisch. Dadurch haben wir später die Möglichkeit, das Ergebnis der Datenbankabfrage einfach an das Template zu übergeben.

Der Bearbeitungslink (Zeilen 14 – 18) wird direkt als HTML in das Template geschrieben. Beachtenswert ist hier nur die dynamische ID in Zeile 15, die uns wiederum die Programmlogik zur Verfügung stellen muss.

Interessanter ist da schon die Ausgabe des Links, der den Publikationsstatus ändert, da wir hier zwei Variationsmöglichkeiten haben (Zeilen 19 – 34). Also nehmen wir ein bedingtes Template, dessen Ausgabe wir von der Variablen state abhängig machen (Zeile 20). Sie sehen ein zusätzliches Attribut varscope. Damit können die Variablen eines anderen Templates (in unserem Fall artikel) übernommen werden. Würden wir dieses Attribut weglassen, so hätten wir keinen Zugriff auf die Parameter, die von der Datenbank übergeben werden (insbesondere ID). Die beiden unterschiedlichen Fälle werden dann in Subtemplates (Zeilen 22 – 27 und 28 – 33) abgehandelt.

Zuletzt werden noch der Link zur Ansicht des Artikels und der Artikelname ausgegeben (Zeilen 35 – 38). Hier verzichten wir zugunsten der Übersichtlichkeit auf die suchmaschinenfreundliche URL.

Nun müssen wir unser Programm noch anpassen. Zunächst muss ganz am Anfang des Skripts das Template eingebunden werden. Die Programmteile, die nur Informationen verarbeiten (z.  B. die Reaktion auf URL-Parameter) bleiben gleich, nur die Bereiche, in denen Ausgaben generiert werden, müssen abgeändert werden.

1   <?php
2   defined( '_VALID_MOS' ) or die( 'Direct Access to this
3      script is not allowed');
4   require_once( $mosConfig_absolute_path
5      .'/includes/patTemplate/patTemplate.php' );
6   $tmpl =& patFactory::createTemplate( '' );
7   $tmpl->setRoot( 'modules/mod_usercontent' );
8   $tmpl->readTemplatesFromInput( 'usercontent.html' );
...
    # Verarbeitung der URL und Bestimmung des Usernamens
...
36  if (!$tt = mosGetParam($_GET, 'tooltip'))
37           $tt = $params->get('tooltip', 'yes');
38  $tmpl->addVar( 'usercontent', 'uname', $my_name);
39  if ($tt == "yes") {
40     $tooltip = mosToolTip($my_grp, 'Gruppe', '30',
41                $params->get('hotspot', 'tooltip.png'));
42     $tmpl->addVar( 'tt_text', 'tooltip', $tooltip);
43  }
...
    # Abfrage der Datenbank
...
57  $uri = preg_replace('/(&h_act=.[^&]*)|(&h_pid=.[^&]*)/',
58                      '', $_SERVER['REQUEST_URI']);
59  $tmpl->addVar( 'artikel', 'URI', $uri);
60  if ($my->id != 0)
61     $tmpl->addVar( 'artikel', 'output', 'true' );
62  $tmpl->addObject( 'artikel', $rows, '' );
63  $tmpl->displayParsedTemplate( 'usercontent' );
64  ?>

Die Initialisierung des Templates (Zeilen 4  –  8) wurde weiter oben bereits besprochen. Die Ausgabe des Usernamens (Zeilen 36 – 43) erfolgt im Wesentlichen ohne größere Änderungen; nur an den Stellen, wo zuvor mit echo auf den Bildschirm geschrieben wurde, wird jetzt eine Variable uname an das Template usercontent bzw. tooltip an das Template tt_text übergeben.

Einen wesentlichen Fortschritt in der Ausgabe erreichen wir bei der Datenbankabfrage (Zeilen 57 – 64). Zunächst bereiten wir die Vorlage vor, indem wir die Werte der bereinigten URL übergeben sowie festlegen, ob überhaupt eine Ausgabe erfolgen soll. (Sie erinnern sich, dass wir das Template artikel von der Variable output abhängig gemacht hatten.) Jetzt reicht es aus, das Ergebnis der Datenbankabfrage, das in $rows gespeichert ist, komplett an das Template zu übergeben. Das geschieht in Zeile 62. Achten Sie darauf, dass wir statt addVar jetzt addObject verwenden. Intern wird das artikel-Template jetzt für jede Zeile des Abfrageergebnisses einmal aufgerufen. Dort stehen dann die Spaltennamen als Variablennamen zur Verfügung. Das ist auch der Grund, warum wir im Template so einfach auf die Variablen id, title und state zugreifen können.

In Zeile 63 wird das Ergebnis des Templates ausgegeben. Jetzt haben wir im Code eine vollständige Trennung zwischen der Ausgabe der Oberfläche und der Logik des Programms erreicht.

Bleibt nur noch ein letzter Punkt nachzuholen. In unserer Parameterseite hatten wir großmundig versprochen, mehrere Layouts anzubieten. Das ist jetzt nicht weiter problematisch. Erstellen Sie zwei Kopien der Template-Datei usercontent.html, die Sie usercontent1.html und usercontent2.html nennen. Dort können Sie jetzt einige Änderungen an den HTML-Tags vornehmen, beispielsweise könnten Sie die Überschrift von <H1> auf <H4> ändern. Nun müssen wir in mod_usercontent_tmpl.php noch eine kleine Änderung an der Stelle vornehmen, wo die Template-Datei bestimmt wird:

8   switch ($params->get('layout', 'layout1'))
9   {
10      case 'layout1': $file = 'usercontent.html'; break;
11      case 'layout2': $file = 'usercontent1.html'; break;
12      case 'layout3': $file = 'usercontent2.html'; break;
13  }
14  $tmpl->readTemplatesFromInput( $file );

Abhängig von dem Wert des Parameters, der in Zeile 8 abgeholt wird, wird die Variable $file auf den Dateinamen des zu verwendenden Templates gesetzt. Dieses wird in Zeile 14 dann geladen.