Zend_Navigation: menu z ikonkami

by Mateusz Tymek — on Zend Framework, PHP

Head's up! This post was written back in 2009 and is very likely to contain outdated information.

Zend Framework pozwala na łatwe wyświetlenie systemu nawigacji przy pomocy helpera Zend_View_Helper_Navigation_Menu:

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

Zgodnie z tym co możemy wyczytać w manualu, powyższy kod wygeneruje menu oparte na tagach <ul> i <li>. W jaki sposób otrzymać coś bardziej skomplikowanego, na przykład menu z ikonami przy każdej pozycji?

Na potrzeby przykładu wyobraźmy sobie menu zdefiniowane w następujący sposób:

<?xml version="1.0" encoding="UTF-8"?>
<configdata>
    <nav>
        <id>main</id>
        <uri>/</uri>
        <pages>

            <index>
                <label>Podsumowanie</label>
                <controller>index</controller>
                <action>index</action>
                <icon>information.png</icon>
            </index>

            <articles>
                <label>Artykuły</label>
                <controller>articles</controller>
                <action>index</action>
                <icon>articles.png</icon>
            </articles>

            <categories>
                <label>Kategorie</label>
                <controller>categories</controller>
                <action>index</action>
                <icon>categories.png</icon>
            </categories>

            <users>
                <label>Użytkownicy</label>
                <controller>users</controller>
                <action>index</action>
                <icon>users.png</icon>
            </users>
        </pages>
    </nav>
</configdata>

Każda pozycja menu ma przyporządkowaną ikonę (nazwę pliku PNG). Obiekt klasy Zend_Navigation tworzymy według instrukcji obsługi:

$config = new Zend_Config_Xml(APPLICATION_PATH . '/configs/navigation.xml', 'nav');
$navigation = new Zend_Navigation($config);

Aby wyświetlić te ikony trzeba utworzyć nowy pomocnik widoku. Nie musimy budować go od podstaw - wykorzystamy klasę Zend_View_Helper_Navigation_Menu jako bazę:

<?php
// IconMenu.php
class Zend_View_Helper_IconMenu extends Zend_View_Helper_Navigation_Menu
{
    protected $_iconPath = '/images/icons';

    public function iconMenu(Zend_Navigation_Container $container = null)
    {
        if (null !== $container) {
            $this->setContainer($container);
        }

        return $this;
    }

    public function htmlify(Zend_Navigation_Page $page)
    {
        // get label and title for translating
        $label = $page->getLabel();
        $title = $page->getTitle();

        // translate label and title?
        if ($this->getUseTranslator() && $t = $this->getTranslator()) {
            if (is_string($label) && !empty($label)) {
                $label = $t->translate($label);
            }
            if (is_string($title) && !empty($title)) {
                $title = $t->translate($title);
            }
        }

        // get attribs for element
        $attribs = array(
            'id'     => $page->getId(),
            'title'  => $title,
            'class'  => $page->getClass()
        );

        // does page have a href?
        if ($href = $page->getHref()) {
            $element = 'a';
            $attribs['href'] = $href;
            $attribs['target'] = $page->getTarget();
        } else {
            $element = 'span';
        }

        // dodanie ikonki
        if (null !== $page->icon)
        {
            $icon = '<img src="'.$this->view->baseUrl().$this->_iconPath.'/'.$page->icon.'" alt="" /> ';
        } else {
            $icon = '';
        }

        return '<' . $element . $this->_htmlAttribs($attribs) . '>'
             . $icon
             . $this->view->escape($label)
             . '</' . $element . '>';
    }
}

Z tego kodu najbardziej istotna jest metoda htmlify() która generuje kod HTML danego odnośnika. Skopiowałem ją w całości z klasy bazowej, a następnie wstawiłem kod który dodaje ikonkę (oznaczony komentarzem). Zmienna $_iconPath określa lokalizację ikon na serwerze - w moim przypadku jest to www.domena.tld/images/icons.

Cały kod (plik IconMenu.php) trzeba umieścić w odpowiednim katalogu, aby był dostępny dla klasy Zend_View (np application/view/helpers). Następnie można już wygenerować menu w skrypcie widoku:

<?php echo $this->navigation()->iconMenu(); ?>

Efekt (po dodaniu odpowiednich stylów CSS):


comments powered by Disqus