Itamir de Morais Barroca Filho Mario V. Andrade de Melo Neto

Apresentação em tema: "Itamir de Morais Barroca Filho Mario V. Andrade de Melo Neto"— Transcrição da apresentação:

1 Itamir de Morais Barroca Filho Mario V. Andrade de Melo Neto
Java Server Faces Itamir de Morais Barroca Filho Mario V. Andrade de Melo Neto

2 Conteúdo MVC O que é JSF? Instalando o JSF Serviços JSF Rendering
Navegação de Páginas Managed-Bean JSF Expression Language Tratamento de Eventos Tags JSF Data tables Componentes MyFaces

3 MVC – Model-View-Controller
Programação orientada a objetos Padrão de Projeto que possui as características: Divisão de responsabilidades; Separação de camadas; Reusabilidade; Três camadas: modelo, visualização e controle.

4 MVC – Model-View-Controller
Camada de Apresentação JSP, Swing, SWT Camada de Aplicação Façades, Bussines Delegates, Actions Camada de Domínio Objetos de domínio, lógica de negócio Camada de Persistência DAOs, JDBC, Hibernate

5 Java Server Faces Framework MVC que permite: Manipulação de eventos
Implementação flexível de controladores Chamada de métodos controladores diretamente a partir da visualização. Independente de visualização Pode-se utilizar JSF para gerar views que não sejam HTML Framework padrão JEE (Java Enterprise Edition)

6 Instalando o Java Server Faces
Para utilização do JSF em um projeto é necessário: Copiar os JARs para a pasta WEB-INF/lib: jsf-api.jar jsf-impl.jar libs comons JSTL libs Criar um arquivo de configuração: faces-config.xml

7 Instalando o Java Server Faces
Para utilização do JSF em um projeto é necessário: Definir no web.xml: <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> <url-pattern>/faces/*</url-pattern> </servlet-mapping>

8 Serviços JSF Arquitetura MVC JSF conecta view e model
Uma view pode ser conectado diretamente ao modelo <h:inputTextvalue="#{user.name}"/> JSF opera como controller quando faz com que o clique de um botão invoque um método no lado servidor <h:commandButton value="Login" action="#{user.check}"/>

9 Serviços JSF Conversão de Dados Validação e Tratamento de Erros
Usuários entram dados em formato String Objetos de negócio necessitam de Strings, inteiros, decimais e datas JSF faz a conversão automática dos dados Validação e Tratamento de Erros JSF torna fácil a inclusão de validações como: “valor requerido”, “valor deve ser inteiro” Ao entrar com dados inválidos, faz-se necessário mostrar os dados errados JSF trata da maior parte da tarefa tediosa de converter dados e validar/tratar erros

10 Serviços JSF Componentes Customizados
Desenvolvedores podem desenvolver componentes sofisticados e podem utilizar arrastando para as páginas Exemplo: <acme:calendar value="#{flight.departure}" startOfWeek="Mon"/>

11 Serviços JSF Renders Alternativos Suporte a ferramentas
Por default, o componente é gerado para HTML Mas, é fácil estender o framework JSF para gerar outras saídas: XML, WML, etc. Suporte a ferramentas JSF é ideal para ser utilizado em IDEs Estilo drag-and-drop

12 Serviços JSF Fluxo Geral

13 Rendering <h:form> Nome: <h:inputText/>
Telefone: <h:inputText/> <h:commandButton/> </h:form>

14 Rendering Todo o texto que não é JSF tag é simplesmente passado adiante As tags h:form, h:inputText, h:inputSecret são convertidas para HTML Cada uma das tags é associada com um determinado componente Cada classe tem um renderer que gera a saída (HTML por padrão) O processo de gerar saída da árvore de componentes gráficos é chamado encode

15 Navegação de Páginas A navegação de páginas em JSF é baseado em regras de navegação Navegação Estáticas Apenas um link estaticamente definido Navegações Dinâmicas O link é dinamicamente descoberto

16 Navegação de Páginas index.jsp listar.jsp cadastrar.jsp index index

17 Navegação de Páginas Exemplo: index.jsp
taglib uri=" prefix="f" %> taglib uri=" prefix="h" %> <f:view> <h1>Página Principal</h1> <br/> <h:form> <h:commandButton value=“Listar" action=“listar"/> <h:commandButton value=“Cadastrar" action=“cadastrar"/> </h:form> </f:view>

18 Navegação de Páginas Cont. do ex.: configuração de navegação
<navigation-rule> <from-view-id>/index.jsp</from-view-id> <navigation-case> <from-outcome>listar</from-outcome> <to-view-id>/listar.jsp</to-view-id> </navigation-case> <from-outcome>cadastrar</from-outcome> <to-view-id>/cadastrar.jsp</to-view-id> </navigation-rule>

19 Navegação de Páginas No exemplo anterior temos navegação estática:
A navegação estática não é muito interessante pois se as identificadores são fixos, não há necessidade de tanta “infra-estrutura” Uma navegação dinâmica necessitaria escolher o from-outcome em tempo de execução Para isso, necessitamos chamar um código Java para fazer esta decisão

20 Exemplo: Reservar Passagem
Navegação de Páginas Navegação dinâmica: over-booking sucesso Formulário Exemplo: Reservar Passagem Formulário Classe Java String processar() lotado

21 Navegação de Páginas Navegação dinâmica: <navigation-rule>
<from-view-id>/psssagem.jsp</from-view-id> <navigation-case> <from-outcome>lotado</from-outcome> <to-view-id>/lotado.jsp</to-view-id> </navigation-case> <from-outcome>overbooking</from-outcome> <to-view-id>/over.jsp</to-view-id> <from-outcome>sucesso</from-outcome> <to-view-id>/sucesso.jsp</to-view-id> </navigation-rule>

22 Managed-Bean Um Managed-Bean é uma classe definida no faces-config que é identificada através de um alias Permite ligar um formulário diretamente a um ou mais métodos Funciona como elemento de controle Chamando o modelo Escolhendo a visualização Utilizado para navegação dinâmica (através do retorno do método)

23 Managed-Bean Definição no faces-context <faces-config>
<managed-bean-name>nome</managed-bean-name> <managed-bean-class>classe</managed-bean-class> <managed-bean-scope> request|session|application </managed-bean-scope> </managed-bean> </faces-config>

24 Managed-Bean Para chamar um bean: Usa-se a chamada ao Managed Bean
<h:commandLink value="Voltar“ action=“#{beanName.metodo}"/> A declaração do método deve ser public String metodo() { .... }

25 Managed-Bean Exemplo: Uma página com um formulário que recebe um valor
Caso o valor digitado seja ímpar, redirecionar para uma página Caso o valor seja par, redirecionar para outra página

26 Managed-Bean Cont. do ex.: definição do bean package curso.jsf;
public class Valor { private int valor; public void setValor(int valor) { this.valor = valor; } public int getValor() { return valor; } public String processar() { if ( valor % 2 == 0 ) { return “par”; } else { return “impar”; } } }

27 Managed-Bean Cont. do ex.: def. do bean no faces-context
<faces-config> <managed-bean> <managed-bean-name>bean</managed-bean-name> <managed-bean-class>curso.jsf.Valor</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> </faces-config>

28 Managed-Bean Cont. do ex.: configurações de navegação
<navigation-rule> <from-view-id>/index.jsp</from-view-id> <navigation-case> <from-outcome>par</from-outcome> <to-view-id>/par.jsp</to-view-id> </navigation-case> <from-outcome>impar</from-outcome> <to-view-id>/impar.jsp</to-view-id> </navigation-rule>

29 Managed-Bean Cont. do ex.: formulário <f:view> <h:form>
Valor: <h:inputText value="#{bean.valor}"/><BR> <h:commandButton value=“Enviar“action="#{bean.processar}"/> </h:form> </f:view>

30 Managed-Bean Explicação do exemplo:
Quando o formulário é enviado, os dados são preenchidos no managed Bean e o método escolher é chamado Baseado no retorno do método a escolha de navegação é feita Baseada nos navigation-rules.

31 Managed-Bean Cenários de utilização do JSF:
Uma aplicação JSF suporta dois tipos de respostas e dois tipos de requisições: Faces Response: Uma resposta que foi criada a partir da renderização de componentes JSF. Non-Faces Response: Uma página JSP qualquer que não incorpora componentes JSF. Faces Request: Uma requisição que é enviada a partir de uma resposta JSF anterior. Non-faces Request: Uma requisição vinda de uma página que não possuiu uma prévia geração de componentes JSF.

32 JSF Expression Language
O JSF possui uma linguagem de expressões para simplificar a sintaxe de acesso a informações: Ex.: #{cliente.nome} #{cliente.endereco.rua} #{aluno.disciplinas[3].ementa} #{x > 0 ? “Positivo” : “Negativo”}

33 Tratamento de Eventos Existem dois tipos de eventos
Eventos que iniciam um processamento no back-end Eventos que apenas alteram a interface do usuário JSF categoriza esses códigos como: Action Controllers Disparado depois do bean populado e validado Retorna uma String como navegação Event Listeners Frequentemente disparado antes do bean ser populado e validado Nunca afeta diretamente a navegação de página

34 Tratamento de Eventos Action Listeners ValueChangeListener
Disparado por botões, links, etc. <h:commandButton value=“...”/> <h:commandButton image=“...”/> <h:commandLink .../> ValueChangeListener Disparado por Caixas de Combinação (Combo Box), checkbox, radio button, textfield, etc <h:selectOneMenu .../> <h:selectBooleanCheckBox .../> <h:selectOneRadio ../> <h:inputText .../> Não submetem o formulário automaticamente

35 Tratamento de Eventos Action Listeners
Quando desejamos que o botão submeta o botão e inicie um processamento de backend, usamos: <h:commandButton action=“...”/> Quando desejamos apenas afetar a interface gráfica <h:commandButton actionListener=“...”/> Usualmente, desejamos que isso ocorra antes da validação e população Pois os formulários frequentemente estão incompletos Use o atributo immediate para informar que o evento será chamado antes do bean ser populado e validado <h:commandButton actionListener=“...” immediate=“true”/>

36 Tratamento de Eventos Criando um Tratador de um Evento
Criamos um ActionEvent com as seguintes regras: Sem tipo de retorno (void) ActionEvent está em javax.faces.event. O ActionEvent possui a referência para o objeto modificado Exemplo public void trataEvento(ActionEvent event) { // acao() }

37 Tratamento de Eventos ValueChangeListener
Action é ligado a um botão Sem tipo de retorno (void) Formulário é submetido quando clicado ValueChangeListener é ligado com combobox, listbox, radio button, checkbox, textfield, etc. O formulário não é submetido automáticamente Necessário adicionar javascript para submeter o formulário: Onclick=“submit()” e onchange=“submit()”

38 Tratamento de Eventos Implementando um ValueChangeListener
Método que possui um ValueChangeEvent como argumento ValueChangeEvent getComponent: Retorna o componente alterado getOldValue(): Valor anterior getNewValue(): Valor alterado Necessário pois provavelmente o Bean ainda não foi populado Valor para um checkbox é Boolean Valor para um radio button ou textfield é o parametro de request

39 Tags JSF As aplicações JSF fazem uso extensivos de Tag Libraries
As Tags JSF não são simplesmente tags HTML, e sim, classes que geram (renderizam) HTML Existem mais de 43 tags no JSF Padrão

40 Tags JSF Validação da Entrada do Usuário
Duas tarefas que são quase que essenciais em aplicações Web: Checar se toda a informação necessária está presente no formato correto Reexibir a informação quando algo estiver incorreto ou mal-formado Com mensagens de erros mostrando problemas Com informações corretas mantidas Isto é extremamente chato na maioria das tecnologias de desenvolvimento WEB

41 Tags JSF Validação da Entrada do Usuário Validação Manual
Faz a validação nos métodos sets e gets Programador faz código de validação Validação no método de ação Validação Automática Implícita Adiciona required na entrada Usar h:message para informar erros Validação automática explícita f:convertNumber, f:convertDateTme, f:validateLength, f:validateDoubleRange, f:validateLongRange Sistema reexibe caso erro Validadores customizáveis Herdam Validador, sobrescrevem o validate e são registrados no faces-config.xml

42 Tags JSF Exemplo de Validação Manual: no bean private ArrayList erros;
public String processar() { if ( idade <= 0 || idade > 120 ) { erros.add(“Idade inválida, por favor, redigite-a”); } if ( erros.size() > 0 ) { return null; } else { return “navegacao”; } }

43 Tags JSF Cont. ex. de Validação Manual: no bean
public String getErros() { String message; if (erros.size() == 0) { message = ""; } else { message = "<FONT COLOR=RED><B><UL>\n"; for(int i=0; i<erros.size(); i++) { message = message + "<LI>" + (String)erros.get(i) + "\n"; } message = message + "</UL></B></FONT>\n"; return message ;

44 Tags JSF Cont. ex. de Validação Manual: na jsp <h:form>
<h:outputText value="#{funcioanrio.erros}“ escape="false"/> ... </h:form>

45 Tags JSF Exemplo de validação implícita <h:form>
<TABLE> <TR> <TD>Nome: <h:inputText value="#{funcionario.nome}" required="true“ id=“nome"/> </TD> <TD> <h:message for=“nome" styleClass="RED"/> </TD></TR> <TR> <TD>Telefone: <h:inputText value="#{funcionario.telefone}" required="true“ id=“telefone"/></TD> <TD><h:message for=“telefone" styleClass="RED"/> </TD></TR> …</TABLE>…</h:form>

46 Tags JSF Exemplo de validação explícita <h:form>
<TABLE> <TR> <TD>User ID: <h:inputText value="#{bidBean2.userID}“ id="userID"> <f:validateLength minimum="5" maximum="6"/> </h:inputText></TD> <TD><h:message for="userID" styleClass="RED"/></TD></TR> </form>

47 Data Tables JSF possui uma estrutura para exibir tabelas
Realiza iteração automática sob os elementos da coleção <h:dataTable value="#{someBean.someCollection}“ var="rowVar"> <h:column> <h:outputText value="#{rowVar.col1Data}"/> </h:column> <h:column> <h:outputText value="#{rowVar.col2Data}"/> </h:column> </h:dataTable>

48 Data Tables var Outros atributos value: Uma coleção (lista de bens)
Array List ResultSet DataModel (javax.faces.model) var Variável de cada item da coleção Outros atributos Atributos padrões de tabelas border, bgcolor, width, cellpadding, cellspacing, frame, ... Informações de Estilo rowClasses, headerClass, footerClass

49 Data Tables Exemplo Escalação da seleção brasileira (copa 2006)
Managed-Bean: Elenco Classe: Jogador Páginas brasil.jsp: Datatable com a lista dos jogadores

50 Data Tables Exemplo public class Jogador { private int numero;
private String nome; private boolean escalado; … } public class Elenco { private Collection timeBrasil; }

51 Data Tables Cont. do exemplo: listagem <f:view>
<h:dataTable value="#{elenco.brasil}" var="canarinho" border="1"> <h:column> <h:outputText value="#{canarinho.numero}"/> </h:column> <h:outputText value="#{canarinho.nome}"/> </h:dataTable> </f:view>

52 Data Tables Cont. do exemplo: listagem

53 Componentes MyFaces <t:jscookMenu [ user-role-support-attributes ] [layout="values {hbr, hbl, hur, hul, vbr, vbl, vur, vul}"] [theme="values {ThemeIE, ThemeMiniBlack, ThemeOffice, ThemePanel}"] Nested <t:navigationMenuItem> or <t:navigationMenuItems> tags (menu items) </t:jscookMenu>

54 Componentes MyFaces Tree2 TabbedPane

55 Componentes MyFaces Calendário/Date

56 Componentes MyFaces HTML/Editor

57 Componentes MyFaces Schedule

58 Exercício – Nível I Crie uma jogo com JSF para adivinhar um número secreto. Esse jogo deve possuir duas JSPs: uma onde o usuário digitará um número e outra onde será exibido uma mensagem de sucesso e número de tentativas para o acerto, caso o usuário acerte o número secreto. O objetivo desse exercício é entender: a estrutura do faces-config.xml; criação de um bean; criação de JSPs com JSTL.

59 Exercício – Nível II Crie uma aplicação com JSF para cadastro de veículos (use quantos atributos forem necessários). Deverá existir duas JSPs: uma onde serão informados os dados do veículo e outra onde serão listados os veículos cadastrados. Durante o cadastro devem ser validadas as entradas do usuário. Objetivo do exercício é estudar: validações de entradas do usuário.

60 Exercício – Nível III Crie uma aplicação com JSF para cadastro de veículos (use quantos atributos forem necessários). Deverá existir duas JSPs: uma onde serão informados os dados do veículo e outra onde serão listados os veículos cadastrados. Os veículos cadastrados deverão ser persistidos em um banco de dados. Objetivo do exercício é estudar: integração de tecnologias (hibernate).

61 Fim Dúvidas?