1 Arquitetura e JSF Gustavo Wagner www.gustavowagner.com.

Apresentação em tema: "1 Arquitetura e JSF Gustavo Wagner www.gustavowagner.com."— Transcrição da apresentação:

1 1 Arquitetura e JSF Gustavo Wagner www.gustavowagner.com

2 Gustavo Wagner – www.gustavowagner.com2 Arquitetura

3 3 Introdução ao Javaserver Faces (JSF) Adaptado do material de Fabiano Bandeira TRT 13ª Região

4 Gustavo Wagner – www.gustavowagner.com4 Introdução Motivação MVC tornou-se um padrão de mercado; 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;

5 Gustavo Wagner – www.gustavowagner.com5 Introdução O que é Javaserver Faces (JSF) Paradigma de programação visual de User- interfaces aplicado à web É um framework que permite a criação de aplicações Web com semântica de Swing implementando MVC

6 Gustavo Wagner – www.gustavowagner.com6 Introdução Definição de termos UI component JavaBeans com propriedades, métodos e eventos que representam um componente visual Renderer Responsável por desenhar os componentes Validator Garante a validação dos dados de entrada Backing bean Representação de uma tela (como uma página JSP)

7 Gustavo Wagner – www.gustavowagner.com7 Introdução Definição de termos Converter Converte valores e formatação de dados Eventos e listeners Componentes geram eventos e listeners são registrados para manipular esses eventos Navegação Movimentação entre páginas configurada no arquivo faces-config.xml

8 Gustavo Wagner – www.gustavowagner.com8 Introdução Uma aplicação JSF é formada por: Um conjunto de páginas de apresentação (como JSP) Um conjunto de backing beans Um arquivo de configuração (faces- config.xml) Biblioteca de componentes UI (conjunto de tag libs) Converters, validators e listeners

9 Gustavo Wagner – www.gustavowagner.com9 Arquitetura JSF

10 Gustavo Wagner – www.gustavowagner.com10 Ciclo de Vida

11 Gustavo Wagner – www.gustavowagner.com11 Ciclo de Vida Fase 1: Restore View Transformar componentes da apresentação em uma árvore de componentes JSF

12 Gustavo Wagner – www.gustavowagner.com12 Ciclo de Vida Fase 1: Restore View (cont.)

13 Gustavo Wagner – www.gustavowagner.com13 Ciclo de Vida Fase 2: Apply Requests Values Atualiza os valores dos componentes com os valores enviados via request Aciona os converters Gera erros de conversão

14 Gustavo Wagner – www.gustavowagner.com14 Ciclo de Vida Fase 3: Process Validations Aciona os validators Gera erros de validação

15 Gustavo Wagner – www.gustavowagner.com15 Ciclo de Vida Fase 4: Update Model Values Atualiza os valores dos backing beans associados com os componentes Gera erros de conversão

16 Gustavo Wagner – www.gustavowagner.com16 Ciclo de Vida Fase 5: Invoke Application Chama os listeners registrados Executa métodos de ação que geram navegação entre páginas

17 Gustavo Wagner – www.gustavowagner.com17 Ciclo de Vida Fase 6: Render Response Mostra a visão selecionada usando a tecnologia escolhida (como JSP)

18 Gustavo Wagner – www.gustavowagner.com18 Entendendo componentes e identificadores...

19 Gustavo Wagner – www.gustavowagner.com19 Entendendo componentes e identificadores

20 Gustavo Wagner – www.gustavowagner.com20 JSF Expression Language Usa # para marcar o início da expressão Serve para ler e atualizar os valores das propriedades Pode referenciar métodos de objetos

21 Gustavo Wagner – www.gustavowagner.com21 JSF Expression Language Example Description #{myBean.value}Returns the value property of the object stored under the key myBean, or the element stored under the key value if myBean is a Map. #{myBean['value']} Same as "{#myBean.value}". #{myArrayList[5]}Returns the fifth element of a List stored under the key myArrayList. #{myMap['foo']}Returns the object stored under the key foo from the Map stored under the key myMap. #{myMap['foo'].value}Returns the value property of the object stored under the key foo from the Map stored under the key myMap. #{myMap['foo'].value[5]} Returns the fifth element of the List or array stored under the key foo from the Map stored under the key myMap. #{user.role == 'normal'}Returns true if the role property of the object stored under the key user equals normal. Returns false otherwise. #{myBean.methodName}Returns the method called method of the object stored under the key myBean. #{20 + 3}Returns 23.

22 Gustavo Wagner – www.gustavowagner.com22 Backing Bean Classe que representa uma tela Exemplo: package exemplo; public class LoginBean { private String user; private String password; // get e set para cada atributo public LoginBean() {} public String login() {... }

23 Gustavo Wagner – www.gustavowagner.com23 Backing Bean Configuração no faces-config.xml loginBean exemplo.LoginBean session

24 Gustavo Wagner – www.gustavowagner.com24 Backing Bean Escopo application Variáveis disponíveis para toda a aplicação session Variáveis disponíveis apenas para a sessão do usuário request Variáveis disponíveis apenas para cada requisição de página

25 Gustavo Wagner – www.gustavowagner.com25 Backing Bean Página JSP Tag libs

26 Gustavo Wagner – www.gustavowagner.com26 Backing Bean Página JSP h:inputSecret id=“senha” value=“#{loginBean.password}”/>

27 Gustavo Wagner – www.gustavowagner.com27 Navegação A navegação é configurada no arquivo faces-config.xml Exemplo: /login.jsp success /mainmenu.jsp failure /login.jsp

28 Gustavo Wagner – www.gustavowagner.com28 Mensagens Mensagens globais Mensagens por componente

29 Gustavo Wagner – www.gustavowagner.com29 Validação Campo obrigatório Tamanho

30 Gustavo Wagner – www.gustavowagner.com30 Validação Raio de valores

31 Gustavo Wagner – www.gustavowagner.com31 Validação Combinando validações

32 Gustavo Wagner – www.gustavowagner.com32 Validação Validação no backing bean public void validateEmail(FacesContext facesContext, UIComponent component, Object newValue) throws ValidatorException { if (newValue.toString().length()<5) { FacesContext fc = FacesContext.getCurrentInstance(); fc.addMessage(component.getClientId(fc), new FacesMessage("Preencha este campo.")); throw new ValidatorException(new FacesMessage( "E-mail é obrigatório para contato.")); }

33 Gustavo Wagner – www.gustavowagner.com33 Conversores DateTime converter

34 Gustavo Wagner – www.gustavowagner.com34 Conversores Number converter