15 de maio de 2011

JSF 2.0: Componentes PrimeFaces 2.2.1 - Parte 2

Bom lá vamos para a segunda postagem sobre componentes PrimeFaces 2.2.1, caso não tenha visto a primeira parte: veja aqui, nessa postagem eu vou tratar mais a parte de painéis.

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


Quando chegar a hora eu explico de onde pegar os .jpg que estão dentro de Páginas Web. Como na outra postagem iremos apenas usar a página index.

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


Assim como na postagem anterior, aparentemente não tem nada de mais, mas novamente engana-se quem pensa isso! hehe
O primeiro componente que eu irei falar é o p:toolbar, ele funciona como se fosse uma barrinha para se colocar botões, menus... ele realmente é mais pra design da página, mas o interessante é que pode-se definir o alinhamento dos elementos:

Código-fonte do componente:
<p:toolbar>
     <p:toolbarGroup align="left">
         <p:commandButton value="Buscar" image="ui-icon-search" />
         <p:divider />
         <p:commandButton value="Novo" image="ui-icon-folder-open"/>
         <p:commandButton value="Salvar" disabled="true" image="ui-icon-disk"/>
         <p:commandButton value="Excluir" image="ui-icon-trash"/>
     </p:toolbarGroup>
     <p:toolbarGroup align="right">
         <p:commandButton value="Sair" image="ui-icon-power"/>
     </p:toolbarGroup>
</p:toolbar>
Repare que o alinhamento dos botões é feito por uma tag chamada p:toolbarGroup, na propriedade align é definido o alinhamento.

Agora vem o nosso componente base: o p:accordionPanel, ele mostra apenas uma área de cada vez, por exemplo (ver imagem abaixo) se clicar na tab Painel ela abrirá e a tab Passar imagens! se fechará, dentro dessas tabs pode-se colocar o que bem entender, tanto é que nessa postagem todos os outros componentes estarão dentro das tabs desse accordion.

Código-fonte do componente:
<p:accordionPanel>
    <p:tab title="Passar imagens!">
    </p:tab>
    <p:tab title="Painel">
    </p:tab>
    <p:tab title="Conjunto de tabs...">
    </p:tab>
    <p:tab title="Show Imagem">
    </p:tab>
</p:accordionPanel>

ATENÇÃO: A partir de agora os componentes estarão dentro do accordion, mas isso não quer dizer que obrigatoriamente eles devam estar dentro de algum outro componente, só fiz isso para mostrar os componentes meio que interligados!

Dentro da primeira tab do accordion nós teremos um p:imageSwitch, ele é um componente para passar imagens, nesse exemplo ele fica passando as imagens automaticamente:

Para testar esse componente clique aqui para baixar as imagens (são quatro imagens), ou coloque as suas próprias imagens, depois de baixado e extraído, coloque essas imagens dentro de Páginas Web do projeto, ou onde desejar, mas tome cuidado na hora de se referenciar a elas por causa do caminho.

Código-fonte do componente:
<p:imageSwitch effect="shuffle" widgetVar="imagens" slideshowAuto="true">
    <p:graphicImage value="nature1.jpg" />
    <p:graphicImage value="nature2.jpg" />
    <p:graphicImage value="nature3.jpg" />
    <p:graphicImage value="nature4.jpg" />
</p:imageSwitch>

O componente de agora, vou mostrar ele funcionando juntamente com o componente acima, para isso eu preciso que eles estejam no mesmo h:form, estou falando do p:hotkey, ele serve para capturar um evento do teclado, e fazer alguma coisa a partir disso, nesse caso não tem imagem, para testar basta usar as setas do teclado: direita e esquerda, assim avança uma imagem ou volta outra, pra ter um efeito melhor sete a propriedade slideShowAuto do imageSwitch para false.
Código-fonte do componente:
<p:hotkey bind="left" oncomplete="imagens.previous();" />
<p:hotkey bind="right" oncomplete="imagens.next();" />

O próximo componente é o p:panel, que é simples como o nome: ele é apenas um painel onde pode-se colocar o que bem entender dentro dele, geralmente é utilizado em telas de cadastro como mostra o exemplo:

 
Código-fonte do componente:
<p:panel header="Teste Cadastro" toggleable="true" closable="true">
   ....
</panel>
Só postei o código do próprio panel, ao final tem o código completo da página.

O p:tabView, é apenas um conjunto de abas, funciona da mesma forma que um p:accordion (visto lá no começo), veja:

Código-fonte do componente:
<p:tabView>
    <p:tab title="Tab 1">
        <h:outputText value="Aqui é a tab 1" />
    </p:tab>
    <p:tab title="Tab 2">
        <h:outputText value="Aqui é a tab 2" />
    </p:tab>
    <p:tab title="Tab 3">
        <h:outputText value="E essa é a tab 3" />
    </p:tab>
</p:tabView>

E pra finalizar vamos ver um componente "invisível", é o p:outputPanel, ele serve para auxilar outros componentes, nesse exemplo abaixo, eu tenho uma imagem que deve se esconder quando eu clicar em "Esconder" e mostrar quando eu clicar em "Mostrar", porém, eu não consigo renderizar ela diretamente, se eu mandar atualizar ela, não vai funcionar, por isso eu coloco ela dentro de um outputPanel, pois eu mando atualizar ele e não a imagem:

Para esse exemplo eu vou precisar de um bean para auxiliar, pra isso, dentro de Pacotes de código-fonte, crie um novo pacote com o nome de controle e dentro dele crie uma classe java com o nome de TesteBean:
@Named
@SessionScoped
public class TesteBean implements Serializable {

    private boolean mostra = false;

    public void mostrar(){
        mostra = true;
    }

    public void esconder(){
        mostra = false;
    }

    public boolean isMostra() {
        return mostra;
    }

    public void setMostra(boolean mostra) {
        this.mostra = mostra;
    }   
}
Acredito que não precise explicar nada da classe acima, então vamos continuar:
Código-fonte do componente:
<h:form>
    <p:commandButton value="Mostra" actionListener="#{testeBean.mostrar}" update="painel"/>
    <p:commandButton value="Esconde" actionListener="#{testeBean.esconder}" update="painel" />
    <br/>
    <p:outputPanel id="painel">
        <p:graphicImage value="nature1.jpg" rendered="#{testeBean.mostra}" />
    </p:outputPanel>
</h:form>
Os detalhes que devem ser observados são os actionListener e update dos commandButton, e o rendered  do graphicImage. Só explicando melhor, o rendered diz se o componente deve ser renderizado ou não, é por isso que se eu mandar atualizar diretamente a imagem na hora que eu mando atualizar ela e o rendered estiver como false, ele não vai encontrar a tal da imagem pra atualizar, pois ela não foi renderizada, por isso eu preciso renderizar um componente acima dela.

Para finalizar, o código-fonte completo da página index.xhtml:
<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 2.2.1</title>
    </h:head>
    <h:body>
        <h:form>
            <p:toolbar>
                <p:toolbarGroup align="left">
                    <p:commandButton value="Buscar" image="ui-icon-search" />
                    <p:divider />
                    <p:commandButton value="Novo" image="ui-icon-folder-open"/>
                    <p:commandButton value="Salvar" disabled="true" image="ui-icon-disk"/>
                    <p:commandButton value="Excluir" image="ui-icon-trash"/>
                </p:toolbarGroup>
                <p:toolbarGroup align="right">
                    <p:commandButton value="Sair" image="ui-icon-power"/>
                </p:toolbarGroup>
            </p:toolbar>
        </h:form>
        <br />

        <p:accordionPanel autoHeight="false">
            <p:tab title="Passar imagens!">
                <center>
                    <h:form>
                        <p:imageSwitch effect="shuffle" widgetVar="imagens" slideshowAuto="true">
                            <p:graphicImage value="nature1.jpg" />
                            <p:graphicImage value="nature2.jpg" />
                            <p:graphicImage value="nature3.jpg" />
                            <p:graphicImage value="nature4.jpg" />
                        </p:imageSwitch>
                        <p:hotkey bind="left" oncomplete="imagens.previous();" />
                        <p:hotkey bind="right" oncomplete="imagens.next();" />
                    </h:form>
                </center>
            </p:tab>
            <p:tab title="Painel">
                <p:panel header="Teste Cadastro" toggleable="true" closable="true">
                    <h:outputText value="Aqui pode-se colocar o que quiser, por exemplo:" />
                    <h:form>
                        <h:panelGrid columns="2">
                            <h:outputText value="Nome:"/>
                            <p:inputText />
                        </h:panelGrid>
                        <p:commandButton value="Salvar" />
                        <p:commandButton value="Cancelar" />
                    </h:form>
                </p:panel>
            </p:tab>
            <p:tab title="Conjunto de tabs...">
                <p:tabView>
                    <p:tab title="Tab 1">
                        <h:outputText value="Aqui é a tab 1" />
                    </p:tab>
                    <p:tab title="Tab 2">
                        <h:outputText value="Aqui é a tab 2" />
                    </p:tab>
                    <p:tab title="Tab 3">
                        <h:outputText value="E essa é a tab 3" />
                    </p:tab>
                </p:tabView>
            </p:tab>
            <p:tab title="Show Imagem">
                <h:form>
                    <p:commandButton value="Mostra" actionListener="#{testeBean.mostrar}" update="painel"/>
                    <p:commandButton value="Esconde" actionListener="#{testeBean.esconder}" update="painel" />
                    <br/>
                    <p:outputPanel id="painel">
                        <p:graphicImage value="nature1.jpg" rendered="#{testeBean.mostra}" />
                    </p:outputPanel>
                </h:form>
            </p:tab>
        </p:accordionPanel>
    </h:body>
</html>

Aqui ficamos com mais uma postagem! =)

11 comentários:

  1. Muito bom mesmo , estou criando umas video-aulas e vou indicar seu blog, voce praticamente ta passando a documentação do PrimeFaces para portugues :D , parabens pelo seu trabalho.

    ResponderExcluir
  2. Olá Mauricio, obrigada! Não sou expert em PrimeFaces, mas o que eu sei, eu passo nas postagens :-)

    ResponderExcluir
  3. Muito didáticos seus tutoriais. Ótimos.

    ResponderExcluir
  4. Olá Marcelo! Nas postagens tento escrever na linguagem mais simples possível! :)

    ResponderExcluir
  5. Parabéns! Conheci o Prime a alguns meses e tenho utilizado em alguns projetos, você me ajudou muito com seus tutoriais e discussões em foruns. Ainda não conhecia seu blog, aqui vc superou minha expectativas!!! Sou seu FÃ! :)

    ResponderExcluir
  6. hahaha Obrigada Eduardo! :)

    ResponderExcluir
  7. Excelentes posts. estou acompanhando todos da série.

    ResponderExcluir
  8. Obrigada DarkSHare® 2008©! Assim que eu arranjar um tempo vou voltar a escrever sobre o primefaces, já tenho algumas idéias, só falta tempo de testá-las mesmo!

    ResponderExcluir
  9. Muito obrigada!!!
    Estou aprendendo muito...
    Vc é show!

    ResponderExcluir
  10. Que bom Sammara! :) ... assim que eu me animar um pouquinho volto a escrever, mas sobre a nova versão do primefaces, a 3.0, está bem legal, já ando fazendo uns testes com ela.

    ResponderExcluir

Deixe seu comentário... ;)