Introdução a JavaServer Faces 2

Transcrição

1 Mini-curso Gratuito Introdução a JavaServer Faces 2 1

2 Objetivo Permitir que vocês tenham condições de decidir pelo uso da tecnologia JavaServer Faces em projetos Web com a linguagem Java 2

3 Apresentação da Agenda Introdução Arquitetura do JSF Configuração Principais componentes JSF Ferramentas Referências Perguntas e Respostas 3

4 Agenda Introdução Arquitetura do JSF Configuração Principais componentes JSF Ferramentas Referências Perguntas e Respostas 4

5 Histórico Tecnologias de Apresentação Conteúdo Estático HTTP HTML + Javascript + CSS + DOM Conteúdo Dinâmico CGI Servlets JSP Classical Custom Tags Tag Files e Simple Tags Apache Struts Web 2.0 5

6 Por quê JSF? Motivação MVC tornou-se um padrão de mercado (inúmeros frameworks); As interfaces gráficas exigidas são muito complexas para serem desenvolvidas somente com HTML exigindo muito JavaScript; Muitos componentes de UI sendo desenvolvidos com Custom Tags ou JavaScript sem padronização; Baixa produtividade no desenvolvimento de aplicações Web. 6 Web Apps sofisticadas - estado persistente entre requests

7 O que é JSF? O que é JavaServer Faces (JSF)? Paradigma de programação visual de User-interfaces baseado em componentes aplicado à Web É O framework Java padrão para user interfaces em Web applications É UM framework que permite a criação de aplicações Web com semântica de Swing implementando MVC; Uma especificação Java EE com múltiplas implementações (Mojarra / MyFaces) 7

8 Introdução Java EE Web Container Java EE EJB Container JSF e Java EE JavaServer Faces Controller View Model Servlet Java Server Pages Custom Tag JavaBeans EJB 8

9 Introdução Benefícios com o uso Toolability = Ferramentabilidade (IDEs WYSIWYG); Suporte a JSF na maioria dos IDEs; Portabilidade = Todo Web Container compatível com a especificação Java EE (5.0 ou superior) implementa JSF; Aumento da produtividade de aplicações Java EE; Suporte à internacionalização; Gerenciamento de estado entre múltiplas requisições; 9

10 Introdução Benefícios com o uso Suporte a um modelo de eventos; Componentes de UI de terceiros compatíveis com JSF; Mecanismo padrão de conversão e validação de dados; Alta reusabilidade de componentes de tela e validadores; Flexibilidade com processo de renderização de componentes; Fácil de aprender; Alta adoção no mercado. 10

11 Introdução Glassfish - Oracle Java EE Web Container Java EE EJB Container Implementação Oracle de Java EE Servlets JSP EJB Custom Tags JSF 11

12 Introdução WildFly Red Hat Java EE Web Container Java EE EJB Container Implementação Red Hat de Java EE Servlets JSP EJB Custom Tags JSF 12

14 Arquitetura Web Arquitetura Client-Server baseada em HTTP; Dificuldade em prover o mesmo dinamismo de uma aplicação desktop; Todo o processamento Java acontece no servidor; 14

15 Arquitetura Swing GUI e Listener são processados pela mesma máquina Listener - Validação - Conversão de dados - Integração com a camada Model - Lógica de negócios, etc Java Chamada a métodos 15

16 Arquitetura Web Java EE Web Container Java Servlet - Validação - Conversão de dados - Integração com a camada Model - Lógica de negócios, etc HTTP REQUEST / RESPONSE Cliente Browser: HTML + JavaScript 16

17 Ciclo vicioso de uma requisição Geralmente cód. para processar cada request envolve: Checar e carregar estado deixado por requests anteriores; Validar e converter dados recebidos para tipos Java server-side (e gerar mensagens de erro se validação/conversão falha); Atualizar objetos server-side com os novos dados; Invocar código server-side que realize tarefas como acessar BD; Preparar estado que precise estar disponível em próximos requests; Gerar um response de volta ao cliente (images, scripts, e CSS). 17

18 Ciclo de vida da requisição JSF 1. Restore View 2. Apply Request Values 3. Process Validators 4. Update Model Values 5. Invoke Application 6. Render Response Criação da árvore de componentes de UI. Se a página já foi visualizada na mesma session os dados são recuperados. 18

19 Ciclo de vida da requisição JSF 1. Restore View 2. Apply Request Values 3. Process Validators 4. Update Model Values 5. Invoke Application 6. Render Response Atualiza árvore componentes de UI com valores da request. Dispara quaisquer eventos gerados pela atualização 19

20 Ciclo de vida da requisição JSF 1. Restore View 2. Apply Request Values 3. Process Validators 4. Update Model Values 5. Invoke Application 6. Render Response Executa todas conversões de dados + validações associadas aos componentes de UI 20

21 Ciclo de vida da requisição JSF 1. Restore View 2. Apply Request Values 3. Process Validators 4. Update Model Values 5. Invoke Application 6. Render Response Cada componente de UI atualiza o seu backing model 21

22 Ciclo de vida da requisição JSF 1. Restore View 2. Apply Request Values 3. Process Validators 4. Update Model Values 5. Invoke Application 6. Render Response Execução do ActionListener padrão, geralmente com execução de componentes de negócio 22

23 Ciclo de vida da requisição JSF 1. Restore View 2. Apply Request Values 3. Process Validators 4. Update Model Values 5. Invoke Application 6. Render Response Geração da Response com a árvore de componentes de UI 23

24 Arquitetura JSF Principais componentes: TagLibraries: JSF Core / HTML - cujas tags representam componentes de tela fundamentais. Managed Beans: classes Java que respondem por ações e dados de telas JSF; Expression Language: linguagem utilizada para declarar o vínculo entre telas JSF e managed beans; FacesController: Servlet provido pelo JSF que representa o núcleo administrativo do JSF; faces-config.xml: configurações 24

25 Arquitetura JSF Para criar um aplicativo Web com JSF devemos: 1) Criar a página JSF utilizando suas custom tags; Estrutura da tela e os componentes gráficos 2) Criar uma classe JavaBean; Receber os dados da tela e responder por eventos / ações 3) Configurar o FacesController no web.xml; 4) Criar um faces-config.xml e declarar o JavaBean; É possível declarar no JSF 2 5) Configurar as bibliotecas (caso não haja suporte nativo Java EE); 25

27 Configuração JARs necessários v1.x: JARs necessários v2.0: jsf-api.jar jsf-ri.jar jstl.jar standard.jar commons-beansutils.jar commons-digester.jar commons-collections.jar commons-logging.jar jsf-api.jar jsf-impl.jar JSF 2 27

28 Configuração Deployment Descriptor: web.xml Fazer o mapeamento do FacesController Associação do controlador pode ser feita por extensão ou por diretório, ex. /faces/* <servlet> <servlet-name>faces Servlet</servlet-name> <servlet-class> javax.faces.webapp.facesservlet </servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>faces Servlet</servlet-name> <url-pattern>*.jsf</url-pattern> </servlet-mapping> 28

29 Configuração faces-config.xml Neste arquivo são feitas todas as configurações da aplicação JSF, como por exemplo: Regras de Navegação Managed Beans Validators / Converters i18n 29

31 Criação de páginas JSF Página JSF Tags: JSF HTML Tags: JSF Core Links, formulários, imagens, combo-box, tabelas, etc Expression Language: EL Através destas tags adicionamos validação, conversão de dados, listeners Request Managed Bean Session Managed Bean Dados para popular as tabelas, combo-box, textos. Application Managed Bean 31...

32 Principais Componentes JSF Bibliotecas de Tags Managed Beans Componentes de User-interface (UI) Navegação Validadores Conversores Eventos e Listeners Facelets Ajax 32

33 Bibliotecas de Tags Páginas JSF geralmente utilizam duas bibliotecas de Custom Tags do JSF: JSF Html: renderização de componentes de UI HTML JSF Core: integração dos componentes de UI com validadores, conversores JSF Facelets: composição de telas JSF Composite: criação de componentes customizados 33

34 Integração JSF e JSP JSP não é a única forma de construir interfaces JSF; A integração é feita através de TagLibs; As TagLibs ligam os componentes server-side aos client-side (tipicamente HTML) 34

35 Integração JSF e JSP Configurações necessárias com JSP: <%@ taglib uri= prefix= h %> <%@ taglib uri= prefix= f %> Configurações necessárias com XHTML: <html xmlns= xmlns:h= xmlns:f= > 35

36 Integração JSF e JSP Core Tag Library: gerenciamento de listeners, configuração de componentes, validação, entre outros; HTML Tag Library: Definem o renderizador do componente de UI, utilizam EL para integração com os Managed Beans; Existe uma tag para cada combinação entre renderizador e componente; Por exemplo, um UIInput pode ser renderizado em forma de inputtext ou de inputsecret; 36

37 Integração JSF e JSP Página JSF é similar a um formulário HTML. Porém: Todas tags JSF estão contidas em uma tag <f:view> (só.jsp) Ao invés de usar um <form> HTML, componentes devem ser incluídos em uma tag <h:form> Ao invés de usar as tags de input HTML, utiliza-se <h:inputtext>, <h:inputsecret> e <h:commandbutton> Use, portanto: <h:form> ao invés de <form> <h:inputtext> ao invés de <input type="text > 37

38 Exemplo Tags JSF taglib uri= prefix= h %> <%@ taglib uri= prefix= f %> <html><head>...</head> <h:body> <f:view> <h:form> <h:graphicimage url="exemplo.png" /> <h:panelgrid columns="2"> <h:outputlabel for="textnome" value="nome" /> <h:inputtext id="textnome" value="..." /> <h:outputtext value="senha" /> <h:inputsecret value="" /> <h:outputtext value="observações" /> <h:inputtextarea value="" /> </h:panelgrid> <h:commandbutton value="enviar" action="..." /> </h:form> </f:view> 38

39 Principais componentes JSF Bibliotecas de Tags Managed Beans Componentes de User-interface (UI) Navegação Validadores Conversores Eventos e Listeners Facelets Ajax 39

40 Managed Beans Um Managed Bean é um JavaBean gerenciado pelo framework JSF, ou seja, ele é instanciado, e colocado no escopo de acordo com as configurações encontradas no faces-config.xml ou por annotations (v2.0). Um ManagedBean também é chamado de backing bean, pois contém os dados e os métodos que serão executados quando algum dos componentes de UI da página JSF tiver que executar uma ação. 40

41 Managed Beans Chamamos de binding o vínculo entre um componente de UI da página JSF e o seu backing model / managed bean. 41

42 Managed Beans Model Sistema Legado 42

43 Managed Beans Utilizamos Taglibs e EL (Expression Language) para associar (fazer o binding) de um componente de UI com um ManagedBean; <h:outputtext value="#{clientebean.cliente.nome}"/> A String clientebean está associada a classe ClienteBean no facesconfig.xml (ou anotação). 43

44 Managed Beans Declaração de um ManagedBean no faces-config.xml: <managed-bean> <managed-bean-name>clientebean</managed-bean-name> <managed-bean-class>clientebean</managed-bean-class> <managed-bean-scope>session</managed-bean-scope> </managed-bean> JSF public class ClienteBean {... } 44

45 faces-config.xml Managed Bean Página JSF Managed Beans em JSF 1.x 45

46 faces-config.xml Managed Bean Página JSF Managed Beans em JSF 2.0 <h:form> <h:outputtext value=" "> <h:inputtext value="#{olamundomb. }"> <h:commandbutton value="chamar metodo no MB" public class OlaMundoMB { private String ; public void metodo() {} public String get () { return this. ; } public void set (string ) { this. = ; } } 46

48 Componentes de User-Interface Tecnicamente: Todos os componentes de UI são subclasses da classe abstrata UIComponent; A classe UIComponentBase já implementa os métodos necessários de UIComponent podendo ser estendida diretamente; 48

49 Componentes de User-Interface HTML Render Kit Custom Tag renderiza um UICommand em forma de botão ou hyperlink 49

50 Componentes de User-Interface Você cria o componente do zero Indicado para construção de componentes compostos Utilizado para customização de componentes 50

51 Principais Componentes de UI <f:view> e <h:form> Representa uma tela JSF e demarca a área onde utilizamos componentes JSF. Uma página pode conter apenas uma view. O form é essencial para submissão dos dados <f:subview> Representa um fragmento de página. Utilizado com sistema de páginas compostas para identificar os componentes incluídos na página como uma sub-view. <h:panelgrid> <h:panelgroup> Utilizado para criar tabelas, seu funcionamento é simples: devemos indicar o número de colunas e adicionar componentes na ordem certa. <h:inputtext> Caixa de entrada de texto. 51

52 Principais Componentes de UI <h:inputtextarea> Caixa de texto de múltiplas linhas <h:inputsecret> Normalmente usado para senhas <h:inputhidden> Para passagem de dados de aplicativo, pois não renderiza nada visual. <h:outputlabel> O texto de título de um outro componente <h:outputtext> Texto simples <h:graphicimage> Apresentar imagens na página 52

53 Principais Componentes de UI <h:message> Tag utilizada para componentes com validadores representa uma mensagem relacionada a um componente da tela. <h:messages> Apresenta todas as mensagens de erro. <h:outputlink> Representa um hyperlink HTML convencional. <h:commandlink> Para chamar métodos / ações em managed beans com um link HTML <h:commandbutton> Também chama métodos em managed beans, mas representado por um botão HTML. 53

54 Principais Componentes de UI <h:selectonelistbox> Uma lista de seleção de simples escolha. <h:selectonemenu> Um combobox <h:selectoneradio> Radio buttons para seleção de simples, de um elemento <h:selectbooleancheckbox> Representa um checkbox que será armazenado um boolean 54

55 Principais Componentes de UI <f:view> <h:form> <h:graphicimage url="exemplo.png" /> <h:panelgrid columns="2"> <h:outputlabel for="textnome" value="nome" /> <h:inputtext id="textnome" value= #{exemplo.nome}" /> <h:outputtext value=" " /> <h:inputtext value= #{exemplo. }" /> <h:outputtext value="senha" /> <h:inputsecret value="" /> <h:outputtext value="observações" /> <h:inputtextarea value="" /> </h:panelgrid> <h:commandbutton value="enviar" action="#{exemplo.lerdados}" /> </h:form> <h:messages /> </f:view> 55

56 Principais Componentes de UI <h:selectonelistbox value="#{exemplo.itemselecionado}"> <f:selectitems value="#{exemplo.itemslista}" var= estado itemvalue="#{estado.sigla} itemlabel="#{estado.nome} /> </h:selectonelistbox> public String getitemselecionado() { return itemselecionado; } public void setitemselecionado(string itemselecionado) { this.itemselecionado = itemselecionado; } public ArrayList getitemslista() { ArrayList r =new ArrayList(); r.add(new Estado("SP","São Paulo")); return r; } 56

57 Mensagens Para gerar uma mensagem genérica que será apresentada com a tag <h:messages> na sua tela, devemos usar: FacesMessage facesmsg = new FacesMessage(FacesMessage.SEVERITY_INFO, "resumo", "mensagem detalhada"); FacesContext fc = FacesContext.getCurrentInstance(); fc.addmessage(null, facesmsg); 57

58 Tabela de Dados Para trabalhar com tabelas de dados que apresentam coleções de objetos utilizamos o componente <h:datatable>: <h:datatable value="#{categoriamb.categorias}" var="categoria"> <h:column> <f:facet name="header">id</f:facet> <h:outputtext value="#{categoria.categoriaid}"/> </h:column> <h:column> <f:facet name="header">descricao</f:facet> <h:outputtext value="#{categoria.descricao}"/> </h:column> </h:datatable> 58

59 Tabela de Dados O código do managed bean deve apenas devolver a collection para a tabela: private List<Categoria> categorias; public List<Categoria> getcategorias() { categorias = CategoriaDAO().getInstance().getAll(); return categorias; } public void setcategorias(list<categoria> cat){ this.categorias = cat; } 59

60 Tabela de Dados O componente <h:datatable> permite operarmos em uma das linhas da tabela, por exemplo: 60 <h:datatable value="#{categoriamb.categorias}" var="categoria"> <h:column> <f:facet name="header">id</f:facet> <h:outputtext value="#{categoria.categoriaid}"/> </h:column> <h:column> <f:facet name="header">descricao</f:facet> <h:outputtext value="#{categoria.descricao}"/> </h:column> <h:column> <f:facet name="header">comandos</f:facet> <h:commandbutton value="excluir Categoria" value="#{categoriamb.excluir(categoria)}"/> </h:column> </h:datatable>

61 Tabela de Dados No managed bean executamos a ação desejada: public void excluir(categoria categoria) { CategoriaDAO().getInstance().remove(categoria); } Esta capacidade se deve ao fato de termos colocado o comando / ação na linha da tabela em questão! 61

63 Navegação com JSF 1.x O fluxo de navegação do usuário entre telas/métodos do managed bean é configurado no faces-config.xml Vamos imaginar o seguinte menu para nosso sistema <f:view> <h:form> <h:panelgrid columns="1"> <h:commandbutton action="listar" value="listar categorias" /> <h:commandbutton action="incluir" value="incluir categoria" /> </h:panelgrid> </h:form> <h:messages /> </f:view> incluir / listar são nomes de navegações configuradas no faces-config.xml 63

64 Navegação com JSF 1.x Supondo que o arquivo de menu chame menu.xhtml, a seguinte configuração deve ser feita no faces-config.xml <navigation-rule> <from-view-id>/menu.xhtml</from-view-id> <navigation-case> <from-outcome>incluir</from-outcome> <to-view-id>/incluir.xhtml</to-view-id> </navigation-case> <navigation-case> <from-outcome>listar</from-outcome> <to-view-id>/listar.xhtml</to-view-id> <redirect/> </navigation-case> </navigation-rule> Quando a regra de navegação for chamada a partir do menu.xhtml Se a String for incluir Exiba como resposta a página incluir.xhtml 64

65 Navegação com JSF 1.x A navegação como foi exibida anteriormente com a String direto dentro da tag HTML é chamada de navegação estática Também podemos utilizar a navegação dinâmica, ou seja acionar a navegação através de um método do managed bean Métodos de ação em managed beans podem retonar void ou String 65

66 Navegação com JSF 1.x Para direcionar o usuário para uma navegação em um managed bean, basta retornar como String o nome da navegação configurada no faces-config.xml public String salvar(){ String retorno = "listar"; try { // instruções } catch(exception e) { retorno = "erro"; } return retorno; } 66

67 Navegação com JSF 2.x Para direcionar o usuário para uma navegação, basta retornar como String o nome da página para a qual se deseja navegar, sem a extensão. Esse mecanismo de navegação é denominado navegação implícita e vale tanto para navegação dinâmica quanto estática. Para forçar um redirecionamento para a página de destino basta acrescentar um parâmetro?faces-redirect=true public String salvar(){ String retorno = "listar"; try { // instruções } catch(exception e) { retorno = "erro?faces-redirect=true"; //redirecionamento } return retorno; } 67

68 Demonstração Hello World JSF usando componentes básicos 68

70 Validadores Todos os componentes de UI derivados de UIInput podem ser validados; Os dados são validados após a conversão; Uma validação simples em componentes de entrada de dados é o parâmetro required="true". 70

71 Validadores A validação pode ser feita das seguintes formas: Delegar a validação para um método de um JavaBean que estiver no escopo; Utilizar um Standard Validator (facilmente via tags); Criar um Validator que implemente a interface javax.faces.validator.validator 71

72 Validadores Uma tag de validação pode ser aninhada em campos de entrada Para visualizar os erros de validação e/ou conversão, devemos utilizar <h:message> ou <h:messages> É possível customizar as mensagens de erro padrão criando um arquivo properties e configurando-o no faces-config.xml <h:inputtext id="textdescricao" value="#{categoriamb.categoria.descricao}"> <f:validatelength maximum="255" minimum="5" /> </h:inputtext> <h:message for="textdescricao"/> 72

73 Validadores Todas as implementações de JSF devem ter os seguintes validadores (standard validators): f:validatedoublerange (DoubleRangeValidator) f:validatelength (LengthValidator) f:validatelongrange (LongRangeValidator) f:validateregex (RegularExpression) f:validaterequired (Required) JSF 2 f:validatebean (Bean Validation) 73

75 Conversão / Formatação A representação de dados universal da Web é String: "1/1/2007" = java.util.date "20.05" = double "true" = boolean Sem o uso de um framework devemos converter os dados manualmente usando parsers do Java SE (NumberFormat, DateFormat...) 75

76 Conversão / Formatação A conversão de dados pode ser implícita ou explícita Para tipos primitivos e wrapper classes: implícita!!! Para outros tipos: explícita O JSF dispõe de uma porção de conversores: Números: BigInteger, Double, Float, Long, double, int etc. Booleanos Datas Moedas Caracteres 76

77 Conversão / Formatação Três tags foram disponibilizadas para conversão e formatação de dados: <f:convertdatetime>: especializada em datas <f:convertnumber>: diversas formas de converter números <f:convert>: para associar o dado a um conversor específico / customizado <h:outputtext id="textdatacadastro" value="#{movimentomb.movimento.datacadastro}"> <f:convertdatetime pattern="dd/mm/yy" /> </h:outputtext> <h:inputtext id="textvalor" value="#{movimentomb.movimento.valor}"> <f:convertnumber type="currency" currencysymbol="r$" /> </h:inputtext> 77

78 Conversão / Formatação Os erros de conversão são colocados em mensagens, é importante o uso de <h:message> / <h:messages>; Podemos desenvolver nosso próprio conversor criando uma classe que implementa a interface: javax.faces.convert.converter Esta interface define dois métodos: public Object getasobject(facescontext ctx, UIComponent c, String s) public String getasstring(facescontext ctx, UIComponent c, Object o) 78

79 Conversão / Formatação Além dos conversores, todas as tags JSF disponibilizam o parâmetro rendered; Com EL, podemos configurar o rendered para retornar um booleano que indicará se a tag deve ou não ser renderizada: <h:column> <f:facet name="header">status</f:facet> <h:outputtext value="compensada" rendered="#{movimento.status eq '1'}" /> <h:outputtext value="programada" rendered="#{movimento.status eq '0'}" /> <h:outputtext value="cancelada" rendered="#{movimento.status eq '9'}" /> </h:column> -> Mais sobre EL apostila AW2, capítulo 12 79

81 Eventos Modelo de eventos muito parecido com AWT e Swing Os Eventos são responsáveis pela propagação das ações sobre a interface com o usuário; Ex: preenchimento de formulário, ação via link/botão Cada componente de UI pode disparar quantos eventos forem necessários; Dois tipos de eventos: Eventos de mudança de valor; Eventos de ação; 81

82 Managed Bean Página JSF Eventos O principal meio de comunicação entre uma página JSF e um managed bean são comandos vinculados a métodos: 82

83 Eventos Uma outra forma de uma UI se comunicar com managed bean é através de eventos Um comando dispara um método no managed bean quando o usuário clica no botão ou link Um evento é acionado no managed bean quando algo acontece em um componente da tela Um evento JSF é semelhante a um evento Swing, porém o listener se encontra em um servidor 83

84 Eventos Exemplo de evento tipo ValueChange: <h:selectoneradio valuechangelistener="#{loginmb.atualizaui}" onchange="submit()"> <f:selectitem itemlabel="ja tenho cadastro" itemvalue="1" /> <f:selectitem itemlabel="quero me cadastrar" itemvalue="2" /> <f:selectitem itemlabel="esqueci minha senha" itemvalue="3" /> </h:selectoneradio> public void atualizaui(valuechangeevent event) { int valor = Integer.parseInt(event.getNewValue().toString()); if (valor == 1) { //regra de negócios } else if (valor == 2) {//regra de negócios } else if (valor == 3) {//regra de negócios } } 84

85 Eventos Exemplo de evento do tipo ActionEvent: <h:commandbutton value="login" actionlistener="#{loginmb.login}" /> public void login(javax.faces.event.actionevent event) { // regra de negócios } 85

86 Principais componentes JSF Bibliotecas de Tags Managed Beans Componentes de User-interface (UI) Validadores Conversores Eventos e Listeners Facelets Ajax 86

88 Facelets Framework de templates de páginas Linguagem padrão para descrever telas no JSF 2 Atua na camada view facilitando o reuso (herança) de páginas e fragmentos v2 não requer mais configuração (faces-config.xml) Vantagens do Facelets: Facilita o entendimento visual Componentiza mais suas páginas Facilita mudanças Padrão a partir do Java EE 6 / JSF

89 Configurando Facelets no JSF 1.x SOMENTE para uso de Facelets no JSF 1.x Adicionar no WEB-INF/lib o jar jsf-facelets.jar; Adicionar a seguinte configuração no web.xml: <context-param> <param-name>javax.faces.default_suffix</param-name> <param-value>.xhtml</param-value> </context-param> 89 Adicionar a seguinte configuração no faces-config.xml: <application> <view-handler> com.sun.facelets.faceletviewhandler </view-handler> </application>

90 Usando Facelets Vamos trabalhar com dois tipos diferentes de páginas: Página template: não são visualizadas diretamente pelo usuário Servem apenas para serem "herdadas". Nas páginas template usamos a tag <ui:insert> para definir áreas. Página client: são páginas efetivamente visualizadas Usamos a tag <ui:composition> para indicar o template e <ui:define> para preencher as área pré-definidas no template em questão. 90

91 Usando Facelets Devemos fazer uma referência ao namespace das tags: <html.. xmlns:ui=" Criar template as principais tags / parâmetros são: <ui:insert name="fragmento"> áreas de conteúdo substituível Criar tela cliente as principais tags / parâmetros são: <ui:composition template="arquivo.xhtml"> indica que a página utiliza o arquivo.xhtml como template <ui:define name="fragment"> redefine o conteúdo de cada área substituível do template. <ui:include src="/menu.xhtml"> faz a inclusão de fragmentos. 91

92 Usando Facelets Exemplo de definição de um template: template1.xhtml <f:view> <h:panelgrid columns="1" styleclass="table1"> <ui:insert name="menu"> <p>area de menu padrao:</p> </ui:insert> <ui:insert name="dados"> <p>area de dados padrao:</p> </ui:insert> <h:messages /> </h:panelgrid> </f:view> 92

93 Usando Facelets Exemplo de uso de um template: <ui:composition template="/template1.xhtml"> <ui:define name="menu"> PaginaComMenu.xhtml <f:subview id="menussubview"> <h:form> <h:panelgrid columns="4"> <h:commandbutton action="categorias" value />... </h:panelgrid> </h:form> </f:subview> </ui:define> </ui:composition> 93

94 Usando Facelets Outro exemplo com o uso de template: CategoriaForm.xhtml <ui:composition template="/paginacommenu.xhtml"> <ui:define name="dados"> <f:subview id="categoriaform"> <h:form> <h:panelgrid columns="2"> <h:outputtext for="textdescricao" value="#{formcategoriabundle.textodescricao}" /> <h:inputtext id="textdescricao" value="#{categoriamb.categoria.descricao}"/> </h:panelgrid> <h:commandbutton value="#{formcategoriabundle.botaosalvar}" action="#{categoriamb.salvarcategoria}" /> </h:form> </f:subview> </ui:define> </ui:composition> 94

96 Suporte nativo a AJAX JSF 1.x Não existem componentes nativos com suporte a AJAX Suporte a AJAX implementado através de bibliotecas de terceiros como AJAX4JSF JSF 2.0 Adicionado suporte nativo a AJAX através do componente <f:ajax> O componente <f:ajax> é adicionado ao corpo do elemento que deve suportar requisições AJAX ao servidor 96

97 Divisão do ciclo de vida de JSF Fonte: especificação JSR

98 Suporte nativo a AJAX Atributos do tag <f:ajax> event: evento que irá gerar a requisição AJAX execute: lista de ids de componentes que serão processados na porção execute do ciclo de vida do JSF. render: lista de ids de componentes que serão processados na porção render do ciclo de vida do JSF. listener: elemento opcional que representa um método a ser executado em um ManagedBean quando a requisição AJAX é processada. O método deve receber um AjaxBehaviorEvent como parâmetro e pode lançar AbortProcessingException. Além da lista de ids separados por espaço, também aceita os seguintes valores valor default, que simboliza o @none 98

99 Suporte nativo a AJAX Trecho de página com uso de <f:ajax> <h:inputtext value="#{clientemb.cliente.nome}"> <f:ajax event="change" render="otteste" listener="#{clientemb.tratadorajax}" /> </h:inputtext> <h:outputtext id="otteste" value="#{clientemb.mensagem}" /> 99

100 Suporte nativo a AJAX Managed Bean vinculado ao trecho de public class ClienteMB { } private Cliente cliente; private String mensagem; //getters e setters omitidos public void tratadorajax(ajaxbehaviorevent e) { } mensagem = "executando tratamento Ajax"; 100

101 Agenda Introdução Arquitetura JSF Configuração Principais componentes JSF Ferramentas Referências Perguntas e Respostas 101

102 Ferramentas Gratuitos Eclipse 6 - Helios (com JBoss Tools 3 ótimo suporte a Facelets) NetBeans 7 Oracle JDeveloper 11 Red Hat Developer Studio Pagos MyEclipse Enterprise Workbench 9.x JetBrains IntelliJ IDEA 10.x 102

104 Mais informações Sites Java Specification Requests JSF 1.0 e 1.1: JSF 1.2: JSF 2.0 e 2.1: JSF 2.2: 104

105 Livros JSF The Complete Reference Ed Burns Core JavaServer Faces David Geary JSF in Action Kitto Mann Mastering JavaServer Faces Bill Dudney e outros 105

107 Perguntas e Respostas 107

108 Agradecemos a presença! 108