1 de junho de 2011

JSF 2.0: Componentes PrimeFaces 2.2.1 - Parte 4

Continuando com a série de postagens de componentes PrimeFaces 2.2.1, hoje vamos ver a utilização de layout e menus! Teremos menus para todas as necessidades ;)
Lembrando, que na postagem anterior vimos alguns componentes do tipo dialog, confirmDialog, entre outros: clique aqui para acessar.
Para esse projeto, vamos precisar de alguns ícones... estou disponibilizando-os aqui, mas se quiser use seus próprios ícones: baixar aqui.

Estrutura do projeto
Caso não saiba como montar a estrutura do projeto veja aqui.
Depois de pronto o projeto fica com essa estrutura:


Começando...
Nossa tela final ficará assim:


Nessa imagem temos o layout e os menus do PrimeFaces...

Nesse exemplo vamos usar o layout de tela inteira, e aproveitando este layout vamos encaixando os menus nele:

Código-fonte do componente:
<p:layout fullPage="true">
    <p:layoutUnit position="top" height="50">
    </p:layoutUnit>
    <p:layoutUnit position="left" width="180" header="Menu" collapsible="true" >
    </p:layoutUnit>
    <p:layoutUnit position="center" header="Sistema">
    </p:layoutUnit>
</p:layout>
Veja que quem cria as divisões é o componente layoutUnit, aconselho ver o link acima para ver as outras possibilidades de uso do layout.

Agora começamos com os menus, estes pouca coisa diferem entre si...

O primeiro que vamos usar é o breadCrumb, ele é um menu na horizontal:


Código-fonte do componente:
<p:breadCrumb>
    <p:menuitem value="Home" url="http://www.google.com.br" />
    <p:menuitem value="Documentos" url="#" />
    <p:menuitem value="Musicas" url="#" />
    <p:menuitem value="Imagens" url="#" />
    <p:menuitem value="Zip" url="#" />
</p:breadCrumb>
Veja que ele é composto por menuitem... na realidade todos os menus do PrimeFaces  são compostos de menuitem, por isso nos outros menus vamos os mesmos do exemplo acima. Nos menus quem faz a diferença é o componente-pai, no caso acima é a tag breadCrumb, o detalhe é que pra esse componente ele não aceita ícones no menuitem.
Obs: pode-se abrir dialogs(visto na parte 3) com os menuitem, para isso use a propriedade onclick deste...

O outro menu é na vertical, este tem também submenus, e com a diferença que ele aceita icones nos menuitem:


Obs: essa é uma das formas de usar ele, no link do menu tem outras formas bem interessantes de menu na posição vertical.
Código-fonte do componente:
<p:menu style="width: 98%">
    <p:submenu label="Contas...">
        <p:menuitem value="... a pagar" url="#" />
        <p:menuitem value="... a receber" url="#" />
    </p:submenu>
    <p:submenu label="Outros">
        <p:menuitem value="Home" url="http://www.google.com.br" />
        <p:menuitem value="Documentos" url="#" />
        <p:menuitem value="Musicas" url="#" />
        <p:menuitem value="Imagens" url="#" />
        <p:menuitem value="Zip" url="#" />
    </p:submenu>
    <p:submenu>
        <p:menuitem value="Sair" url="#" icon="ui-icon ui-icon-power" />
    </p:submenu>
</p:menu>
veja que eu defini o style na tag menu, fiz isto pois quero que este menu se adapte ao layout que ele se encontra e conforme redimensionar a janela, ele também se redimensionará (isso também pode ser feito em outros componentes que tenham a propriedade style)

O próximo menu é um menubar, na horizontal que também aceita ícones, mas este permite que tenha submenus:


Código-fonte do componente:
<p:menubar>
    <p:submenu label="Contas...">
        <p:menuitem value="... a pagar" url="#" />
        <p:menuitem value="... a receber" url="#" />
    </p:submenu>
    <p:submenu label="Outros">
        <p:menuitem value="Home" url="http://www.google.com.br" />
        <p:menuitem value="Documentos" url="#" />
        <p:menuitem value="Musicas" url="#" />
        <p:menuitem value="Imagens" url="#" />
        <p:menuitem value="Zip" url="#" />
    </p:submenu>
    <p:menuitem value="Sair" url="#" icon="ui-icon ui-icon-power" />
</p:menubar>

Agora pra quem não tem espaço na página, temos um botão menu que abre na posição vertical e também aceita ícones... que é o menuButton.
Fechado:

Clicado:


Código-fonte do componente:
<h:form>
    <p:menuButton value="Menu...">
        <p:menuitem value="Home" url="http://www.google.com.br" />
        <p:menuitem value="Documentos" url="#" />
        <p:menuitem value="Musicas" url="#" />
        <p:menuitem value="Imagens" url="#" />
        <p:menuitem value="Zip" url="#" />
        <p:menuitem value="Sair" url="#" icon="ui-icon ui-icon-power" />
    </p:menuButton>
</h:form>

Agora vamos para os menus bonitinhos e queridinhos com imagens!
Primeiramente vamos colocar aquelas imagens que eu passei lá no início, dentro do projeto... no meu caso eu estou colocando elas dentro do projeto de forma organizada, ou seja... dentro de Páginas Web, crie um novo diretório com o nome de imagens e dentro deste diretório coloque as imagens (.png).

Vamos começar pelo dock que funciona como o menu do Mac OS:


Obs: ele é um menu um pouco mais limitado, ou fica na parte superior da página ou na parte inferior da página (padrão)... mas dá um efeito muito legal :)
Código-fonte do componente:
<p:dock>
    <p:menuitem value="Home" url="http://www.google.com.br" icon="/imagens/home.png" />
    <p:menuitem value="Documentos" url="#" icon="/imagens/documentos.png" />
    <p:menuitem value="Musicas" url="#" icon="/imagens/musicas.png" />
    <p:menuitem value="Imagens" url="#" icon="/imagens/imagens.png" />
    <p:menuitem value="Zip" url="#" icon="/imagens/zip.png" />
</p:dock>

O outro é o stack, esse é outro menu com imagens, mas bem intessante... eu peguei a imagem padrão dele no site do PrimeFaces pra usar como base, mas você pode colocar a imagem que quiser.
Fechado:
Clicado:


Vamos as limitações... ele é um menu que aceita poucos menuitem, pois como pode ver na imagem acima, ele vai pendendo pro lado direito (deve ser o peso dos icones hahaha), e outro detalhe... ele só fica no canto inferior direito da página... pois é, não dá pra colocá-lo em qualquer lugar!
Código-fonte do componente:
<p:stack icon="/imagens/stack.png">
    <p:menuitem value="Home" url="http://www.google.com.br" icon="/imagens/home.png" />
    <p:menuitem value="Documentos" url="#" icon="/imagens/documentos.png" />
    <p:menuitem value="Musicas" url="#" icon="/imagens/musicas.png" />
    <p:menuitem value="Imagens" url="#" icon="/imagens/imagens.png" />
    <p:menuitem value="Zip" url="#" icon="/imagens/zip.png" />
</p:stack>

Bom... esses são os menus que eu selecionei para falar hoje do PrimeFaces, quando a esses dois últimos por serem mais limitados até coloquei-os fora do layout da página, para que funcionem melhor...

Enfim, o código fonte completo:
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui">
    <h:head>
        <title>Primefaces - Parte 4</title>
    </h:head>
    <h:body>
        <p:layout fullPage="true">
            <p:layoutUnit position="top" height="50">
                <p:breadCrumb>
                    <p:menuitem value="Home" url="http://www.google.com.br" />
                    <p:menuitem value="Documentos" url="#" />
                    <p:menuitem value="Musicas" url="#" />
                    <p:menuitem value="Imagens" url="#" />
                    <p:menuitem value="Zip" url="#" />
                    <p:menuitem value="Sair" url="#" icon="ui-icon ui-icon-power" />
                </p:breadCrumb>
            </p:layoutUnit>
            <p:layoutUnit position="left" width="180" header="Menu" collapsible="true" >
                <p:menu style="width: 98%">
                    <p:submenu label="Contas...">
                        <p:menuitem value="... a pagar" url="#" />
                        <p:menuitem value="... a receber" url="#" />
                    </p:submenu>
                    <p:submenu label="Outros">
                        <p:menuitem value="Home" url="http://www.google.com.br" />
                        <p:menuitem value="Documentos" url="#" />
                        <p:menuitem value="Musicas" url="#" />
                        <p:menuitem value="Imagens" url="#" />
                        <p:menuitem value="Zip" url="#" />
                    </p:submenu>
                    <p:submenu>
                        <p:menuitem value="Sair" url="#" icon="ui-icon ui-icon-power" />
                    </p:submenu>
                </p:menu>
            </p:layoutUnit>
            <p:layoutUnit position="center" header="Sistema">
                <p:menubar>
                    <p:submenu label="Contas...">
                        <p:menuitem value="... a pagar" url="#" />
                        <p:menuitem value="... a receber" url="#" />
                    </p:submenu>
                    <p:submenu label="Outros">
                        <p:menuitem value="Home" url="http://www.google.com.br" />
                        <p:menuitem value="Documentos" url="#" />
                        <p:menuitem value="Musicas" url="#" />
                        <p:menuitem value="Imagens" url="#" />
                        <p:menuitem value="Zip" url="#" />
                    </p:submenu>
                    <p:menuitem value="Sair" url="#" icon="ui-icon ui-icon-power" />
                </p:menubar>
                <h:form>
                    <p:menuButton value="Menu...">
                        <p:menuitem value="Home" url="http://www.google.com.br" />
                        <p:menuitem value="Documentos" url="#" />
                        <p:menuitem value="Musicas" url="#" />
                        <p:menuitem value="Imagens" url="#" />
                        <p:menuitem value="Zip" url="#" />
                        <p:menuitem value="Sair" url="#" icon="ui-icon ui-icon-power" />
                    </p:menuButton>
                </h:form>
            </p:layoutUnit>
        </p:layout>

        <p:dock>
            <p:menuitem value="Home" url="http://www.google.com.br" icon="/imagens/home.png" />
            <p:menuitem value="Documentos" url="#" icon="/imagens/documentos.png" />
            <p:menuitem value="Musicas" url="#" icon="/imagens/musicas.png" />
            <p:menuitem value="Imagens" url="#" icon="/imagens/imagens.png" />
            <p:menuitem value="Zip" url="#" icon="/imagens/zip.png" />
        </p:dock>

        <p:stack icon="/imagens/stack.png">
            <p:menuitem value="Home" url="http://www.google.com.br" icon="/imagens/home.png" />
            <p:menuitem value="Documentos" url="#" icon="/imagens/documentos.png" />
            <p:menuitem value="Musicas" url="#" icon="/imagens/musicas.png" />
            <p:menuitem value="Imagens" url="#" icon="/imagens/imagens.png" />
            <p:menuitem value="Zip" url="#" icon="/imagens/zip.png" />
        </p:stack>

    </h:body>
</html>

Por hoje, ficamos por aqui! Ao final da série de componentes do PrimeFaces, crio a postagem de como usar o layout do PrimeFaces com os templates do Facelets.!

:)

16 comentários:

  1. Muito bem Andii, como sempre com ótimas contribuições. Parabéns. Bjim!

    ResponderExcluir
  2. Parabéns seu blog está nos meus favoritos. Ingressei no aprendizado do JSF e tem sido muitoooooo útil.

    ResponderExcluir
  3. Obrigada! Fico feliz por estar contribuindo para seu aprendizado :D

    ResponderExcluir
  4. Andii, gostaria de saber como dimensionar a janela do submenu. Tenho um sub-menu e alguns menuitems que a janela nao dimensiona para o tamanho total do label, e quebra o label em 2 linhas.
    Voce sabe como corrigir isto ?

    ResponderExcluir
  5. Olá Carlos, pelo o que eu entendi vc teria que dimensionar o menu/menubar, não sei o que está usando, mas vc redimensionando o componente-pai o submenu se adapta a ele, caso não funcione tente com css.

    ResponderExcluir
  6. Parabéns pelo blog. Uma ótima referencia.

    ResponderExcluir
  7. Andiii.. eu te adoro!!! ahuahauhaua li só as duas primeiras linhas de teu post até o momento e achei excelente a dica de layout, daqui pra frente a imaginação é o limite né.. valeu pela dica!!!

    ResponderExcluir
  8. Hahahaha obrigada pela visita DarkSHare® 2008©, volte sempre :)

    ResponderExcluir
  9. bom post. Obrigado.

    Aproveito esta oportunidade para consultr NEXT:

    Estou estudando primefaces, e só quero criar um menu com layout similar como este no post para a minha candidatura, eu tenho isso quase pronto, eu só preciso de links para páginas ATRAVÉS p: commandButton, que estão localizados na região central da layout, como seria a melhor maneira de ligar as páginas do aplicativo?. A idéia é descongstionar o menu e criar várias p: diálogo em uma única página da index.xhtml index.xhtml mas commadbutton1 o link para o seu p1.xhtml de diálogo localizada na região central do layout, commadbutton2 para p2.xhtml com diálogo, localizado na região central do layout. a aplicação é muito robusta, assim que eu estou procurando otimizado e encontrar a melhor maneira de fazer o menu. bem essa é a idéia geral. Obrigado pela sua atenção. receber sugestões

    ResponderExcluir
  10. Olá amigo, estou com problemas ao executar uma action do componente dentro do layout, já testei sem ele e funiona perfeitamente! Poderia me dar alguma dica?

    Muito obrigado!

    ResponderExcluir
    Respostas
    1. Tente deixar o dialog fora do layout... vc está usando facelets também?

      Excluir
  11. Ola andii.brunetta teria como disponibilizar o codigo fonte para download?

    ResponderExcluir
  12. andii ótimo post.

    Para mim aparece apenas Sistemas as outras divisões já tentei de várias maneiras e não consegui. tem algo especial?
    Estou utilizando JSF 2.2.9 e Primefaces 5.1

    ResponderExcluir

Deixe seu comentário... ;)