Java Facelets: Aprenda a criar templates

Com o uso de Facelets torna-se uma tarefa f�cil criar templates para uso em nossos sistemas. Ele nos proporciona toda a estrutura necess�ria para tal tarefa e isso � o que veremos ao longo deste artigo, aprendendo a criar e usar os templates atrav�s de Facelets.

Para este artigo usaremos 4 tags que s�o muito importantes, em suma, s�o elas que ir�o realizar a base estrutural de nosso template, s�o elas:

ui:insert - Esta tag serve como um container para definir que �rea do template pode ser substitu�da na p�gina que est� carregando o template. Suponha, por exemplo, que voc� possua uma template onde apenas o conte�do do meio mudar�, os elementos de cabeçalho e rodap� ser�o os mesmos para todas as p�ginas. Nesse caso voc� definir� o ui:insert dentro da sua DIV que cont�m o conte�do central.
ui:define - Se voc� tem uma tag para dizer qual conte�do pode ser sobreposto (ui:insert) voc� deve ter uma tag para dizer qual conte�do ir� ser inserido neste local, essa � a funç�o da ui:define. Se no template voc� diz: �Eu quero que apenas dentro do ui:insert sejam colocado conte�dos diferentes do layout�, na p�gina que usar� o layout voc� ir� definir: �Eu quero que no local deste ui:insert definido pelo layout, fique o meu conte�do, fazemos isso atrav�s do ui:define.
ui:include - Para quem veio do PHP, � f�cil perceber que a funç�o desta tag � apenas incluir uma p�gina dentro da outra. Com essa tag voc� consegue colocar uma p�gina inteira dentro de outra p�gina, dessa forma se voc� tiver uma p�gina que cont�m muito c�digo, poder� dividi-la em p�ginas menores.
ui:composition - Essa tag �chama� o seu template na p�gina que voc� deseja, ou seja, se voc� quiser usar o template A na p�gina B, dever� dizer ao ui:composition explicitamente que deseja usar o template A. Por�m ele tem algumas especificidades que voc� deve estar atento: Quando ele � utilizado todo conte�do fora dele � removido assim que sua p�gina � renderizada para o navegador.

Na pr�tica

Dada as devidas explicaç�es vamos a pr�tica, e para tal utilizaremos exemplos bem simples que demonstrar�o apenas a utilizaç�o das tags descritas acima. Na listagem 1 voc� ver� como nosso layout ser� definido.

Listagem 1: Definiç�o do layout.xhtml


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      >
 
    <h:head>
    </h:head>
 
    <h:body>
 
	<div id="page">
 
	    <div id="header">
		<ui:insert name="header" >
		  <ui:include src="/template/basicheader.xhtml" />
		</ui:insert>
	    </div>
 
	    <div id="content">
	  	<ui:insert name="content" >
	 	  <ui:include src="/template/basiccontent.xhtml" />
	   	</ui:insert>
	    </div>
 
	    <div id="footer">
	    	<ui:insert name="footer" >
	    	  <ui:include src="/template/basicfooter.xhtml" />
	    	</ui:insert>
    	    </div>
 
        </div>
 
    </h:body>
</html>

Perceba que o ui:insert est� definido para 3 �reas, s�o elas: cabeçalho, conte�do do meio e rodap�. Isso significa que estamos permitindo a alteraç�o nessas 3 �reas.

Listagem 2: basicheader.xhtml


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:ui="http://java.sun.com/jsf/facelets"
      >
    <body>
	    <ui:composition>
 
		<h1>Header Padr�o</h1>
 
	    </ui:composition>
    </body>
</html>

Listagem 3: Basiccontent.xhtml


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:ui="http://java.sun.com/jsf/facelets"
      >
    <body>
	    <ui:composition>
 
		<h1>Conte�do do Meio</h1>
 
	    </ui:composition>
    </body>
</html>

Listagem 4: Basicfooter.xhml


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:ui="http://java.sun.com/jsf/facelets"
      >
    <body>
	    <ui:composition>
 
		<h1>Footer padr�o</h1>
 
	    </ui:composition>
    </body>
</html>

Note que no basicheader.xhtml usamos o ui:composition, o que significa que todo c�digo que est� fora desta tag n�o ser� renderizado, ent�o veja como ficar� nosso basicheader.xhtml depois de renderizado.

Listagem 5: Basicheader.xhtml depois de renderizado

	
<ui:composition>
 
	<h1>Header padr�o</h1>
 
</ui:composition>

Enfim um layout b�sico foi criado e suas �reas foram definidas, mas e como fazemos para utiliz�-lo em nossas p�ginas ? Vamos criar uma p�gina chamada �ndex.xhtml e definir nosso layout nesta.

Listagem 6: index.xhtml usando layout.xhtml


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      >
    <h:body>
 
    	<ui:composition template="template/layout.xhtml">
 
    	</ui:composition>
 
    </h:body>
 
</html>

Quando carregamos o layout acima sem nenhum ui:define (que � o correspondente ao ui:insert) ser� carregado o conte�do padr�o definido no ui:insert do layout (se existir), no caso da listagem 6, � isso que ocorrer�, todo conte�do padr�o ser� carregado. Mas na listagem 7 vamos fazer algo mais robusto e inserir nosso pr�prio conte�do especifico para a p�gina cadastro.xhtml.

Listagem 7: Cadastro.xhtml


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      >
    <h:body>
 
    	<ui:composition template="/template/layout.xhtml">
 
    		<ui:define name="content">
    			formulario de cadastro ficar� aqui
    		</ui:define>
 
    	</ui:composition>
 
    </h:body>
 
</html>

Perceba no c�digo da listagem 7 que definimos apenas o ui:define para o ui:insert de nome �content� definido em nosso layout.xhtml. Dessa forma estamos sobrescrevendo todo conte�do do ui:insert de nome �content�.

CONCLUS�O

O uso do Facelets para gerenciamos da sua camada de visualizaç�o (view) faz-se necess�rio ao visto que este ajuda o desenvolvedor a focar no neg�cio e deixar o trabalho de design para outra �rea.

Java Facelets: Aprenda a criar templates

Veja neste artigo como criar templates simples usando Facelets.

Na pr�tica

CONCLUS�O

Veja tamb�m

Artigos relacionados