Documente Academic
Documente Profesional
Documente Cultură
Com a web cada vez mais presente em nosso dia-a-dia, um fato é que com isso nossos
usuários tornam-se mais exigentes em relação a usabilidade, agilidade, performance ou
de uma forma bem resumida “o usuário espera uma navegação simples e agradável
aonde uma determinado tarefa possa ser concluída em poucos passos e em um curto
espaço de tempo”.
Atender as expectativas em relação ao que o usuário espera com o que realmente ele
precisa, definir uma estrutura flexível a mudanças sem engessar o desenvolvimento,
acessibilidade, portabilidade em múltiplos navegadores, tudo isso e muito mais, num
prazo que quase sempre é apertado. Um outro ponto fundamental é manter o time
motivado e produtivo em um ambiente que favoreça a criatividade e evolução. Uma
equação nada simples de resolver!
Ainda bem que no mundo Java temos varias opções de ferramentas e frameworks para
tornar esse trabalho mais produtivo, qualitativo e prazeroso. Gosto muito da idéia de
componentes visuais (User Interface Components) com o conceito RAD (Rapid
Application Development), adquiri isso na época em que trabalhei com o Delphi, e é
por isso que sou fã de carteirinha do JavaServer Faces (JSF), que incorpora isso.
Melhor ainda eh usar JSF com Facelets.
Inicialmente podemos considerar o Facelets como outra opção de criação de telas com
JSF, substituindo o antigo JSP por xhtml. Nada contra o JSP, mas o Facelets é um
mecanismo mais aderente ao formato de trabalho do JSF principalmente em relação a
árvores de componentes e ciclo de requisição. O mais interessante do Facelets é a
possibilidade de usar técnicas da Orientação a Objetos para a construção de telas.
<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">
<body>
<table>
<tr><td colspan="2">
<ui:insert name="topo">
<ui:include src="topo.xhtml"/>
</ui:insert>
</td></tr>
<tr>
<td>
<ui:insert name="menu" />
<ui:include src="menu.xhtml"/>
</td>
<td>
<ui:insert name="principal" />
</td>
</tr>
<tr><td colspan="2">
<ui:insert name="rodape">
<ui:include src="rodape.xhtml"/>
</ui:insert>
</td></tr>
</table>
</body>
</html>
cadastro.xhtml
<ui:fragment xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/h
tml"
xmlns:f="http://java.sun.com/jsf/core">
<h:form>
<ul>
<li>
<h:commandLink action="fornecedores">Fornecedores</h:commandLink>
</li>
...
</ul>
</h:form>
</ui:fragment>
menu.xhtml
<ui:composition template="cadastro.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">
<ui:define name="principal">
<h:form>
<h:inputHidden value="#{fornecedorMB.fornecedor.id}"
id="idFornecedor" />
<h:panelGrid columns="2">
<h:outputLabel value="Nome" for="iNome" />
<h:inputText value="#{fornecedorMB.fornecedor.nome}"
id="iNome" />
<h:commandButton action="#{fornecedorMB.doSalvar}"
value="Salvar" />
<h:commandButton action="#{fornecedorMB.doExcluir}"
value="Excluir" />
</h:form>
</ui:define>
</ui:composition>
formFornecedores.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/h
tml"
xmlns:f="http://java.sun.com/jsf/core">
<body>
<table>
<tr>
<td>
<h:commandButton value="Novo" action="#{mbean[actionNovo]}" />
</td>
<td>
<h:commandButton value="Pesquisar" action="#{mbean[actionPesquisa]}" />
</td>
</tr>
<tr>
<td colspan="2">
<ui:insert name="filtros"/>
</td>
</tr>
<tr>
<td colspan="2">
<ui:insert name="tabela"/>
</td>
</tr>
</table>
</body>
</html>
listagem.xhtml
<ui:composition template="cadastro.xhtml"
xmlns:ui="http://java.sun.com/js
f/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<ui:define name="principal">
<h:form>
<ui:decorate template="listagem.xhtml">
<ui:param name="mbean" value="${fornecedorMB}" />
<ui:param name="actionNovo" value="doNovoFornecedor" />
<ui:param name="actionPesquisa" value="doPesquisarFornecedor" />
<ui:define name="filtros">
<h:panelGrid columns="2">
<h:outputLabel value="Nome" for="iNome" />
<h:inputText value="#{fornecedorMB.filtroNome}" id="iNome"/>
</h:panelGrid>
</ui:define>
<ui:define name="table">
<h:dataTable id="tableFornecedores" value="#{fornecedorMB.fornecedorDM}" var="f">
<h:column>
<f:facet name="header">Nome</f:facet>
<h:commandLink action="#{fornecedorMB.doEditarFornecedor}">
<h:outputText value="#{f.nome}" />
</h:commandLink>
</h:column>
<h:column>
<f:facet name="header">Cnpj</f:facet>
<h:outputText value="#{f.cnpj}" />
</h:column>
</h:dataTable>
</ui:define>
</ui:decorate>
</h:form>
</ui:define>
</ui:composition>
listFornecedores.xhtml
Repare que a tela define a composição com o template cadastro.xhtml, mas impõe
também um relacionamento com o template listagem.xhtml via a tag ui:decorate. A
diferença entre essas tags é que decorate considera o conteúdo xhtml externo aos limites
da tag. As tags ui:param atribuem valores para os 3 parâmetros do template definindo
assim o comportamento do botão de Novo (Fornecedor) e Pesquisar (Fornecedores).