Nossa tela irá ficar assim:
Bom... na imagem não aparecem todas os componentes, alguns deles serão chamados pelos botões "Confirmar" e "Abrir janela".
Agora vamos começar de uma vez, com um componente que é bem util, é o
p:confirmDialog ele é um janelinha que geralmente é utilizada em casos de confirmação de exclusão ou confirmar alguma outra coisa:
Ao clicar no botão "Sim", a janela se fecha e mostra um mensagem a partir do componente p:messages (visto na primeira postagem), assim:
Código-fonte do componente:
<p:messages id="mensagens" showDetail="true" />
<p:commandButton value="Confirmar" onclick="confirmacao.show()" type="button"/>
<h:form>
<p:confirmDialog widgetVar="confirmacao" header="Confirmar" message="Deseja confirmar alguma coisa?" severity="alert" modal="true">
<p:commandButton value="Sim" update="mensagens" oncomplete="confirmacao.hide()" actionListener="#{testeBean.confirmar}" />
<p:commandButton value="Não" onclick="confirmacao.hide()" type="button" />
</p:confirmDialog>
</h:form>
Vamos entender o que está acontecendo neste código, inicialmente eu tenho um p:messages que será atualizado quando eu clicar no commandButton correspondente ao "Sim", esse commandButton chama o método
confirmar que retorna uma mensagem ao JSF pelo
FacesContext. A propriedade
modal do
confirmDialog serve pra bloquear que possa ser feito outras ações com este componente em funcionamento, ou seja ele faz tipo um painel de vidro, não deixando a possibilidade de mexer nos componentes atrás dele.
O segundo componente é bem parecido com o anterior, porém mais maleável, é o
p:dialog, ele é praticamente um painel só que não é fixo na tela, ele realmente funciona como uma janelinha independente que abre, fecha e que pode ser movida de lugar:
Código-fonte do componente:
<p:commandButton value="Abrir janela" onclick="janela.show()" type="button" />
<p:dialog widgetVar="janela" header="Novo..." modal="true" width="500" height="230">
...
</p:dialog>
No código fonte completo (final da postagem) eu coloquei alguns outros componentes dentro deste dialog, apenas para mostrar que os componentes podem ser usados juntos (mas todos eles podem funcionar muito bem separadamente).
O componente
p:wizard é algo até complicado de explicar para o que serve, pois depende da criatividade de quem for usar, mas o que eu posso dizer é que funciona quase como a tabView (vista na segunda postagem) mas ao invés de clicar na tab para abri-la, existem dois botões, um de avançar e outro de voltar uma tab:
Código-fonte do componente:
<p:wizard nextLabel="Avançar" backLabel="Voltar">
<p:tab title="Slider">
<p:panel header="Testando o slider">
</p:panel>
</p:tab>
<p:tab title="Spinner">
<p:panel header="Testando o spinner">
</p:panel>
</p:tab>
</p:wizard>
Veja que o mesmo é composto da mesma tag
p:tab, já utilizada por outros componentes (na segunda postagem), quanto ao
p:panel, não é obrigado ter ele alí, eu só coloquei para dar uma entendida melhor que se pode fazer com esse componente.
O
p:slider é um componente para números utilizado juntamente com um inputText (talvez com outros elementos também, não testei isso), o interessante dele é que pode-se definir intervalos numéricos:
Código-fonte do componente:
<h:outputText value="Numero:" />
<p:inputText id="numero1" value="#{testeBean.numeroSlider}"/>
<p:slider for="numero1" minValue="-100" maxValue="100" style="width: 127px"/>
Bom, como nem tudo é perfeito... a versão 2.2.1 do PrimeFaces também não é perfeita, e sim.. ela tem bugs, por exemplo o componente
p:spinner não renderiza corretamente (veja no link a renderização correta dele), mas mesmo assim vou mostrar ele, é bom saber que ele existe, pode ser que em outra versão ele funcione perfeitamente:
Código-fonte do componente:
<h:outputText value="Valor:" />
<p:spinner value="#{testeBean.valorSpinner}" min="-10" max="10" stepFactor="0.10" showOn="hover"/>
Assim como o
slider, este componente permite definir um intervalo numérico e também a quantidade de quanto ele deve somar ou subtrair do numero atual, isso é configurado na propriedade
stepFactor. Para não ficar devendo: no Blog tem uma postagem sobre
ajax nativo do JSF 2.0, onde o primeiro componente funciona meio parecido com este. Caso encontre uma solução para este bug eu volto aqui e atualizo esta postagem (se alguém souber essa solução, será bem vinda).
Agora sim vamos ver um componente bem útil, é a
p:dataTable que é uma tabela que pode ser paginada e tudo mais, no link tem muitas formas de utilização dela, aconselho dar uma olhada, aqui vou mostrar o básico do básico dela:
Código-fonte do componente:
<p:dataTable value="#{testeBean.animais}" var="a" paginator="true" rows="4">
<p:column headerText="Nome dos animais">
<h:outputText value="#{a}" />
</p:column>
<p:column style="width: 30px">
<p:commandButton image="ui-icon-wrench" />
</p:column>
</p:dataTable>
Vou levar em consideração que você que está lendo já tenha conhecimento da h:dataTable do JSF puro, assim posso pular os detalhes... neste caso eu estou usando ela com paginação, então eu preciso dizer quantas linhas eu quero que apareça em cada página, para isso eu uso a propriedade
rows.
Obs: é importante saber que ao utilizar um
h:column em uma
p:dataTable, esta não renderizará corretamente, por isso eu uso o
p:column.
E pra finalizar, um componente que funciona bem parecido com o componente acima, porém é mais maleável também que é o
p:dataGrid:
Veja que ele usa paginação da mesma forma que a
p:dataTable, abaixo do código explicarei alguns detalhes.
Código-fonte do componente:
<p:dataGrid value="#{testeBean.animais}" var="a" paginator="true" columns="2" rows="4">
<p:column>
<p:panel header="Animal">
<h:outputText value="Este animal é um #{a}" />
</p:panel>
</p:column>
</p:dataGrid>
Veja que eu estou usando a mesma lista que usei na
p:dataTable, a diferença é que, na
p:dataGrid é utilizada apenas um
p:column, essa unica coluna funciona como um laço de repetição. Vamos aos detalhes importantes: a propriedade
columns serve para definir quantas colunas devem ser mostradas, já a propriedade
rows à primeira impressão ela engana, pois é, quando eu vi ela, pensava que era como a
rows da
p:dataTable que seria a quantidade de linhas que teria minha dataGrid, mas não é... na realidade ela corresponde a quantidade de elementos que devem ser mostrados na página: como eu defini que teria apenas duas colunas, por exemplo eu não posso querer que mostre apenas três elementos na dataGrid (ficaria meio furada) para isso não acontecer, a dataGrid preenche todos os lugares, não deixando apenas três elementos e um espaço em branco, as vezes mesmo eu explicando fica difícil de entender, por isso aconselho fazer testes com ela.
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>Facelet Title</title>
</h:head>
<h:body>
<p:messages id="mensagens" showDetail="true" />
<p:commandButton value="Confirmar" onclick="confirmacao.show()" type="button"/>
<h:form>
<p:confirmDialog widgetVar="confirmacao" header="Confirmar" message="Deseja confirmar alguma coisa?" severity="alert" modal="true">
<p:commandButton value="Sim" update="mensagens" oncomplete="confirmacao.hide()" actionListener="#{testeBean.confirmar}" />
<p:commandButton value="Não" onclick="confirmacao.hide()" type="button" />
</p:confirmDialog>
</h:form>
<p:separator />
<p:commandButton value="Abrir janela" onclick="janela.show()" type="button" />
<p:dialog widgetVar="janela" header="Novo..." modal="true" width="500" height="230">
<h:form>
<p:wizard nextLabel="Avançar" backLabel="Voltar">
<p:tab title="Slider">
<p:panel header="Testando o slider">
<h:outputText value="Numero:" /><br />
<p:inputText id="numero1" value="#{testeBean.numeroSlider}"/>
<p:slider for="numero1" minValue="-100" maxValue="100" style="width: 127px"/>
</p:panel>
</p:tab>
<p:tab title="Spinner">
<p:panel header="Testando o spinner">
<h:outputText value="Valor:" /><br />
<p:spinner value="#{testeBean.valorSpinner}" min="-10" max="10" stepFactor="0.10" showOn="hover"/>
</p:panel>
</p:tab>
</p:wizard>
</h:form>
</p:dialog>
<p:separator />
<h:form>
<p:dataTable value="#{testeBean.animais}" var="a" paginator="true" rows="4">
<p:column headerText="Nome dos animais">
<h:outputText value="#{a}" />
</p:column>
</p:dataTable>
</h:form>
<p:separator />
<h:form>
<p:dataGrid value="#{testeBean.animais}" var="a" paginator="true" columns="2" rows="4">
<p:column>
<p:panel header="Animal">
<h:outputText value="Este animal é um #{a}" />
</p:panel>
</p:column>
</p:dataGrid>
</h:form>
</h:body>
</html>
Acredito que por hoje chega... =)