Introdução. <facelets> Templates. Configurações. Componentes. Prof. Enzo Seraphim

Tamanho: px

Começar a partir da página:

Download "Introdução. <facelets> Templates. Configurações. Componentes. Prof. Enzo Seraphim"

Luca Marques Caminha
8 Há anos
Visualizações:

1 Introdução Templates <facelets> Configurações Componentes Prof. Enzo Seraphim

2 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.

Estabelece templates que suportam a criação da árvore de

3 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.

trabalha com componentes em árvores: Elementos tem objetivo fundamental de criar

4 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)

30% à 40% mais rápido Suporte em tempo de compilação de: Unified Expression Language

5 Introdução Templates <facelets> Configurações Componentes Prof. Enzo Seraphim

6 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.

7 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>.

usado nesses locais, é definido pelo cliente do template

8 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.

9 Introdução Templates <facelets> Configurações Componentes Prof. Enzo Seraphim

10 Configuração Biblioteca FileUpload Commons da Apache: Adiciona a capacidade de upload de arquivo para seus servlets e aplicações web com alto desempenho. s fileupload/download_fileupload.cgi Adicionar em bibliotecas do projeto criar subdiretório lib adicionar commons fileupload.jar

http://commons.apache.org/proper/common s fileupload/download_fileupload.

11 Introdução Templates <facelets> Configurações Componentes Prof. Enzo Seraphim

12 Namespace Facelets Namespace a página JSF: <html xmlns=" xmlns:h=" xmlns:f=" xmlns:ui=" Componentes: <ui:composition> <ui:component> <ui:debug> <ui:decorate> <ui:define> <ui:fragment> <ui:include> <ui:insert> <ui:param>

sun.com/jsf/facelets"> Componentes: <ui:composition> <ui:component> <ui:debug>

13 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="

templates (ui:composition, ui:decorate, ui:insert, ui:define, ui:param) Para utilizar

14 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

15 <?xml version='1.0' encoding='utf 8'?> <facelets> <!DOCTYPE html PUBLIC " //W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" xmlns:ui=" xmlns:h=" <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

stylemenu { background color: yellow; width: 30%; margin: 0; padding: 0; float: left; }.

16 Geração de Template JavaServer Faces Modelo de Facelets

17 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:define define um conteúdo da página (que utiliza o template) para uma área substituível de

18 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" " transitional.dtd"> <html xmlns=" xmlns:ui=" <ui:composition template="template.xhtml"> <ui:define name="corpo"> isso é do clientetemplate </ui:define> </ui:composition> </html>

DOCTYPE html PUBLIC " //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1 transitional.dtd"> <html xmlns="http://www.

19 Geração Cliente para Template JavaServer Faces Cliente de Modelos de Facelets

20 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" " transitional.dtd"> <html xmlns=" xmlns:ui=" <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>

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.

21 <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>

22 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.

23 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

24 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" " transitional.dtd"> <ui:fragment xmlns=" xmlns:h=" xmlns:ui=" <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" " transitional.dtd"> <html xmlns=" xmlns:h=" xmlns:ui=" xmlns:f=" <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>

25 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" " transitional.dtd"> <html xmlns=" xmlns:h=" xmlns:ui=" <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>

26 ui:repeat Funciona como um laço de repetição para ler valores de uma lista de um bean = public class BandeiraBean { private String cores[] = {"verde", "amarelo", "azul", "branco"}; public String[] getcores() { return cores; } public void setcores(string[] cores) { this.cores = cores; } }

27 ui:repeat repeat.xhtml <?xml version='1.0' encoding='utf 8'?> <!DOCTYPE html PUBLIC " //W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" xmlns:h=" xmlns:ui=" <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>

28 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.

29 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" " transitional.dtd"> <html xmlns=" xmlns:h=" xmlns:ui=" <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>

30 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" " transitional.dtd"> <html xmlns=" xmlns:h=" <h:head> <title>param</title> </h:head> <h:body> <h:outputtext value="parâmetro recebido: #{nome}" /> </h:body> </html>

31 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

Documentos relacionados

JSF Facelets. Como Facelets muda a forma de desenvolver com JSF

JSF Facelets. Como Facelets muda a forma de desenvolver com JSF JSF Facelets Como Facelets muda a forma de desenvolver com JSF Agenda JSF 1.x JSF e JSP Facelets JSF 2.0 JSF Framework MVC Eventos (Observadores) Manter o estado da View Uma árvore de componete JSF JSF