JavaServer Faces

JavaServer Faces Rapid Web Application Development em Java Ricardo Cavalcanti roc3@cin.ufpe.br Jobson Ronan jrjs@cin.ufpe.br

O que é? • Um framework padrão(Standard) para aplicações webs • Define um modelo de programação • Componentes Reusáveis • Gera HTML a partir dos componentes • Validação e conversão • Arvore de componentes

Objetivos • Simplificar o desenvolvimento • Suporte por ferramentas • Eventos facilmente ligado a código server-side • Fácil de estender • Gerenciar o estado da UI

Padrões e Arquitetura • Model-View-Controller (MVC) • Baseada em factories • Árvore de componentes (Composite) • Eventos do lado do servidor

Mas o que é mesmo? • Uma aplicação JSF é como qualquer outra aplicação web Java • Roda dentro de um servlet container, e normalmente é composta de: • Simples componentes Java Beans • Event Listeners • Páginas, como páginas JSP • Outras classes como classes de acesso a dados

Mas o que é mesmo? • Em adição aplicações JSF também contém: • Uma tag library para renderizar os componentes gráficos na página • Uma tag library para tratamento de eventos, validações e outras acções • Backing Beans, que definem propriedades e funções para os componentes gráficos

Mas o que é mesmo? • Além de: • Classes implementando validators, converters, event listeners e event handlers • Um descritor de aplicação para configurar o funcionamento da mesma

Como usar? • Prescisa-se de uma implementação: • Implementação de referência • MyFaces, do grupo Jakarta

Ciclo de vida do Request-response

Como usar? • Declarar o Faces Servlet (Front Controller) 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> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.jsf</url-pattern> </servlet-mapping> <context-param> <param-name>contextConfigLocation</param-name> <param-value>/WEB-INF/faces-config.xml</param-value> </context-param>

Como usar? • Características • Front Controller MVC (como Struts) • Configuravel através de parametros de contexto

Simples exemplo • Botão “trocar” troca o conteúdo do campo1 pelo do campo2, e vice-versa

Implementando páginas • TagLibraries • UIComponent + HTML RenderKit Renderer <%@ taglib prefix="h"uri="http://java.sun.com/jsf/html"%> • Core JavaServer Faces <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>

UIComponent + HTML RenderKit Renderer • <h:inputText> • Define um campo de entrada de texto • Atributos • value: expressão que indica o conteúdo do campo. Possivelmente uma propriedade de um bean <h:inputText id="campo1" value="#{TrocaBean.campo1}"/>

UIComponent + HTML RenderKit Renderer • <h:commandButton> • Define um botão de ação • Atributos • action: expressão que indica a ação a ser invocada quando este componente for ativado • actionListener: expressão que indica o método de listener que será notificado quando este componente for ativado

UIComponent + HTML RenderKit Renderer • <h:commandButton> <h:commandButton id="trocar" action="#{TrocaBean.trocar}" value="Trocar" /> • O método “trocar” do bean Trocar, não deve receber parâmetros e deve retornar uma String

UIComponent + HTML RenderKit Renderer • <h:commandLink> • Renderiza um componente “a” HTML que funciona como um botão submit de um form • Uso análogo ao commandButton

UIComponent + HTML RenderKit Renderer • <h:form> • Renderiza um formulário HTML

Core JavaServer Faces • <f:view> • Container para todos os componentes usados na página • Todos os componentes JavaServer Faces devem ser aninhados a este

Exemplo completo <%@ taglib prefix="h"uri="http://java.sun.com/jsf/html"%> <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <f:view> <h:form> <fieldset> <legend>Troca Exemplo</legend> <label>Campo1: <h:inputText id="campo1" value="#{TrocaBean.campo1}"/> </label><br/> <label>Campo2: <h:inputText id="campo2" value="#{TrocaBean.campo2}"/> </label><br/> <h:commandButton id="trocar" action="#{TrocaBean.trocar}" value="Trocar" /> </fieldset> </h:form> </f:view> </body> </html>

Backing Bean Model • Que bean “TrocaBean” é este? package pcc; public class Troca { private String campo1; private String campo2; //gets e sets ... public String troca() { String temp = campo1; campo1 = campo2; campo2 = temp; return “sucesso”; } }

Backing Bean Model • Declarado no faces-config.xml <!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN" "http://java.sun.com/dtd/web-facesconfig_1_1.dtd"> <faces-config> <managed-bean> <managed-bean-name>TrocaBean</managed-bean-name> <managed-bean-class>pcc.Troca</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> </faces-config>

Backing Bean Model Demostração...

Validação • Suporte validação de campos de entrada de forma declarativa • <f:validateDoubleRange>,<f:validateLengtg>, <f:validateLongRange> e outros validators customizados podem ser aninhados campos de entrada

Validação • Suporte validação de campos de entrada de forma programática • Um método do bean no formato public void xyz(FacesContext faces, UIComponent coponent, Object value) • Uma classe que implemente a interface javax.faces.validator.Validator

Validação • Mensagens de erro podem ser impressas utilizando a tag <h:message> • Atributos • for: O id do campo do qual deseja-se mostrar uma mensagem, possivelmente de erro <h:message for="campo1"/>

Validação Demostração...

O que mais? • Navegação definida no faces-config.xml • Condicionada e método do bean • Condicionada a retorno do método do bean

O que mais? • Exemplo (faces-config.xml) <faces-config>  <navigation-rule> <description></description> <from-view-id>/troca.jsp</from-view-id> <navigation-case> <description></description> <from-outcome>success</from-outcome> <to-view-id>/trocaSucesso.jsp</to-view-id> </navigation-case> </navigation-rule>  </faces-config>

O que mais? • Injeção de dependência nos beans • Suporte a internacionalização

O que mais? • Converters para a conversão de entradas em objetos específicos • Implementados de formas análogas a validação • Listeners de eventos do usuário • Implementados de formas análogas a validação e a converters

O que mais? • Gerênciadores de layout • <h:panelGrid> • Geração de Tabelas de dados total suporte a coleções • <h:dataTable var=“filme” value=#{filmes}> • <h:column id=“#{filme.nome}”>

O que mais? • Suporte a outros tipos de entrada <h:selectBooleanCheckbox> <h:selectManyCheckbox> <h:selectManyListbox> <h:selectManyMenu> <h:selectOneListbox> <h:selectOneMenu> <h:selectOneRadio>

O que mais? • Implementação open-source, MyFaces (jakarta), com excelentes componentes customizados • Geradores de menus • Geradores de popups • Geradores de Barra de navegação • Grande quantidade de Validators customizados: EmailValidator, CreditCardValidator, etc.

O que mais? • Suporte de ferramentas comerciais para geração Drag’n Drop • Sun Java Studio Creator • IBM Webspheere • JDeveloper (free) • Uma tecnologia de geração de páginas a altura de ASP.NET • Porém, com toda a maturidade da linguagem Java no ServerSide

JavaServer Faces