Desenvolvimento Web em Java com Java Server Faces (JSF) 09/08/2008

Conteúdo Java Web Java Server Faces Arquitetura Servlet JSP EL, JSTL e Taglibs Padrão MVC Java Server Faces Introdução Gerenciando a Navegação Managed Beans JSF Expression Language Java Server Faces Standard Tags Modelo de Componentes Conversão e Validação Tratando Eventos Ciclo de Vida de um Requisição e PhaseListeners

INTRODUÇÃO

Acessada por meio de navegadores Web (Thin Client) Aplicações Web Acessada por meio de navegadores Web (Thin Client) Facilidade de atuliazação da aplicação Processamento centralizado Interface com usuário muito poderosa Diversas tecnologias disponíveis CGI PHP ASP ASP.NET Java Servlets/JSP etc

Requisição/Resposta (Request/Response)

Java e Web = J2EE Servlets e JSP Assim como a linguagem Java, são independente de Plataforma Acesso completo a API do Java Melhor desempenho (na maioria dos casos) do que CGI, ASP e PHP Adotado pelas grandes industrias de software mundial

Desenvolver o código dos componentes Web Aplicação Web em Java Desenvolver o código dos componentes Web Configurar aplicação (web.xml e context.xml) Compilar aplicação Empacotar aplicação em uma unidade instalável Instalar a aplicação em um Servidor de Aplicação Tomcat JBoss IBM WebSphere ... Acessar a URL que referência a aplicação web

Estrutura de pastas e conteúdo

Empacotando e Instalando Arquivo WAR Arquivo zip com todo o conteúdo da aplicação (JSP's, imagens, conteúdo estático, classes compiladas, web.xml, etc) Segue a estrutura definida anteriormente Pronto para instalação Tarefa do Ant/Maven Instalação no Tomcat context.xml – Arquivo com configurações específicas do Tomcat Pasta webapps Tomcat Manager

SERVLET

Arquitetura Servlet Classes Java que processam dinamicamente requisições e constroem respostas Fundação de todas as tecnologias Web Os pacotes javax.servlet.* e javax.servlet.http.* provê as classes e interfaces necessárias para escrever Servlets A classe HttpServlet oferece os serviços HTTP através dos métodos doGet, doPost etc Ciclo de vida gerenciado pelo Container Multithreaded

Classe deve herdar de javax.servlet.http.HttpServlet Arquitetura Servlet Classe deve herdar de javax.servlet.http.HttpServlet Quando chega um requisição ao Servidor, o método service() da classe HttpServlet chama o método doXXX() equivalente a requisição É passado um objeto contendo as informações da requisição (HttpServletRequest) É passado um objeto para se construir a resposta (HttpServletResponse)

Arquitetura Servlet public class UsuariosServlet extends HttpServlet { private static final long serialVersionUID = 6802030530738727745L; @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { ... } protected void doPost(HttpServletRequest request, doGet(request, response); public void init() throws ServletException {

Compartilhando Informações Arquitetura Servlet Compartilhando Informações Os vários componentes de uma aplicação web trabalham juntos (JSP, Servlet, Filters, Listeners, etc) É necessário compartilhar informações As informações são compartilhadas através de objetos mantidos como atributos dos chamados Objetos de Escopo (Scope Objects) usando os método [get|set]Attribute Web Context – ServletContext: Escopo da Aplicação, visível a toda Aplicação (Variáveis globais) Session – HttpSession: Informações relativas a sessão de um Cliente, visível a um conjunto de requisições Request – HttpServletRequest: Relativa a apenas uma requisição Page – JspContext: Criada pela página JSP, visível apenas ao JSP

Tratando Requisições Métodos HTTP mais comuns: GET e POST Extrair informações da requisição, acessar recursos externos, e montar a resposta baseado nessas informações URL da requisição http://[host]:[port][request path]?[query string] Context Path: "/nomeDoContexto" nome da aplicação web Servlet Path: "/Teste" corresponde ao caminho para um componente (Servlet) Path Info: o que não faz parte do Context Path nem do Servlet Path

Exemplo de Servlet @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html"); PrintWriter out = response.getWriter(); String nome = request.getParameter("nome"); List<Usuario> usuarios = usuarioFacade.listarUsuarios(nome); out.println("<html>"); out.println("<head>"); out.println("<title>Usuarios</title>"); out.println("</head>"); out.println("<body>"); out.println("<ul>"); for(Usuario usuario: usuarios) { out.println("<li>"); out.println("<a href=\"mailto:" + usuario.getEmail() + "\">"); out.println(usuario.getNome()); out.println("</a>"); out.println("</li>"); } out.println("</ul>"); out.println("</body>"); out.println("</html>"); out.close();

JSP

Conteúdo estático e dinâmico podem ser misturados Conteúdo estático JSP - Introdução Documento de texto capaz de gerar tanto conteúdo estático como dinâmico Conteúdo estático e dinâmico podem ser misturados Conteúdo estático HTML, XML, Texto, etc Conteúdo dinâmico Código Java Propriedades de Java Beans Tags personalizadas

JSP - Exemplo <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <%@page import="java.util.Date"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Bem Vindo</title> </head> <body> Olá! Hoje é <%=new Date()%>. </body> </html>

Assim como a linguagem Java, é independente de plataforma Código Java JSP - Introdução Assim como a linguagem Java, é independente de plataforma Código Java Fácil edição de páginas HTML É instalado automaticamente pelo container É compilado para um Servlet Recompilado quando á página é modificada Vantagens em relação ao Servlets Não é necessário usar println() Fácil edição e manutenção de páginas HTML

JSP – Elementos de Scripting (Scriptlets) Possibilita a inserção de código Java no servlet gerado Usar o mínimo possível Três maneiras Expressões: <%= Expressão%> Scriplets: <% Código%> Declarações <%! Variáveis e Métodos%>

JSP - Scriptlet <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <%@page import="java.util.List"%> <%@page import="br.gov.serpro.curso.model.Usuario"%> <%@page import="br.gov.serpro.curso.service.facade.GerenciadorUsuarioFacade"%> <%@page import="br.gov.serpro.curso.service.FacadeFactory"%> <% GerenciadorUsuarioFacade usuarioFacade = FacadeFactory .getInstance().getUsuarioFacade(); String nome = request.getParameter("nome"); List<Usuario> usuarios = usuarioFacade.listarUsuarios(nome); %> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Usuários</title> </head> <body> Olá <%=((Usuario)session.getAttribute("loggedUser")).getNome()%>! <ul> <%for (Usuario usuario: usuarios) { %> <li><a href="mailto:<%=usuario.getEmail()%>"><%=usuario.getNome()%></a></li> <%} %> </ul> </body> </html>

EL, JSTL e Taglibs

Expression Language (EL) Possibilita o acesso a propriedades dos Java Beans e de Map's Exemplo: ${usuario.nome} Reconhecido como saída de texto e como atributo para qualquer ação Suporta Operadores Reduz o uso de Scriptlets Suporte a funções EL personalizadas Extensível via taglibs Exemplo: ${fn:endsWith(filename, ".txt")} O JSTL 1.1 já vem com 16 funções pré-definidas

EL - Exemplo Expression Language (EL) Exemplo Usando Scriptlets <% Map m = (Map)pageContext.getAttribute("estados" ); Estado e = ((State)m.get( "CE" )); if( e != null ) {%> <%= e.getCapital() %> <% } %> Usando EL <center> ${estados["CE"].capital} </center>

JSTL – Java Standart Tag Lib Java Standart Tag Lib (JSTL) Faz parte da especificação J2EE (Java EE) Encapsula funcionalidades comuns a muitas aplicações JSP Conjunto de tags padrão Não é preciso escrever as Tags Portabilidade

JSTL – Java Standart Tag Lib JSTL – Bibliotecas Core (prefixo: c) Formatação (prefixo: fmt) Funções (prefixo: fn) – usado na EL XML (prefixo: x) Banco de Dados (prefixo: sql)

JSTL – Java Standart Tag Lib <%@ page language="java" contentType="text/html" pageEncoding="ISO-8859-1"%> <%@page import="br.gov.serpro.curso.service.facade.GerenciadorUsuarioFacade"%> <%@page import="br.gov.serpro.curso.service.FacadeFactory"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <% GerenciadorUsuarioFacade usuarioFacade = FacadeFactory.getInstance() .getUsuarioFacade(); String nome = request.getParameter("nome"); %> <c:set var="usuarios" value="<%=usuarioFacade.listarUsuarios(nome)%>" /> ...

JSTL – Java Standart Tag Lib <%@ page language="java" contentType="text/html" pageEncoding="ISO-8859-1"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> ... <body> <c:if test="${not empty usuarios}"> <ul> <c:forEach var="usuario" items="${usuarios}"> <li> <a href="mailto:${usuario.email}">${usuario.nome}</a><br> <c:choose> <c:when test='${usuario.estadoCivil eq 1}'> solteiro </c:when> <c:when test='${usuario.estadoCivil eq 2}'> casado <c:otherwise> não informado </c:otherwise> </c:choose> </li> </c:forEach> </ul> </c:if> </body> </html>

Taglibs Taglibs Elementos JSP definidos pelo usuário (diferente das tags padrões) Encapsular tarefas recorrentes Reaproveitamento de código Simplifica o desenvolvimento e a manutenção São distribuídas em bibliotecas personalizadas (Taglib)

Taglibs Taglibs Podem ser personalizada a partir de atributos passados pela página JSP Podem retornar variáveis para a página JSP Acesso a todas as variáveis disponíveis à página JSP Podem se comunicar Podem ser aninhadas e comunicar-se através de variáveis

Taglibs – Exemplos Taglibs Mostrar conteúdo Processar Forms Controle de Fluxo Iteração sobre Coleções ...

Padrão MVC

Aplicações Web - Desafios Interface Web muda com frequência Necessidade de separar lógica de negócios da lógica de apresentação Páginas Complexas HTML Extensos JavaScript Conteúdo dinâmico geralmente representam uma pequena porção da página A separação de papéis pode ser uma boa escolha

Aplicações Web - Desafios Não segue modelo tradicional de resposta a estímulos do MVC (Sistemas Desktop) Modelo requisição-resposta Quando um componente muda de estado, a página não é automaticamente atualizada Requisições HTTP podem carregar somente strings como parâmetros Necessidade de conversão para objetos Java Tendência a geração de Erros

Aplicações Web - Desafios Dificuldade em validar/restrigir ações do usuário Pouco controle sobre o navegador Dependência de JavaScript Pouca Quantidade de componentes gráficos Interoperabilidade As páginas devem aparecer e ser comportar de forma semelhante em todos os navegadores Difícil de realizar testes automáticos

Padrão MVC Model Objetos de dados (Entidades de Negócio) View Apresenta dados ao cliente Captura ações do cliente Controller Reage a ações do usuário, atualizando o Model da maneira apropriada Determina o fluxo de navegação

Padrão MVC O cliente interage com o View e envia uma requisição O Controller recebe a requisição e a delega, geralmente, para camada de negócios O Model é atualizado e o fluxo volta para o Controller O Controller decide o que será mostrado e qual view será mostrado O View exibe ao cliente os dados do Model disponibilizados pelo Controller

Padrão MVC em Java Padrão MVC Servlets (Controller) JSP (View) Classes Java devem conter apenas código Java Tem acesso a Camada de Negócio Podem direcionar a requisição para outros JSP's JSP (View) são páginas e devem conter apenas lógica de apresentação Camada de Negócio e Entidades de Negócio (Model)

Padrão MVC

Padrão MVC public class UsuariosServlet extends HttpServlet { private static final long serialVersionUID = 6802030530738727745L; private GerenciadorUsuarioFacade usuarioFacade = FacadeFactory .getInstance().getUsuarioFacade(); @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String nome = request.getParameter("nome"); List<Usuario> usuarios = usuarioFacade.listarUsuarios(nome); request.setAttribute("usuarios", usuarios); RequestDispatcher dispatcher = request.getRequestDispatcher( "/usuarios.jsp"); dispatcher.forward(request, response); }

Padrão MVC <%@ page language="java" contentType="text/html" pageEncoding="ISO-8859-1"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Usuários</title> </head> <body> <c:if test="${not empty usuarios}"> <ul> <c:forEach var="usuario" items="${usuarios}"> <li><a href="mailto:${usuario.email}">${usuario.nome}</a></li> </c:forEach> </ul> </c:if> </body> </html>

JSF – Java Server Faces

O que é Java Server Faces O que é o Java Server Faces Framework para simplificar o desenvolvimento de aplicações web Baseado em Componentes Conjunto de componentes GUI para Web Modelo orientado a eventos Não é limitado a HTML Container IoC (provê injeção de dependências)

O que é Java Server Faces Vantagens Componentes GUI personalizados POJOs Tratamento de Eventos Conversão e Validação Suporte a outras tecnologias de transporte e apresentação Managed Beans Expression Language Configuração mais simples

O que é Java Server Faces

JSF – Gerenciando a Navegação Definida usando Regras de Navegação Configurado no faces-config.xml <navigation-rule> <from-view-id>/login.jsp</from-view-id> <navigation-case > <from-action>#{loginBean.login}</from-action> (opcional) <from-outcome>sucesso</from-outcome> <to-view-id>/index.jsp</to-view-id> <redirect/> (opcional) </navigation-case> </navigation-rule> Estática – Configurado na própria página Dinamica – Saída de uma Action

JSF – Gerenciando a Navegação

JSF – Managed Beans Usados para separação entre as lógicas de negócio e de apresentação O que são Beans? Definição de JavaBean : “a reusable software component that can be manipulated in a builder tool” Construtor Vazio Propriedades privadas, acessadas por métodos get e set (getXyz, setXyz) Não é necessário herdar de nenhuma classe em especial (POJO) No JSF também são chamados de backing beans Gerenciados pelo Framework

JSF – Managed Beans Definidos no faces-config.xml Nome, classe, propriedades e escopo Propriedades para os dados do Form Métodos Action (Controller) Propriedades para valores de saída Associados a páginas web através da EL Instanciados e inicializados pelo Container

Message Bundles JSF – Managed Beans Centralizar mensagens em um único lugar Arquivo .properties do tipo chave=valor Suporte a mensagens com parâmetros Suporte a internacionalização

JSF – Managed Beans SystemMessages.properties faces-config.xml #Page: guess.jsp #================= page.guess.title=Adivinhe o Número page.guess.label.numero=Digite um número page.guess.label.botao=Enviar page.guess.denovo=Tentar Novamente page.guess.maior=Tente um número maior page.guess.menor=Tente um número menor page.guess.acerto=Você acertou em {0} tentativas. SystemMessages.properties <faces-config> <!-- Configurações gerais do JSF --> <application> <locale-config> <default-locale>pt_BR</default-locale> </locale-config> <message-bundle id="msg">SystemMessages</message-bundle> </application> ... faces-config.xml

JSF – Managed Beans guess.jsp <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %> <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %> <f:view> <f:loadBundle basename="SystemMessages" var="msg" /> <html> <head> <title><h:outputText value="#{msg['page.guess.title']}" /></title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> </head> <body> <h:form id="guessForm"> <h:outputText value="#{msg['page.guess.label.numero']}: " /> <h:inputText id="palpite" value="#{guessBean.palpite}" /> <br /> <h:commandButton action="#{guessBean.guess}" value="#{msg['page.guess.label.botao']}" /> </h:form> </body> </html> </f:view>

JSF – Managed Beans

JSF – Standard Tags Disponibilizadas pelo JSF Componentes Base para desenvolvimento Duas bibliotecas: html e core (43 tags no total) São taglibs (importadas através da diretiva taglib) <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %> <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>

Biblioteca core JSF – Standard Tags Serve como suporte para html (e outras) Toda página de ter um <f:view> Raiz da árvore de componentes Tag <f:loadBundle> usada para carregar arquivo .properties A maioria das tags representam objetos a serem adicionados a componentes Atributos, Listeners, Converters, Validators, Facets, Parametros, Select Items

Biblioteca html - IDs e Bindings JSF – Standard Tags Biblioteca html - IDs e Bindings Bindings “Liga” o componente a um propriedade do backing bean <h:inputText id="nomeUsuario" binding="#{usuarioBean.nomeUsuarioInput}" /> private UIInput nomeUsuarioInput; public UIInput getNomeUsuarioInput() { return nomeUsuarioInput; } public void setNomeUsuarioInput(UIInput nomeUsuarioInput) { this.nomeUsuarioInput = nomeUsuarioInput; }

JSF – Conversão e Validação Conversão e Validação – Converters Em aplicações web os dados enviados do cliente são sempre strings Java é uma linguagem tipada Precisamos converter os dados enviados JSF provê Conversores para todos os tipos básicos do Java (Date, Integer, Double, Long) Convertem o valor dos componentes de e para string Aplicam formatação ou internacionlização Podemos definir novos conversores e associar aos componentes

JSF – Conversão e Validação Conversão e Validação – Validators Tarefa que praticamente toda aplicação web precisa Verifica se todos os campos obrigatórios foram preenchido corretamente Mostrar página novamente se ocorrer algum problema Para campos obrigatórios o JSF provê o atributo required Provê também validação básicas (domínio e tamanho) <f:validateDoubleRange maximum="1" minimum="2"/> <f:validateLongRange maximum="1" minimum="2"/> <f:validateLength maximum="3" minimum="3"/> Podemos definir nosso próprio Validator Por default não suporta validação do lado do cliente :-(

JSF – Eventos e Listeners Usa o modelo de eventos JavaBean (semelhante ao Swing) Componentes criam eventos que são “consumidos” por Listeners Listeners podem ser métodos de um backing bean ou uma classe uma classe separada Quando o cliente ativa um componente (apertar um botão), um evento é disparado

JSF – Eventos e Listeners Duas variedades de eventos UI Eventos que disparam processamento back-end Eventos que afetam apenas a forma da interface Código para tratar esses eventos: action controllers e event listeners Action Controllers (Action) lida com o envio completo do form Disparados após preenchimento das propriedades do bean Disparados após lógicas de validação Retorna Strings que afetam a navegação

JSF – Eventos e Listeners Eventos e Listeners (cont.) Event Listeners lidam com eventos da UI Geralmente são disparados antes do preenchimento das propriedades do bean Geralmente pula a fase de validação Não afeta a navegação (continua na página atual)

VAMOS PRATICAR!