JSF – Facelets – Elementos UI – Java

Publicado: 2 de fevereiro de 2015 em Java
0

O termo Facelets refere-se a linguagem de declaração da visão para a tecnologia JavaServer Faces. O Facelet é uma linguagem de declaração de página poderosa, mas leve, que é usada para construir visões JSF usando modelos HTML para construir árvores de componentes. Ou seja com o elementos Facelets chamados através da marcação UI você pode criar Templates que facilitam a padronização de uma aplicação Java Enterprise. Em suma, o uso de Facelets reduz o tempo e esforço que precisa ser gasto no desenvolvimento e implantação de aplicações empresariais.

JSF – Elementos – Facelets – ui

  • <ui:insert> define conteúdos a serem colocados em um modelo.
  • <ui:include> Inclui conteúdo de uma página para outra página xhtml.
  • <ui:composition> Carrega um modelo usando o atributo do modelo.
  • <ui:define> Define os conteúdos a serem inseridos em um modelo.

Criando um Template usando Facelets

1 – Crie uma aplicação Web dinâmica JSF, Crie uma nova pagina XHTML e escolha o Template disponibilizado Common Facelet Page e a nomeie de facecomum.xhtml:

Facelets - Common Facelet Page

Facelets – Common Facelet Page

2 -Como você pode ver o Eclipse disponibilizou uma página com um template contendo um Header e um Body:

Facelets - Template - Header - Body

Facelets – Template – Header – Body

3 – Crie mais duas paginas XHTML utilizando o modelo Blank Facelet Page e nomeie as páginas de header.xhtml e conteúdo.xhtml:

Facelet - Blanck Facelet Page

Facelet – Blanck Facelet Page

4 – Neste ponto criamos uma pagina comum, use os códigos abaixo para as respectivas páginas que já foram criadas, teste a pagina facecomum.xhtm, está é sua comum, a página contém um cabeçalho e um conteúdo, você pode utilizar também um rodapé se preferir, você pode usar sua criatividade e expandir o modelo que será usado em todas as páginas de sua aplicação:

Facelets - Página Comum

Facelets – Página Comum

5 – Agora que já temos um modelo, crie mais duas paginas XHTML para serem as paginas de sua aplicação, as nomeie de pagina01.xhtml e pagina02.xhtml e use a pagina index.xhtml que foi criada automaticamente junto com seu projeto para que seja a pagina principal. Você deve ter a seguinte aplicação:

Facelets - Aplicação - index

Facelets – Aplicação – index

6 – Assim que você clicar no link que chama um conteúdo ele será exibido usando o nome de definição da região do Template para substituir o modelo comum pela pagina atual:

Facelets - Página 01

Facelets – Conteúdo Página 01

7 – A mesma coisa acontece quando você retorna a pagina índice e clica no link do segundo conteúdo:

Facelets- Conteúdo Página 02

Facelets- Conteúdo Página 02

Exemplo:

Neste exemplo criamos um Template usando Facelets para criar uma pagina comum e seus conteúdos usados para substituir os elementos do Template durante o uso da aplicação.

Java

Facelets Template- facecomum.xhtml

<!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"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">

<head>
<title><ui:insert name="pageTitle">Page Title</ui:insert></title>
<style type="text/css">
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
}

.header {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
}

.bottom {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	text-align: center;
	vertical-align: middle;
	color: #8E969D;
}
</style>
</head>

<body bgcolor="#ffffff">
	<table style="border: 1px solid #CAD6E0" align="center" cellpadding="0"
		cellspacing="0" border="0" width="400">
		<tbody>

			<tr>
				<td class="header" height="42" align="center" valign="middle"
					width="100%" bgcolor="#E4EBEB"><ui:insert name="pageHeader">
						<ui:include src="header.xhtml" />

					</ui:insert></td>
			</tr>
			<tr>
				<td height="1" width="100%" bgcolor="#CAD6E0"></td>
			</tr>

			<tr>
				<td width="100%" colspan="2">
					<table width="100%" style="height: 150px" align="left"
						cellpadding="0" cellspacing="0" border="0">
						<tbody>
							<tr>
								<td align="center" width="100%" valign="middle"><ui:insert
										name="body">
										<ui:include src="conteudo.xhtml" />
									</ui:insert></td>
							</tr>
						</tbody>
					</table>
				</td>
			</tr>

			<tr>
				<td colspan="2" valign="bottom" height="1" width="100%"
					bgcolor="#CAD6E0"></td>
			</tr>
		</tbody>
	</table>
</body>

</html>

Facelets Template – header.xhtml

<!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"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html">

<ui:composition>
	<h1>Desenvolvimento Aberto</h1>
</ui:composition>
</html>

Facelets Template- conteudo.xhtml

<!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"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html">

<ui:composition>
	<h1>Meu Conteudo.</h1>
</ui:composition>
</html>

JSF- index.xhtml

<!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"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">

<f:loadBundle basename="resources.application" var="msg" />

<head>
<title><h:outputText value="#{msg.welcomeTitle}" /></title>
</head>
<h:body>
	<ui:composition template="facecomum.xhtml">
		<ui:define name="body">
			<br />
			<br />
			<h:panelGrid cellpadding="20px">
				<h:link value="Meu Conteudo 1" outcome="pagina01" />
				<h:link value="Meu Conteudo 2" outcome="pagina02" />
			</h:panelGrid>
			<br />
			<br />
		</ui:define>
	</ui:composition>
</h:body>
</html>

JSF – pagina01.xhtml

<!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"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html">

<h:body>
	<ui:composition template="facecomum.xhtml">
		<ui:define name="header">
			<h2>header</h2>
		</ui:define>
		<ui:define name="body">
			<h2>Conteudo da Página 01</h2>
			<h:link value="Volar a página inicial" outcome="index" />
		</ui:define>
	</ui:composition>
</h:body>
</html>

JSF – pagina02.xhtml

<!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"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html">

<h:body>
	<ui:composition template="facecomum.xhtml">
		<ui:define name="header">
			<h2>header</h2>
		</ui:define>
		<ui:define name="body">
			<h2>Conteudo da Página 02</h2>
			<h:link value="Volar a página inicial" outcome="index" />
		</ui:define>
	</ui:composition>
</h:body>

</html>

Deixe um comentário