Introdução Templates <facelets> Configurações Componentes Prof. Enzo Seraphim
Definição Linguagem de descrição de páginas (PDL Page Description Language) criada para JSF. Estabelece templates que suportam a criação da árvore de componentes das telas JSF Permite reuso de padrões de telas composição de componentes JSF para formar novos componentes.
Problemas com JSP Inicialmente JSF utilizava JSP para criar páginas (padrão na comunidade web) JSP usado para criar conteúdo estático ou dinâmico na web JSF trabalha com componentes em árvores: Elementos tem objetivo fundamental de criar uma resposta a um pedido. Geração do componente e a sua renderização fases separadas.
Porque usar Facelets Facelets não dependem de um container web (embora seja usado) Fornece templating, tornando possível reutilizar o código Criação de componentes leves 30% à 40% mais rápido Suporte em tempo de compilação de: Unified Expression Language (EL); funções EL; e validação EL. Fornece um relatório preciso de erros, (linha onde ocorre a exceção)
Introdução Templates <facelets> Configurações Componentes Prof. Enzo Seraphim
O que são templates? Aplicação Web várias páginas têm estrutura semelhante utilizando um modelos de páginas (templates). Template define um desenho padrão das telas e áreas substituíveis para a troca de conteúdo durante a renderização da interface. Templates permitem a reutilização de código, reduzindo o tempo de desenvolvimento e os custos de manutenção de uma aplicação.
Definição Templates definem diferentes áreas onde o conteúdo pode ser substituído usando: <ui:insert> O conteúdo a ser usado nesses locais, é definido pelo cliente do template usando <ui:component>, <ui:composition>, <ui:fragment>, ou <ui:decorate>.
Níveis de Templates Templates em Facelets não é limitado a apenas um nível. Multiníveis, onde um cliente pode ser um template para outros clientes. Dessa maneira, templates possibilitam o reuso e facilitam a manutenção do layout e padrão visual das interfaces web.
Introdução Templates <facelets> Configurações Componentes Prof. Enzo Seraphim
Configuração Biblioteca FileUpload Commons da Apache: Adiciona a capacidade de upload de arquivo para seus servlets e aplicações web com alto desempenho. http://commons.apache.org/proper/common s fileupload/download_fileupload.cgi Adicionar em bibliotecas do projeto criar subdiretório lib adicionar commons fileupload.jar
Introdução Templates <facelets> Configurações Componentes Prof. Enzo Seraphim
Namespace Facelets Namespace a página JSF: <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"> Componentes: <ui:composition> <ui:component> <ui:debug> <ui:decorate> <ui:define> <ui:fragment> <ui:include> <ui:insert> <ui:param>
Conceitos Tags Facelets podem ser agrupadas em 2 categorias principais: Inclusão de conteúdo de outras páginas XHTML (ui:include) Construção de páginas a partir de templates (ui:composition, ui:decorate, ui:insert, ui:define, ui:param) Para utilizar tags Facelets adicione a namespace a página JSF: xmlns:ui="http://java.sun.com/jsf/facelets"
ui:insert Demarca área substituível do template. Toda área substituível deve ter um nome. Geralmente demarca onde será, o menu, o topo, o corpo do sistema. Usada na definição do template
<?xml version='1.0' encoding='utf 8'?> <facelets> <!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"> <h:head> <meta http equiv="content Type"content="text/html; charset=utf 8"/> <title>facelets Template</title> <style type="text/css">.stylemenu { background color: yellow; width: 30%; margin: 0; padding: 0; float: left; }.stylecorpo { background color: red; width: 70%; float: right; text align: center; } </style> </h:head> <h:body> <div class="stylemenu"> <ui:insert name="menu">menu original</ui:insert> </div> <div class="stylecorpo"> <ui:insert name="corpo">corpo original do template</ui:insert> </div> </h:body> </html> template.xhtml
Geração de Template JavaServer Faces Modelo de Facelets
ui:composition/ui:define Utilizadas nas páginas que utilizam o template ui:composition compor páginas que utilizam a tecnologia Facelets. ui:define define um conteúdo da página (que utiliza o template) para uma área substituível de um template ui:define é correspondente a um ui:insert do template. nomes devem coincidir com os nomes utilizados nas tags <ui:insert> do template.
ui:composition/ui:define template.xhtml demarcada pelos ui:insert index.xhtml composição baseado no template.xhtml Define que <ui:insert name="corpo"> terá o texto isso é do clientetemplate index.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"> <ui:composition template="template.xhtml"> <ui:define name="corpo"> isso é do clientetemplate </ui:define> </ui:composition> </html>
Geração Cliente para Template JavaServer Faces Cliente de Modelos de Facelets
ui:decorate Igual ui:compositon, com diferença: ui:composition tudo que fora desta tag, é ignorada (não aparece). ui:decorate tudo que for feito fora desta tag é visualizada normalmente index.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"> <ui:decorate template="template.xhtml"> <ui:define name="corpo"> isso é do clientetemplate </ui:define> </ui:decorate> Isso aqui não vai aparecer no composition </html>
<ui:debug> Janela pop-up: o componente da árvore e o escopo das variáveis. Ctrl + Shift + <tecla atalho> ui:debug deve estar dentro h:body index.xhtml... <h:body> <ui:debug hotkey="x" /> <div class="stylemenu"> <ui:insert name="menu">menu original </ui:insert> </div> <div class="stylecorpo"> <ui:insert name="corpo">corpo original do template </ui:insert> </div> </h:body>
ui:include Serve para incluir páginas dentro de outras páginas Igual ao include do PHP Util quando o código fonte da página fica muito extenso Separação do conteúdo em outra páginas, será adicionada à uma única página. Para a visualização irá renderizar como uma única página. Página menores podem ajudar a hora da manutenção.
ui:fragment Tem o mesmo comportamento <ui:decorate>, porém cria uma nova instância de componente (UIComponent) para cada componente ou fragmento contido na tag Usada em páginas que serão incluídas pelo ui:include
ui:include/ui:fragment frag.xhtml include.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"> <ui:fragment xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets"> <h:outputtext value="texto da página fragteste"/> </ui:fragment> <?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" xmlns:f="http://java.sun.com/jsf/core"> <f:view contenttype="text/html"> <h:head> <title>include fragment</title> </h:head> <h:body> <h:outputtext value="texto da página include!"/><br/> <ui:include src="frag.xhtml" /> </h:body> </f:view> </html>
ui:remove Remove um código que é inserido dentro dela Tudo que estiver dentro desse tag não será visualizado remove.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> <title>remove</title> </h:head> <h:body> <h:outputtext value="aparece na pagina"/> <ui:remove> <h:outputtext value="não aparece na página"/> </ui:remove> </h:body> </html>
ui:repeat Funciona como um laço de repetição para ler valores de uma lista de um bean BandeiraBean.java @Named(value = "bandeirabean") @RequestScoped public class BandeiraBean { private String cores[] = {"verde", "amarelo", "azul", "branco"}; public String[] getcores() { return cores; } public void setcores(string[] cores) { this.cores = cores; } }
ui:repeat repeat.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> <title>repeat</title> </h:head> <h:body> <ui:repeat var="cor" value="#{bandeirabean.cores}"> <h:outputtext value="#{cor}" /><br /> </ui:repeat> </h:body> </html>
ui:param Permite passar parâmetros para outro Facelet incluído em uma tela através da tag <ui:include>. O parâmetro pode ser valor estático valor dinâmico (vindo de um bean) Pode conter uma string ou objeto.
ui:param O parâmetro será capturado usando a EL #{nome} param1.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> <title>param</title> </h:head> <h:body> <ui:param name="nome" value="jose da Silva" /> <h:form> <h:commandbutton value="enviar parametro" action="param2" /> </h:form> </h:body> </html>
ui:param O parâmetro será capturado usando a EL #{nome} param2.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"> <h:head> <title>param</title> </h:head> <h:body> <h:outputtext value="parâmetro recebido: #{nome}" /> </h:body> </html>
Os logotipos, marcas comerciais e nomes de produtos citados nesta publicação tem apenas o propósitos de identificação e podem ser marcas registradas de suas respectivas companhias. <facelets> Prof. Enzo Seraphim