17.11 HTML_Menu 

HTML_Menu bietet Ihnen eine einfache Möglichkeit, Text-Menüs für eine Navigation automatisch erstellen zu lassen. Die Daten können aus einem mehrdimensionalen Array übernommen und auf verschiedene Arten dargestellt werden.

Ein kleines Beispiel finden Sie in Listing 17.25

$data=array ( 
1=>array ( 
   'title'=> 'Wir über uns', 
   'url'=>'/ueber.php', 
   'sub'=> array ( 
            11 => array ( 
                    'title'=> 'Das Team', 
                    'url'=>'/team.php', 
                  ) 
           ) 
   ), 
2=>array ( 
   'title'=> 'Produkte', 
   'url'=>'/produkte.php', 
   'sub'=> array ( 
            21 => array ( 
                    'title'=> 'PCs', 
                    'url'=>'/pcs.php', 
                  ), 
            22 => array ( 
                    'title'=> 'Apple', 
                    'url'=>'/apple.php', 
                    'sub'=> array ( 
                             221 => array( 
                                   'title'=> 'iBook', 
                                   'url'=>'/ibook.php' 
                                   ) 
                            ) 
                   ) 
            ) 
   ) 
); 
 
require_once ('HTML/Menu.php'); 
require_once ('HTML/Menu/DirectTreeRenderer.php'); 
 
$menu = new HTML_Menu($data); 
 
$renderer = new HTML_Menu_DirectTreeRenderer(); 
$menu->render($renderer, 'sitemap'); 
echo $renderer->toHtml();

Listing 17.25 Ausgabe eines Menüs mit PEAR::HTML_Menu

Wie Sie sehen, entfällt der Großteil dieses kleinen Scripts auf das Generieren der Daten. Die eigentliche Ausgabe des Menüs – in diesem Fall in der Darstellungsform »sitemap« – fällt recht kurz aus. Die Darstellung des Menüs im Browser sehen Sie in Abbildung 17.11.

Das Array, das zur Übernahme der Daten dient, ist folgendermaßen aufgebaut: Jedes Element muss über einen eigenen, eindeutigen Schlüssel ansprechbar sein. Das ist in diesem Fall über die Zahlen 1, 2, 3, 11, 21, 22 und 221 gelöst. Da diese Schlüssel nur intern genutzt werden, müssen sie auch nicht sonderlich aussagekräftig, dafür aber eindeutig sein.

Abbildung 17.11 Ausgabe des Menüs im Browser

Jeder Menüeintrag muss mindestens über die Array-Schlüssel 'title' und 'url' verfügen. Mit dem ersten wird der Text definiert, der im Menü ausgegeben wird, und der zweite legt die URL fest, auf die der Link verweisen soll.

Soll ein weiteres Untermenü eingeblendet werden, so benötigen Sie noch den Schlüssel 'src', der wiederum auf eine weitere Array-Struktur verweist.

Der Konstruktor HTML_Menu() bekommt das Array mit den Daten übergeben, die genutzt werden sollen. Danach wird ein neues Objekt der Klasse HTML_Menu_DirectTreeRenderer abgeleitet. Dieser Renderer erstellt nachfolgend die eigentliche Ausgabe.

Die Methode render(), die wiederum zum HTML_Menu-Objekt gehört, bekommt eine Referenz auf den Renderer sowie den Typ für die Ausgabe übergeben. Neben 'sitemap' sind auch noch andere Typen möglich, die Sie in Abbildung 17.12 finden.

Abbildung 17.12 Menü-Typen, die HTML_Menu erzeugen kann

Der Typ 'tree' erinnert stark an 'sitemp'. Allerdings unterscheidet er sich dadurch, dass nicht alle Menüpunkte aufgeblendet werden, wie das bei einer Sitemap der Fall ist. Hier werden nur die übergeordneten und die direkt nachfolgenden Punkte angezeigt.

Die Typen 'urhere', 'prevnext' und 'rows' werden durch einen anderen Renderer generiert. Hierzu müssen Sie die Datei HTML/Menu/DirectRende rer.php einbinden. Diese enthält die Klasse HTML_Menu_DirectRenderer, von der der Renderer abgeleitet werden muss.

Der Typ 'urhere' zeigt dem Benutzer an, wo er sich gerade befindet. Zusätzlich dazu werden die darüber liegenden Ebenen mit eingeblendet. In der Hierarchie tiefer liegende Elemente entfallen. Eine solche Navigation wird auch als »Breadcrumb-Navigation« bezeichnet.

'prevnext' ist eine Darstellungsweise, in der der Benutzer immer nur den direkten Vorgänger und den direkten Nachfolger in der Navigation zu sehen bekommt.

Den Typ 'rows' finde ich persönlich ein wenig gewöhnungsbedürftig. Er lehnt sich an eine Baumstruktur an; die einzelnen Elemente werden aber nicht eingerückt, sondern in Tabellenzeilen nebeneinander ausgegeben. Elemente der gleichen Hierarchieebene werden hierbei nebeneinander ausgegeben, und die verschiedenen Bäume sind daran zu erkennen, dass die Elemente untereinander stehen.

Für die Erstellung von Abbildung 17.12 war es notwendig, einige Elemente als »aktiv« zu markieren, dem Renderer also mitzuteilen, an welcher Stelle in der Hierarchie sich der Benutzer gerade aufhält.

Dazu ist die Methode forceCurrentUrl() in der Klasse HTML_Menu deklariert. Sie bekommt die URL der Seite, die aktiv sein soll, übergeben und markiert den Menüpunkt innerhalb der Navigation entsprechend.

Natürlich haben Sie auch die Möglichkeit, die einzelnen Einträge optisch zu verändern. Hierzu sind in den Renderern Methoden vorgesehen, mit denen die Gestaltungsvorlagen, also Templates, ausgetauscht werden können. Bei einem Template handelt es sich um einen HTML-Schnipsel, in den die Daten eingefügt werden, die auf dem Bildschirm ausgegeben werden sollen. Die Renderer kennen verschiedene Platzhalter, die dann durch die Text-Daten ersetzt werden können. {url} bezeichnet die URL, auf die ein Link verweist, und {title} steht für den Text, der als Beschriftung genutzt wird.

Der Tree-Renderer kennt drei unterschiedliche Methoden, mit denen die Templates verändert werden können. Die Methode setEntryTemplate() kann die Templates für die einzelnen Einträge verändern. Hierbei sind drei Arten von Einträgen vorgesehen, die über Konstanten angesprochen werden. Ein inaktiver Eintrag kann über die Konstante HTML_MENU_ENTRY_INACTIVE referenziert werden. HTML_MENU_ENTRY_ACTIVE verweist auf die Seite, auf der man sich gerade befindet. Alle Menüpunkte, die mit zu dem Pfad des aktuellen Elements gehören, also alles das, was in der Hierarchie direkt darüber liegt, wird mit HTML_MENU_ENTRY_ACTIVEPATH angesprochen.

setEntryTemplate() bekommt die Konstante jeweils zuerst übergeben, worauf dann der HTML-Code folgt, der definiert, wie der Eintrag zu formatieren ist.

$renderer->setEntryTemplate('HTML_MENU_ENTRY_ACTIVEPATH', 
                        '<a href="{url}"><b>{title}</b></a>');

Die Methode setItemTemplate() bekommt zwei Strings übergeben, die definieren, welcher Text vor und hinter jedem Eintrag ausgegeben werden soll. Mit setItemTemplate('->','<-') würde also jeder Eintrag – unabhängig von seinem Zustand – von -> und <- eingerahmt.

Die letzte Methode ist setLevelTemplate(). Auch sie bekommt zwei Konstanten übergeben. Diese rahmen jeweils eine Gruppe von Unterpunkten ein.

In der Klasse HTML_Menu_DirectRenderer sind ähnliche Methoden definiert. Auch hier gibt es eine Methode namens setEntryTemplate(), die zwei Parameter übergeben bekommt und einem Eintrag in einem bestimmten Zustand eine neue Formatierung zuweisen kann. Die Konstanten, die ich bei der setEntryTemplate()-Methode des Tree-Renderers erläutert habe, sind hier auch definiert. Sie beziehen sich auf die Nutzung des Typs 'rows'. Hierbei sollte auch erwähnt werden, dass die Klasse HTML_Menu_DirectRenderer auch die Menüstrukturen 'tree' und 'sitemap' unterstützt. Auch hier wird ein Baum ausgegeben, bei dem die Einrückungen allerdings mithilfe von Leerzeichen vorgenommen werden. Um diese Leerzeichen in einem Template platzieren zu können, ist der Platzhalter {indent} vorgesehen.

Zusätzlich zu diesen Konstanten sind noch die folgenden definiert: Bei Nutzung des Typs 'prevnext' kann das Template für den vorhergehenden Eintrag über die Konstante HTML_MENU_ENTRY_PREVIOUS definiert werden, und der Nachfolger kann über HTML_MENU_ENTRY_NEXT angesprochen werden. Um den aktiven Menüpunkt manipulieren zu können, verwenden Sie in diesem Fall die Konstante HTML_MENU_ENTRY_UPPER. Nutzen Sie den Typ 'urhere', kann der aktive Menüpunkt über HTML_MENU_ENTRY_ACTIVE referenziert werden. Die Vorgänger werden alle über HTML_MENU_ENTRY_BREADCRUMB angesprochen. Hier ist es also nicht möglich, verschiedene Hierarchieebenen zu unterscheiden.

Da die Menüstrukturen, die HTML_Menu_DirectRenderer ausgibt, immer in Tabellen zusammengefasst werden, können Sie natürlich auch auf die dafür vorgesehenen Strukturen zugreifen. Die Methode setMenuTemplate() bekommt zwei Strings übergeben, die als erstes und letztes Element bei der Ausgabe der Tabelle genutzt werden. Hier ist also jeweils das öffnende und schließende <table>-Tag enthalten. Anfang und Ende einer Zeile können mit setRowTemplate() definiert werden. Auch diese Methode bekommt zwei Strings übergeben. Die <td>-Tags, die auch für eine Tabelle benötigt werden, gehören zu den Element-Templates.