Hier geben wir Einblicke in das Unternehmen, Gedanken, How-Tos, Wissenswertes und News, die sich aus der Programmierung und Projekten ergeben. Auch unsere Open Source Aktivitäten begleiten wir hier.

Corporate Blog der prooph software GmbH

Zend Framework 2 Untermenü - Tutorial 3

Zend Framework 2 Untermenü - Tutorial 3

Auf Anregung eines Lesers möchte ich den dritten Teil meiner ZF2 Navigation Tutorial Reihe der Erstellung spezieller Menüformen widmen. Genauer eingehen werde ich auf Breadcrumbs-Navigationen und die Ausgabe von Untermenüs bzw. Teilzweigen einer Navigation mit dem Zend Framework 2.

Ein Untermenü erstellen

Auch dieser Teil des Tutorials beginnt mit der Konfiguration von Seiten innerhalb einer Navigation. Bisher habe ich nur gezeigt, wie wir eindimensionale Menüs konfigurieren können, möglich sind jedoch auch komplexe mehrdimensionale Strukturen. Jeder Page in der Navigation lassen sich weitere Pages über den gleichnamigen Schlüssel zuordnen.

'navigation' => array(
    'application' => array(
        'home' => array(
            'label' => 'home',
            'route' => 'home',
        ),            
        'freelancer' => array(
            'label' => 'Freelancer',
            'route' => 'application/default',
            'controller' => 'freelancer',
            'action' => 'index',
            'pages' => array(                    
                'about_me' => array(
                    'label' => 'Über mich',
                    'route' => 'application/default',
                    'controller' => 'freelancer',
                    'action' => 'aboutme',
                    'pages' => array(
                        'job' => array(
                            'label' => 'beruflich',
                            'route' => 'application/default',
                            'controller' => 'freelancer',
                            'action' => 'job',
                        ),
                        'interests' => array(
                            'label' => 'Hobbys',
                            'route' => 'application/default',
                            'controller' => 'freelancer',
                            'action' => 'interests'
                        )
                    )
                )                    
            )
        ),                        
    ),
),

Die Pages der Untermenüs können genauso konfiguriert werden wie die Hauptseiten. In dem Beispiel wird ein Menü mit drei Ebenen erstellt. Das HTML-Markup beim Aufruf des Menu ViewHelpers sieht dann so aus:

<ul class="navigation">
    <li class="active">
        <a href="/">home</a>
    </li>
    <li>
        <a href="/application/freelancer/index">Freelancer</a>
        <ul>
            <li>
                <a href="/application/freelancer/aboutme">Über mich</a>

                <ul>
                    <li>
                        <a href="/application/freelancer/job">beruflich</a>
                    </li>
                    <li>
                        <a href="/application/freelancer/interests">Hobbys</a>
                    </li>
                </ul>

            </li>
        </ul>
    </li>
</ul>

Breadcrumbs Navigation

Breadcrumbs bilden einen Pfad in der Navigation ab. Der Besucher unserer Webseite navigiert z.B. auf die Seite Hobbys und sollte als Pfad dann Freelancer > Über mich > Hobbys angezeigt bekommen. So kann sich der Besucher wie durch eine Verzeichnisstruktur klicken, weiß immer genau, wo er sich befindet und kann ein oder mehrere Schritte zurückgehen, um eine andere Abbiegung zu nehmen und somit einen neuen Pfad beschreiten. Breadcrumbs mit dem Zend Framework 2 zu erstellen, ist ganz einfach, denn es gibt dafür bereits einen eigenen ViewHelper, den wir über den Navigation ViewHelper aufrufen können.

<?php 
    echo $this->navigation('app_navigation')->breadcrumbs()->setMinDepth(0); 
?>

Ich habe an den Breadcrumbs ViewHelper auch gleich noch den Aufruf setMinDepth(0) angehängt, damit die Breadcrumbs Navigation auch angezeigt wird, wenn ich mich auf einer Hauptseite befinde. Dies ist standardmäßig nicht der Fall. Durch das Fluent Interface – alle Methoden geben das Objekt zurück, dem sie angehören – wird nach Setzen der Mindesttiefe wieder die __toString()-Methode des Breadcrumbs-ViewHelpers aufgerufen, ausgelöst durch das echo am Anfang der Zeile. Der ViewHelper bietet noch weitere Anpassungsmöglichkeiten, nützlich ist z.B. auch, dass wir das Trennzeichen zwischen den Breadcrumbs im selben Zug anpassen können.

<?php 
echo $this->navigation('app_navigation')
    ->breadcrumbs()
    ->setMinDepth(0)
    ->setSeparator('&nbsp;&Gt;&nbsp;'); 
?>

Rufen wir an dieser Stelle eine Unterseite auf, erscheint jedoch immer noch keine Breadcrumbs-Navigation. Was läuft falsch? Der Übersichtlichkeit halber habe ich in der gezeigen Navigations-Konfiguration das Setzen einer speziellen Page Klasse unterschlagen. Um mein Beispiel jedoch nachvollziehen zu können, müssen wir dies jetzt nachholen. Hier nun die vollständige Konfiguration:

'navigation' => array(
    'application' => array(
        'home' => array(
            'label' => 'home',
            'route' => 'home',
        ),            
        'freelancer' => array(
            'label' => 'Freelancer',
            'route' => 'application/default',
            'controller' => 'freelancer',
            'action' => 'index',
            'type' => 'Application\Mvc\Navigation\Page\DefaultRoute',
            'pages' => array(                    
                'about_me' => array(
                    'label' => 'Über mich',
                    'route' => 'application/default',
                    'controller' => 'freelancer',
                    'action' => 'aboutme',
                    'type' => 'Application\Mvc\Navigation\Page\DefaultRoute',
                    'pages' => array(
                        'job' => array(
                            'label' => 'beruflich',
                            'route' => 'application/default',
                            'controller' => 'freelancer',
                            'action' => 'job',
                            'type' => 'Application\Mvc\Navigation\Page\DefaultRoute',
                        ),
                        'interests' => array(
                            'label' => 'Hobbys',
                            'route' => 'application/default',
                            'controller' => 'freelancer',
                            'action' => 'interests',
                            'type' => 'Application\Mvc\Navigation\Page\DefaultRoute',
                        )
                    )
                )                    
            )
        ),                        
    ),
),

Ich habe nun in der Konfiguration jeder Page meine eigene Page-Klasse zugeordnet. Warum das notwendig ist, habe ich im zweiten Teil meiner Tutorial Reihe erläutert. Kurz zusammengefasst liegt es daran, dass ich für das Routing die Standardroute der Zend Framework 2 Skeleton Application verwende und über meine eigene Page-Klasse sicherstelle, dass die Navigation die aktive Seite innerhalb meines Menüs ermitteln kann. Ohne diese Funktionalität kann die Breadcrumbs-Navigation nicht den aktuellen Pfad ausgeben. Rufen wir nach dieser Anpassung die Seite /application/freelancer/interests auf, finden wir folgendes Markup im Quelltext unserer HTML-Seite:

<a href="/application/freelancer/index"
    >Freelancer</a>&nbsp;&Gt;&nbsp;<a href="/application/freelancer/aboutme"
                   >Über mich</a>&nbsp;&Gt;&nbsp;Hobbys

Aktives Untermenü anzeigen

Auch der Menu ViewHelper bietet die Möglichkeit, den Fokus auf das aktive Untermenü in der Navigation zu legen, was bei größeren Menüs durchaus sinnvoll eingesetzt werden kann.

<?php echo $this->navigation('app_navigation')->menu()->renderSubMenu(); ?>

Mit dieser Codezeile im Layout erzielen wir, dass nur noch der aktive Teil der Navigation in die Seite gerendert wird. Rufen wir wieder die URL /application/freelancer/interests auf, sehen wir ausschließlich die beiden Untermenüpunkte beruflich und Hobbys.

<ul class="navigation">
    <li>
        <a href="/application/freelancer/job">beruflich</a>
    </li>
    <li class="active">
        <a href="/application/freelancer/interests">Hobbys</a>
    </li>
</ul>

renderSubMenu() ruft intern renderMenu() auf und übergibt der Methode einige vordefinierte Parameter, um das aktive Untermenü ausgeben zu lassen. Wenn wir eine angepasste Ausgabe wünschen – zum Beispiel auch den Oberpunkt des Submenus anzeigen wollen – dann können wir auch direkt renderMenu() aufrufen und die Ausgabe beeinflussen.

<?php 
echo $this->navigation('app_navigation')
    ->menu()
    ->renderMenu(
        /* [optional] container with pages */null, 
        array(
            'renderParents' => true,
            'minDepth' => 1
        )
    ); 
?>
<ul class="navigation">
    <li class="active">
        <a href="/application/freelancer/aboutme">Über mich</a>
        <ul>
            <li>
                <a href="/application/freelancer/job">beruflich</a>
            </li>
            <li class="active">
                <a href="/application/freelancer/interests">Hobbys</a>
            </li>
        </ul>
    </li>
</ul>

Die hier gezeigten Beispiele für Untermenüs sind nur ein Ausschnitt der Möglichkeiten, die allein die ViewHelper Zend\View\Helper\Navigation\Menu und Zend\View\Helper\Navigation\Breadcrumbs mitbringen. Für weitere Optionen und auch weitere ViewHelper lohnt sich ein Blick in die entsprechenden Klassen. Die Methoden sind gut kommentiert und meist auch selbsterklärend. Wem die Möglichkeiten von Zend\View\Helper\Navigation noch nicht reichen, dem empfehle ich Teil 4 "Dynamische Navigation" meiner Zend Framework 2 Navigation Tutorial Reihe.

Sie suchen einen Software Dienstleister für Ihr Projekt: Projektanfrage stellen

Blog Artikel mit ähnlichen Themen