Template em Facelets Com Layout Do PrimeFaces 3.0

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 tema dentro 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 componentegrowl (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:
<html xmlns="http://www.w3.org/1999/xh tml" xmlns:ui="http://java.sun.com/jsf/facel 02 ets" xmlns:h="http://java.sun.com/jsf/ht 03 ml" xmlns:p="http://primefaces.org/ 04 ui" 01
05 06 07 08
xmlns:f="http://java.sun.com/jsf/cor e"> <h:head >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Meu 09 Sistema</title> <style type="text/css" 10 > body {background-color: #eeeeee; font-size: 11 12px} 12 </style> </h:head 13 > <h:body 14 > <div align="center" 15 > <p:layout style="min-width:1020px;max-width:1020px;min16 height:600px"> <p:layoutUnit position="north" size="100 17 "> <h:graphicImage url="/tema/imagens/topo.jpg 18 " /> 19 </p:layoutUnit> 20 <p:layoutUnit position="west" size="220 21 "> <ui:insert name="menu" 22 > 23 <h:form> <p:menu style="width: 24 200px"> <p:submenu label="Menu" 25 > <p:menuitem value="Login" ic 26 on="ui-icon-key"/> <p:menuitem value="Fazer 27 meu cadastro"icon="ui-icon-contact" /> 28 </p:submenu> 29 </p:menu> 30 </h:form> 31 </ui:insert> 32 </p:layoutUnit>
33 34 35 36 37 38 39 40
<p:layoutUnit position="center" > <ui:insert name="centro" > O que estiver aqui ser substituido! </ui:insert> </p:layoutUnit> </p:layout> </div> </h:body
> </html 41 >

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:
<html xmlns="http://www.w3.org/1999/xh tml" xmlns:h="http://java.sun.com/jsf/ht 2 ml" xmlns:ui="http://java.sun.com/jsf/facelet 3 s"> <ui:decorate template="/tema/padrao.xht 4 ml"> <ui:define name="centro 5 "> 1
6 7 8
Aqui o centro do index! </ui:define > </ui:decorate
> </html 9 >

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

Template em Facelets Com Layout Do PrimeFaces 3.0

Transféré par

Informations du document

Description originale:

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Template em Facelets Com Layout Do PrimeFaces 3.0

Transféré par

Droits d'auteur :

Formats disponibles

JSF 2.0: Template em Facelets com Layout do PrimeFaces 3.

Ento meu template (padrao.xhtml) ficou assim:

<html xmlns="http://www.w3.org/1999/xh tml" xmlns:ui="http://java.sun.com/jsf/facel 02 ets" xmlns:h="http://java.sun.com/jsf/ht 03 ml" xmlns:p="http://primefaces.org/ 04 ui" 01

xmlns:f="http://java.sun.com/jsf/cor e"> <h:head >

> </html 41 >

Aqui o centro do index! </ui:define > </ui:decorate

> </html 9 >

Vous aimerez peut-être aussi