Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • JSF 2.0 Template Facelets PrimeFaces

    Загружено:

    Tiago0209
    1K просмотров50 страниц
    O documento descreve como criar um template em Facelets com o layout do PrimeFaces 3.0, incluindo: 1) A estrutura do projeto com uma pasta "tema" para arquivos do template; 2) O código do template "padrao.xhtml" com regiões para menu, conteúdo central e estilos CSS; 3) Como as páginas usam o template via a tag <ui:decorate> para inserir seu conteúdo.

    Исходное описание:

    Tutorial JSF2

    Оригинальное название

    JSF 2

    Авторское право

    © Attribution Non-Commercial (BY-NC)

    Доступные форматы

    PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ
    O documento descreve como criar um template em Facelets com o layout do PrimeFaces 3.0, incluindo: 1) A estrutura do projeto com uma pasta "tema" para arquivos do template; 2) O código do template "padrao.xhtml" com regiões para menu, conteúdo central e estilos CSS; 3) Como as páginas usam o template via a tag <ui:decorate> para inserir seu conteúdo.

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    1K просмотров50 страниц

    JSF 2.0 Template Facelets PrimeFaces

    Загружено:

    Tiago0209
    O documento descreve como criar um template em Facelets com o layout do PrimeFaces 3.0, incluindo: 1) A estrutura do projeto com uma pasta "tema" para arquivos do template; 2) O código do template "padrao.xhtml" com regiões para menu, conteúdo central e estilos CSS; 3) Como as páginas usam o template via a tag <ui:decorate> para inserir seu conteúdo.

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 50

    JSF 2.0: Template em Facelets com Layout do PrimeFaces 3.0 Ol pessoas!

    Depois de meses ausente, estou voltando a escrever mas a partir de agora sobre a verso 3 do PrimeFaces! Primeiramente baixe a verso 3.0 do PrimeFaces aqui. Agora vamos criar um projeto, no meu caso o nome do meu projeto ser "template", este ter a seguinte estrutura:

    O que eu fiz de diferente... para ficar um projeto mais organizado, eu criei uma pasta temadentro de Pginas Web, ainda dentro da pasta tema eu criei uma pasta imagens, que onde eu guardo todas as imagens do design do sistema, nesse caso s coloquei a imagem que ser o topo do nosso template. O principal de tudo isso o nosso padrao.xhtml que foi criado dentro do tema, ele ser o responsvel pelo nosso template, nele eu coloco tudo o que ser comum a todas as pginas que tero template, por exemplo, o componente growl (que mostra avisos ao usurio, visto em postagens anteriores), alm de styles CSS que as vezes necessrio. O meu template ficar assim:

    Ento meu template (padrao.xhtml) ficou assim: 01 <html xmlns="http://www.w3.org/1999/xhtml" 02 xmlns:ui="http://java.sun.com/jsf/facelets" 03 04 05 06 07 xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui" xmlns:f="http://java.sun.com/jsf/core"> <h:head>

    08 09 10 11 12 13 14 15 16

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Meu Sistema</title> <style type="text/css"> body {background-color: #eeeeee; font-size: 12px} </style> </h:head> <h:body> <div align="center"> <p:layout style="min-width:1020px;maxwidth:1020px;min-height:600px"> <p:layoutUnit position="north" size="100"> <h:graphicImageurl="/tema/imagens/topo.jpg </p:layoutUnit> <p:layoutUnit position="west" size="220"> <ui:insert name="menu"> <h:form> <p:menu style="width: 200px"> <p:submenu label="Menu"> <p:menuitem value="Login"i

    1 7 1 8 " /> 19 20 21 22 23 24

    2 5 2 6 con="ui-icon-key" /> 27

    <p:menuitem value="Fazer meu cadastro" icon="ui-icon-contact" /> </p:submenu> 28 </p:menu> </h:form> </ui:insert> </p:layoutUnit> <p:layoutUnit position="center"> <ui:insert name="centro"> O que estiver aqui ser substituido! </ui:insert> </p:layoutUnit> </p:layout> </div> </h:body>

    29 30 31 32 33 34 35 36 37 38 39 40

    41 </html> Vamos s observaes quanto ao cdigo: Linha 4: Devemos observar que para usar a verso 3.0 do PrimeFaces a namespace outra

    agora! Linha 15: Criao de uma div centralizada, pois meu layout dever ficar centralizado. O segredo do template esto nas linhas 22 e 34 por conta das tags ui:insert, ou seja so elas que definem onde ficar meus componentes. Perceba que eu j coloquei o menu diretamente no meu template, j que ser algo para o projeto inteiro, caso precise de um outro menu para uma pgina exclusiva, apenas sobrescreva o menu na pgina que deseja. Observao: sempre fique atento ao name da tag ui:insert, pois so eles que definem o que ser o menu, ou que ser o centro da nossa pgina (no obrigado a usar os mesmos nomes que eu coloquei). Agora vamos ver como vai ficar nosso index.xhtml:

    Veja que s mudou nossa frase do centro... agora vamos ver como usar o tal template! Pgina index.xhtml: 1 <html xmlns="http://www.w3.org/1999/xhtml" 2 xmlns:h="http://java.sun.com/jsf/html" 3 4 5 6 7 8 xmlns:ui="http://java.sun.com/jsf/facelets"> <ui:decorate template="/tema/padrao.xhtml"> <ui:define name="centro"> Aqui o centro do index! </ui:define> </ui:decorate>

    9 </html> Vamos s observaes: 1 - veja que na nossa pgina no temos mais as tags h:head e h:body ... elas foram substitudas pela tag ui:decorate (caso no saiba do que eu estou falando, veja essa postagem sobre facelets) nela eu defino qual o template que eu estou usando nessa pgina, ou seja, possvel ter mais de um template no mesmo sistema sem problemas! 2 - observe que eu s sobrescrevi o centro (linha 5), tudo que deve ficar no centro da pgina deve ficar dentro da tag ui:define. Concluso: quando se utilizo templates, temos geralmente apenas uma pgina que contm h:head e h:body que o prprio template (a no ser que o sistema tenha outras pginas sem template), quanto as outras pginas com template, elas precisam ter o ui:decorate ou ui:composition (veja a postagem de facelets, link acima). Ao executar seu sistema, olhe o cdigo fonte, e veja que o cdigo do template fica embutido com o cdigo da sua pgina, como se tudo estivesse na mesma pgina. Vantagem: Quer alterar o seu design? Quando comeou o sistema o seu design era um, e agora j se cansou dele? Ento, essa pode ser uma boa soluo para voc, pois a vantagem bem essa,

    ter que fazer alteraes em apenas uma pgina para trocar o design do sistema inteiro. Imagina o que seria um sistema com 50 pginas sem utilizar template? Seria necessrio passar de pgina por pgina alterando o design, ainda correndo o risco de deixar uma pgina de fora das alteraes. Nesse exemplo eu fiz uma juno do componente p:layout do PrimeFaces com o Facelets (responsvel pelas tags: ui:insert, ui:define ui:.... etc...), mas se preferir usar CSS, nada te impede, coloque o ui:insert dentro de div formatadas na posio que desejar. Bom... o post de hoje foi curto, mas espero que seja til! Postado por andii.brunetta s 23:02 16 comentrios Enviar por e-mailBlogThis!Compartilhar no TwitterCompartilhar no FacebookCompartilhar no Orkut Marcadores: JSF2.0, PrimeFaces 9 de agosto de 2011 JSF 2.0: Componentes PrimeFaces 2.2.1 - Parte 6 Ol Pessoal! Depois de mais de um ms aqui estou eu voltando com as postagens do Java sem caf.! E para comear bem, nada melhor do que continuar com as postagens sobre o PrimeFaces! Lembrando, a ultima postagem sobre o PrimeFaces foi a Parte 5, nela eu comentei sobre no ter conseguido fazer os grficos do PrimeFaces, pois bem, com a ajuda do amigo Jamir Luiz, agora eu consegui fazer os grficos funcionarem, ento como vocs podem imaginar, a postagem de hoje sobre os grficos do PrimeFaces! Estrutura do projeto Caso no saiba como montar a estrutura do projeto veja aqui. Depois de pronto o projeto fica com essa estrutura:

    Vamos comear pelo grfico em linhas, o lineChart:

    Cdigo-fonte: Para este exemplo vamos precisar de uma classe Nascimentos (pojo), ento dentro de pacote de cdigos fonte crie um novo pacote com o nome de model, e dentro dele crie uma nova classe Java com o nome de Nascimentos: 01 public class Nascimentos { 02 private String ano; 03 04 05 06 07 08 09 10 11 12 } //GETTERS e SETTERS public Nascimentos(String ano, int qtdMeninos, intqtdMeninas) { this.ano = ano; this.qtdMeninos = qtdMeninos; this.qtdMeninas = qtdMeninas; private int qtdMeninos; private int qtdMeninas;

    13 } Agora vamos criar o nosso bean que vai dar suporte aos nossos grficos, para isso crie um pacote com o nome de controle, dentro desse pacote crie uma nova classe Java com o nome de GraficosBean: 01 @Named 02 @RequestScoped 03 public class GraficosBean { 04 05 06 07 08 09 10 11 private List<Nascimentos> nascimentos = new ArrayList(); public GraficosBean() { nascimentos.add(new Nascimentos("2008", 120, 53)); nascimentos.add(new Nascimentos("2009", 100, 70)); nascimentos.add(new Nascimentos("2010", 80, 120)); nascimentos.add(new Nascimentos("2011", 100, 130));

    12 13 14

    } //GETTERS E SETTERS

    15 16 } Vamos para a pgina index, mas antes disso, tem um detalhe importante sobre as legendas dos grficos (isso serve para os 3 tipos de grficos que veremos aqui), dentro da tag h:head, precisamos do seguinte cdigo javascript: 1 <script type="text/javascript"> 2 var chartStyle = { 3 4 5 6 7 8 } }; padding:20, legend: { display:"right", spacing:10

    9 </script> E agora sim vamos ver qual o cdigo da lineChart: <p:panel header="Grfico em linhas: Nascimentos anual em uma 1 cidade" style="width: 550px"> <p:lineChart value="#{graficosBean.nascimentos}"var="nasc 2 " xfield="#{nasc.ano}" 3 4 5 height="300px" width="500px"style="chartStyl e"> <p:chartSeries label="Meninos" value="#{nasc.qtdMenino s}" />

    <p:chartSeries label="Meninas" value="#{nasc.qtdMenina s}" /> 6 </p:lineChart> 7 </p:panel> Veja que na propriedade style da tag p:lineChart onde eu referencio o cdigo javascript. E so as tags p:chartSeries que definem as linhas do grfico. Bom... tudo isso que eu falei acima tambm vale para o barChart, que nosso grfico em barras:

    Cdigo-fonte:A nica coisa que difere do lineChart a tag mesmo, ento, fica dessa forma: <p:panel header="Grfico em barras Nascimentos anual em uma 1 cidade" style="width: 550px"> 2 3 4 5 dMeninos}" /> <p:chartSeries label="Meninas" value="#{nasc2.qt <p:barChart value="#{graficosBean.nascimentos}"var="nas c2" yfield="#{nasc2.ano}" height="300px" width="500px"style="chartStyle"> <p:chartSeries label="Meninos" value="#{nasc2.qt

    dMeninas}" /> 6 </p:barChart> 7 </p:panel> E pra finalizar vamos ao grfico do tipo pizza, ou seja o pieChart:

    Cdigo-fonte: Para este tipo de grfico vamos precisar de mais uma classe (pojo), por isso dentro do pacotemodel, crie uma nova classe java com o nome de Blog: 01 public class Blog { 02 03 04 private String mes; private int qtdAcessos;

    05 06 07 08 09 10

    public Blog(String mes, int qtdAcessos) { this.mes = mes; this.qtdAcessos = qtdAcessos; }

    11 //Getters e Setters 12 } E o nosso bean GraficosBean, ter o seguinte cdigo: 01 @Named 02 @RequestScoped 03 public class GraficosBean { 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 } //Getters e Setters private List<Blog> acessos = new ArrayList<Blog>(); public GraficosBean() { acessos.add(new Blog("Jan/2011", 2129)); acessos.add(new Blog("Fev/2011", 2380)); acessos.add(new Blog("Mar/2011", 5221)); acessos.add(new Blog("Abr/2011", 7723)); acessos.add(new Blog("Mai/2011", 15327)); acessos.add(new Blog("Jun/2011", 22302)); acessos.add(new Blog("Jul/2011", 15908));

    19 } E o index ficar dessa forma: <p:panel header="Grfico tipo pizza: Quantidade de 1 visualizaes do blog" style="width: 550px"> <p:pieChart value="#{graficosBean.acessos}"var="acessos" c 2 ategoryField="#{acessos.mes}" dataField="#{acessos.qtdAcessos}"height="300px" width="500px" style="chartStyle" /> 4 </p:panel> 3 Veja que para o pieChart no necessrio a tag p:chartSeries. Da mesma forma que os grficos anteriores o pieChart precisa da propriedade style que se referencia ao cdigo javascript. E por fim, o cdigo completo da pgina index.xhtml: 01 <?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 02 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

    transitional.dtd"> 03 <html xmlns="http://www.w3.org/1999/xhtml" 04 xmlns:h="http://java.sun.com/jsf/html" 05 06 07 08 09 10 11 12 13 14 15 16 17 18 }; </script> </h:head> <h:body> xmlns:p="http://primefaces.prime.com.tr/ui"> <h:head> <title>PrimeFaces - Parte 6</title> <script type="text/javascript"> var chartStyle = { padding:20, legend: { display:"right", spacing:10 }

    1 <p:panel header="Grfico em linhas: Nascimentos anual 9 em uma cidade" style="width: 550px"> 2 <p:lineChart value="#{graficosBean.nascimentos}"var 0 ="nasc" xfield="#{nasc.ano}" 2 1 artStyle"> 2 2 dMeninos}" /> height="300px" width="500px"style="ch <p:chartSeries label="Meninos" value="#{nasc.qt

    2 <p:chartSeries label="Meninas" value="#{nasc.qt 3 dMeninas}" /> 2 </p:lineChart> 4 25 26 27 28 29 30 <p:panel header="Grfico em barras Nascimentos anual em uma cidade" style="width: 550px"> </p:panel>

    3 <p:barChart value="#{graficosBean.nascimentos}"var= 1 "nasc2" yfield="#{nasc2.ano}" 3 height="300px" width="500px"style="cha 2 rtStyle"> 3 3 tdMeninos}" /> 3 4 tdMeninas}" /> <p:chartSeries label="Meninos" value="#{nasc2.q <p:chartSeries label="Meninas" value="#{nasc2.q

    35 36 37 38 39 40

    </p:barChart> </p:panel>

    4 <p:panel header="Grfico tipo pizza: Quantidade de 1 visualizaes do blog" style="width: 550px"> 4 <p:pieChart value="#{graficosBean.acessos}"var="ace 2 ssos" categoryField="#{acessos.mes}" dataField="#{acessos.qtdAcessos}"heigh 4 3 t="300px" width="500px" style="chartStyle" /> 4 </p:panel> 4 45 46 47 </h:body> 48 </html> E por aqui ficamos com mais uma postagem sobre PrimeFaces! Postado por andii.brunetta s 17:59 7 comentrios Enviar por e-mailBlogThis!Compartilhar no TwitterCompartilhar no FacebookCompartilhar no Orkut Marcadores: JSF2.0, PrimeFaces 7 de junho de 2011 JSF 2.0: Componentes PrimeFaces 2.2.1 - Parte 5 Depois de vermos sobre menus do PrimeFaces, nessa postagem vamos ver alguns outros componentes. Vamos precisar de algumas umas imagens e algumas bibliotecas extras, baixe por aqui. Estrutura do projeto Caso no saiba como montar a estrutura do projeto veja aqui. Depois de pronto o projeto fica com essa estrutura:

    O primeiro componente que veremos hoje o dataExporter que serve para exportar os dados para arquivos PDF, XLS, XML ou CSV de uma determinada dataTable, ento para isso eu preciso de uma dataTable:

    Cdigo-fonte: Para este exemplo vamos precisar de uma classe Carro (pojo), ento dentro de pacote de cdigos fonte crie um novo pacote com o nome de model, e dentro dele crie uma nova classe Java com o nome de Carro: 01 public class Carro { 02 03 04 05 06 07 08 09 private String marca; private int ano; private String placa; private String cor; private String modelo;

    public Carro(String marca, int ano, String placa, String cor, String modelo) { 10 this.marca = marca; 11 12 13 this.ano = ano; this.placa = placa; this.cor = cor;

    14 15 16 17 18 } }

    this.modelo = modelo;

    //GETTERS e SETTERS

    Agora vamos criar o nosso bean que vai dar suporte nossa dataTable, para isso crie um pacote com o nome de controle, dentro desse pacote crie uma nova classe Java com o nome de CarroBean: 01 @Named 02 @RequestScoped 03 public class CarroBean { 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 private List<Carro> carros; public CarroBean() { listarCarros(); } private void listarCarros() { carros = new ArrayList<Carro>(); carros.add(new Carro("Fiat", 2011, "DFV 3455","Verde", "Novo Uno")); carros.add(new Carro("Toyota", 2009, "ADV 3245","Prata", "Prado")); carros.add(new Carro("Volks", 2010, "AAC 2351","Vermelho", "Gol")); carros.add(new Carro("Volks", 2011, "EGF 1245","Preto", "Cross Fox")); }

    19 //Gerar GET e SET 20 } Bom nem tem o que explicar o cdigo acima... Para este exemplo vamos precisar das imagens (do link que disponibilizei l no inicio), por enquanto s irei precisar de: xsl.png epdf.png, dentro de pginas web, crie um novo diretrio com o nome de imagens, e coloque as imagens dentro dela. Agora vamos para a pgina index: 0 <h:form> 1 0 <p:dataTable id="tabelaCarros" value="#{carroBean.carros}" 2 var="c"> 03 04 05 06 <p:column> <f:facet name="header">Marca</f:facet> <h:outputText value="#{c.marca}" /> </p:column>

    07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

    <p:column> <f:facet name="header">Modelo</f:facet> <h:outputText value="#{c.modelo}" /> </p:column> <p:column> <f:facet name="header">Ano</f:facet> <h:outputText value="#{c.ano}" /> </p:column> <p:column> <f:facet name="header">Cor</f:facet> <h:outputText value="#{c.cor}" /> </p:column> <p:column> <f:facet name="header">Placa</f:facet> <h:outputText value="#{c.placa}" /> </p:column> </p:dataTable> <h:commandLink> <p:graphicImage value="/imagens/xls.png" />

    2 <p:dataExporter type="xls" target="tabelaCarros"fileNam 7 e="carros" /> 2 </h:commandLink> 8 29 30 <h:commandLink> <p:graphicImage value="/imagens/pdf.png" />

    3 <p:dataExporter type="pdf" target="tabelaCarros"fileNam 1 e="carros"/> 3 </h:commandLink> 2 33 </h:form> No cdigo acima eu tenho uma dataTable normal (vista em postagens anteriores) e logo abaixo dela eu tenho os dataExporter, o detalhe mais importante quanto a propriedade target, veja que ela corresponde ao id da tabela. Nosso segundo componente o pickList:

    Vamos direto ao cdigo, ento dentro do pacote controle (criado anteriormente) vamos criar uma classe com o nome de PicklistBean: 01 @Named 02 @RequestScoped 03 public class PicklistBean { 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 private DualListModel<String> cores; public PicklistBean() { listarCores(); } private void listarCores() { List<String> lista = new ArrayList<String>(); List<String> selecionados = new ArrayList<String>(); lista.add("Azul"); lista.add("Amarelo"); lista.add("Vermelho"); lista.add("Verde"); lista.add("Roxo");

    cores = new DualListModel<String>(lista, selecionados); 22 } 23 24 25 26 27 public void mostrarCoresSelecionadas() { for (String cor : cores.getTarget()) { System.out.println("Esta cor : " + cor); }

    28 29 30

    } //Gerar GET e SET

    31 } Veja que usamos um DualListModel (do prprio PrimeFaces), para inicializar ele eu preciso informar duas listas, uma dos os objetos a serem selecionados (chamada de source) e a outra representar o objetos selecionados(target), o mtodo mostrarCoresSelecionadas() percorre a lista de cores selecionadas, repare que ele d um getTarget() ... para pegar a lista original s dar um getSource(). 1 <h:form> 2 3 4 5 <p:pickList value="#{picklistBean.cores}" var="cor"iconOnly= "true" itemLabel="#{cor}" itemValue="#{cor}"> <f:facet name="sourceCaption">Lista</f:facet> <f:facet name="targetCaption">Selecionadas</f:facet> </p:pickList>

    <p:commandButton value="Ver cores 6 selecionadas"actionListener="#{picklistBean.mostrarCoresSelecio nadas}" /> 7 </h:form> Ao final do cdigo eu coloquei um commandButton que chama o mtodo para listar as cores selecionadas. O nosso prximo componente o printer, ele um componente que chama a funo de impresso do navegador, com a diferena que o programador define qual a parte da pgina ser impressa, para usar ele eu vou precisar da imagem printer.png (no arquivo que eu passei), coloque-o dentro do diretrio imagens. Vou mostra-lo junto com o prximo componente, mas antes segue o cdigo: 1 <h:outputLink id="lnk" value="#"> 2 <p:printer target="quebraCabeca" /> 3 <p:graphicImage value="/imagens/print.png" /> 4 </h:outputLink> Repare que o target se refere a um elemento quebraCabeca, ele corresponde a uma parte da pgina que eu quero que seja impresso, nesse caso este quebraCabeca ser o prximo elemento a ser feito. Para finalizar vamos ver o componente dashboard, que em um sistema comercial eu no vi muita utilidade, ento para este exemplo eu resolvi criar um quebra cabea meio desengonado com ele!

    Quanto a impressora que aparece acima na imagem, esta corresponde ao componente printer. Vamos comear ento com o nosso quebra-cabea, primeiramente precisamos pegar as imagens que eu passei l no inicio e coloca-las no projeto. Primeiro dentro do diretrioimagens crie um novo diretrio com o nome de jogo: dentro dele coloque as imagens a.jpg, b.jpg at a imagem i.jpg... Abaixo segue a classe Java QuebraCabecaBean que deve ser criado dentro do pacote controle: @Named 01 @RequestScoped 02 public class QuebraCabecaBean { 03 04 05 06 07 08 09 10 11 private DashboardModel pecas; public QuebraCabecaBean() { listarPecas(); } private void listarPecas() {

    pecas = new DefaultDashboardModel(); DashboardColumn coluna1 12 = newDefaultDashboardColumn();

    DashboardColumn coluna2 = newDefaultDashboardColumn(); DashboardColumn coluna3 14 = newDefaultDashboardColumn(); 13 15 16 17 coluna1.addWidget("f"); coluna1.addWidget("c");

    18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 }

    coluna1.addWidget("g"); coluna2.addWidget("h"); coluna2.addWidget("a"); coluna2.addWidget("d"); coluna3.addWidget("i"); coluna3.addWidget("e"); coluna3.addWidget("b"); pecas.addColumn(coluna1); pecas.addColumn(coluna2); pecas.addColumn(coluna3);

    33 //Gerar GET e SET 34 } Veja que eu incluo as letras embaralhadas dentro do DashboardColumn, realmente para iniciarem embaralhadas, s temos um detalhe: para cada letra que eu coloquei nessa lista eu preciso de um componente com o id do mesmo nome dentro do componente dashboard, apenas colocar os painis no xhtml com as imagens no suficiente eu preciso ter esse espelho entre o bean e a pgina: 01 <h:form id="quebraCabeca"> 02 <p:dashboard model="#{quebraCabecaBean.pecas}"> 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 <p:panel id="f"> <p:graphicImage url="/imagens/jogo/f.jpg" /> </p:panel> <p:panel id="c"> <p:graphicImage url="/imagens/jogo/c.jpg" /> </p:panel> <p:panel id="g"> <p:graphicImage url="/imagens/jogo/g.jpg" /> </p:panel> <p:panel id="h"> <p:graphicImage url="/imagens/jogo/h.jpg" /> </p:panel> <p:panel id="a"> <p:graphicImage url="/imagens/jogo/a.jpg" /> </p:panel> <p:panel id="d"> <p:graphicImage url="/imagens/jogo/d.jpg" /> </p:panel>

    22 23 24 25 26 27 28 29 30 31 32 <p:panel id="i"> <p:graphicImage url="/imagens/jogo/i.jpg" /> </p:panel> <p:panel id="e"> <p:graphicImage url="/imagens/jogo/e.jpg" /> </p:panel> <p:panel id="b"> <p:graphicImage url="/imagens/jogo/b.jpg" /> </p:panel> </p:dashboard>

    33 </h:form> A soluo do quebra cabea este:

    OBS: Quanto ao quebra cabea este foi improvisado, j que a postagem original era para ser falado sobre os grficos do PrimeFaces, mas que infelizmente no consegui fazer funcionar. Mas pensem comigo, antes isso do que nada n!? :P Postado por andii.brunetta s 19:32 14 comentrios Enviar por e-mailBlogThis!Compartilhar no TwitterCompartilhar no FacebookCompartilhar no Orkut Marcadores: JavaEE 6, JSF2.0, PrimeFaces 1 de junho de 2011 JSF 2.0: Componentes PrimeFaces 2.2.1 - Parte 4 Continuando com a srie de postagens de componentes PrimeFaces 2.2.1, hoje vamos ver a utilizao 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 prprios cones: baixar aqui. Estrutura do projeto Caso no saiba como montar a estrutura do projeto veja aqui. Depois de pronto o projeto fica com essa estrutura:

    Comeando... 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:

    Cdigo-fonte do componente: 1 <p:layout fullPage="true"> 2 <p:layoutUnit position="top" height="50"> 3 </p:layoutUnit> <p:layoutUnit position="left" width="180" header="Menu"colla 4 psible="true" > 5 6 </p:layoutUnit> <p:layoutUnit position="center" header="Sistema">

    7 </p:layoutUnit> 8 </p:layout> Veja que quem cria as divises o componente layoutUnit, aconselho ver o link acima para ver as outras possibilidades de uso do layout. Agora comeamos com os menus, estes pouca coisa diferem entre si... O primeiro que vamos usar o breadCrumb, ele um menu na horizontal: Cdigo-fonte do componente: 1 <p:breadCrumb> 2 <p:menuitem value="Home" url="http://www.google.com.br"/> 3 4 5 6 <p:menuitem value="Documentos" url="#" /> <p:menuitem value="Musicas" url="#" /> <p:menuitem value="Imagens" url="#" /> <p:menuitem value="Zip" url="#" />

    7 </p:breadCrumb> Veja que ele composto por menuitem... na realidade todos os menus do PrimeFaces so compostos de menuitem, por isso nos outros menus vamos os mesmos do exemplo acima. Nos menus quem faz a diferena o componente-pai, no caso acima a tag breadCrumb, o detalhe que pra esse componente ele no 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 tambm submenus, e com a diferena 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 posio vertical. Cdigo-fonte do componente: 01 <p:menu style="width: 98%"> 02 <p:submenu label="Contas..."> 03 04 05 06 0 7 /> 0 8 09 10 11 12 13 14 <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-iconpower" />

    15 </p:submenu> 16 </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 tambm se redimensionar (isso tambm pode ser feito em outros componentes que tenham a propriedade style) O prximo menu um menubar, na horizontal que tambm aceita cones, mas este permite que tenha submenus:

    Cdigo-fonte do componente: 01 <p:menubar> 02 <p:submenu label="Contas..."> 03 04 05 06 0 7 /> 0 8 09 10 11 12 13 <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-iconpower" /> 14 </p:menubar>

    Agora pra quem no tem espao na pgina, temos um boto menu que abre na posio vertical e tambm aceita cones... que o menuButton. Fechado: Clicado:

    Cdigo-fonte do componente: 01 <h:form> 02 <p:menuButton value="Menu..."> 0 3 /> <p:menuitem value="Home"url="http://www.google.com.br"

    0 4 05 06 07 08

    <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-iconpower" />

    09 </p:menuButton> 10 </h:form> Agora vamos para os menus bonitinhos e queridinhos com imagens! Primeiramente vamos colocar aquelas imagens que eu passei l no incio, dentro do projeto... no meu caso eu estou colocando elas dentro do projeto de forma organizada, ou seja... dentro de Pginas Web, crie um novo diretrio com o nome de imagens e dentro deste diretrio coloque as imagens (.png). Vamos comear pelo dock que funciona como o menu do Mac OS:

    Obs: ele um menu um pouco mais limitado, ou fica na parte superior da pgina ou na parte inferior da pgina (padro)... mas d um efeito muito legal :) Cdigo-fonte do componente: 1 <p:dock> 2 3 <p:menuitem value="Home" url="http://www.google.com.br"icon= "/imagens/home.png" />

    <p:menuitem value="Documentos" url="#"icon="/imagens/documen tos.png" /> <p:menuitem value="Musicas" url="#"icon="/imagens/musicas.p 4 ng" /> 5 <p:menuitem value="Imagens" url="#"icon="/imagens/imagens.pn g" /> 6 <p:menuitem value="Zip" url="#" icon="/imagens/zip.png"/> 7 </p:dock> O outro o stack, esse outro menu com imagens, mas bem intessante... eu peguei a imagem padro dele no site do PrimeFaces pra usar como base, mas voc pode colocar a imagem que quiser. Fechado:

    Clicado:

    Vamos as limitaes... 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 pgina... pois , no d pra coloc-lo em qualquer lugar! Cdigo-fonte do componente: 1 <p:stack icon="/imagens/stack.png"> <p:menuitem value="Home" url="http://www.google.com.br"icon= 2 "/imagens/home.png" /> <p:menuitem value="Documentos" url="#"icon="/imagens/documen tos.png" /> <p:menuitem value="Musicas" url="#"icon="/imagens/musicas.p 4 ng" /> 3 5 <p:menuitem value="Imagens" url="#"icon="/imagens/imagens.pn g" /> 6 <p:menuitem value="Zip" url="#" icon="/imagens/zip.png"/> 7 </p:stack> Bom... esses so 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 pgina, para que funcionem melhor... Enfim, o cdigo fonte completo: 01 <html xmlns="http://www.w3.org/1999/xhtml"

    02 03 04 05 06 07 08 09 10

    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.go <p:menuitem value="Documentos" url="#" /> <p:menuitem value="Musicas" url="#" /> <p:menuitem value="Imagens" url="#" />

    1 1 ogle.com.br" /> 12 13 14 15

    <p:menuitem value="Zip" url="#" /> <p:menuitem value="Sair" url="#"icon="ui16 icon ui-icon-power" /> </p:breadCrumb> </p:layoutUnit>

    17 18

    1 <p:layoutUnit position="left" width="180"header="Me 9 nu" collapsible="true" > 2 <p:menu style="width: 98%"> 0 21 22 23 24 2 5 2 6 w.google.com.br" /> 2 7 > 2 8 29 30 31 32 pagar"url="#" /> <p:menuitem value="... a receber"url="#" /> </p:submenu> <p:submenu label="Outros"> <p:menuitem value="Home"url="http://ww <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:submenu label="Contas..."> <p:menuitem value="... a

    3 <p:menuitem value="Sair" url="#"icon="u 3 i-icon ui-icon-power" /> 3 </p:submenu>

    4 35 36 37 38 39 40 41 42 4 3 4 4 w.google.com.br" /> 4 5 > 4 6 47 48 49 50 51 52 pagar"url="#" /> <p:menuitem value="... a receber"url="#" /> </p:submenu> <p:submenu label="Outros"> <p:menuitem value="Home"url="http://ww <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="uiicon ui-icon-power" /> </p:menubar> <h:form> <p:menuButton value="Menu..."> <p:menuitem value="Home"url="http://ww <p:menuitem value="Documentos"url="#" / <p:menuitem value="Musicas" url="#"/> <p:menuitem value="Imagens" url="#"/> <p:menuitem value="Zip" url="#" /> </p:menu> </p:layoutUnit> <p:layoutUnit position="center" header="Sistema"> <p:menubar> <p:submenu label="Contas..."> <p:menuitem value="... a

    5 3 5 4 w.google.com.br" /> 5 5 > 5 6 57 58

    5 <p:menuitem value="Sair" url="#"icon="u 9 i-icon ui-icon-power" /> 6 </p:menuButton> 0 61 62 63 64 </h:form> </p:layoutUnit> </p:layout>

    6 <p:dock> 5 6 <p:menuitem value="Home"url="http://www.google.com. 6 br" icon="/imagens/home.png" /> 6 <p:menuitem value="Documentos" url="#"icon="/imagen 7 s/documentos.png" /> 6 <p:menuitem value="Musicas" url="#"icon="/imagens/m 8 usicas.png" /> 6 <p:menuitem value="Imagens" url="#"icon="/imagens/i 9 magens.png" /> 7 <p:menuitem value="Zip" url="#"icon="/imagens/zip. 0 png" /> 71 72 7 3 </p:dock>

    <p:stack icon="/imagens/stack.png">

    7 <p:menuitem value="Home"url="http://www.google.com. 4 br" icon="/imagens/home.png" /> 7 <p:menuitem value="Documentos" url="#"icon="/imagen 5 s/documentos.png" /> 7 <p:menuitem value="Musicas" url="#"icon="/imagens/m 6 usicas.png" /> 7 <p:menuitem value="Imagens" url="#"icon="/imagens/i 7 magens.png" /> 7 <p:menuitem value="Zip" url="#"icon="/imagens/zip. 8 png" /> 79 80 </p:stack>

    81 </h:body> 82 </html> Por hoje, ficamos por aqui! Ao final da srie de componentes do PrimeFaces, crio a postagem de como usar o layout do PrimeFaces com os templates do Facelets.! :) Postado por andii.brunetta s 19:32 12 comentrios Enviar por e-mailBlogThis!Compartilhar no TwitterCompartilhar no FacebookCompartilhar no Orkut Marcadores: JavaEE 6, JSF2.0, PrimeFaces 23 de maio de 2011 JSF 2.0: Componentes PrimeFaces 2.2.1 - Parte 3 Vamos dar continuidade nas postagens sobre os componentes do PrimeFaces na verso 2.2.1. Na postagem anterior tratamos mais a parte de painis, hoje ser tratado de componentes um pouco mais teis do que aqueles. Estrutura do projeto Caso no saiba como montar a estrutura do projeto veja aqui. Depois de pronto o projeto fica com essa estrutura:

    Antes de comear vamos ver o cdigo fonte do nosso bean TesteBean.java que ir auxiliar os componentes (aos poucos vamos entendendo como essa classe ser utilizada): 01 @Named 02 @SessionScoped 03 public class TesteBean implements Serializable { 04 05 06 07 08 0 9 private int numeroSlider; private double valorSpinner; private List<String> animais;

    public void confirmar() {

    FacesMessage message 1 = newFacesMessage(FacesMessage.SEVERITY_INFO, "Confirmao", " 0 Voc confirmou alguma coisa!"); 11 FacesContext.getCurrentInstance().addMessage(null, message); 12 } public int getNumeroSlider() { return numeroSlider; } public void setNumeroSlider(int numeroSlider) { this.numeroSlider = numeroSlider; } public double getValorSpinner() { return valorSpinner; } public void setValorSpinner(double valorSpinner) {

    13 14 15 16 17 18 19 20 21 22 23 24 25 26

    27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 }

    this.valorSpinner = valorSpinner; } public List<String> getAnimais() { animais = new ArrayList<String>(); animais.add("Girafa"); animais.add("Pato"); animais.add("Leopardo"); animais.add("Elefante"); animais.add("Zebra"); return animais; } public void setAnimais(List<String> animais) { this.animais = animais; }

    Comeando... Nossa tela ir ficar assim:

    Bom... na imagem no aparecem todas os componentes, alguns deles sero chamados pelos botes "Confirmar" e "Abrir janela". Agora vamos comear de uma vez, com um componente que bem util, op:confirmDialog ele

    um janelinha que geralmente utilizada em casos de confirmao de excluso ou confirmar alguma outra coisa:

    Ao clicar no boto "Sim", a janela se fecha e mostra um mensagem a partir do componente p:messages (visto na primeira postagem), assim:

    Cdigo-fonte do componente: 1 <p:messages id="mensagens" showDetail="true" /> 2 <p:commandButton value="Confirmar"onclick="confirmacao.show()" t ype="button"/>

    3 <h:form> <p:confirmDialog widgetVar="confirmacao"header="Confirmar" m 4 essage="Deseja confirmar alguma coisa?"severity="alert" modal="true"> <p:commandButton value="Sim" update="mensagens"oncomplet 5e="confirmacao.hide()" actionListener="#{testeBean.confirmar}" / > 6 <p:commandButton value="No"onclick="confirmacao.hide() " type="button" />

    7 </p:confirmDialog> 8 </h:form> Vamos entender o que est acontecendo neste cdigo, inicialmente eu tenho um p:messages que ser atualizado quando eu clicar no commandButton correspondente ao "Sim", esse commandButton chama o mtodo confirmar que retorna uma mensagem ao JSF peloFacesContext. A propriedade modal do confirmDialog serve pra bloquear que possa ser feito outras aes com este componente em funcionamento, ou seja ele faz tipo um painel de vidro, no deixando a possibilidade de mexer nos componentes atrs dele. O segundo componente bem parecido com o anterior, porm mais malevel, o p:dialog, ele praticamente um painel s que no fixo na tela, ele realmente funciona como uma janelinha independente que abre, fecha e que pode ser movida de lugar:

    Cdigo-fonte do componente: <p:commandButton value="Abrir 1 janela" onclick="janela.show()"type="button" /> 2 <p:dialog widgetVar="janela" header="Novo..." modal="true"width= "500" height="230">

    3 ... 4 </p:dialog> No cdigo 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 invs de clicar na tab para abri-la, existem dois botes, um de avanar e outro de voltar uma tab:

    Cdigo-fonte do componente: 01 <p:wizard nextLabel="Avanar" backLabel="Voltar"> 02 <p:tab title="Slider"> 03 04 05 06 07 08 <p:panel header="Testando o slider"> </p:panel> </p:tab> <p:tab title="Spinner"> <p:panel header="Testando o spinner"> </p:panel>

    09 </p:tab> 10 </p:wizard> Veja que o mesmo composto da mesma tag p:tab, j utilizada por outros componentes (na segunda postagem), quanto ao p:panel, no 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 nmeros utilizado juntamente com um inputText (talvez com outros elementos tambm, no testei isso), o interessante dele que pode-se definir intervalos numricos:

    Cdigo-fonte do componente: 1 <h:outputText value="Numero:" /> 2 <p:inputText id="numero1" value="#{testeBean.numeroSlider}"/> 3 <p:slider for="numero1" minValue="-

    100" maxValue="100"style="width: 127px"/> Bom, como nem tudo perfeito... a verso 2.2.1 do PrimeFaces tambm no perfeita, e sim.. ela tem bugs, por exemplo o componente p:spinner no renderiza corretamente (veja no link a renderizao correta dele), mas mesmo assim vou mostrar ele, bom saber que ele existe, pode ser que em outra verso ele funcione perfeitamente:

    Cdigo-fonte do componente: 1 <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 numrico e tambm a quantidade de quanto ele deve somar ou subtrair do numero atual, isso configurado na propriedade stepFactor. Para no 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 soluo para este bug eu volto aqui e atualizo esta postagem (se algum souber essa soluo, ser bem vinda). 2 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 utilizao dela, aconselho dar uma olhada, aqui vou mostrar o bsico do bsico dela:

    Cdigo-fonte do componente: <p:dataTable value="#{testeBean.animais}" var="a"paginator="true 1 " rows="4"> 2 <p:column headerText="Nome dos animais"> 3 4 5 6 <h:outputText value="#{a}" /> </p:column> <p:column style="width: 30px"> <p:commandButton image="ui-icon-wrench" />

    7 </p:column> 8 </p:dataTable> Vou levar em considerao 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 paginao, ento eu preciso dizer quantas linhas eu quero que aparea em cada pgina, para isso eu uso a propriedade rows. Obs: importante saber que ao utilizar um h:column em uma p:dataTable, esta no renderizar corretamente, por isso eu uso o p:column.

    E pra finalizar, um componente que funciona bem parecido com o componente acima, porm mais malevel tambm que o p:dataGrid:

    Veja que ele usa paginao da mesma forma que a p:dataTable, abaixo do cdigo explicarei alguns detalhes. Cdigo-fonte do componente: <p:dataGrid value="#{testeBean.animais}" var="a"paginator="true" 1 columns="2" rows="4"> 2 <p:column> 3 4 5 6 <p:panel header="Animal"> <h:outputText value="Este animal um #{a}" /> </p:panel> </p:column>

    7 </p:dataGrid> Veja que eu estou usando a mesma lista que usei na p:dataTable, a diferena que, nap:dataGrid utilizada apenas um p:column, essa unica coluna funciona como um lao de repetio. Vamos aos detalhes importantes: a propriedade columns serve para definir quantas colunas devem ser mostradas, j a propriedade rows primeira impresso 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 no ... na realidade ela corresponde a quantidade de elementos que devem ser mostrados na pgina: como eu defini que teria apenas duas colunas, por exemplo eu no posso querer que mostre apenas trs elementos na dataGrid (ficaria meio furada) para isso no acontecer, a dataGrid preenche todos os lugares, no deixando apenas trs elementos e um espao em branco, as vezes mesmo eu explicando fica difcil de entender, por isso aconselho fazer testes com ela. Enfim, o cdigo fonte completo: 01 <html xmlns="http://www.w3.org/1999/xhtml" 02 xmlns:h="http://java.sun.com/jsf/html" 03 04 05 06 07 08 xmlns:p="http://primefaces.prime.com.tr/ui"> <h:head> <title>Facelet Title</title> </h:head> <h:body> <p:messages id="mensagens" showDetail="true" />

    0 <p:commandButton value="Confirmar"onclick="confirmacao. 9 show()" type="button"/> 1 <h:form> 0 <p:confirmDialog widgetVar="confirmacao"header="Con 1 firmar" message="Deseja confirmar alguma 1 coisa?"severity="alert" modal="true">

    <p:commandButton value="Sim"update="mensagens" o 1 ncomplete="confirmacao.hide()"actionListener="#{testeBean.confi 2 rmar}" /> 1 <p:commandButton value="No"onclick="confirmaca 3 o.hide()" type="button" /> 1 </p:confirmDialog> 4 15 16 17 18 </h:form> <p:separator />

    1 <p:commandButton value="Abrir 9 janela"onclick="janela.show()" type="button" /> 2 <p:dialog widgetVar="janela" header="Novo..."modal="tru 0 e" width="500" height="230"> 2 1 2 2 "> 23 24 25 26 <h:form> <p:wizard nextLabel="Avanar"backLabel="Voltar <p:tab title="Slider"> <p:panel header="Testando o slider"> <h:outputText value="Numero:" />

    2 <p:inputText id="numero1"value="#{t 7 esteBean.numeroSlider}"/> 2 <p:slider for="numero1"minValue="8 100" maxValue="100" style="width: 127px"/> 29 30 31 32 33 34 </p:panel> </p:tab> <p:tab title="Spinner"> <p:panel header="Testando o spinner"> <h:outputText value="Valor:" />

    3 <p:spinner value="#{testeBean.valo 5 rSpinner}" min="-10" max="10"stepFactor="0.10" showOn="hover"/> 3 </p:panel> 6 37 38 39 40 41 42 43 </p:tab> </p:wizard> </h:form> </p:dialog> <p:separator />

    44

    <h:form>

    4 <p:dataTable value="#{testeBean.animais}" var="a"pa 5 ginator="true" rows="4"> 4 <p:column headerText="Nome dos animais"> 6 47 48 49 50 51 52 53 54 <h:outputText value="#{a}" /> </p:column> </p:dataTable> </h:form> <p:separator /> <h:form>

    5 <p:dataGrid value="#{testeBean.animais}" var="a"pag 5 inator="true" columns="2" rows="4"> 5 <p:column> 6 57 58 59 60 61 62 63 64 #{a}" /> </p:panel> </p:column> </p:dataGrid> </h:form> </h:body> <p:panel header="Animal"> <h:outputText value="Este animal um

    65 </html> Acredito que por hoje chega... =) Postado por andii.brunetta s 02:16 8 comentrios Enviar por e-mailBlogThis!Compartilhar no TwitterCompartilhar no FacebookCompartilhar no Orkut Marcadores: JavaEE 6, JSF2.0, PrimeFaces 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 no tenha visto a primeira parte: veja aqui, nessa postagem eu vou tratar mais a parte de painis. Estrutura do projeto Caso no 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 esto dentro de Pginas Web. Como na outra postagem iremos apenas usar a pgina index. Comeando... Nossa tela ir ficar assim:

    Assim como na postagem anterior, aparentemente no 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 botes, menus... ele realmente mais pra design da pgina, mas o interessante que pode-se definir o alinhamento dos elementos:

    Cdigo-fonte do componente: 01 <p:toolbar>

    02 03

    <p:toolbarGroup align="left">

    <p:commandButton value="Buscar" image="ui-iconsearch" /> 04 <p:divider />

    0 <p:commandButton value="Novo" image="ui-icon-folder5 open"/> 0 <p:commandButton value="Salvar" disabled="true"image=" 6 ui-icon-disk"/> <p:commandButton value="Excluir" image="ui-icontrash"/> 08 </p:toolbarGroup> 07 09 10 <p:toolbarGroup align="right"> <p:commandButton value="Sair" image="ui-icon-power"/>

    11 </p:toolbarGroup> 12 </p:toolbar> Repare que o alinhamento dos botes 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 estaro dentro das tabs desse accordion.

    Cdigo-fonte do componente: 01 <p:accordionPanel> 02 <p:tab title="Passar imagens!"> 03 04 05 06 07 08 </p:tab> <p:tab title="Painel"> </p:tab> <p:tab title="Conjunto de tabs..."> </p:tab> <p:tab title="Show Imagem">

    09 </p:tab> 10 </p:accordionPanel> ATENO: A partir de agora os componentes estaro dentro do accordion, mas isso no 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 ns 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 (so quatro imagens), ou coloque as suas prprias imagens, depois de baixado e extrado, coloque essas imagens dentro de Pginas Web do projeto, ou onde desejar, mas tome cuidado na hora de se referenciar a elas por causa do caminho. Cdigo-fonte do componente: 1 <p:imageSwitch effect="shuffle" widgetVar="imagens"slideshowAuto ="true"> 2 <p:graphicImage value="nature1.jpg" /> 3 4 <p:graphicImage value="nature2.jpg" /> <p:graphicImage value="nature3.jpg" />

    5 <p:graphicImage value="nature4.jpg" /> 6 </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 no tem imagem, para testar basta usar as setas do teclado: direita e esquerda, assim avana uma imagem ou volta outra, pra ter um efeito melhor sete a propriedade slideShowAuto do imageSwitch para false. Cdigo-fonte do componente: 1 <p:hotkey bind="left" oncomplete="imagens.previous();" /> 2 <p:hotkey bind="right" oncomplete="imagens.next();" /> O prximo 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:

    Cdigo-fonte do componente: <p:panel header="Teste 1 Cadastro" toggleable="true"closable="true"> 2 .... 3 </panel> S postei o cdigo do prprio panel, ao final tem o cdigo completo da pgina. O p:tabView, apenas um conjunto de abas, funciona da mesma forma que um p:accordion (visto l no comeo), veja:

    Cdigo-fonte do componente: 01 <p:tabView> 02 <p:tab title="Tab 1"> 03 04 05 06 07 08 09 10 <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>

    11 </p:tabView> E pra finalizar vamos ver um componente "invisvel", 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", porm, eu no consigo renderizar ela diretamente, se eu mandar atualizar ela, no vai funcionar, por isso eu coloco ela dentro de um outputPanel, pois eu mando atualizar ele e no a imagem:

    Para esse exemplo eu vou precisar de um bean para auxiliar, pra isso, dentro de Pacotes de cdigo-fonte, crie um novo pacote com o nome de controle e dentro dele crie uma classe java com o nome de TesteBean: 01 @Named 02 @SessionScoped 03 public class TesteBean implements Serializable { 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 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;

    21 } 22 } Acredito que no precise explicar nada da classe acima, ento vamos continuar: Cdigo-fonte do componente: 1 <h:form> 2 <p:commandButton value="Mostra" actionListener="#{testeBean.

    mostrar}" update="painel"/> 3 4 5 6 7 <p:outputPanel id="painel"> <p:commandButton value="Esconde" actionListener="#{testeBean .esconder}" update="painel" />

    <p:graphicImage value="nature1.jpg" rendered="#{testeBea n.mostra}" /> 8 </p:outputPanel> 9 </h:form> Os detalhes que devem ser observados so os actionListener e update dos commandButton, e o rendered do graphicImage. S explicando melhor, o rendered diz se o componente deve ser renderizado ou no, por isso que se eu mandar atualizar diretamente a imagem na hora que eu mando atualizar ela e o rendered estiver como false, ele no vai encontrar a tal da imagem pra atualizar, pois ela no foi renderizada, por isso eu preciso renderizar um componente acima dela. Para finalizar, o cdigo-fonte completo da pgina index.xhtml: 01 <html xmlns="http://www.w3.org/1999/xhtml" 02 xmlns:h="http://java.sun.com/jsf/html" 03 04 05 06 07 08 09 10 11 12 13 icon-folder-open"/> 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="uiicon-search" /> <p:divider /> <p:commandButton value="Novo" image="ui-

    1 <p:commandButton value="Salvar"disabled="t 4 rue" image="ui-icon-disk"/> 15 16 17 18 19 20 21 22 icon-power"/> </p:toolbarGroup> </p:toolbar> </h:form> <p:commandButton value="Excluir"image="uiicon-trash"/> </p:toolbarGroup> <p:toolbarGroup align="right"> <p:commandButton value="Sair" image="ui-

    23 24 25 26 27 28 <p:accordionPanel autoHeight="false"> <p:tab title="Passar imagens!"> <center> <h:form>

    2 <p:imageSwitch effect="shuffle"widgetVa 9 r="imagens" slideshowAuto="true"> <p:graphicImagevalue="nature1.jpg 3 0 " /> 3 1 3 2 3 3 3 4 <p:graphicImagevalue="nature2.jpg" /> <p:graphicImagevalue="nature3.jpg" /> <p:graphicImagevalue="nature4.jpg" /> </p:imageSwitch> <p:hotkey bind="left"oncomplete="image <p:hotkey bind="right"oncomplete="imag ens.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">

    3 5 ns.previous();" /> 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

    56 57 58 59 60 61 62 63 64 65 66 3" />

    <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 </p:tab> </p:tabView> </p:tab> <p:tab title="Show Imagem">

    6 <h:form> 7 6 <p:commandButton value="Mostra"actionListen 8 er="#{testeBean.mostrar}" update="painel"/> <p:commandButton value="Esconde"actionListe 6 9 ner="#{testeBean.esconder}" update="painel" /> 7 0 71 72 <p:outputPanel id="painel">

    7 <p:graphicImage value="nature1.jpg"rend 3 ered="#{testeBean.mostra}" /> 7 </p:outputPanel> 4 75 76 77 78 </h:form> </p:tab> </p:accordionPanel> </h:body>

    79 </html> Aqui ficamos com mais uma postagem! =) Postado por andii.brunetta s 21:45 12 comentrios Enviar por e-mailBlogThis!Compartilhar no TwitterCompartilhar no FacebookCompartilhar no Orkut Marcadores: JavaEE 6, JSF2.0, PrimeFaces 8 de maio de 2011 JSF 2.0: Componentes PrimeFaces 2.2.1 - Parte 1 Nessa postagem vamos comear com alguns componentes mais simples do PrimeFaces, caso no saiba por onde comear, recomendo ver essa postagem antes. Estrutura do projeto Para comear precisamos de um projeto web que j contenha o .jar do PrimeFaces (ver o link acima). Depois disso, dentro de pacotes de cdigo-fonte crie um pacote com o nome decontrole e dentro dele uma classe com o nome de TesteBean.java, essa classe no ter nada de mais, ser apenas para auxiliar os componentes e testar outros, o cdigo da mesma :

    01 @Named 02 @RequestScoped 03 public class TesteBean { 04 05 06 07 08 09 10 11 12 13 private String nome; private String descricao; private String telefone; private String cpf; private String observacao; private Date dataCadastro; private String senha;

    public void testar(){ FacesContext context = 14 FacesContext.getCurrentInstance(); 1 context.addMessage(null, newFacesMessage(FacesMessage. 5 SEVERITY_INFO, "Aviso", "Testado com sucesso!")); 1 } 6 17 18 19 } Como podemos ver, o mtodo testar no faz praticamente nada alm de mandar uma mensagem para o JSF. O projeto fica assim: //Gerar os getters e setters

    Tudo o que vamos fazer a partir de agora dentro do index.xhtml. Os componentes que sero apresentados nessa postagens so mais simples, mais utilizados para telas de cadastro.

    Comeando... Nossa tela ficar assim:

    Aparentemente no tem nada de mais, todos os campos parecem ser apenas inputText normais... mas no so! Vou comear falando sobre os componente e mostrando os mesmo tempo, ao final eu posto o cdigo inteiro, para mais informaes e exemplos aconselho acessar os links disponveis nos componentes, do prprio site do PrimeFaces. Dentro do h:body do index eu vou criar um p:fieldset, o mesmo que usamos na postagem anterior para testar se o prime estava funcionando:

    Cdigo-fonte do componente: 1 <p:fieldset legend="Meu Cadastro" toggleable="true"> 2 </p:fieldset> Agora dentro desse fieldset eu preciso de um h:form para poder usar p:commandButton, esse meu boto vai chamar o mtodo feito no TesteBean:

    Cdigo-fonte do componente: <p:commandButton value="Testar" actionListener="#{testeBean.test 1 ar}" /> Se clicar no boto nesse ponto, ele vai chamar o mtodo do bean normalmente mas no vai aparecer nada, primeiramente porque no temos um componente para receber a mensagem enviada pelo mtodo e alm de ter esse componente precisamos mandar atualizar ele... Para mostrar essa mensagem, o PrimeFaces tem duas opes: p:growl e p:messages, lembrando que voc no precisa usar os dois juntos, apenas estou fazendo isso para exemplo, primeiro o growl:

    Cdigo-fonte do componente: 1 <p:growl id="avisos" showDetail="true" life="3000" /> Lembre-se de adicionar a propriedade update no p:commnadButton, e mandar atualizar o growl pelo id, ficando assim: update="avisos" Agora vamos ver o messages:

    Cdigo-fonte do componente: 1 <p:messages id="mensagens" showDetail="true" /> Quanto ao update do commandButton, isso funciona da mesma forma para o messages, ficando assim update="mensagens" Agora chega de frescuras e vamos comear os componentes de texto e datas... entre outros! Para comear vamos usar o p:inputText, este componente serve mais para acompanhar o tema do PrimeFaces, mas pra quem gosta de tudo estilizado, ele ajuda muito!

    Cdigo-fonte do componente: 1 <h:outputText value="Nome:" /> 2 <p:inputText id="nome" value="#{testeBean.nome}" /> O prximo componente acredito que seja bem til, o p:focus, ele responsvel por setar o foco em um campo ao abrir a pgina, nesse exemplo eu estou setando ele no campo anterior que tem o id nome. Obs: este componente deve ficar dentro do mesmo form que o componente que se deseja que tenha o foco, ao abrir a pgina ele fica assim:

    Cdigo-fonte do componente: 1 <p:focus for="nome" /> O p:inputTextarea, tem um efeito bem legal quando clicado, e ele se expande de

    acordo com a quantidade de texto, e assim como o p:inputText serve mais pra manter o padro do tema:

    Cdigo-fonte do componente: 1 <h:outputText value="Observaes:" /> 2 <p:inputTextarea value="#{testeBean.observacao}" /> O componente de agora um dos que eu mais gosto, o p:calendar, este dispensa at comentrios, vamos v-lo:

    Ao clicar na caixinha de texto, o calendrio se abre, claro... tem outras opes de usar ele tambm, ver o link do p:calendar. Cdigo-fonte do componente: 1 <h:outputText value="Data cadastro:" /> 2 <p:calendar value="#{testeBean.dataCadastro}" /> Outro que bem til o p:inputMask, por no haver necessidade de ficar formatando na mo, por exemplo o nmero de CPF/CNPJ/telefone, entre outras opes, como a mscara voc quem define, serve para o que quiser:

    Obs: a mscara s aparece quando o campo estiver em foco. Cdigo-fonte do componente: 1 <h:outputText value="Telefone:" /> <p:inputMask mask="(999)99992 9999" value="#{testeBean.telefone}" /> 3 <h:outputText value="CPF:" /> 4 <p:inputMask mask="999.999.999-99" value="#{testeBean.cpf}"/> Veja no link do p:inputMask as possibilidades de usar a propriedade mask, por exemplo, pode-se definir que um determinado campo tenha apenas letras, ou apenas nmeros, ou que o caractere possa ser nmero ou letra... muito interessante este componente! Que tal aparecer um teclado virtual ao clicar em um campo? Pois , este um componente que eu achei um mximo, mas no consegui aplicar ele em nenhum lugar (por enquanto), estou falando do p:keyboard, um teclado virutal que tem vrias

    possibilidades de uso (o padro um teclado completo com letras e nmeros), aqui vou mostrar duas formas de uso que eu gostei, a primeira, apenas um teclado de letras:

    Cdigo-fonte do componente: 1 <h:outputText value="Descrio:" /> 2 <p:keyboard layout="qwertyBasic" value="#{testeBean.descricao}" />

    A outra forma de utilizao, uma configurao das propriedades para transform-lo em um teclado virtual para senhas:

    Cdigo-fonte do componente: 1 <h:outputText value="Senha:" /> <p:keyboard password="true" keypadOnly="true" value="#{testeBean .descricao}" /> Lembrando que o componente o mesmo, apenas muda as propriedades. 2 Agora para finalizar, vamos voltar as frescuras... quer usar um separador? O PrimeFaces, tem tambm, o p:separator!!!

    Este componente voc define a comprimento e largura por css, com o width e height... Cdigo-fonte do componente: 1 <p:separator style="width: 80%; height: 5px" /> Para finalizar, o cdigo-fonte completo da pgina index.xhtml: 01 <html xmlns="http://www.w3.org/1999/xhtml" 02 xmlns:h="http://java.sun.com/jsf/html" 03 04 05 06 07 08 09 10 11 xmlns:p="http://primefaces.prime.com.tr/ui" > <h:head> <title>PrimeFaces 2.2.1</title> </h:head> <h:body> <p:growl id="avisos" showDetail="true" life="3000" /> <p:fieldset legend="Meu Cadastro" toggleable="true"> <h:form> <p:focus for="nome" />

    12 13 14 1 5 ome}" /> 1 6 1 7 1 8 acao}" /> 19 20 2 1 o}" /> 2 2 23 24 25 <h:panelGrid columns="2"> <h:outputText value="Nome:" /> <p:inputText id="nome" value="#{testeBean.n

    <h:outputText value="Observaes:" /> <p:inputTextarea value="#{testeBean.observ

    <h:outputText value="Data cadastro:" /> <p:calendar value="#{testeBean.dataCadastr

    <h:outputText value="Telefone:" /> <p:inputMask mask="(999)99999999"value="#{testeBean.telefone}" />

    <h:outputText value="CPF:" /> <p:inputMask mask="999.999.99926 99"value="#{testeBean.cpf}" /> 27 28 <h:outputText value="Descrio:" />

    2 <p:keyboard layout="qwertyBasic" value="#{t 9 esteBean.descricao}" /> 3 <h:outputText value="Senha:" /> 0 3 <p:keyboard password="true"keypadOnly="true 1 " value="#{testeBean.descricao}" /> 3 </h:panelGrid> 2 33 34 <p:separator style="width: 80%; height: 5px"/>

    3 <p:commandButton value="Testar"actionListener=" 5 #{testeBean.testar}"update="avisos,mensagens" /> 3 </h:form> 6 37 38 </p:fieldset> <p:messages id="mensagens" showDetail="true" />

    39 </h:body> 40 </html>

    Por hoje chega... foram componentes simples, mas apenas porque a primeira postagem sobre isso ainda, a cada postagem vou colocando componentes mais interessantes!

    Вам также может понравиться