SlideShare uma empresa Scribd logo
1 de 107
Introdução
Desenvolvimento Web
• Aplicações web tornam-se mais e mais importantes
• Mais e mais complexas:
– Ajax, validação (server vs. client), efeitos...
– Exigência mais elevada do cliente durante os anos
– Interfaces ricas (fáceis de usar)
– Prazos cada vez mais curtos
– Desenvolvimento considerado difícil
Introdução
Surgiram diversos frameworks MVC:
• Apache Struts
• WebWork (Struts2)
• Spring MVC
• Tapestry
• Jboss Seam
E muito outros.. continuam surgindo mais
Introdução
Problemas
• Java não nos fornece o bastante para
desenvolvermos aplicações web com produtividade
• Dificuldade para integrar vários frameworks (algumas
vezes nem é possível)
• Falta de padrão para um framework web
• Ausência de uma API padrão para construir
componentes web java
Introdução
Um pouco da história
• HTML
• Servlets
• JSP
Introdução
HTML
• Estático, simples
• Não tem conexão com Base De Dados
• Ótimo para criar Home Pages
OlaMundo.html
<html>
<head>
<title>Olá Mundo</title>
</head>
<body>
Olá Mundo.
</body>
</html>
Introdução
Servlets
• É uma extensão de servidores
• Disponibiliza uma interface para o servidor
• Recursos Dinâmicos para web
• Interage com os clientes
• Necessita de um Servlet Container (Ex: Tomcat)
Introdução
Servlets
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class HelloWorldServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.println("<html><body>Olá Mundo</body></html>");
out.close();
}
}
Introdução
Java Server Pages – JSP
• O JSP foi desenvolvido APENAS para mostrar
resultados, o SERVLET deveria fazer a ponte com o
banco de dados e fazer as regras de negócio
• Facilitar a criação de HTML
• Scriplets: colocar código Java no JSP ;-(
Introdução
OlaMundo.jsp
<html>
<body>
<% String mensagem = "Olá Mundo!";
out.println(mensagem); %>
<br>
Muito mais simples de editar o html e muito mais complicado de editar o codigo Java
<br>
</body>
</html>
Introdução
Frameworks
• Frameworks são projetados com a intenção de facilitar o
desenvolvimento de software, habilitando designers e
programadores a gastarem mais tempo determinando as
exigências do software do que com detalhes de baixo
nível do sistema
• Não reinventar a roda
Introdução
Struts Framework: Action Based
• MVC para construções de aplicações WEB
• Cada solicitação HTTP tem que ser respondida com
uma resposta HTTP
• O .do é mapeado no arquivo struts-config.xml
• O ActionServlet define o Action correspondente para
a solicitação
Introdução
Struts Framework: Action Based
• O ActionServlet coloca a entrada em um JavaBean ,
estes JavaBeans são definidos como FormBeans
• O Action pode acessar o FormBean efetuar qualquer
operação e armazenar o resultado em um ResultBean
• O Action interage com a camada de negócio onde uma
base de dados poderá ser atualizada
Introdução
Struts Framework: Action Based
Introdução
Framework: Component Based
• Rápido aprendizado
• Baseado em Componentes
• Deixa o programador despreocupado com a parte visual
• Programação Web como Desktop
• Simplicidade
• Agilidade
Introdução
Frameworks Web Component Based
• Java Server Faces
• JBossSeam
• Wicket
JSF - Introdução
JavaServer Faces é...
• Uma especificação ?
• Um framework baseado em componentes ?
• Interface com o usuário ?
• Um framework dirigido a eventos ?
• Padrão de mercado ?
• RAD ?
• Um framework MVC ?
JSF - Introdução
JavaServer Faces é...
• Uma especificação
JSR 127 (JSF 1.0 e JSF 1.1) – 2004
JSF 1.0 – não alcançou o sucesso esperado
JSF 1.1 – corrigiu os erros da versão anterior
JSR 252 (JSF 1.2) - 2006 (Java EE 5.0)
JSF 1.2 – melhor compatibilidade com JSP 2.1 e correção de
bugs
JSF - Introdução
JavaServer Faces é...
• JSR 314 (JSF 2.0)
• Arquitetura, produtividade, ferramentas RAD, AJAX, melhores
componentes UI..
• Em desenvolvimento, porém estão planejando deixar bem
integrado e intuitivo.
JSF - Introdução
JavaServer Faces é...
... um framework baseado em componentes de
interface com o usuário
• JSF é construído sob o conceito de componentes
• Os componentes são a base para a construção da interface
com o usuário
• Existem componentes padrões equivalentes a quase todas
as tags HTML e diversos componentes auxiliares
JSF - Introdução
JavaServer Faces é...
• Existem diversas bibliotecas de componentes disponíveis
comerciais e open source
• Os componentes são expressos através de tags em um
JSP e posteriormente transformados em HTML
JSF - Introdução
... um framework dirigido a eventos
• Possui um modelo para manipulação de eventos
• Componentes geram determinados eventos
• Faz chamada à um método (ação no servidor)
• O estado da aplicação web muda devido ao evento
disparado pelo usuário
• Um evento pode ser um click em um botão, focar sobre
um input ou mesmo alterar o valor de uma combo-box
JSF - Introdução
... padrão de mercado
• É uma especificação (JCP)
• Java EE 5.0
• Suporte de Big Players
Sun, Apache, IBM, Oracle, BEA Systems, Borland, ...
• IDEs (NetBeans, Eclipse, MyEclipse, JDeveloper, ...)
• Implementações (Sun (R.I), Apache, IBM, ...)
• Conjuntos de componentes (ADF Faces, Apache
MyFaces, WoodStock, IceFaces, JBoss RichFaces, ...)
JSF - Introdução
.. RAD (Rapid Application Development)
• 4 camadas:
– Arquitetura de componentes básica
– Conjunto de componentes padrão
– Infra-estrutura da aplicação
– Ferramenta RAD
JSF - Introdução
.. RAD (Rapid Application Development)
• JSF padroniza os primeiros três pontos e permite a
criação de ferramentas RAD
• Utiliza-se IDEs drag-and-drop para construir aplicações
• Sun Studio Creator, NetBeans, Jdeveloper,Eclipse etc
JSF - Introdução
... um framework MVC para construir interfaces com o
usuário para aplicações web. JSF inclui:
Um conjunto de APIs para:
• representar os componentes UI e gerenciar o estado
destes componentes
• manipular os eventos e validação de entrada do usuário
• definir e controlar a navegação entre as páginas
• dar suporte a internacionalização e acessibilidade
JSF - Introdução
Resumo
• É mais do que um framework, é uma especificação
baseada em MVC
• Suporte à internacionalização
• Facilita criação de telas
• Facilita a transferência dos dados entre telas e camadas
de negócio através da EL
• Facilidade para criação de componentes
JSF - Introdução
Resumo
• Produtividade para conversores recebidos do formulário
para os tipos nas classes
• Flexibilidade para renderização
• Criar modelos simples de eventos entre interfaces
gráficas e as classes no servidor
• Mecanismos produtivos para validação de campos na
tela
JSF - Introdução
Por que usar JSF?
• É um padrão de mercado
• Presente na especificação JEE5.0 e em breve JEE6.0
• Suporte de Big Players
• Fácil de usar e produtivo
• Fornece separação de funções que envolvem a
construção de aplicações Web
JSF
Por que usar JSF?
• Alta abstração para desenvolvimento de aplicação web
• Modelo de programação dirigido a eventos (oposto ao
modelo HTTP request/response)
• Baixa curva de aprendizagem da equipe
• Vários pontos de extensão (converters, validators,
listeners etc)
• Componentes já prontos!
JSF
Por que usar JSF?
• Reusabilidade e estrutura de componentes extensível
• Acessibilidade (browsers, celulares, pda’s, ...)
• Segurança OWASP (Open Web Application Security
Project) cross-site scripting, session hijacking, execução
de métodos, ...
• Natureza orientada a componentes, validação e pontos
de extensão
JSF
Por que usar JSF?
• Grande atividade da comunidade em fóruns, listas de
discussão, blogs, portais, revistas, livros etc
• Integração com diversos frameworks:
Spring, Spring-Annotation, Spring-Webflow, Hibernate,
EJB3, JPA,
• JBoss Seam, Acegi, JAAS, Struts, Struts2, Shale, Tiles,
Facelets, Sitemesh, DWR, EXT, Crank, Beehive-
Webflow, GWT, Portlets e muitos outros
JSF
Por que usar JSF?
• Testes unitários
• Shale testing framework
• Templates
• Tiles e Sitemesh
• Facelets
JSF
Por que usar JSF?
• IDEs e WYSIWYG (What you see is what you get)
• Eclipse (MyEclipse, Europa, Ganymed), IntelliJ IDEA,
Jbuilder, NetBeans (Visual WebPack) , IBM Rational
App/Web Sun Java Studio Creator , Oracle Jdeveloper,
Red Hat Developer Studio (antigo Exadel Studio) e
JSFToolbox (Dreamweaver)
JSF
Por que usar JSF?
Grande variedade de componentes comerciais e open-
source disponíveis
• Myfaces Tomahawk Backbase
• Myfaces Sandbox Simplica (ECruiser Suite)
• Myfaces Tobago QuipuKit
• Myfaces Trinidad Blueprints
JSF
Por que usar JSF?
• Myfaces Orchestra RCFaces
• ADF Faces Jenia4Faces
• IceFaces ZK
• WoodStock G4JSF (GWT API)
• JBoss RichFaces Dynamic Faces
• JBoss Ajax4jsf Crank
JSF
Conceitos chaves do JSF
• Componentes
• Renderers
• Managed-beans
• Converters / Validators
• Navegação
• Eventos
• Ciclo de vida (Request Lifecycle)
JSF
Componentes
• Separa a lógica de negócio da apresentação
• Cada view é composta por uma hierarquia de
componentes
• Componentes podem ser adicionados na view
programaticamente ou via template (JSP por default, ou
Facelets para melhor desempenho e fácil
desenvolvimento)
JSF
• Componentes são expressos em tags em uma página
JSP e em sua maioria são de interface com o usuário
• Os componentes padrões são divididos em dois grupos:
– Faces Core <f:view>, <f:loadBundle>, <f:param>
HTML wrappers <h:dataTable>, <h:selectOneMenu>
– Componente = class + [renderer] + tag handler
(JSP)
JSF
Renderers
• Responsável por exibir o componente no cliente
• São agrupados em render kits
• Render kit padrão é o HTML, mas podemos ter WML,
SVG etc.
• Efetua o encode (gera HTML do componente)
• Efetua o decode (seta o componente com os dados da
URL query string e do formulário)
JSF
Exemplo:
<h:inputText id=“login” size=“16” />
<input type=“text” id=“myForm:login”
name=“myForm:login” size=“16” />
JSF
Renderes:
JSF
Managed beans
• POJO – Plain Old Java Objects
JSF
Managed beans
• Podem ser definidos nos escopos de:
Application, Session, Request e None
• É uma classe que envia objetos de negócio para
camada de apresentação
• São registrados no faces-config.xml
JSF
Managed beans
• Objetos que sofrerão alterações em seus atributos
durante uma requisição, assim como seus métodos
podem ser chamados a partir de um command
• São como as Actions do Struts, porém os form beans
são injetados por setters dentro do seu próprio bean
• Os ManagedBeans serão usados na EL das páginas
JSF
Managed beans
JSF
Obtendo o Managed beans nos escopos:
Request:
User user = (User)FacesContext.getCurrentInstance().getExternalContext().getRequestMap().get("user");
Session
User user = (User)FacesContext.getCurrentInstance().getExternalContext().getSessionMap().get("user");
Inserindo o Managed beans nos escopos:
Request:
FacesContext.getCurrentInstance().getExternalContext().getRequestMap().put("user", (User)users.getRowData());
Session
FacesContext.getCurrentInstance().getExternalContext().getSessionMap().put("user", (User)users.getRowData());
JSF
JSF Value Binding
• “Binda” valor do componente ao managed-bean
• O binding ocorre através de JSF Expression Language (EL)
• Semelhante a JSTL, porém usa-se ‘#{}’ no lugar de ‘${}’
• Pode-se executar métodos no modelo através de expressões
• Não é processada imediatamente como na JSTL
• A partir da JSF 1.2 utiliza-se a Unified Expression Language (JSP
2.1) que resolve problemas de incompatibilidade entre a JSF-EL e
JSP-EL
<h:outputText value="#{pessoa.nome}"/>
JSF
JSF Value Binding
JSF
Converters
• Tem por finalidade converter e/ou formatar
objetos do tipo Java para String e vice-versa
• Converters são bi-direcionais
• Managed-bean faz: getAsObject()
• JSP faz: getAsString()
JSF
Converters
• JSF já fornece converters padrões para date / time,
numbers etc
• Você pode implementar seu próprio converter:
– Basta implementar a interface javax.faces.convert.Converter
– Registrar o converter no faces-config.xml
• O converter pode atuar de forma explícita(id) ou
implícita(class) de acordo com a sua configuração no
faces-config.xml
JSF
Converters
• javax.faces.convert.Converter
• Converter é registrado dentro faces-config.xml
JSF
Converter para que toda propriedade do tipo org.com.model.CPF de
qualquer bean use este converter
<converter>
<converter-for-class>
org.com.model.CPF
</converter-for-class>
<converter-class>
org.com.faces.CPFConverter
</converter-class>
</converter>
JSF
Converter declarado explicitamente:
<h:inputText id=“cpf“ value="#{UserRegistration.user.cpf}">
<f:converter converterId=“br.com.CPFConverter“ />
</h:inputText>
Ou implicitamente (converter mapeado para objetos do tipo CPF)
<h:inputText id=“cpf“ value="#{UserRegistration.user.cpf}">
NADA AQUI ;-)
</h:inputText>
JSF
Converter Padrões do JSF:
<h:inputText id="age" value="#{UserRegistration.user.age}">
<f:converter id="javax.faces.Short"/>
</h:inputText>
JSF
Validatores
• Tem por responsabilidade garantir que o valor
informado pelo usuário seja válido
• Validador trabalha com objetos, não somente com
Strings
• JSF já fornece validadores padrões como required,
length, range etc
JSF
Você pode implementar seu próprio validador
• Basta implementar a interface
javax.faces.validator.Validator
• Registrar o validador no faces-config.xml
• Você pode associar um ou mais validadores a um
componente
JSF
javax.faces.validator.Validator
Validadores são registrados no faces-config.xml
<validator>
<validator-id>br.com.validaCPF</validator-id>
<validator-class>faces.validaCPF </validator-class>
</validator>
JSF
Validação de obrigatoriedade e comprimento do campo:
<h:inputText id=“firstName“ value="#{user.firstName}“ required=“true”>
<f:validateLength minimum="2“ maximum="25“ />
</h:inputText>
JSF
Navegação
• Navegação de uma página para outra
• Simples e poderoso sistema de navegação
• O framework seleciona a próxima view baseado:
– Na view anterior
– Resultado(outcome) de uma action
– EL de ação (ex.: #{mBean.user.save})
– Qualquer combinação acima
• Permite wildcard (‘*’) para páginas de origem (from-view-id)
JSF
Navegação
JSF
Navegação
JSF
Eventos
• Componentes geram determinados eventos
que por sua vez disparam ações no servidor (método(s)
no managed-bean ou listeners)
• Você também pode implementar listeners de ação
associados a outros componentes do formulário
• Os listeners mais comuns do JSF são
– ActionListener
– ValueChangeListener
JSF
Action event para navegação :
<h:commandButton action=“listar” value=“Listar” />
Action event que executa método no managed-bean
<h:commandLink action=“#{cadastroBean.cadastrar}” value=“Cadastrar” />
Método no managed-bean
public String cadastrar() {
// processa evento
return “listar”; // retorna para view “listar”
}
JSF
Value-change event que executa método após alterar o
valor do componente
<h:selectOneMenu id=“UF” value=“#{cadastroBean.uf}”
valueChangeListener=“#{cadastroBean.carregaCidades}” onchange=“submit();”>
<f:selectItems value=“#{cadastroBean.ufList}” />
</h:selectOneMenu>
JSF
Método no managed-bean
public void carregaCidades(ValueChangeEvent event) {
// processa evento
String uf = event.getNewValue(); // obtém novo valor
this.cidadesList = Servico.carregaCidades(uf);
// processa evento
}
JSF
JSF Request Lifecycle
JSF (Fases)
• São Atendidas pelo Reader Response e Restore
Component Tree
• Restore Component Tree: O conjunto de componentes JSF é criado
ou restaurado dependento da requisição (Primeira ou demais vezes
executadas)
JSF (Fases)
• Apply request Values: Os componentes irão extrair seu
novo valor dos parâmetros da Request, colocando-os
em variáveis de estado no servidor
JSF (Fases)
• Process Validations: todos os validadores serão executados, em caso de
erro de qualquer valor, a mensagem é alocada no FacesContext, caso
contrário ele atualiza (Update Model Values) os valores dos inputs na
camada de negócio através da EL
JSF (Fases)
• Invoke Application: Os métodos do ManagedBeans são executados e as
regras de navegação (Gravar, Excluir, Alterar,...) são resolvidas.
Se tudo ocorrer bem é renderizada pelo container do JSP, caso contrário
as mensagens gravadas no FacesContext são apresentadas
JSF (Fases)
• Caso queira pular as fazer de validação e conversão, basta utilizar o
parametro immediate=true
<h:commandButton action=“proximo" value=“Proximo" immediate="true"/>
JSF
JSF Extension Points
• Customizar componentes
• Phase listeners (antes, depois de qualquer fase)
• Customizar converters / validators
• Customizar renderers
• Customizar ActionListenerImpl para manipular
eventos
• Decorar ou substituir view handler, navigation
handler, state manager etc
JSF
faces-config.xml
• Arquivo XML para configurar recursos da aplicação
• Contém regras de navegação, customização e extensão de
converters, validators, componentes etc
• Geralmente está localizado dentro de /WEB-INF/faces-config.xml
• Pode ser dividido em diretórios e sub-diretórios ou dentro de
arquivos jar
• Seta javax.faces.application.CONFIG_FILES no web.xml
• Ou então coloca-se META-INF/faces-config.xml dentro de um jar
JSF
faces-config.xml (Resumo)
<faces-config ... >
<converter>
<converter-id>core.faces.CnpfCnpjConverter</converter-id>
<converter-class>converter.CnpfCnpjConverter</converter-class>
</converter>
JSF
faces-config.xml (Resumo)
<managed-bean>
<managed-bean-name>reportBean</managed-bean-name>
<managed-bean-class>bean.ReportBean</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
JSF
faces-config.xml (Resumo)
<navigation-rule>
<from-view-id>/jsp/deposito/tiporeq/searchList.jsp</from-view-id>
<navigation-case>
<from-outcome>deposito.tiporeq.update</from-outcome>
<to-view-id>/jsp/deposito/tiporeq/update.jsp</to-view-id>
</navigation-case>
</navigation-rule>
Componentes JSF (Form)
<h:form id="jsftags">
...
</h:form>
<form id="jsftags" method="post"
action="/jsftags/faces/pages/tags.jsp"
enctype="application/x-www-form-urlencoded">
...
<input type="hidden" name="jsftags"
value="jsftags" />
<input type="hidden" name="jsftags:link" />
</form>
Componentes JSF (commandButton)
<h:commandButton id="submit"
value="#{msg.buttonHeader}"
action="nextPage">
</h:commandButton>
<input
id="_id0:submit"
type="submit"
name="_id0:submit"
value="Next Step"/>
Componentes JSF (commandLink)
<h:commandLink id="link" action="goto">
<h:outputText value="#{msg.linkName}"/>
</h:commandLink>
<a id="_id0:link“ href="#" onclick= "document.forms['_id0']['_id0:link'].value= '_id0:link';
document.forms['_id0'].submit(); return false;“
>Next Page</a>
Componentes JSF (graphicImage)
<h:graphicImage id="image"
alt="jsf-sun“ url="/images/jsf-sun.gif">
</h:graphicImage>
<img id="jsftags:image"
src="/jsf-example/images/jsf-sun.gif"
alt="jsf-sun" />
Componentes JSF (inputText)
<h:inputText id="address"
value="#{jsfexample.address}" />
<input type="text" name="jsftags:_id1"
value="123 JSF Ave" />
Componentes JSF (inputText / inputSecret)
<h:inputText id="address” value="#{jsfexample.address}" />
<input type="text" name="jsftags:_id1” value="123 JSF Ave" />
<h:inputSecret redisplay="false“ value="#{jsfexample.password}" />
<input id="jsftags:password“ type="password“ name="jsftags:password“ value="secret" />
Componentes JSF (inputHidden /inputTextarea)
<h:inputHidden id="hidden“ value="userPreference" />
<input id="jsftags:hidden” type="hidden“ name="jsftags:hidden"
value="userPreference" />
<h:inputTextarea id="textArea“ rows="4" cols="7“ value="Text goes here.."/>
<textarea id="jsftags:textArea“ name="jsftags:textArea“ cols="5" rows="3">
Text goes here..
</textarea>
Componentes JSF (outputText / outputLabel)
<h:outputText value="#{jsfexample.zipCode}"/>
123
<h:outputLabel for="address“>
<h:outputText id="addressLabel“ value="User Home Address"/>
</h:outputLabel>
<span id="jsftags:addressLabel">
User Home Address</span>
Componentes JSF (outputLink)
<h:outputLink value="#{msg['jsfstudio.home.url']">
<f:verbatim>JSF Studio</f:verbatim>
</h:outputLink>
<a href="http://www.jsf-studio.com">
JSF Studio
</a>
Componentes JSF (message)
<h:message style="color: red“ for="useraddress" />
<h:inputText id="useraddress“ value="#{jsfexample.address}“ required="true"/>
<h:commandButton action="save" value="Save"/>
<span style="color: red"> Validation Error: Value is required. </span>
<input id="jsftags:useraddress" type="text" name="jsftags:useraddress" value="" />
<input type="submit" name="jsftags:_id1" value="Save" />
Escrevendo uma mensagem:
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Usuário já
Cadastrado!"));
Componentes JSF (selectBooleanCheckbox)
<h:selectBooleanCheckbox title="emailUpdates“ value="#{jsfexample.wantsEmailUpdates}" >
</h:selectBooleanCheckbox>
<h:outputText value="Would you like email updates?"/>
<input type="checkbox“ name="jsftags:_id6" checked title="emailUpdates" />
Would you like email updates?
Componentes JSF (selectManyCheckbox)
<h:selectManyCheckbox id="cars” value="#{carsBean.car}">
<f:selectItems value="#{carBean.carList}"/>
</h:selectManyCheckbox>
span id="jsftags:cars">
<table><tr>
<td><label for="jsftags:cars"> <input name="jsftags:cars“ value="accord" type="checkbox">
Honda Accord</input></label></td>
<td><label for="jsftags:cars“><input name="jsftags:cars“ value="4runner" type="checkbox">
Toyota 4Runner</input> </label></td>
<td><label for="jsftags:cars“><input name="jsftags:cars“ value="nissan-z" type="checkbox">
Nissan Z350</input<</label></td>
</tr></table>
</span>
Componentes JSF (selectManyListbox)
<h:selectManyListbox id="cars_selectManyListbox“ value="#{carBean.car}">
<f:selectItems value="#{carBean.carList}"/>
</h:selectManyListbox>
<select id="jsftags:cars_selectManyListbox” name="jsftags:cars_selectManyListbox”
multiple size="3">
<option value="accord">Honda Accord</option>
<option value="4runner">Toyota 4Runner</option>
<option value="nissan-z">Nissan Z350</option>
</select>
Componentes JSF (selectOneMenu)
<h:selectOneMenu id="selectCar“ value="#{carBean.currentCar}">
<f:selectItems value="#{carBean.carList}" />
</h:selectOneMenu>
Honda Accord Toyota 4Runner Nissan Z350
<select id="jsftags:selectCar“ name="jsftags:selectCar" size="1">
<option value="accord">Honda Accord</option>
<option value="4runner">Toyota 4Runner</option>
<option value="nissan-z">Nissan Z350</option>
</select>
Componentes JSF (dataTable)
<h:dataTable id="books" value="#{BookStore.items}" var="store">
<h:column>
<f:facet name="header“><h:outputText value="#{msg.storeNameLabel}"/></f:facet>
<h:outputText value="#{store.name}"/>
</h:column>
<h:column>
<f:facet name="header“>Subject</f:facet>
<h:outputText value="#{store.subject}"/>
</h:column>
<h:column>
<f:facet name="header“><h:outputText value="#{msg.storePriceLabel}"/></f:facet>
<h:outputText value="#{store.price}"/>
</h:column>
</h:dataTable>
Componentes JSF (dataTable)
<table id="jsftags:books” class="list-background“> <thead>
<tr><th class="list-header” scope="col">Title</th> <th class="list-header” scope="col">Subject</th>
<th class="list-header” scope="col">Price ($)</th>
</tr>
</thead>
<tbody>
<tr class="list-row">
<td class="list-column-center“> JSF For Dummies</td>
<td class="list-column-right“> JSF</td><td class="list-column-center“> 25.0</td>
</tr>
<tr class="list-row">
<td class="list-column-center“> Struts For Dummies</td>
<td class="list-column-right“>Struts</td>
<td class="list-column-center“> 22.95</td>
</tr>
</tbody>
</table>
Componentes JSF
Atributos importantes:
required, immediate, readonly, rendered .....
<h:inputText value="#{numberBean.userNumber}" required="true" validatorMessage="O
número tem que ser entre 0 e 100" readonly=“false" rendered=“true” >
<h:commandButton value="Desistir" action="desistir" immediate="true"/>
Exercício 1
Criar um cadastro de Pessoa.
• Criar um bean que represente o formulário (Nome, Endereço, Telefone )
• Usar f:view e h:form para os formulários
• Especificar o Action Controller com o atributo de ação h:commandButton
• Criar uma Action para inserir os dados do formulário, chame a lógica de negócio,
guarde os resultados em uma lista e imprima os valores no console
• Usar o faces-config para declarar o form bean e navegação
• Após inserir, imprimir no console quem foi inserido e enviar para uma página de
sucesso com um botão voltar
Exercício 1 (Continuação)
Validação:
• Utilizar o h:messages e h:message
<h:messages style="color: red"/>
• Inserir algumas validações nos campos:
<h:inputText value="#{user.name}" required="true" requiredMessage="Campo Obrigatorio"
validatorMessage="Tamanho inválido">
<f:validateLength maximum="30" minimum="3"/>
</h:inputText><br/>
• Enviar uma mensagem de sucesso após cadastrar o usuário
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Usuário já Cadastrado!"));
Componentes JSF (dataTable)
DataModel
• Para enviar os dados para view em fomato de tabela,
basta criar um objeto DataModel
• Para inserir os objetos no DataModel:
dataModel.setWrappedData(Lista)
• Para obter os objetos da tabela :
dataModel.getWrappedData() ou getRowData()
Exercício 2
Usando DataModel
• Inserir uma tabela no cadastro do exercício 1
• Criar um link para apagar o registro da tabela
Exercício 3
Criar um evento de mudança em um combo.
• Criar um combo na tela de tipo de endereço
• Inserir os tipos (Rua, Quadra, Lote ....)
• Criar um método para capturar essa mudança e imprimir
no console o valor antigo e o novo
Exercício 4 (Opcional)
Navegação:
• Sortear um número usando o Math.random()*100
• Pedir para o usuário entrar com o número
• Se estiver certo, enviar para página de sucesso com
opção de sair ou jogar novamente, se estiver errado
avisar que está errado e informar se é maior ou menor,
o usuário pode desistir, enviando para uma tela
confirmação.
Exercício 4 (Opcional)
Navegação:
Exercício 5 (Opcional)
Criar validadores:
• Validador de Nome, que só aceite seu nome.
• Validador de email
• Validador que não aceite data no passado.
Exercício 5 (Opcional)
Criar validadores:
public class ValidatorNome implements Validator {
@Override
public void validate(FacesContext arg0, UIComponent arg1, Object arg2)
throws ValidatorException {
String nome = (String)arg2;
if (nome != null && nome.equalsIgnoreCase("gabriel")) {
throw new ValidatorException(new
FacesMessage(arg1.getClientId(arg0),"Nome Inválido"));
}
}
}
Exercício 6 (Opcional)
Criar conveter:
• Criar um objeto UF (código e nome)
• Utilizá-lo em um combo
• Criar um converter para UF
Exercício 6 (Opcional)
Converter:
public class UFConverter implements Converter {
@Override
public Object getAsObject(FacesContext arg0, UIComponent arg1, String value) {
if(StringUtils.isEmpty(value)){
return null;
}
UF uf = new UF();
if (value.equals("DF")) {
uf.setCodigo(1);
uf.setNome("DF");
} else if (value.equals("SP")) {
uf.setCodigo(3);
uf.setNome("SP");
} else if (value.equals("GO")) {
uf.setCodigo(3);
uf.setNome("GO");
}
return uf;
}
@Override
public String getAsString(FacesContext arg0, UIComponent arg1, Object value) {
return value.toString();
}
<h:selectOneMenu value="#{user.uf}"
valueChangeListener="#{userAction.mudarUF}" onblur="submit()"
converter="ufConverter">
<f:selectItems value="#{userAction.listaUF}" />
</h:selectOneMenu>
public List<SelectItem> getListaUF() {
List<SelectItem> items = new ArrayList<SelectItem>();
items.add(new SelectItem(new UF(1 , "DF")));
items.add(new SelectItem(new UF(2 , "SP")));
items.add(new SelectItem(new UF(3 , "GO")));
return items;
}
JSF 2.0
O que vem aí com JSF 2.0
• Suporte a templates, baseado no Facelets, Tiles, dentre outros
• Simplificar a criação de aplicações do tipo CRUD
• Melhor tratamento de mensagens de erro
• Mecanismo de tratamento de exceções padrão
• Criação de aplicações Web sem XML, utilizando anotações
• Simplificação no desenvolvimento de componentes
• Especificar onde os artefatos (Conversores, Renderizadores, etc.) devem ser
colocados no WAR, permitindo ao container encontrá-los sem a necessidade
de sua definição em arquivos de configuração
• Permitir que artefatos sejam alterados sem a necessidade de reinicializar o
servidor
Prof. Doutorando Miguel VilaçaProf. Doutorando Miguel Vilaça
MUITO OBRIGADO!

Mais conteúdo relacionado

Mais procurados

Apresentação jsf 2.0
Apresentação jsf 2.0Apresentação jsf 2.0
Apresentação jsf 2.0
Paulo Neto
 
Desenvolvimento Web com CakePHP
Desenvolvimento Web com CakePHPDesenvolvimento Web com CakePHP
Desenvolvimento Web com CakePHP
Sérgio Vilar
 
Desenvolvimento RIA com Silverlight 4
Desenvolvimento RIA com Silverlight 4Desenvolvimento RIA com Silverlight 4
Desenvolvimento RIA com Silverlight 4
Rodrigo Kono
 
Dominando Jsf E Facelets Utilizando Spring 2.5, Hibernate E Jpa
Dominando Jsf E Facelets Utilizando Spring 2.5, Hibernate E JpaDominando Jsf E Facelets Utilizando Spring 2.5, Hibernate E Jpa
Dominando Jsf E Facelets Utilizando Spring 2.5, Hibernate E Jpa
Ana Albert
 

Mais procurados (20)

Apresentação jsf 2.0
Apresentação jsf 2.0Apresentação jsf 2.0
Apresentação jsf 2.0
 
TDC 2014 - Arquitetura front-end com AngularJS
TDC 2014 - Arquitetura front-end com AngularJSTDC 2014 - Arquitetura front-end com AngularJS
TDC 2014 - Arquitetura front-end com AngularJS
 
JavaServer Faces Produtividade em Desenvolvimento
JavaServer Faces Produtividade em DesenvolvimentoJavaServer Faces Produtividade em Desenvolvimento
JavaServer Faces Produtividade em Desenvolvimento
 
JSF com Primefaces
JSF com PrimefacesJSF com Primefaces
JSF com Primefaces
 
JSF - JavaServer Faces
JSF - JavaServer FacesJSF - JavaServer Faces
JSF - JavaServer Faces
 
Navegando em um mar de siglas do mundo java
Navegando em um mar de siglas do mundo javaNavegando em um mar de siglas do mundo java
Navegando em um mar de siglas do mundo java
 
Aula 1 apresentação
Aula 1   apresentaçãoAula 1   apresentação
Aula 1 apresentação
 
Desenvolvimento Web com CakePHP
Desenvolvimento Web com CakePHPDesenvolvimento Web com CakePHP
Desenvolvimento Web com CakePHP
 
Desenvolvimento RIA com Silverlight 4
Desenvolvimento RIA com Silverlight 4Desenvolvimento RIA com Silverlight 4
Desenvolvimento RIA com Silverlight 4
 
Netbeans slides
Netbeans slidesNetbeans slides
Netbeans slides
 
Campus Party 2014 - Desenvolvimento Web com ASP.NET
Campus Party 2014 - Desenvolvimento Web com ASP.NETCampus Party 2014 - Desenvolvimento Web com ASP.NET
Campus Party 2014 - Desenvolvimento Web com ASP.NET
 
Arquitetura MVC, JavaBeans e DAO
Arquitetura MVC, JavaBeans e DAOArquitetura MVC, JavaBeans e DAO
Arquitetura MVC, JavaBeans e DAO
 
Front end architecture
Front end architectureFront end architecture
Front end architecture
 
Palestra Ruby on Rails SETA 2008/01
Palestra Ruby on Rails SETA 2008/01Palestra Ruby on Rails SETA 2008/01
Palestra Ruby on Rails SETA 2008/01
 
MC31 - Desenvolvimento um Aplicativo completo usando JSF, EJB e padrões
MC31 - Desenvolvimento um Aplicativo completo usando JSF, EJB e padrõesMC31 - Desenvolvimento um Aplicativo completo usando JSF, EJB e padrões
MC31 - Desenvolvimento um Aplicativo completo usando JSF, EJB e padrões
 
Dominando Jsf E Facelets Utilizando Spring 2.5, Hibernate E Jpa
Dominando Jsf E Facelets Utilizando Spring 2.5, Hibernate E JpaDominando Jsf E Facelets Utilizando Spring 2.5, Hibernate E Jpa
Dominando Jsf E Facelets Utilizando Spring 2.5, Hibernate E Jpa
 
Introdução ao AngularJS!
Introdução ao AngularJS!Introdução ao AngularJS!
Introdução ao AngularJS!
 
Java web
Java webJava web
Java web
 
Apresentação jsf 1_2
Apresentação jsf 1_2Apresentação jsf 1_2
Apresentação jsf 1_2
 
ASP .NET MVC na Prática - C. Augusto Proiete
ASP .NET MVC na Prática - C. Augusto ProieteASP .NET MVC na Prática - C. Augusto Proiete
ASP .NET MVC na Prática - C. Augusto Proiete
 

Semelhante a Curso jsf

Desenvolvimento rápido de aplicações com JEE e JavaFX
Desenvolvimento rápido de aplicações com JEE e JavaFXDesenvolvimento rápido de aplicações com JEE e JavaFX
Desenvolvimento rápido de aplicações com JEE e JavaFX
jesuinoPower
 
Técnicas de Programação para a Web
Técnicas de Programação para a WebTécnicas de Programação para a Web
Técnicas de Programação para a Web
Luiz Cláudio Silva
 
Plataforma Android: Produtividade Além do SDK
Plataforma Android: Produtividade Além do SDKPlataforma Android: Produtividade Além do SDK
Plataforma Android: Produtividade Além do SDK
Ryan Padilha
 

Semelhante a Curso jsf (20)

Anatomia do JSF – JavaServer Faces
Anatomia do JSF – JavaServer FacesAnatomia do JSF – JavaServer Faces
Anatomia do JSF – JavaServer Faces
 
MC - Java Enterprise Edition 6 (Java EE)
MC - Java Enterprise Edition 6 (Java EE)MC - Java Enterprise Edition 6 (Java EE)
MC - Java Enterprise Edition 6 (Java EE)
 
Desenvolviemento web com ASP.Net e MVC
Desenvolviemento web com ASP.Net e MVCDesenvolviemento web com ASP.Net e MVC
Desenvolviemento web com ASP.Net e MVC
 
Desenvolvimento Web com JSF
Desenvolvimento Web com JSFDesenvolvimento Web com JSF
Desenvolvimento Web com JSF
 
GUJavaSC - Mini-curso Java EE
GUJavaSC - Mini-curso Java EEGUJavaSC - Mini-curso Java EE
GUJavaSC - Mini-curso Java EE
 
Spring: Overview do framework mais popular para desenvolvimento em Java
Spring: Overview do framework mais popular para desenvolvimento em JavaSpring: Overview do framework mais popular para desenvolvimento em Java
Spring: Overview do framework mais popular para desenvolvimento em Java
 
Desenvolvimento baseado em componentes com JSF
Desenvolvimento baseado em componentes com JSFDesenvolvimento baseado em componentes com JSF
Desenvolvimento baseado em componentes com JSF
 
UtilizandoJSF_no_Desenvolvimento_de_aplicacoes_web_by_Thales_Batista_de_Melo
UtilizandoJSF_no_Desenvolvimento_de_aplicacoes_web_by_Thales_Batista_de_MeloUtilizandoJSF_no_Desenvolvimento_de_aplicacoes_web_by_Thales_Batista_de_Melo
UtilizandoJSF_no_Desenvolvimento_de_aplicacoes_web_by_Thales_Batista_de_Melo
 
Serra StarTec 2013 - Java EE
Serra StarTec 2013 - Java EESerra StarTec 2013 - Java EE
Serra StarTec 2013 - Java EE
 
Jheat
JheatJheat
Jheat
 
Apache Wicket derruba o padrão JSF
Apache Wicket derruba o padrão JSFApache Wicket derruba o padrão JSF
Apache Wicket derruba o padrão JSF
 
Java web
Java webJava web
Java web
 
Tutorial Java EE
Tutorial Java EETutorial Java EE
Tutorial Java EE
 
Uso de Critérios de Seleção para Frameworks Livres em Plataforma Java EE
Uso de Critérios de Seleção para Frameworks Livres em Plataforma Java EEUso de Critérios de Seleção para Frameworks Livres em Plataforma Java EE
Uso de Critérios de Seleção para Frameworks Livres em Plataforma Java EE
 
Desenvolvimento rápido de aplicações com JEE e JavaFX
Desenvolvimento rápido de aplicações com JEE e JavaFXDesenvolvimento rápido de aplicações com JEE e JavaFX
Desenvolvimento rápido de aplicações com JEE e JavaFX
 
Modularidade na Web com Java: Desenvolvimento OSGI Web com Eclipse Virgo
Modularidade na Web com Java: Desenvolvimento OSGI Web com Eclipse VirgoModularidade na Web com Java: Desenvolvimento OSGI Web com Eclipse Virgo
Modularidade na Web com Java: Desenvolvimento OSGI Web com Eclipse Virgo
 
Técnicas de Programação para a Web
Técnicas de Programação para a WebTécnicas de Programação para a Web
Técnicas de Programação para a Web
 
Desenvolvimento web com .NET Core - Meetup São Carlos
Desenvolvimento web com .NET Core - Meetup São CarlosDesenvolvimento web com .NET Core - Meetup São Carlos
Desenvolvimento web com .NET Core - Meetup São Carlos
 
Jsf – Java Sever Faces
Jsf – Java Sever FacesJsf – Java Sever Faces
Jsf – Java Sever Faces
 
Plataforma Android: Produtividade Além do SDK
Plataforma Android: Produtividade Além do SDKPlataforma Android: Produtividade Além do SDK
Plataforma Android: Produtividade Além do SDK
 

Mais de Miguel Vilaca (8)

TOGAF Certification
TOGAF Certification TOGAF Certification
TOGAF Certification
 
Scrum trainning
Scrum trainningScrum trainning
Scrum trainning
 
Best2bee Business Model
Best2bee Business ModelBest2bee Business Model
Best2bee Business Model
 
Padrões de projeto
Padrões de projetoPadrões de projeto
Padrões de projeto
 
Curso tomcat
Curso tomcatCurso tomcat
Curso tomcat
 
Simulado java se 7 programmer
Simulado java se 7 programmerSimulado java se 7 programmer
Simulado java se 7 programmer
 
Curso jpa java persistence API
Curso jpa java persistence APICurso jpa java persistence API
Curso jpa java persistence API
 
CronApp Roadshow Chatbot & ROI - Maio 2018
CronApp Roadshow Chatbot & ROI - Maio 2018CronApp Roadshow Chatbot & ROI - Maio 2018
CronApp Roadshow Chatbot & ROI - Maio 2018
 

Último

Último (8)

ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docxATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
 
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdf
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdfAula 01 - Introducao a Processamento de Frutos e Hortalicas.pdf
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdf
 
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docxATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
 
Convergência TO e TI nas Usinas - Setor Sucroenergético
Convergência TO e TI nas Usinas - Setor SucroenergéticoConvergência TO e TI nas Usinas - Setor Sucroenergético
Convergência TO e TI nas Usinas - Setor Sucroenergético
 
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docxATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
 
Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo PagliusiPalestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
 
Entrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo PagliusiEntrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo Pagliusi
 
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINASCOI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
 

Curso jsf

  • 1.
  • 2. Introdução Desenvolvimento Web • Aplicações web tornam-se mais e mais importantes • Mais e mais complexas: – Ajax, validação (server vs. client), efeitos... – Exigência mais elevada do cliente durante os anos – Interfaces ricas (fáceis de usar) – Prazos cada vez mais curtos – Desenvolvimento considerado difícil
  • 3. Introdução Surgiram diversos frameworks MVC: • Apache Struts • WebWork (Struts2) • Spring MVC • Tapestry • Jboss Seam E muito outros.. continuam surgindo mais
  • 4. Introdução Problemas • Java não nos fornece o bastante para desenvolvermos aplicações web com produtividade • Dificuldade para integrar vários frameworks (algumas vezes nem é possível) • Falta de padrão para um framework web • Ausência de uma API padrão para construir componentes web java
  • 5. Introdução Um pouco da história • HTML • Servlets • JSP
  • 6. Introdução HTML • Estático, simples • Não tem conexão com Base De Dados • Ótimo para criar Home Pages OlaMundo.html <html> <head> <title>Olá Mundo</title> </head> <body> Olá Mundo. </body> </html>
  • 7. Introdução Servlets • É uma extensão de servidores • Disponibiliza uma interface para o servidor • Recursos Dinâmicos para web • Interage com os clientes • Necessita de um Servlet Container (Ex: Tomcat)
  • 8. Introdução Servlets import java.io.*; import javax.servlet.*; import javax.servlet.http.*; public class HelloWorldServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html"); PrintWriter out = response.getWriter(); out.println("<html><body>Olá Mundo</body></html>"); out.close(); } }
  • 9. Introdução Java Server Pages – JSP • O JSP foi desenvolvido APENAS para mostrar resultados, o SERVLET deveria fazer a ponte com o banco de dados e fazer as regras de negócio • Facilitar a criação de HTML • Scriplets: colocar código Java no JSP ;-(
  • 10. Introdução OlaMundo.jsp <html> <body> <% String mensagem = "Olá Mundo!"; out.println(mensagem); %> <br> Muito mais simples de editar o html e muito mais complicado de editar o codigo Java <br> </body> </html>
  • 11. Introdução Frameworks • Frameworks são projetados com a intenção de facilitar o desenvolvimento de software, habilitando designers e programadores a gastarem mais tempo determinando as exigências do software do que com detalhes de baixo nível do sistema • Não reinventar a roda
  • 12. Introdução Struts Framework: Action Based • MVC para construções de aplicações WEB • Cada solicitação HTTP tem que ser respondida com uma resposta HTTP • O .do é mapeado no arquivo struts-config.xml • O ActionServlet define o Action correspondente para a solicitação
  • 13. Introdução Struts Framework: Action Based • O ActionServlet coloca a entrada em um JavaBean , estes JavaBeans são definidos como FormBeans • O Action pode acessar o FormBean efetuar qualquer operação e armazenar o resultado em um ResultBean • O Action interage com a camada de negócio onde uma base de dados poderá ser atualizada
  • 15. Introdução Framework: Component Based • Rápido aprendizado • Baseado em Componentes • Deixa o programador despreocupado com a parte visual • Programação Web como Desktop • Simplicidade • Agilidade
  • 16. Introdução Frameworks Web Component Based • Java Server Faces • JBossSeam • Wicket
  • 17. JSF - Introdução JavaServer Faces é... • Uma especificação ? • Um framework baseado em componentes ? • Interface com o usuário ? • Um framework dirigido a eventos ? • Padrão de mercado ? • RAD ? • Um framework MVC ?
  • 18. JSF - Introdução JavaServer Faces é... • Uma especificação JSR 127 (JSF 1.0 e JSF 1.1) – 2004 JSF 1.0 – não alcançou o sucesso esperado JSF 1.1 – corrigiu os erros da versão anterior JSR 252 (JSF 1.2) - 2006 (Java EE 5.0) JSF 1.2 – melhor compatibilidade com JSP 2.1 e correção de bugs
  • 19. JSF - Introdução JavaServer Faces é... • JSR 314 (JSF 2.0) • Arquitetura, produtividade, ferramentas RAD, AJAX, melhores componentes UI.. • Em desenvolvimento, porém estão planejando deixar bem integrado e intuitivo.
  • 20. JSF - Introdução JavaServer Faces é... ... um framework baseado em componentes de interface com o usuário • JSF é construído sob o conceito de componentes • Os componentes são a base para a construção da interface com o usuário • Existem componentes padrões equivalentes a quase todas as tags HTML e diversos componentes auxiliares
  • 21. JSF - Introdução JavaServer Faces é... • Existem diversas bibliotecas de componentes disponíveis comerciais e open source • Os componentes são expressos através de tags em um JSP e posteriormente transformados em HTML
  • 22. JSF - Introdução ... um framework dirigido a eventos • Possui um modelo para manipulação de eventos • Componentes geram determinados eventos • Faz chamada à um método (ação no servidor) • O estado da aplicação web muda devido ao evento disparado pelo usuário • Um evento pode ser um click em um botão, focar sobre um input ou mesmo alterar o valor de uma combo-box
  • 23. JSF - Introdução ... padrão de mercado • É uma especificação (JCP) • Java EE 5.0 • Suporte de Big Players Sun, Apache, IBM, Oracle, BEA Systems, Borland, ... • IDEs (NetBeans, Eclipse, MyEclipse, JDeveloper, ...) • Implementações (Sun (R.I), Apache, IBM, ...) • Conjuntos de componentes (ADF Faces, Apache MyFaces, WoodStock, IceFaces, JBoss RichFaces, ...)
  • 24. JSF - Introdução .. RAD (Rapid Application Development) • 4 camadas: – Arquitetura de componentes básica – Conjunto de componentes padrão – Infra-estrutura da aplicação – Ferramenta RAD
  • 25. JSF - Introdução .. RAD (Rapid Application Development) • JSF padroniza os primeiros três pontos e permite a criação de ferramentas RAD • Utiliza-se IDEs drag-and-drop para construir aplicações • Sun Studio Creator, NetBeans, Jdeveloper,Eclipse etc
  • 26. JSF - Introdução ... um framework MVC para construir interfaces com o usuário para aplicações web. JSF inclui: Um conjunto de APIs para: • representar os componentes UI e gerenciar o estado destes componentes • manipular os eventos e validação de entrada do usuário • definir e controlar a navegação entre as páginas • dar suporte a internacionalização e acessibilidade
  • 27. JSF - Introdução Resumo • É mais do que um framework, é uma especificação baseada em MVC • Suporte à internacionalização • Facilita criação de telas • Facilita a transferência dos dados entre telas e camadas de negócio através da EL • Facilidade para criação de componentes
  • 28. JSF - Introdução Resumo • Produtividade para conversores recebidos do formulário para os tipos nas classes • Flexibilidade para renderização • Criar modelos simples de eventos entre interfaces gráficas e as classes no servidor • Mecanismos produtivos para validação de campos na tela
  • 29. JSF - Introdução Por que usar JSF? • É um padrão de mercado • Presente na especificação JEE5.0 e em breve JEE6.0 • Suporte de Big Players • Fácil de usar e produtivo • Fornece separação de funções que envolvem a construção de aplicações Web
  • 30. JSF Por que usar JSF? • Alta abstração para desenvolvimento de aplicação web • Modelo de programação dirigido a eventos (oposto ao modelo HTTP request/response) • Baixa curva de aprendizagem da equipe • Vários pontos de extensão (converters, validators, listeners etc) • Componentes já prontos!
  • 31. JSF Por que usar JSF? • Reusabilidade e estrutura de componentes extensível • Acessibilidade (browsers, celulares, pda’s, ...) • Segurança OWASP (Open Web Application Security Project) cross-site scripting, session hijacking, execução de métodos, ... • Natureza orientada a componentes, validação e pontos de extensão
  • 32. JSF Por que usar JSF? • Grande atividade da comunidade em fóruns, listas de discussão, blogs, portais, revistas, livros etc • Integração com diversos frameworks: Spring, Spring-Annotation, Spring-Webflow, Hibernate, EJB3, JPA, • JBoss Seam, Acegi, JAAS, Struts, Struts2, Shale, Tiles, Facelets, Sitemesh, DWR, EXT, Crank, Beehive- Webflow, GWT, Portlets e muitos outros
  • 33. JSF Por que usar JSF? • Testes unitários • Shale testing framework • Templates • Tiles e Sitemesh • Facelets
  • 34. JSF Por que usar JSF? • IDEs e WYSIWYG (What you see is what you get) • Eclipse (MyEclipse, Europa, Ganymed), IntelliJ IDEA, Jbuilder, NetBeans (Visual WebPack) , IBM Rational App/Web Sun Java Studio Creator , Oracle Jdeveloper, Red Hat Developer Studio (antigo Exadel Studio) e JSFToolbox (Dreamweaver)
  • 35. JSF Por que usar JSF? Grande variedade de componentes comerciais e open- source disponíveis • Myfaces Tomahawk Backbase • Myfaces Sandbox Simplica (ECruiser Suite) • Myfaces Tobago QuipuKit • Myfaces Trinidad Blueprints
  • 36. JSF Por que usar JSF? • Myfaces Orchestra RCFaces • ADF Faces Jenia4Faces • IceFaces ZK • WoodStock G4JSF (GWT API) • JBoss RichFaces Dynamic Faces • JBoss Ajax4jsf Crank
  • 37. JSF Conceitos chaves do JSF • Componentes • Renderers • Managed-beans • Converters / Validators • Navegação • Eventos • Ciclo de vida (Request Lifecycle)
  • 38. JSF Componentes • Separa a lógica de negócio da apresentação • Cada view é composta por uma hierarquia de componentes • Componentes podem ser adicionados na view programaticamente ou via template (JSP por default, ou Facelets para melhor desempenho e fácil desenvolvimento)
  • 39. JSF • Componentes são expressos em tags em uma página JSP e em sua maioria são de interface com o usuário • Os componentes padrões são divididos em dois grupos: – Faces Core <f:view>, <f:loadBundle>, <f:param> HTML wrappers <h:dataTable>, <h:selectOneMenu> – Componente = class + [renderer] + tag handler (JSP)
  • 40. JSF Renderers • Responsável por exibir o componente no cliente • São agrupados em render kits • Render kit padrão é o HTML, mas podemos ter WML, SVG etc. • Efetua o encode (gera HTML do componente) • Efetua o decode (seta o componente com os dados da URL query string e do formulário)
  • 41. JSF Exemplo: <h:inputText id=“login” size=“16” /> <input type=“text” id=“myForm:login” name=“myForm:login” size=“16” />
  • 43. JSF Managed beans • POJO – Plain Old Java Objects
  • 44. JSF Managed beans • Podem ser definidos nos escopos de: Application, Session, Request e None • É uma classe que envia objetos de negócio para camada de apresentação • São registrados no faces-config.xml
  • 45. JSF Managed beans • Objetos que sofrerão alterações em seus atributos durante uma requisição, assim como seus métodos podem ser chamados a partir de um command • São como as Actions do Struts, porém os form beans são injetados por setters dentro do seu próprio bean • Os ManagedBeans serão usados na EL das páginas
  • 47. JSF Obtendo o Managed beans nos escopos: Request: User user = (User)FacesContext.getCurrentInstance().getExternalContext().getRequestMap().get("user"); Session User user = (User)FacesContext.getCurrentInstance().getExternalContext().getSessionMap().get("user"); Inserindo o Managed beans nos escopos: Request: FacesContext.getCurrentInstance().getExternalContext().getRequestMap().put("user", (User)users.getRowData()); Session FacesContext.getCurrentInstance().getExternalContext().getSessionMap().put("user", (User)users.getRowData());
  • 48. JSF JSF Value Binding • “Binda” valor do componente ao managed-bean • O binding ocorre através de JSF Expression Language (EL) • Semelhante a JSTL, porém usa-se ‘#{}’ no lugar de ‘${}’ • Pode-se executar métodos no modelo através de expressões • Não é processada imediatamente como na JSTL • A partir da JSF 1.2 utiliza-se a Unified Expression Language (JSP 2.1) que resolve problemas de incompatibilidade entre a JSF-EL e JSP-EL <h:outputText value="#{pessoa.nome}"/>
  • 50. JSF Converters • Tem por finalidade converter e/ou formatar objetos do tipo Java para String e vice-versa • Converters são bi-direcionais • Managed-bean faz: getAsObject() • JSP faz: getAsString()
  • 51. JSF Converters • JSF já fornece converters padrões para date / time, numbers etc • Você pode implementar seu próprio converter: – Basta implementar a interface javax.faces.convert.Converter – Registrar o converter no faces-config.xml • O converter pode atuar de forma explícita(id) ou implícita(class) de acordo com a sua configuração no faces-config.xml
  • 52. JSF Converters • javax.faces.convert.Converter • Converter é registrado dentro faces-config.xml
  • 53. JSF Converter para que toda propriedade do tipo org.com.model.CPF de qualquer bean use este converter <converter> <converter-for-class> org.com.model.CPF </converter-for-class> <converter-class> org.com.faces.CPFConverter </converter-class> </converter>
  • 54. JSF Converter declarado explicitamente: <h:inputText id=“cpf“ value="#{UserRegistration.user.cpf}"> <f:converter converterId=“br.com.CPFConverter“ /> </h:inputText> Ou implicitamente (converter mapeado para objetos do tipo CPF) <h:inputText id=“cpf“ value="#{UserRegistration.user.cpf}"> NADA AQUI ;-) </h:inputText>
  • 55. JSF Converter Padrões do JSF: <h:inputText id="age" value="#{UserRegistration.user.age}"> <f:converter id="javax.faces.Short"/> </h:inputText>
  • 56. JSF Validatores • Tem por responsabilidade garantir que o valor informado pelo usuário seja válido • Validador trabalha com objetos, não somente com Strings • JSF já fornece validadores padrões como required, length, range etc
  • 57. JSF Você pode implementar seu próprio validador • Basta implementar a interface javax.faces.validator.Validator • Registrar o validador no faces-config.xml • Você pode associar um ou mais validadores a um componente
  • 58. JSF javax.faces.validator.Validator Validadores são registrados no faces-config.xml <validator> <validator-id>br.com.validaCPF</validator-id> <validator-class>faces.validaCPF </validator-class> </validator>
  • 59. JSF Validação de obrigatoriedade e comprimento do campo: <h:inputText id=“firstName“ value="#{user.firstName}“ required=“true”> <f:validateLength minimum="2“ maximum="25“ /> </h:inputText>
  • 60. JSF Navegação • Navegação de uma página para outra • Simples e poderoso sistema de navegação • O framework seleciona a próxima view baseado: – Na view anterior – Resultado(outcome) de uma action – EL de ação (ex.: #{mBean.user.save}) – Qualquer combinação acima • Permite wildcard (‘*’) para páginas de origem (from-view-id)
  • 63. JSF Eventos • Componentes geram determinados eventos que por sua vez disparam ações no servidor (método(s) no managed-bean ou listeners) • Você também pode implementar listeners de ação associados a outros componentes do formulário • Os listeners mais comuns do JSF são – ActionListener – ValueChangeListener
  • 64. JSF Action event para navegação : <h:commandButton action=“listar” value=“Listar” /> Action event que executa método no managed-bean <h:commandLink action=“#{cadastroBean.cadastrar}” value=“Cadastrar” /> Método no managed-bean public String cadastrar() { // processa evento return “listar”; // retorna para view “listar” }
  • 65. JSF Value-change event que executa método após alterar o valor do componente <h:selectOneMenu id=“UF” value=“#{cadastroBean.uf}” valueChangeListener=“#{cadastroBean.carregaCidades}” onchange=“submit();”> <f:selectItems value=“#{cadastroBean.ufList}” /> </h:selectOneMenu>
  • 66. JSF Método no managed-bean public void carregaCidades(ValueChangeEvent event) { // processa evento String uf = event.getNewValue(); // obtém novo valor this.cidadesList = Servico.carregaCidades(uf); // processa evento }
  • 68. JSF (Fases) • São Atendidas pelo Reader Response e Restore Component Tree • Restore Component Tree: O conjunto de componentes JSF é criado ou restaurado dependento da requisição (Primeira ou demais vezes executadas)
  • 69. JSF (Fases) • Apply request Values: Os componentes irão extrair seu novo valor dos parâmetros da Request, colocando-os em variáveis de estado no servidor
  • 70. JSF (Fases) • Process Validations: todos os validadores serão executados, em caso de erro de qualquer valor, a mensagem é alocada no FacesContext, caso contrário ele atualiza (Update Model Values) os valores dos inputs na camada de negócio através da EL
  • 71. JSF (Fases) • Invoke Application: Os métodos do ManagedBeans são executados e as regras de navegação (Gravar, Excluir, Alterar,...) são resolvidas. Se tudo ocorrer bem é renderizada pelo container do JSP, caso contrário as mensagens gravadas no FacesContext são apresentadas
  • 72. JSF (Fases) • Caso queira pular as fazer de validação e conversão, basta utilizar o parametro immediate=true <h:commandButton action=“proximo" value=“Proximo" immediate="true"/>
  • 73. JSF JSF Extension Points • Customizar componentes • Phase listeners (antes, depois de qualquer fase) • Customizar converters / validators • Customizar renderers • Customizar ActionListenerImpl para manipular eventos • Decorar ou substituir view handler, navigation handler, state manager etc
  • 74. JSF faces-config.xml • Arquivo XML para configurar recursos da aplicação • Contém regras de navegação, customização e extensão de converters, validators, componentes etc • Geralmente está localizado dentro de /WEB-INF/faces-config.xml • Pode ser dividido em diretórios e sub-diretórios ou dentro de arquivos jar • Seta javax.faces.application.CONFIG_FILES no web.xml • Ou então coloca-se META-INF/faces-config.xml dentro de um jar
  • 75. JSF faces-config.xml (Resumo) <faces-config ... > <converter> <converter-id>core.faces.CnpfCnpjConverter</converter-id> <converter-class>converter.CnpfCnpjConverter</converter-class> </converter>
  • 78. Componentes JSF (Form) <h:form id="jsftags"> ... </h:form> <form id="jsftags" method="post" action="/jsftags/faces/pages/tags.jsp" enctype="application/x-www-form-urlencoded"> ... <input type="hidden" name="jsftags" value="jsftags" /> <input type="hidden" name="jsftags:link" /> </form>
  • 79. Componentes JSF (commandButton) <h:commandButton id="submit" value="#{msg.buttonHeader}" action="nextPage"> </h:commandButton> <input id="_id0:submit" type="submit" name="_id0:submit" value="Next Step"/>
  • 80. Componentes JSF (commandLink) <h:commandLink id="link" action="goto"> <h:outputText value="#{msg.linkName}"/> </h:commandLink> <a id="_id0:link“ href="#" onclick= "document.forms['_id0']['_id0:link'].value= '_id0:link'; document.forms['_id0'].submit(); return false;“ >Next Page</a>
  • 81. Componentes JSF (graphicImage) <h:graphicImage id="image" alt="jsf-sun“ url="/images/jsf-sun.gif"> </h:graphicImage> <img id="jsftags:image" src="/jsf-example/images/jsf-sun.gif" alt="jsf-sun" />
  • 82. Componentes JSF (inputText) <h:inputText id="address" value="#{jsfexample.address}" /> <input type="text" name="jsftags:_id1" value="123 JSF Ave" />
  • 83. Componentes JSF (inputText / inputSecret) <h:inputText id="address” value="#{jsfexample.address}" /> <input type="text" name="jsftags:_id1” value="123 JSF Ave" /> <h:inputSecret redisplay="false“ value="#{jsfexample.password}" /> <input id="jsftags:password“ type="password“ name="jsftags:password“ value="secret" />
  • 84. Componentes JSF (inputHidden /inputTextarea) <h:inputHidden id="hidden“ value="userPreference" /> <input id="jsftags:hidden” type="hidden“ name="jsftags:hidden" value="userPreference" /> <h:inputTextarea id="textArea“ rows="4" cols="7“ value="Text goes here.."/> <textarea id="jsftags:textArea“ name="jsftags:textArea“ cols="5" rows="3"> Text goes here.. </textarea>
  • 85. Componentes JSF (outputText / outputLabel) <h:outputText value="#{jsfexample.zipCode}"/> 123 <h:outputLabel for="address“> <h:outputText id="addressLabel“ value="User Home Address"/> </h:outputLabel> <span id="jsftags:addressLabel"> User Home Address</span>
  • 86. Componentes JSF (outputLink) <h:outputLink value="#{msg['jsfstudio.home.url']"> <f:verbatim>JSF Studio</f:verbatim> </h:outputLink> <a href="http://www.jsf-studio.com"> JSF Studio </a>
  • 87. Componentes JSF (message) <h:message style="color: red“ for="useraddress" /> <h:inputText id="useraddress“ value="#{jsfexample.address}“ required="true"/> <h:commandButton action="save" value="Save"/> <span style="color: red"> Validation Error: Value is required. </span> <input id="jsftags:useraddress" type="text" name="jsftags:useraddress" value="" /> <input type="submit" name="jsftags:_id1" value="Save" /> Escrevendo uma mensagem: FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Usuário já Cadastrado!"));
  • 88. Componentes JSF (selectBooleanCheckbox) <h:selectBooleanCheckbox title="emailUpdates“ value="#{jsfexample.wantsEmailUpdates}" > </h:selectBooleanCheckbox> <h:outputText value="Would you like email updates?"/> <input type="checkbox“ name="jsftags:_id6" checked title="emailUpdates" /> Would you like email updates?
  • 89. Componentes JSF (selectManyCheckbox) <h:selectManyCheckbox id="cars” value="#{carsBean.car}"> <f:selectItems value="#{carBean.carList}"/> </h:selectManyCheckbox> span id="jsftags:cars"> <table><tr> <td><label for="jsftags:cars"> <input name="jsftags:cars“ value="accord" type="checkbox"> Honda Accord</input></label></td> <td><label for="jsftags:cars“><input name="jsftags:cars“ value="4runner" type="checkbox"> Toyota 4Runner</input> </label></td> <td><label for="jsftags:cars“><input name="jsftags:cars“ value="nissan-z" type="checkbox"> Nissan Z350</input<</label></td> </tr></table> </span>
  • 90. Componentes JSF (selectManyListbox) <h:selectManyListbox id="cars_selectManyListbox“ value="#{carBean.car}"> <f:selectItems value="#{carBean.carList}"/> </h:selectManyListbox> <select id="jsftags:cars_selectManyListbox” name="jsftags:cars_selectManyListbox” multiple size="3"> <option value="accord">Honda Accord</option> <option value="4runner">Toyota 4Runner</option> <option value="nissan-z">Nissan Z350</option> </select>
  • 91. Componentes JSF (selectOneMenu) <h:selectOneMenu id="selectCar“ value="#{carBean.currentCar}"> <f:selectItems value="#{carBean.carList}" /> </h:selectOneMenu> Honda Accord Toyota 4Runner Nissan Z350 <select id="jsftags:selectCar“ name="jsftags:selectCar" size="1"> <option value="accord">Honda Accord</option> <option value="4runner">Toyota 4Runner</option> <option value="nissan-z">Nissan Z350</option> </select>
  • 92. Componentes JSF (dataTable) <h:dataTable id="books" value="#{BookStore.items}" var="store"> <h:column> <f:facet name="header“><h:outputText value="#{msg.storeNameLabel}"/></f:facet> <h:outputText value="#{store.name}"/> </h:column> <h:column> <f:facet name="header“>Subject</f:facet> <h:outputText value="#{store.subject}"/> </h:column> <h:column> <f:facet name="header“><h:outputText value="#{msg.storePriceLabel}"/></f:facet> <h:outputText value="#{store.price}"/> </h:column> </h:dataTable>
  • 93. Componentes JSF (dataTable) <table id="jsftags:books” class="list-background“> <thead> <tr><th class="list-header” scope="col">Title</th> <th class="list-header” scope="col">Subject</th> <th class="list-header” scope="col">Price ($)</th> </tr> </thead> <tbody> <tr class="list-row"> <td class="list-column-center“> JSF For Dummies</td> <td class="list-column-right“> JSF</td><td class="list-column-center“> 25.0</td> </tr> <tr class="list-row"> <td class="list-column-center“> Struts For Dummies</td> <td class="list-column-right“>Struts</td> <td class="list-column-center“> 22.95</td> </tr> </tbody> </table>
  • 94. Componentes JSF Atributos importantes: required, immediate, readonly, rendered ..... <h:inputText value="#{numberBean.userNumber}" required="true" validatorMessage="O número tem que ser entre 0 e 100" readonly=“false" rendered=“true” > <h:commandButton value="Desistir" action="desistir" immediate="true"/>
  • 95. Exercício 1 Criar um cadastro de Pessoa. • Criar um bean que represente o formulário (Nome, Endereço, Telefone ) • Usar f:view e h:form para os formulários • Especificar o Action Controller com o atributo de ação h:commandButton • Criar uma Action para inserir os dados do formulário, chame a lógica de negócio, guarde os resultados em uma lista e imprima os valores no console • Usar o faces-config para declarar o form bean e navegação • Após inserir, imprimir no console quem foi inserido e enviar para uma página de sucesso com um botão voltar
  • 96. Exercício 1 (Continuação) Validação: • Utilizar o h:messages e h:message <h:messages style="color: red"/> • Inserir algumas validações nos campos: <h:inputText value="#{user.name}" required="true" requiredMessage="Campo Obrigatorio" validatorMessage="Tamanho inválido"> <f:validateLength maximum="30" minimum="3"/> </h:inputText><br/> • Enviar uma mensagem de sucesso após cadastrar o usuário FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Usuário já Cadastrado!"));
  • 97. Componentes JSF (dataTable) DataModel • Para enviar os dados para view em fomato de tabela, basta criar um objeto DataModel • Para inserir os objetos no DataModel: dataModel.setWrappedData(Lista) • Para obter os objetos da tabela : dataModel.getWrappedData() ou getRowData()
  • 98. Exercício 2 Usando DataModel • Inserir uma tabela no cadastro do exercício 1 • Criar um link para apagar o registro da tabela
  • 99. Exercício 3 Criar um evento de mudança em um combo. • Criar um combo na tela de tipo de endereço • Inserir os tipos (Rua, Quadra, Lote ....) • Criar um método para capturar essa mudança e imprimir no console o valor antigo e o novo
  • 100. Exercício 4 (Opcional) Navegação: • Sortear um número usando o Math.random()*100 • Pedir para o usuário entrar com o número • Se estiver certo, enviar para página de sucesso com opção de sair ou jogar novamente, se estiver errado avisar que está errado e informar se é maior ou menor, o usuário pode desistir, enviando para uma tela confirmação.
  • 102. Exercício 5 (Opcional) Criar validadores: • Validador de Nome, que só aceite seu nome. • Validador de email • Validador que não aceite data no passado.
  • 103. Exercício 5 (Opcional) Criar validadores: public class ValidatorNome implements Validator { @Override public void validate(FacesContext arg0, UIComponent arg1, Object arg2) throws ValidatorException { String nome = (String)arg2; if (nome != null && nome.equalsIgnoreCase("gabriel")) { throw new ValidatorException(new FacesMessage(arg1.getClientId(arg0),"Nome Inválido")); } } }
  • 104. Exercício 6 (Opcional) Criar conveter: • Criar um objeto UF (código e nome) • Utilizá-lo em um combo • Criar um converter para UF
  • 105. Exercício 6 (Opcional) Converter: public class UFConverter implements Converter { @Override public Object getAsObject(FacesContext arg0, UIComponent arg1, String value) { if(StringUtils.isEmpty(value)){ return null; } UF uf = new UF(); if (value.equals("DF")) { uf.setCodigo(1); uf.setNome("DF"); } else if (value.equals("SP")) { uf.setCodigo(3); uf.setNome("SP"); } else if (value.equals("GO")) { uf.setCodigo(3); uf.setNome("GO"); } return uf; } @Override public String getAsString(FacesContext arg0, UIComponent arg1, Object value) { return value.toString(); } <h:selectOneMenu value="#{user.uf}" valueChangeListener="#{userAction.mudarUF}" onblur="submit()" converter="ufConverter"> <f:selectItems value="#{userAction.listaUF}" /> </h:selectOneMenu> public List<SelectItem> getListaUF() { List<SelectItem> items = new ArrayList<SelectItem>(); items.add(new SelectItem(new UF(1 , "DF"))); items.add(new SelectItem(new UF(2 , "SP"))); items.add(new SelectItem(new UF(3 , "GO"))); return items; }
  • 106. JSF 2.0 O que vem aí com JSF 2.0 • Suporte a templates, baseado no Facelets, Tiles, dentre outros • Simplificar a criação de aplicações do tipo CRUD • Melhor tratamento de mensagens de erro • Mecanismo de tratamento de exceções padrão • Criação de aplicações Web sem XML, utilizando anotações • Simplificação no desenvolvimento de componentes • Especificar onde os artefatos (Conversores, Renderizadores, etc.) devem ser colocados no WAR, permitindo ao container encontrá-los sem a necessidade de sua definição em arquivos de configuração • Permitir que artefatos sejam alterados sem a necessidade de reinicializar o servidor
  • 107. Prof. Doutorando Miguel VilaçaProf. Doutorando Miguel Vilaça MUITO OBRIGADO!