07 ago2011

Adicionando páginas às páginas criadas com Zend Navigation

por Matias Rezende

Fala galera!!!

Tudo certo? Hoje temos o terceiro artigo/tutorial da série sobre o Zend Navigation. Já viu o primeiro e o segundo da série? É bom começar por lá antes de iniciarmos aqui.

Muitas vezes temos um site/sistema que precisa montar um menu e um sub-menu, que depende da página (menu) selecionado. Com o Zend Navigation isto é muito simples de fazer. Vejamos qual a estrutura das páginas que teremos:

  • Início
  • A Empresa
    • História
    • Missão
    • Visão
  • Notícias
    • Esportes
    • Entretenimento
    • Tecnologia
  • Contato

Então, vamos adicionar as sub-paginas ao menu já existente. Para isto, cada objeto de página deve receber as sub-páginas, através do atributo page. Vejamos o código como ficou.

;; Página Início
home.label = "Início"
home.controller = "index"
home.action = "index"
home.class = "home"
home.title = "Página Inicial"
;; Página A empresa
empresa.label = "A empresa"
empresa.controller = "empresa"
empresa.action = "index"
empresa.title = "Informações sobre a empresa"
        ;; História
        empresa.pages.historia.label = "História"
        empresa.pages.historia.controller = "empresa"
        empresa.pages.historia.action = "historia"
        empresa.pages.historia.title = "História da empresa"
        ;; Missão
        empresa.pages.missao.label = "Missão"
        empresa.pages.missao.controller = "empresa"
        empresa.pages.missao.action = "missao"
        empresa.pages.missao.title = "Missão da empresa"
        ;; Visão
        empresa.pages.visao.label = "Visão"
        empresa.pages.visao.controller = "empresa"
        empresa.pages.visao.action = "visao"
        empresa.pages.visao.title = "Visão da empresa"
;; Página Notícias
noticias.label = "Notícias"
noticias.controller = "noticias"
noticias.action = "index"
noticias.title = "Notícias sobre o mercado"
        ;; Categoria Esportes
        noticias.pages.esportes.label = "Esportes"
        noticias.pages.esportes.controller = "noticias"
        noticias.pages.esportes.action = "esportes"
        noticias.pages.esportes.title = "Notícias sobre Esportes"
        ;; Categoria Entretenimento
        noticias.pages.entretenimento.label = "Entretenimento"
        noticias.pages.entretenimento.controller = "noticias"
        noticias.pages.entretenimento.action = "entretenimento"
        noticias.pages.entretenimento.title = "Notícias sobre Entretenimento"
        ;; Categoria Tecnologia
        noticias.pages.tecnologia.label = "Tecnologia"
        noticias.pages.tecnologia.controller = "noticias"
        noticias.pages.tecnologia.action = "tecnologia"
        noticias.pages.tecnologia.title = "Notícias sobre Tecnologia"
;; Página Contato
contato.label = "Contato"
contato.controller = "contato"
contato.action = "index"
contato.title = "Entre em contato conosco"

Desta forma, teremos o seguinte HTML gerado.

<ul class="navigation">
    <li class="active">
        <a title="Página Inicial" class="home" href="/navigation/public/">Início</a>
    </li>
    <li>
        <a title="Informações sobre a empresa" href="/navigation/public/empresa">A empresa</a>
        <ul>
            <li>
                <a title="História da empresa" href="/navigation/public/empresa/historia">História</a>
            </li>
            <li>
                <a title="Missão da empresa" href="/navigation/public/empresa/missao">Missão</a>
            </li>
            <li>
                <a title="Visão da empresa" href="/navigation/public/empresa/visao">Visão</a>
            </li>
        </ul>
    </li>
    <li>
        <a title="Notícias sobre o mercado" href="/navigation/public/noticias">Notícias</a>
        <ul>
            <li>
                <a title="Notícias sobre Esportes" href="/navigation/public/noticias/esportes">Esportes</a>
            </li>
            <li>
                <a title="Notícias sobre Entretenimento" href="/navigation/public/noticias/entretenimento">Entretenimento</a>
            </li>
            <li>
                <a title="Notícias sobre Tecnologia" href="/navigation/public/noticias/tecnologia">Tecnologia</a>
            </li>
        </ul>
    </li>
    <li>
        <a title="Entre em contato conosco" href="/navigation/public/contato">Contato</a>
    </li>
</ul>

Certo, tudo funcionou. Mas a questão das categorias tá estranho, não? Imaginem ter que criar uma action para cada categoria de notícias, ou então capturar tudo em um método __call()? Feio, né? Vamos mudar este menu, para que o nome da categoria seja passada por parâmetro para a action index. Ficaria desta forma:

        ;; Categoria Esportes
        noticias.pages.esportes.label = "Esportes"
        noticias.pages.esportes.controller = "noticias"
        noticias.pages.esportes.action = "index"
        noticias.pages.esportes.title = "Notícias sobre Esportes"
        noticias.pages.esportes.params.categoria = "esportes"
        ;; Categoria Entretenimento
        noticias.pages.entretenimento.label = "Entretenimento"
        noticias.pages.entretenimento.controller = "noticias"
        noticias.pages.entretenimento.action = "index"
        noticias.pages.entretenimento.title = "Notícias sobre Entretenimento"
        noticias.pages.entretenimento.params.categoria = "entretenimento"
        ;; Categoria Tecnologia
        noticias.pages.tecnologia.label = "Tecnologia"
        noticias.pages.tecnologia.controller = "noticias"
        noticias.pages.tecnologia.action = "index"
        noticias.pages.tecnologia.title = "Notícias sobre Tecnologia"
        noticias.pages.tecnologia.params.categoria = "tecnologia"

Teríamos com este código um sub-menu assim:

<li>
        <a title="Notícias sobre o mercado" href="/navigation/public/noticias">Notícias</a>
        <ul>
            <li>
                <a title="Notícias sobre Esportes" href="/navigation/public/noticias/index/categoria/esportes">Esportes</a>
            </li>
            <li>
                <a title="Notícias sobre Entretenimento" href="/navigation/public/noticias/index/categoria/entretenimento">Entretenimento</a>
            </li>
            <li>
                <a title="Notícias sobre Tecnologia" href="/navigation/public/noticias/index/categoria/tecnologia">Tecnologia</a>
            </li>
        </ul>
    </li>

Legal?? Mais ou menos, né? A URL ficou bem estranha… Vamos adicionar uma rota (Zend Route) para que a URL fique mais amigável. Mas isto é coisa para o próximo artigo.

Comentem!!!

Deixe um Comentário

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>