>> Inhaltsverzeichnis >> Anleitung für Entwickler >> Templates und Skins erstellen

Anleitung für Entwickler

Templates und Skins erstellen

Referenzhandbuch für Templates

Dieses Framework verwendet die "Smarty Template-Engine". Diese Engine besitzt Ihre eigene Dokumentation, welche kostenlos unter der Adresse http://smarty.php.net/docs.php zum Download bereit steht.

Es ist Ihnen gestattet, die Engine durch selbt geschriebene Funktionen zu erweitern. Auf diese Weise können Sie die Syntax der verwendeten Templates quasi beliebig erweitern. Sie finden die Engine im Verzeichnis "include/template_classes". Eine Anleitung dazu finden Sie im Referenzhandbuch der Engine. Änderungen an der Engine sind jedoch nur Experten zu empfehlen.

Hinweis zu Lizenzen: Bevor Sie Änderungen vornehmen, beachten Sie bitte die Lizenzhinweise.

Abweichungen der Syntax

Die Syntax der verwendeten Version der "Smarty Template-Engine" weicht in einigen Punkten vom Referenzhandbuch ab. Der folgende Abschnitt beschreibt diese geänderte Syntax.

Kennzeichnung von Token

Anders als in der Originalversion von Smarty verwendet diese Version nicht die Zeichen '{' und '}' als öffnende und schliessende Tags für die Auszeichnung von Smarty-Codes, sondern die unverfänglicheren Strings: '[%' und '%]'. Als beispielsweise NICHT "{$variable}", sondern "[%$variable%]". Der Grund ist, dass die ursprünglichen Zeichen in den meisten HTML-Dokumenten zu häufig im Fließtext bzw. in Skripten oder Stylesheets auftauchen, was zu Problemen bei der Abarbeitung der Templates führen kann. Daher wurden die Tags vorsorglich auf diese unverfänglichere Variante geändert. (Dieses Vorgehen wird zudem auch im Handbuch der Engine für solche Fälle empfohlen.)

Anders als in der Originalversion erlaubt diese Version auch den Einsatz einer verkürzten Syntax für das Einsetzen einfacher Variablen. Statt der etwas umständlicheren Schreibweise "[%$VARIABLE%]" ist in dieser Version auch folgende Schreibweise gestattet: "%VARIABLE%". Dies betrifft allerdings ausschliesslich Variablen. Auf alle anderen Smarty-Codes ist dies NICHT anwendbar.

Namenskonventionen

Weil Smarty zwischen Groß- und Kleinschreibung unterscheidet wurde zur Vereinfachung festgelegt, dass Variablennamen prinzipiell in Großbuchstaben benannt sein sollten. Während die Namen von Funktionen und anderen Codes ausschliesslich Kleinbuchstaben enthalten sollten. Aus Gründen der Übersichtlichkeit ist dringend zu empfehlen, sich an diese Konvention zu halten.

Pfadangaben

In dieser Version können Verweise auf Dateien (Links, Grafiken, CSS, Skripte, etc.) als relative Pfadangaben gespeichert werden. Dateipfade werden beim Laden der Seite automatisch korrigiert. Es ist also nicht mehr erforderlich, ausschliesslich absolute Dateipfade zu verwenden.

Konfiguration

Smarty läuft in dieser Version im sicheren Modus (security=true). Das Einbetten von PHP-Codes in Templates ist nicht gestattet. Außerdem sind folgende Funktionen deaktiviert: include, include_php, config_load, php.

neue Funktionen

Diese Version führt einige neue Funktionen ein, welche die Originalversion nicht hatte.

import

[%import [preparser] file="<string>"%]

[%import [preparser] id="<string>"%]

Attribut Typ erforderlich Defaultwert Beschreibung
file string ja n/a Pfad der einzufügenden Datei
preparser n/a nein null bestimmt wann die Datei importiert werden soll

Oder alternativ mit folgenden Paramentern:

Attribut Typ erforderlich Defaultwert Beschreibung
id string ja n/a Id des einzufügenden Templates
preparser n/a nein null bestimmt wann die Datei importiert werden soll

Die Funktion "import" ersetzt die verschiedenen ursprünglichen Funktionen zum Einfügen von Dateien durch eine einheitliche Funktion. Sie unterscheidet sich außerdem in der Art, wie die Dateien behandelt werden. Die Funktion "import" behandelt die zu importierende Datei wie ein eigenständiges Template. Dieses hat mehrere Vorteile: das eingefügte Template unterliegt bspw. den selben Sicherheitseinschränkungen wie das Basistemplate. Außerdem (und noch viel wichtiger:) sorgt dieses Vorgehen dafür, dass die Korrektur enthaltener Pfadangaben korrekt arbeiten kann.

Der Parameter "file" gibt den Namen der Datei an, welche importiert werden soll.

Alternativ kann der Parameter "id" verwendet werden, um statt den Pfad und Dateinamen fest im Template vorzugeben, die Id des Templates anzugeben. Das Framework bestimmt den zu der Id passenden Dateinamen zur Laufzeit automatisch. Dies hat den Vorteil, dass die Datei umbenannt oder in einen anderen Pfad verschoben werden kann, ohne dass die Verweise auf diese Datei in allen anderen Templates korrigiert werden müssen.

Anwendungsbeispiel: angenommen Sie haben ein Template "a.html" für den Skin "default" definiert und dieser importiert das Template "b.html". Nun möchten Sie einen neuen Skin anlegen. In diesem Skin wollen Sie den Inhalt der Datei "b.html" ändern, aber den Inhalt der Datei "a.html" unverändert lassen.
1. Fall: Falls Sie im Skin "default" das Template "b.html" über den Parameter "file" importiert haben, dann können Sie "b.html" in Ihrem neuen Skin nicht ändern, ohne den Pfad in "a.html" zu ändern. Das bedeutet, Sie müssten in Ihrem neuen Skin auch die Datei "a.html" anpassen.
2. Fall: Falls Sie im Skin "default" dem Template "b.html" eine Id (zum Beispiel "b") zugewiesen haben und das Template über den Parameter "id" importiert haben, dann können Sie in Ihrem neuen Skin die Id des Template "b" mit dem Pfad einer anderen Datei überschreiben, welche nur für diesen Skin verwendet wird. Dadurch müssen Sie den Pfad im Template "a.html" nicht ändern und können das Template unverändert lassen.
Hinweis: Das Zuweisen von Ids zu Dateien erledigen Sie über die Konfigurationsdateien (*.config) im Verzeichnis des jeweiligen Templates.

Das Flag "preparser" bestimmt, wann eine Datei importiert werden soll: BEVOR oder WÄHREND der Parser das Template abarbeitet. Wird es gesetzt, wird die Datei VOR dem eigentlichen Parsen eingefügt. Das Flag "preparser" sollte beispielsweise immer dann verwendet werden, wenn das importierte Template auf Variablen zugreifen muss, welche durch das Basistemplate gesetzt werden. Klassisches Beispiel sind Templates welche innerhalbs des Körpers von Schleifen importiert werden. ("foreach", "section") Diese benötigen das Flag "preparser", falls sie auf die Schleifenvariablen zugreifen können müssen. Alternativ können Sie der Anweisung "Import" eine Liste aller Variablen übergeben, auf welche Sie innerhalb des Templates zugreifen müssen.

Achtung! Wird der Parameter "preparser" verwendet, so wird das importierte Template nicht einzeln geparst, übersetzt und im Cache gespeichert, sondern "hart" in den Quellcode des Templates kopiert, welches die Import-Anweisung enthält. Dies bedeutet, es wird zur Laufzeit auch nicht geprüft, ob sich der Inhalt des importierten Templates seit dem letzten Aufruf geändert hat. Wenn Sie das importierte Template ändern, müssen Sie daher den Template-Cache explizit leeren, damit die Änderungen wirksam werden.

1. Beispiel, mit Parameter "file":

Datei "hello_world.html"
Hello World!

Datei "template.html"
<p>[%import file="hello_world.html"%]</p>

2. Beispiel, mit Parameter "id":

Datei "default.config"
<hello>
  <file>hello_world.html</file>
</hello>

Datei "template.html"
<p>[%import id="hello"%]</p>

3. Beispiel, zusätzliche Parameter:

Datei "hello_world.html"

[%if $foo%]
    [%$bar%]
[%/if%]

Datei "template.html"
<p>[%import file="hello_world.html" foo=true bar="Hello World!"%]</p>

Ausgabe (in allen 3 Beispielen):

<p>Hello World!</p>

create

[%create template="<string>" file="<string>" table="<string>" [ where="<string>" ] [ desc="<boolean>" ] [ sort="<string>" ] [ page="<integer>" ] [ entries="<integer>" ] [ titles="<boolean>" ] [ on_new="<string>" ] [ on_edit="<string>" ] [ on_delete="<string>" ] [ on_search="<string>" ] %]

Attribut Typ erforderlich Defaultwert Beschreibung
template string ja n/a Name des Templates, welches zum Generieren der GUI verwendet werden soll. Erlaubte Werte sind:
view_seperated, view_details, view, new, edit, search
file string ja n/a Pfad der Strukturdatei welche verwendet werden soll.
table string ja n/a Name der Tabelle, welche verwendet werden soll
where string nein <empty> wird verwendet um die WHERE-Klausel für die SQL-Anfrage zu generieren.
Syntax: <FELDNAME1>=<WERT1>[,<FELDNAME2>=<WERT2>[,...]]
desc boolean nein false Gibt an, ob die Einträge aufsteigend (false) oder absteigend (true) sortiert werden sollen.
sort string nein <primary key> Name der Spalte, nach welcher die Einträge sortiert werden sollen
page integer nein 0 Nummer des ersten Eintrags der angezeigt werden soll
entries integer nein 5 Anzahl der insgesamt anzuzeigenden Einträge
titles boolean nein true Legt fest, ob Attributnamen angezeigt werden sollen oder nicht.
on_new string nein n/a Name der Aktion welche ausgelöst werden soll wenn ein neuer Eintrag gespeichert werden soll
on_edit string nein n/a Name der Aktion welche ausgelöst werden soll wenn geänderte Einträge gespeichert werden sollen
on_delete string nein n/a Name der Aktion welche ausgelöst werden soll wenn ausgewählte Einträge gelöscht werden sollen
on_search string nein n/a Name der Aktion welche ausgelöst werden soll um eine Suchanfrage zu bearbeiten und die Trefferliste zu erzeugen
advanced_search boolean nein false gibt an, ob die einfache, oder die erweiterte Suchmaske mit zusätlichen Optionen angezeigt werden soll (nur für template="search")

Die Funktion "create" generiert automatisch eine GUI für eine gewählte Datenbank. Voraussetzung ist das Vorhandensein einer gültigen Strukturdatei, welche die Datenbank beschreibt.

Beispiel:

[%create template="edit" file="database.config" table="bookstore"%]

sml_load

[%sml_load file="<string>" [ section="string" ] [ scope="string" ] %]

Attribut Typ erforderlich Defaultwert Beschreibung
file string ja n/a Anzahl der Spalten der Tabelle
section string nein n/a ID eines Input- oder Textarea-Tags
scope string nein local gültige Werte: "local", "global", "parent", "template_vars"
global boolean nein false deprecated

Diese Funktion bietet die gleiche Schnittstelle wie die Smarty-Funktion "config_load". Allerdings arbeitet diese Funktion mit SML-Dateien mit den Dateiendungen "*.sml", "*.cfg" oder "*.config".

Anders als die herkömmlichen Konfigurationsdateien von Smarty, dürfen SML-Dateien mehrdimensionale Array-Definitionen enthalten.

Außerdem darf das Argument "scope" den Wert "template_vars" besitzen, welcher bewirkt, dass die Variablen der SML-Datei als Templatevariablen verwendet werden  - damit ist es möglich auf mehrdimensionale Arrays in gewohnter Weise zuzugreifen. Dieses Feature gibt es nur für sml_load() und nicht für config_load().

Beispiel:

Im Verzeichnis "skins/.config" liegt die Datei "foo.sml". Sie hat folgenden Inhalt:

<TEST>
    <A>1</A>
    <B>
        <C>2</C>
    </B>
</TEST>

Im Template steht:

[%sml_load file="foo.sml" section="TEST.B" scope="template_vars"%]

[%$C%]

Ausgabe: 2

[%sml_load file="foo.sml" section="TEST.B"%]

[%#C#%]

Ausgabe: 2

[%sml_load file="foo.sml" scope="template_vars"%]

[%$TEST.B.C%]

Ausgabe: 2

embeddedTags

[%embeddedTags [ show="<string>" ]  [ hide="<string>" ] %]

Attribut Typ erforderlich Defaultwert Beschreibung
show string nein * eine durch Komata getrennte Liste der Tags,
die angezeigt werden sollen
hide string nein n/a eine durch Komata getrennte Liste der Tags,
die ausgeblendet werden sollen

Die Funktion "embeddedTags" generiert automatisch eine Schaltflächen, mit denen der Gast Ihrer Webseite beim Schreiben eines neuen Eintrags Text formatieren kann (fett, kursiv, etc.).

Die Liste "show" kann verwendet werden, um Tags festzulegen, welche angezeigt werden sollen und die Liste "hide" kann man benutzen, wenn Sie möchten, dass ganz bestimmte Tags nicht dargestellt werden.

Sie können in der Liste "show" mit dem Zeichen "-" Zeilenumbrüche und mit dem Zeichen "|" Trennstriche in die Ausgabe einfügen.

Beispiel:

<textarea id="text"></textarea>


Abbildung: Darstellung der Tag-Leiste (mit allen Tags)

<!-- Alle Tags einblenden -->
[%embeddedTags%]

<!-- Die Tags "u", "i" und "b" einblenden -->
[%embeddedTags show="b,u,i"%]

<!-- Alle Tags außer "url" und "mail" einblenden -->
[%embeddedTags hide="url,mail"%]

<!-- Die Tags "u","i","b", einen Trennstrich und dann den Tag "url" anzeigen -->
[%embeddedTags show="u,i,b,|,url"%]

smilies

[%smilies [ width="<integer>" ] %]

Attribut Typ erforderlich Defaultwert Beschreibung
width integer nein 1 Anzahl der Spalten der Tabelle

Die Funktion "smilies" generiert automatisch eine Tabelle aller verfügbaren Emoticons / Smilies, mit einem Link zum Einfügen in das angegebene Eingabefeld.

Beispiel:

<textarea id="text"></textarea>
[%smilies width="5"%]


Abbildung: Darstellung der Smilies (5 pro Zeile)

printArray

[%printArray value="<array>" %]

Attribut Typ erforderlich Defaultwert Beschreibung
value array ja n/a ein Array, welches als String ausgegeben werden soll

Diese Funktion wandelt ein (eventuell mehrdimensionales) Array in einen String um und gibt diesen aus. Das Array wird im SML-Format dargestellt. Dies kann unter anderem für das Debugging von Templates interessant sein, um herauszufinden welchen Namen eine gesuchte Variable hat.

Beispiel:

[%printArray value=$LANGUAGE%]


Abbildung: kurzer Auszug aus der Ausgabe

printUnorderedList

[%printUnorderedList value="<array>" keys_as_href="<bool>" %]

Attribut Typ erforderlich Defaultwert Beschreibung
value array ja n/a ein Array, welches als Liste ausgegeben werden soll
keys_as_href bool nein false gibt an, ob Links erzeugt werden sollen

Diese Funktion wandelt ein (eventuell mehrdimensionales) Array in eine unsortierte Liste im HTML-Format um und gibt diese aus. Es wird der Tag "ul" verwendet.

Man kann diese Funktion verwenden, um Baummenüs zu erzeugen. In Firefox, Opera und Co. funktioniert das Ein- und Ausklappen des Menüs vollständig über CSS (ohne JavaScript). Lediglich im Internet Explorer einschließlich Version 7 muss JavaScript aktiviert sein, da dieser Browser die erforderlichen CSS 2.1 Pseudoklassen noch nicht vollständig unterstützt.

Es kann auch ein Menü mit Links erzeugt werden. Dazu verwenden Sie bitte die URLs als Schlüssel des Arrays und die Beschriftung als Werte und setzen Sie den Parameter "keys_as_href" auf "true".

1. Beispiel – ein Array als Baummenü darstellen:

[%printUnorderedList value=$LANGUAGE%]

 


Abbildung: kurzer Auszug aus der Ausgabe

 

2. Beispiel – ein Baummenü mit Links ausgeben:

<?php 
$A = array(
  '1.html' => 'Link',
  'Menü 1' => array(
    '2_1.html' => '1. Eintrag',
    '2_2.html' => '2. Eintrag',
    'Menü 2' => array(
      '2_3_1.html' => '1. Eintrag',
      '2_3_2.html' => '2. Eintrag' ),
  ),
  'Menü 3' => array(
    '3_1.html' => '1. Eintrag',
    '3_2.html' => '2. Eintrag',
    '3_2.html' => '3. Eintrag' ),
);
$YANA->setVar($A);
?>

[%printUnorderedList value=$A keys_as_href="true"%]

 


Abbildung: Darstellung als Baummenü mit Links

Die Schlüssel werden fett gedruckt und die Werte kursiv - dies lässt sich jedoch per CSS ändern. Es werden folgende CSS-Klassen verwendet:

neue Modifier

date

[%$foo|date%]

Erzeugt aus einer Variable, welche einen UTC enthält, eine JavaScript-Anweisung, welche die passende Zeitangabe entsprechend der Zeitzone des Client-Browsers als Text ausgibt.

Beispiel:

Template wurde erzeugt am: [%$CTIME|date%]<br>
Template wurde zuletzt bearbeitet am: [%$MTIME|date%]<br>
Template wurde zuletzt aufgerufen am: [%$ATIME|date%]<br>

wird umgesetzt zu:

Template wurde erzeugt am: 1.12.2006
Template wurde zuletzt bearbeitet am: 19.1.2007
Template wurde zuletzt aufgerufen am: 21.1.2007

smilies

[%$foo|smilies%]

Ersetzt in einer Variable vom Typ String enthaltene Codes durch die dazu passenden Icons.

Beispiel:

$foo = "Text :example: Text"

[%$foo|smilies%]

wird umgesetzt zu:

Text
<img border="0" hspace="2" src="common_files/smilies/example.gif">
Text

embeddedTags

[%$foo|embeddedTags%]

Ersetzt in einer Variable vom Typ String Tags gemäß der für YANA vorgegebenen Syntax.

Beispiel:

$foo = „Text [b]Text[/b] Text"

wird umgesetzt zu:

Text <span style="font-weight: bold;">Text</span> Text

css

[%$foo|css%]

Erstellt für eine Verknüpfung mit dem angegebenen Pfad einer CSS-Datei.

Beispiel:

[%"default.css"|css%]

wird umgesetzt zu:

<link rel="stylesheet" type="text/css" href="default.css">

href

[%$foo|href%]

Generiert einen Link auf die Datei index.php inklusive aller erforderlichen Parameter. Der String $foo wird an das Ende des Search-Strings der URL angehängt. Um die URL werden automatisch doppelte Anführungszeichen (") erzeugt.

Beispiel:

<a href=[%"action=meinplugin_new_entry"|href%]>Neuer Eintrag</a>

wird umgesetzt zu:

<a href="index.php?sessid=foo&amp;id=beispiel&amp;action=meinplugin_new_entry">Neuer Eintrag</a>

url

[%$foo|url%]

Generiert ebenso wie der Modifier "href" einen Link, allerdings als absoluten Pfad und ohne Anführungszeichen zu erzeugen.

Beispiel:

<meta http-equiv="Refresh" content="2; URL=[%"action=meinplugin_new_entry"|url%]">

wird umgesetzt zu:

<meta http-equiv="Refresh" content="2;
URL=http://.../index.php?sessid=foo&amp;id=beispiel&amp;action=meinplugin_new_entry">

Achtung!  Folgendes funktioniert nicht: <a href="[%"action=foo"|url%]">link</a>
Ergebnis: <a href="skins/default/http://.../index.php?...">link</a>

Liste der wichtigsten erlaubten Platzhalter

* "erforderlich" meint in diesem Fall "ungleich NULL"

PlatzhalterTyperforderlich *DefaultwertHerkunftBeschreibung
PHP_SELFStringjan/aPHPName der ausgeführten Skriptdatei.
REMOTE_ADDRStringjan/aPHPDie IP-Adresse des Clients.
IDStringjadefaultGET/POSTID-Code des gerade aktiven Profils.
ACTIONStringnein<empty>GET/POSTName der Aktion welche gerade ausgeführt wird bzw. welche ausgeführt werden soll.
TARGETStringnein<empty>GET/POSTZiel der Aktion welche gerade ausgeführt wird bzw. welche ausgeführt werden soll. (bspw. die ID eines Datensatzes)
SESSION_NAME, SESSION_IDStringnein<empty>GET/POSTName und ID-Code der gerade laufenden Session (sollten bei allen internen Links angegeben werden)
PAGEintegernein0GET/POSTDie Nummer des Datensatzes, ab welchem mit der Anzeige begonnen werden soll. (falls erforderlich)
ATIMEstringjan/aDateiattributFügt Datum und Zeit des letzten Zugriffs auf das HTML-Template an dieser Stelle ein:
[%$ATIME|date%]
MTIMEstringjan/aDateiattributFügt an dieser Stelle das Datum ein, an welchem das HTML-Template zuletzt geändert worden ist:
[%$MTIME|date%]
CTIMEstringjan/aDateiattributFügt an dieser Stelle das Datum ein, an welchem das HTML-Template erstellt worden ist:
[%$CTIME|date%]
BESCHREIBUNGStringneinn/askriptabhängigBeschreibungstext der gerade ausgewählten Aktion.
LANGUAGEArrayjan/aSprachdatei(en)Array, welches alle Textstrings der gerade ausgewählten Übersetzung enthält.
PROFILEArrayjan/aProfildateiArray, welches alle Einstellungen des gerade aktiven Profils enthält.
Im Folgenden einige Beispiele. Beachten Sie, dass alle hier genannten Felder auch einen NULL-Wert enthalten dürfen.
PROFILE.BGCOLOR,
PROFILE.BGIMAGE
Stringneinn/aProfildateiHintergrundfarbe und Hintergrundbild der Webseite
PROFILE.PFONT,
PROFILE.PSIZE,
PROFILE.PCOLOR
Stringneinn/aProfildateiSchriftart, Schriftgröße, Schriftfarbe für Standardabsätze (P-Tags)
PROFILE.HFONT,
PROFILE.HSIZE,
PROFILE.HCOLOR
Stringneinn/aProfildateiSchriftart, Schriftgröße, Schriftfarbe für Überschriften (H1-,H2-,H3-Tags)
PROFILE.HFONT,
PROFILE.HSIZE,
PROFILE.HCOLOR
Stringneinn/aProfildateiSchriftart, Schriftgröße, Schriftfarbe für Überschriften (H1-,H2-,H3-Tags)
INSERT_CONTENT_HEREStringneinn/askriptabhängig Dies ist eine Einfügemarke. Sie markiert die Stelle, an der Daten des Standard-Ausgabestroms eingefügt werden. Diese Variable hat lokalen Kontext, dass heißt sie muss auf der Basisseite des Skins (normalerweise ist das "index.html") enthalten sein und darf nicht entfernt werden. Wenn diese Marke fehlt, werden Meldungen oder Menüs eventuell nicht angezeigt. Sie darf zwar auch in anderen Dateien auftauchen, hat dort aber keine besondere Bedeutung.

Liste der wichtigsten Datenfelder der Gästebuchanwendung

Um die volle Liste zu sehen oder neue Felder einzufügen bzw. alte Felder zu löschen, öffnen Sie die passende Strukturdatei "guestbook.config".

FeldnameTypPflichtfeldDefaultwertBeschreibung
GUESTBOOK_IDintegerja<auto increment>Primärschlüssel
PROFILE_IDstringneindefaultSchlüssel des passenden Profils.
Nur für Datenbankversion. Wird bei Dateiversion über Dateinamen gelöst.
GUESTBOOK_IPstringneindefaultIP des Autors eines Beitrages.
GUESTBOOK_MESSAGEstringjan/aText des Beitrages
GUESTBOOK_MAILstringneinnullMailadresse des Autors eines Beitrages.
GUESTBOOK_DATEintegerja<CURRENT_TIMESTAMP>Erstellungsdatum eines Beitrages.
GUESTBOOK_COMMENTstringneinnullKommentar des Webmasters.

aufklappbare HTML-Menüs erzeugen

Um aufklappbare Menüs mit YANA zu erzeugen benötigen Sie keine Programmierkenntnisse. Gehen Sie wie folgt vor:

Ein Quellcode-Beispiel:


Abbildung: Darstellung des Menüs

<ul class="menu root">
   <li class="entry"><a href="ziel.html">Link</a></li>
   <li class="menu">
       <div onclick="yanaMenu(this)">Menü 1</div>
       <ul class="menu">
           <li class="entry"><a href="1.html">Eintrag 1</a></li>
       </ul>
   </li>
   <li class="menu">
       <div onclick="yanaMenu(this)">Menü 2</div>
       <ul class="menu">
           <li class="entry"><a href="2.html">Eintrag 2</a></li>
           <div onclick="yanaMenu(this)">Submenü 2.1</div>
           <ul class="menu">
               <li class="entry"><a href="2_1.html">Eintrag 2.1</a></li>
               <li class="entry"><a href="2_2.html">Eintrag 2.2</a></li>
               <li class="entry"><a href="2_3.html">Eintrag 2.3</a></li>
           </ul>
       </ul>
   </li>
   <li class="menu">
       <div onclick="yanaMenu(this)">geschlossen</div>
       <ul class="menu" style="display: none;">
           <li class="entry"><a href="2.html">(unsichtbar)</a></li>
       </ul>
   </li>
</ul>

Achten Sie bei obigem Beispiel auf die hier kursiv gestellten Attribute. Das Attribut "onclick" enthält hier den Aufruf zum Öffnen und Schließen des Menüs. "Style"-Attribute legen abweichende Eigenschaften fest, wobei "display: none" das Menü ausblendet. Menüs sind von einem Element der CSS-Klasse "menu" umschlossen. Menüeinträge sind umschlossen von einem Element der CSS-Klasse "entry". Die Überschrift eines Menüs wird mit "div"-Tags umschlossen, welche auch das Attribut "onclick" erhalten. Durch Anklicken der Überschrift kann das Menü geschlossen oder geöffnet werden.

Es gilt folgende Voreinstellung: alle Menüs sind zunächst geöffnet, wenn Sie nicht explizit als geschlossen gekennzeichnet sind. Es können mehrere Menüs gleichzeitig geöffnet sein.

Falls Sie wünschen, dass stets nur 1 Menü gleichzeitig geöffnet sein soll, fügen Sie folgenden Quellcode hinzu:

<script type="text/javascript">
    yana_menu_auto_close = true;
</script>

Falls Sie wünschen, dass zu Anfang alle Menüs geschlossen sind, verwenden Sie folgenden Quellcode:

<script type="text/javascript">
    yanaCloseAll();
</script>

Beide Varianten können kombiniert werden.

Die Darstellung des Menüs entspricht den gängigen Empfehlungen und ist suchmaschinenfreundlich.

Das Layout wird in der Datei "skins/default/styles/menu.css" festgelegt und kann über folgende CSS-Klassen gesteuert werden:

HTML-Vorlagen editieren

Dieses Programm verwendet Musterseiten, sogenannte "Templates". Was auch immer Sie auf diesen Seiten ändern, ändert auch das Aussehen und Verhalten der Anwendung. Diese Dateien befinden sich im Skinverzeichnis. Sie können diese Dateien so wie normale HTML-Seiten in Ihrem Webeditor laden und ändern. Zum Ändern der Dateien sind keine HTML-Kenntnisse notwendig, bei größeren Änderungen sind diese allerdings vorteilhaft.

In jedem Fall sollten Sie sich Kopien der Originaldateien anlegen, bevor Sie Änderungen vornehmen.

Schritt-für-Schritt Anleitung:

  1. Im Basisverzeichnis Ihrer Anwendung finden Sie ein Verzeichnis mit dem Namen "skins/" in diesem Verzeichnis finden Sie alle derzeit installierten Skins.
  2. Um einen neuen Skin anzulegen kopieren Sie zunächst den Inhalt des Verzeichnisses "default/" inklusive seiner Unterverzeichnisse in ein neues Verzeichnis mit dem Namen Ihres Skins. Zum Beispiel "skins/meinskin/".
  3. Öffnen Sie die Datei "index.html" in einem Webeditor Ihrer Wahl. Sie können dazu auch Notepad bzw. unter Unix/Linux Emacs verwenden.
  4. Passen Sie Datei Ihren Wünschen an und speichern Sie Ihre Änderungen ab.
  5. Abschließend müssen Sie eine Konfigurationsdatei für Ihren Skin erstellen. Diese Datei enthält den Namen Ihres Skins, eine Beschreibung zum Autor. Sie können dazu die Datei "skins/default.config" als Vorlage verwenden. Kopieren Sie diese Datei unter einem neuen Namen. Zum Beispiel ""skins/meinskin.config".
  6. Diese Skindatei können Sie mit einem beliebigen Texteditor editieren. Öffnen Sie die Datei, ändern Sie die Angaben so, wie gewünscht. Achten Sie darauf, dass die Dateipfade korrekt sind. Speichern Sie anschließend Ihre Änderungen.

Tutorials zum Erstellen eigener Templates finden Sie auf der Smarty-Homepage unter: http://smarty.php.net

Templates und Skins konfigurieren

Wenn Sie nicht nur ein bereits existierendes Template editieren, sondern ein neues - oder vielleicht sogar einen neuen Skin - erstellen wollen, dann genügt es nicht, die Template-Dateien zu editieren. Sondern Sie müssen auch die Konfiguration der Templates und Skins verstehen und anwenden.

Dies ist jedoch sehr einfach und erschöpft sich in zwei Konfigurationsdateien. Eine davon für Ihre neuen Templates und die andere für Ihren neuen Skin.

Konfiguration von Skins

Im Folgenden ein einfaches Beispiel.

<SKIN_INFO>
	<NAME>mein Skin</NAME>
	<BESCHREIBUNG>das ist eine Beschreibung meines Skins</BESCHREIBUNG>
	<AUTOR>mein Name</AUTOR>
	<KONTAKT>meine Webseite</KONTAKT>
	<GRAFIK>%SKINDIR%mein_skin/data/preview.gif</GRAFIK>
	<DIRECTORY>mein_skin/</DIRECTORY>
</SKIN_INFO>

Die Syntax ist weitgehend selbsterklärend. Die Felder "Name", "Beschreibung", "Autor" und "Kontakt" sind Freitext. Für das Feld "Name" können Sie sich einen beliebigen Namen ausdenken, der Ihren Skin beschreibt. Ebenso beliebig ist das Feld "Beschreibung". Achten Sie darauf, dass als Whitespace nur Leerzeichen erlaubt sind. Sie können einen Zeilenumbruch bei Bedarf einfügen, indem Sie den Text "[br]" verwenden. Das Feld "Autor" sollte Ihren Namen enthalten und das Feld "Kontakt" sinnvollerweise eine Mail- oder Internetadresse, über welche man Sie erreichen und/oder Updates downloaden kann.

Das Feld "Grafik" gibt eine Vorschaugrafik an. Der Platzhalter %SKINDIR% bezieht sich auf das Verzeichnis, in welchem die Skins gespeichert sind und sollte stets angegeben werden. Die Grafik sollte vorzugsweise im GIF-, PNG- oder JPEG-Format gespeichert sein und etwa 300x300 Pixel groß sein.

Das Feld "Directory" muss stets angegeben werden. Es gibt an in welchem Verzeichnis der Skin gespeichert ist.

Konfiguration von Templates

Im Folgenden ein einfaches Beispiel.

<MY_TEMPLATE>
	<FILE>template.html</FILE>
	<STYLE>
		<0>style/default.css</0>
		<1>foo1/foo2.css</1>
		<MEIN_CSS>foo3/foo4.css</MEIN_CSS>
	</STYLE>
	<SCRIPT>
		<0>foo5/foo6.js</0>
		<MEIN_SCRIPT>foo7/foo8.js</MEIN_SCRIPT>
	</SCRIPT>
	<LANGUAGE>
		<0>guestbook</0>
		<1>admin</1>
	</LANGUAGE>
</MY_TEMPLATE>

Beachten Sie, dass "MY_TEMPLATE" als Identifier fungiert, welcher das Template identifiziert. Sie können diese Id in den Konfigurationsdateien Ihrer Plugins verwenden, um auf das Template zu verweisen. Der Text kann beliebig gewählt werden. Achten Sie jedoch darauf, dass die Id keine Sonderzeichen oder Leerzeichen enthält, mit einem Buchstaben beginnt und über die gesamte Anwendung hinweg eindeutig ist. Groß- und Kleinschreibung spielt keine Rolle.

Es gibt 4 Felder: "File", "Style", "Script" und "Language". Das Feld "File" gibt den Dateinamen an. Die restlichen Felder sind optional und dienen der Automatisierung.

Das Feld "Language" enthält Verweise auf eine oder mehrere Dateien, welche die Sprachinformationen für dieses Template enthalten. Beispielsweise bezieht sich der Wert "guestbook" auf die Datei "languages/XX/guestbook.config", wobei der Text "XX" automatisch vom System durch die vom Nutzer gewählte Sprache ersetzt wird. Zum Beispiel "de" für Deutsch beziehungsweise "en" für Englisch.

Das Feld "Style" kann mehrere Verweise auf Stylesheets enthalten. Ebenso enthält das Feld "Script" einen oder mehrere Verweise auf JavaScript-Dateien. Die angegebenen Dateien werden jeweils automatisch eingebunden, wenn das Template aufgerufen wird.

Hinweis: Ist in einem Skin ein erforderliches Template nicht definiert oder sind Eigenschaften dieses Templates ("Styles", "Script", "Languages") nicht erneut erklärt, so fällt das Programm automatisch auf den "Default"-Skin zurück.

Dies geschieht wie folgt.

  1. Fehlt im Skin ein Template, werden die Default-Einstellungen komplett verwendet.
  2. Existiert das Template, aber beispielsweise "Style" ist nicht definiert, dann wird dieser mit der "Style"-Definition des gleichnamigen Templates im Default-Skin überschrieben. Für "Language" und "Script" gilt dies analog.
  3. Existiert das Template und die Eigenschaft ist definiert, dann werden die definierten Eigenschaften mit denen des Default-Skins zusammengeführt.
    Dabei gilt:
    1. Alle numerischen Einträge werden stets angehängt. Das heißt: zum Beispiel die Einträge Style.0, Style.1 usw. aus dem Default-Skin werden übernommen und die Einträge Style.0, Style.1, Style.2 usw. aus dem neuen Skin werden an die Liste angehängt.
    2. Konkret benannte Einträge, wie zum Beispiel Style.Mein_Css aus dem Default-Skin, werden durch gleichnamige Einträge im neuen Skin ersetzt.

Dieses Verhalten mag zunächst unlogisch erscheinen, hat jedoch einen durchaus einen tieferen Sinn. Es erlaubt einzelne Stylesheets oder Scripts in einem neu erstellten Skin ganz gezielt auszutauschen. Gleichzeitig gestattet es aber auch einzelne Stylesheets oder Scripts von diesem Mechanismus auszuschließen. Beide Variante kommen vor und haben ihre Einsatzgebiete.

yana framework by:Homepage: Thomas Meyer, www.yanaframework.net