Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Desenvolvimento de Software para WEB
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
Desenvolvimento de Software
para WEB
JSF (JavaServer Faces)
Prof. Regis Pires Magalhães
regispires@lia.ufc.br
Agradecimentos
• Agradecemos ao Prof. Fábio Dias (UFC Quixadá)
por ter gentilmente cedido seus slides para
adaptação e uso nesta disciplina.
Motivação
• O desenvolvimento de aplicações web Java
demanda um grande esforço
• Ambientes de desenvolvimento visual, como Asp
e .Net, possibilitam um desenvolvimento rápido
• Como unir as duas coisas?
▫ Java Server Faces (JSF)
▫ A promessa de JSF é trazer um rápido
desenvolvimento de interface gráfica do usuário
(GUI) para o Java server-side
Introdução
• A tecnologia JSF propicia ao Java server-side
um desenvolvimento rápido de interfaces de
usuário
▫ “Swing para aplicações server-side”
▫ Realiza o trabalho braçal que os desenvolvedores
de JSP precisam fazer à mão
▫ A idéia é focar na lógica da aplicação
• JSF facilita o desenvolvimento de aplicações web
através do suporte à componentes de interface
com o usuário ricos e poderosos
▫ Campos de texto, listas, abas, grids
Composição e Arquitetura
• O JSF é composto dos seguintes elementos:
▫ Páginas XHTML;
▫ Backing-Beans (Managed-Bean);
▫ Faces-Servlet;
▫ faces-conf.xml;
▫ TagLibraries do JSF.
Arquitetura em Camadas
Composição e Arquitetura
• Páginas XHTML: Agem como view (visão), com o uso
das TagLibs do JSF.
▫ Facelets: tecnologia de template de visão padrão do JSF.
• Backing-Beans(Managed-Bean): Agem como
controle de páginas, ou seja, gerenciam eventos,
comportamentos e validações dos componentes da
página XHTML.
• Faces-Servlet: É o servlet controlador do Framework
JSF, o qual delega ações para o Backing-Bean específico.
• faces-conf.xml: Arquivo de configuração,
navegabilidade e backing-beans (Managed-Bean).
• TagLibraries: Tags que dão vida aos componentes do
JSF.
Facelets
• Framework de templates para JSF.
• Mais usado, popular, com maior suporte da comunidade,
maior documentação e estabilidade.
• Vantagens:
▫ Facilidade na criação e reutilização de páginas e
componentes.
▫ Melhor depuração de erros.
▫ AJAX nativo.
▫ Melhor compatibilidade entre XHTML, JSTL e os
componentes.
▫ Independente de Web Container.
▫ 30 a 50% mais rápido que JSP.
▫ Manipulador de visão padrão do JSF 2.0.
MVC com JSF
Design Pattern
Front Controller
Estrutura MVC para JSF
Implementações de JSF
• Mojarra (Sun/ Oracle) – mais usada e
recomendada – implementação de referência
• Myfaces (Apache)
• ADF Faces (Oracle)
• BEA (embutida no WebLogic)
• IBM (embutida no WebSphere)
• Backbase
• NetAdvantage
Managed Bean
• É apenas um POJO e deveria ser o mais simples
possível.
• Os componentes através de EL acessam os
valores dos managed beans atraves de getters /
setters.
Instalação
• Mojarra
▫ http://javaserverfaces.java.net/
▫ Biblioteca necessária:
javax.faces-2.1.22.jar
Integração Eclipse Tomcat
• Window Show View Other...
• Na janela Show View, selecione a opção Servers.
Integração Eclipse Tomcat
• Windows -> Preferences
• Server -> Runtime Environments
• Depois clique em Add
• Selecione Apache Tomcat 7
• Depois Next
Integração Eclipse Tomcat
• Indique o local de instalação do Tomcat 7, depois
Finish.
Configura o JSF no Eclipse
1 – File -> New -> Dynamic Web Project
Configura o JSF no Eclipse
2 – Copie o jar do Mojarra para dentro da pasta
lib:
Configura o JSF no Eclipse
3 – Crie um template para páginas JSF: Dentro de
Window → Preferences
Web → HTML Files → Editor → Templates
Configura o JSF no Eclipse
3 – Clique em New.... Em Name, escreva “JSF”;
No Context marque “New HTML”; No Pattern
escreva o código abaixo:
<?xml version='1.0' encoding='${encoding}' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>Page title</title>
</h:head>
<h:body>
Contents
</h:body>
</html>
Desenvolvendo uma Aplicação
• Crie um projeto web no Eclipse, os passos são os mesmo
apenas selecione no item Configuration: Java Server
faces v2.1 Project.
• Clique em Next, Next e
Next
Desenvolvendo uma Aplicação
• Em URL Mapping Patterns, remova todos os itens e
adicione *.xhtml.
Desenvolvendo uma Aplicação
1. Desenvolver objetos de modelo (JavaBeans) e
de controller (Managed Beans) que
armazenam o dado
2. Adicionar declarações de objetos de controller
(Managed Beans) ao arquivo de configuração
da aplicação (faces-config.xml) ou através de
anotações no próprio Managed Bean.
3. Criar páginas utilizando componentes UI e
core tags.
4. Definir a navegação de páginas no arquivo
faces-config.xml.
Desenvolvendo uma Aplicação
• Managed Bean é uma classe java de Controller
tradicional.
• Pode conter métodos de aplicação e tratadores
de eventos.
• Usado para guardar dados de uma página.
• A criação e o ciclo de vida são gerenciados pelo
JSF:
▫ Escopos: application, session, request, view
• JSF mantém os dados da classe em sincronia
com o componente de interface (UI).
Ativação do autocomplemento
para JSF no eclipse
• Esse procedimento precisa ser realizado, caso o
autocomplemento de JSF não funcione.
• Nas propriedades do projeto, selecione “Project Facets” e,
depois habilite “JavaServer Faces”.
Habilite
JavaServer Faces
Exemplo 1 – Hello World
Hello World
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Hello JSF</title>
</h:head>
<h:body>
Hello World com JSF
</h:body>
</html>
Exemplo 2 – Hello Nome
Hello Nome – Managed Bean
import javax.faces.bean.ManagedBean;
@ManagedBean(name="helloBean")
public class HelloBean {
public String getNome() {
return "Regis";
}
}
Hello Nome – hello.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>Hello Nome</title>
</h:head>
<h:body>
<p>Olá, #{helloBean.nome}</p>
</h:body>
</html>
Formulário simples com JSF
Formulário simples
<html xmlns=http://www.w3.org/1999/xhtml
xmlns:h="http://java.sun.com/jsf/html">
<h:body>
<h:form>
Marca: <h:inputText />
</h:form>
</h:body>
</html>
Exemplo 3 - Soma
Soma – Managed Bean
import javax.faces.bean.ManagedBean;
@ManagedBean(name="somaBean")
public class SomaBean {
private double n1, n2;
public String somar() {
return "soma";
}
public double getResultado() {
return n1 + n2;
}
// Getters e Setters...
}
Soma – soma.xhtml
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<h:head><title>Soma</title></h:head>
<h:body>
<h:form>
<h1>Soma</h1>
<h:messages />
<h:panelGrid columns="2">
<h:outputLabel value="Número 1:" for="n1" />
<h:inputText id="n1" label="Número 1" value="#{somaBean.n1}"
required="true" />
<h:outputLabel value="Número 2:" for="n2" />
<h:inputText id="n2" label="Número 2" value="#{somaBean.n2}"
required="true" />
<h:commandButton action="#{somaBean.somar}" value="Somar" />
</h:panelGrid>
</h:form>
<p>A soma é #{somaBean.resultado}</p>
</h:body>
</html>
Implementando uma Ação no Bean
• É possível implementar um método no bean de
maneira que tal método seja executado quando o
usuário clicar em algum botão da página.
• Para isso, deve-se definir a propriedade action
do commandButton para executar tal método
(ao invés de apontar diretamente para um nome
lógico).
• No bean, o método deve retornar uma String que
representa o nome lógico da página de destino.
Expression Language 2.2 (Tomcat 7)
• É possível receber parâmetros direto no método
do Managed Bean.
▫ Assim, não precisamos mais do setter.
Exemplo 4 - Login
Login
public class Login {
private String usuario, senha;
public String getUsuario() {
return usuario;
}
public void setUsuario(String usuario) {
this.usuario = usuario;
}
public String getSenha() {
return senha;
}
public void setSenha(String senha) {
this.senha = senha;
}
}
Login – Managed Bean
import javax.faces.bean.ManagedBean;
@ManagedBean(name="loginBean")
public class LoginBean {
Login login = new Login();
public String logar() {
if (login.getUsuario().equals("regis") &&
login.getSenha().equals("123")) {
return "sucesso";
} else {
return "falha";
}
}
public Login getLogin() {
return login;
}
public void setLogin(Login login) {
this.login = login;
}
}
Login – login.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<h:head><title>Login</title></h:head>
<h:body>
<h1>Login</h1>
<h:messages />
<h:form>
<h:panelGrid columns="2">
<h:outputLabel value="Usuário:" for="usuario" />
<h:inputText id="usuario" label="Usuário"
value="#{loginBean.login.usuario}" required="true" />
<h:outputLabel value="Senha:" for="senha" />
<h:inputText id="senha" label="Senha"
value="#{loginBean.login.senha}" required="true" />
<h:commandButton action="#{loginBean.logar}" value="Enviar" />
</h:panelGrid>
</h:form>
</h:body>
</html>
Exercícios
1) Faça o exercício anterior para efetuar a
verificação de usuário e senha como o
visualizado nos slides
• Caso o usuário consiga logar, mostre a página
de saudação
• Caso contrário, mostre uma página de erro
Forward x Redirect – navegação
implícita
public String salvar(){
...
return "listar";
}
public String salvar(){
...
return "listar?faces-redirect=true";
}
Forward:
Redirect:
Forward x Redirect – navegação
explícita
<faces-config ...>
<navigation-rule>
<from-view-id>/marca/editar.xhtml</from-view-id>
<navigation-case>
<from-outcome>sucesso</from-outcome>
<to-view-id>/marca/listar.xhtml</to-view-id>
<redirect/>
</navigation-case>
<navigation-case>
<from-action>#{marcaBean.excluir}</from-action>
<from-outcome>sucesso</from-outcome>
<to-view-id>/home.xhtml</to-view-id>
<redirect/>
</navigation-case>
<navigation-case>
<from-outcome>falha</from-outcome>
<to-view-id>/marca/editar.xhtml</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>
Forward x Redirect
• Forward
▫ É executado internamente pelo servlet
(controller).
▫ O browser não sabe o que está ocorrendo durante
o processamento no servidor, ou seja, não sabe
por quais servlets ou páginas a requisição está
passando.
▫ No final do processamento da requisição a url da
barra de endereços do browser não muda.
▫ O reload da página resultante irá executar a
requisição original.
Perigo: resubmissão de formulário
Forward x Redirect
• Forward
▫ É executado internamente pelo servlet
(controller).
▫ O browser não sabe o que está ocorrendo durante
o processamento no servidor, ou seja, não sabe
por quais servlets ou páginas a requisição está
passando.
▫ No final do processamento da requisição a url da
barra de endereços do browser não muda.
▫ O reload da página resultante irá executar a
requisição original.
Perigo: resubmissão de formulário
Forward x Redirect
• Redirect
▫ É um processo de dois passos, ao receber uma
requisição a aplicação web “pede” ao browser para
acessar uma segunda url, por isso a url muda.
▫ O reload de página não repetirá a requisição original,
mas sim a nova url (2ª requisição).
▫ É um processo muito mais lento que um forward,
pois são necessárias duas requisições.
▫ Objetos colocados no escopo do request original são
perdidos durante o segundo request.
Forward x Redirect
• Forward mantém os atributos e parâmetros do
request original, já um redirect não.
• Um dos motivos para se utilizar um redirect é
para evitar que no reload/refresh da página
ocorra uma resubmissão do form, evitando-se
assim resultados inesperados na aplicação.
Auto-complemento de texto para
JSF no Eclipse
Referências
• O que todo bom desenvolvedor JSF deveria
saber
▫ http://www.rponte.com.br/2009/01/19/o-que-
todo-bom-desenvolvedor-jsf-deveria-saber/
Continue navegando
Materiais relacionados
Perguntas relacionadas
Compartilhar