Gerhard Knabe: Templates

Beitrag lesen

Also die "Steueranweisungen" sind bei mir recht einfach gestrickt. Meine Templates sind XML-Dateien. Es existieren Bedingte Anweisung folgender Form
<if condition='...'>
  ...
<elseif condition='...' />
 ...
<else />
  ..
</if>
wobei als Bedingungen im Wesentlichen nur die Prüfung auf Existenz eines Datenelementes möglich ist, also keine Ausdrücke, Funktionsaufrufe oder dergleichen.
"Schleifen" über Felder können wiefolgt realisiert werden:
<foreach path='...'>
  ...
</foreach>
Innerhalb aller Tags sowie deren Body kann über {Pfad} auf die dem Template zur Formatierung übergebenen Daten zugegriffen werden, wobei {Pfad} einen Navigationspfad innerhalb einer durch die Daten definierten Objekthirarchie darstellt. Ein Ausschnitt aus einem Template für eine Bildergalerie sieht z.B. so aus:

<foreach path='{Imagegroups}'>
  <tr>
    <td style='background-color:transparent;'><a href='javascript:Application.TriggerEvent(&#39;{Path}&#39;,&#39;Click({.Guid})&#39;,null);'>{.Description}</a></td>
  </tr>
</foreach>

Die Datenstruktur ist ein Objekt. Dieses hat eine Eigenschaft Imagegroups, auf die im Pfad {Imagegroups} innerhalb des foreach-Tags Bezug genommen wird. Die Eigenschaft Imagegroups enthält ein Feld von Objekten (in diesem Fall vom Typ Imagegroup). Durch das foreach-Konstrukt werden all diese Objekte durchlaufen. Jedes Imagegroup-Objekt verfügt über die Eigenschaft Description, auf die sich der Pfad {.Description} bezieht. Der Punkt am Anfang des Pfades zeigt an, dass die Navigation nicht von der Wurzel aus erfolgen soll, sondern vom derzeit innersten iterierten Element. Geschachtelte foreach-Konstrukte sind ebenfalls möglich. Auf die äußeren Elemente könnte man über den Pfad {Outer} und auf die Elternelemente eines Pfades über {.Parent} sowie auf die Elemente selbst über {this} zugreifen. Eine genaue Darstellung der Funktionsweise würde den Rahmen dieses Postings sprengen. Falls Du aber spezielle Fragen hast, will ich gerne versuchen, diese zu beantworten. Die von mir gewählten Konstrukte sollten zwar ausreichend Flexibilität bieten, um nicht jede Kleinigkeit als Steuerelement realisieren zu müssen, denn dann wären Templates unnötig, aber dennoch so einfach sein, dass für den Designer keine besonderen Programmierkenntnisse erforderlich sind.

Die Anbindung an Steuerlemente sieht bei mir so aus (gleiches Beispiel wie oben):

<control control='Master' Template='{2EE96BCB-E8EC-0BD9-C5CC-AEBFFCF7EEE6}'>
  <ActiveNode>{C7617FAA-04CC-75B5-9C07-779008D3A626}</ActiveNode>
  <Content type='string'>&nbsp;</Content>
  <SidePanel type='string'>
    <table style='width:180px;padding:0 0 0 0px;margin:0;background-color:#000018;border-collapse:collapse;'>
      <tr>
        <th>Bildergalerie</th>
      </tr>
      <foreach path='{Imagegroups}'>
        <tr>
          <td style='background-color:transparent;'><a href='javascript:Application.TriggerEvent(&#39;{Path}&#39;,&#39;Click({.Guid})&#39;,null);'>{.Description}</a></td>
        </tr>
      </foreach>
      <tr>
        <td style='height:100%;background-color:transparent;' />
      </tr>
    </table>
  </SidePanel>
</control>

Hier wird ein Steuerlement vom Typ "Master" erzeugt und den Eigenschaften Template, ActiveNode, Content und SidePanel Werte zugewiesen. Natürlich muss der Designer wissen, wie er mit dem Steuerelement umzugehen hat. Aber das ist nicht wesentlich schwerer als zu verstehen, wie man eine HTML-Tabelle aufbaut. Das "Master" Steuerelement realisiert das Konzept einer Masterseite, also eine zentrale Struktur für alle Seiten einer Webpräsenz. In diesem Fall ist es dreispaltig: Navigationsleiste, Content und eine rechte Spalte (das SidePanel). Die Eigenschaft Template enthält in diesem Fall den Primärschlüssel eines Datensatzes einer DB, die das entsprechende Template enthält. Die Eigenschaft ActiveNode identifiziert den zu aktivierenden Navigationspunkt in der Navi-Leiste. Die Eigenschaften Content und SidePanel enthalten den HTML-Code für die entsprechenden Bereiche des Layouts.

Das Template der Masterseite sieht so aus:

<table style='width:904px;height:100%;margin:0;padding:0;background-color:transparent;border-collapse:collapse;'>
  <tr>
    <td colspan='3' style='width:904px;height:90px;padding:0;margin:0;background-image:url(images/backgrounds/title.gif);' />
  </tr>
  <tr>
    <td style='width:181px;height:100%;background-color:#000018;padding:0;margin:0;'>
      <control Name='Navigation' control='Treeview' style='width:100%;' Root='{F181CD2E-4680-2D18-FAA9-7C915528B71E}'>
        <ShowRoot>false</ShowRoot>
        <ActiveNode>{ActiveNode}</ActiveNode>
      </control>
    </td>
    <td rowspan='2' style='width:542px;padding:0;margin:0;text-align:center;background-color:#1A1A33;'>
      <div style='width:100%;padding:0;margin:0;background-color:transparent;overflow:visible;'>
        {Content}
      </div>
    </td>
    <td rowspan='2' style='width:180px;padding:0 0 0 1px;margin:0;text-align:center;background-color:#000018;'>
      {SidePanel}
    </td>
  </tr>
</table>

In diesem Template wird über die Pfade {Content} und {SidePanel} auf die durch das obere Template zugewiesenen Eigenschaften zugegriffen. Die Navigationsleiste wird als Treeview-Steuerelement erstellt. Die Knoten des baumes kommen aus einer Datenbank. Der Primärschlüssen der Wurzel wird durch die Eigenschaft Root festgelegt, der aktive Knoten durch ActiveNode. Alle Seiten werden über diese Konstruktion auf Basis des Master-Templates aufgebaut, so dass ein einheitliches Layout für alle Seiten durch das Mastertemplate gewährleistet ist.

Du wunderst dich möglicherweise wie denn nun ein gültiges HTML-Dokument zustande kommt, also mit html,head und body Tags. Ich betrachte alle Templates als Komponenten, die überall verwendet werden können. Um komplette HTML-Dokuemnte zu erzeugen verwende ich ein anderes Konzept. Grund hierfür ist auch, dass Steuerelemente ggf. Skriptcode und Stylesheets erfordern, die auf geeignete Weise mit in das HTML-Dokument intergriert werden müssen. Prinzipiell spricht aber nichts dagegen, über das Mastertemplate ein komplettes HTML-Dokument zu erstellen. Solltest Du an den weiteren Konzepten ineressiert sein, würde ich allerdings eine weitere Kommunikation per email vorschlagen. Das ist etwas umfangreicher. Auch brauche ich Zeit, um die Darstellung so zu formulieren, dass sie verständlich ist. Ich hab' mir schon für dieses Posting einen abgebrochen, das einigermassen verständlich zu beschreiben, hoffentlich mit ein wenig Erfolg.

MfG
GK