Dsweb JSF PDF

Desenvolvimento de Software para WEB
JSF (JavaServer Faces)
Prof. Regis Pires Magalhes regispires@lia.ufc.br
Agradecimentos
Agradecemos ao Prof. Fbio Dias (UFC Quixad) por ter gentilmente cedido seus slides para adaptao e uso nesta disciplina.
Motivao
O desenvolvimento de aplicaes web Java demanda um grande esforo Ambientes de desenvolvimento visual, como Asp e .Net, possibilitam um desenvolvimento rpido Como unir as duas coisas?
Java Server Faces (JSF) A promessa de JSF trazer um rpido desenvolvimento de interface grfica do usurio (GUI) para o Java server-side
Introduo
A tecnologia JSF propicia ao Java server-side um desenvolvimento rpido de interfaces de usurio
Swing para aplicaes server-side Realiza o trabalho braal que os desenvolvedores de JSP precisam fazer mo A idia focar na lgica da aplicao
JSF facilita o desenvolvimento de aplicaes web atravs do suporte componentes de interface com o usurio ricos e poderosos
Campos de texto, listas, abas, grids
Composio e Arquitetura
O JSF composto dos seguintes elementos:
Pginas XHTML; Backing-Beans (Managed-Bean); Faces-Servlet; faces-conf.xml; TagLibraries do JSF.
Arquitetura em Camadas
Composio e Arquitetura
Pginas XHTML: Agem como view (viso), com o uso das TagLibs do JSF.
Facelets: tecnologia de template de viso padro do JSF.
Backing-Beans(Managed-Bean): Agem como controle de pginas, ou seja, gerenciam eventos, comportamentos e validaes dos componentes da pgina XHTML. Faces-Servlet: o servlet controlador do Framework JSF, o qual delega aes para o Backing-Bean especfico.
faces-conf.xml: Arquivo de configurao, navegabilidade e backing-beans (Managed-Bean). TagLibraries: Tags que do vida aos componentes do JSF.
Facelets
Framework de templates para JSF. Mais usado, popular, com maior suporte da comunidade, maior documentao e estabilidade. Vantagens: Facilidade na criao e reutilizao de pginas e componentes. Melhor depurao de erros. AJAX nativo. Melhor compatibilidade entre XHTML, JSTL e os componentes. Independente de Web Container. 30 a 50% mais rpido que JSP. Manipulador de viso padro do JSF 2.0.
MVC com JSF
Estrutura MVC para JSF
Design Pattern Front Controller
Implementaes de JSF
Mojarra (Sun/ Oracle) mais usada e recomendada implementao de referncia 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 possvel. Os componentes atravs de EL acessam os valores dos managed beans atraves de getters / setters.
Instalao
Mojarra
http://javaserverfaces.java.net/ Biblioteca necessria:
javax.faces-2.1.22.jar
Integrao Eclipse Tomcat

Window Show View Other... Na janela Show View, selecione a opo Servers.

Windows -> Preferences Server -> Runtime Environments Depois clique em Add Selecione Apache Tomcat 7 Depois Next

Indique o local de instalao do Tomcat 7, depois Finish.
Configura o JSF no Eclipse

1 File -> New -> Dynamic Web Project

2 Copie o jar do Mojarra para dentro da pasta lib:

3 Crie um template para pginas JSF: Dentro de Window Preferences Web HTML Files Editor Templates

3 Clique em New.... Em Name, escreva JSF; No Context marque New HTML; No Pattern escreva o cdigo 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>
Desenvolvendo uma Aplicao

Crie um projeto web no Eclipse, os passos so os mesmo apenas selecione no item Configuration: Java Server faces v2.1 Project.
Clique em Next, Next e Next

Em URL Mapping Patterns, remova todos os itens e adicione *.xhtml.

1. Desenvolver objetos de modelo (JavaBeans) e de controller (Managed Beans) que armazenam o dado
2. Adicionar declaraes de objetos de controller (Managed Beans) ao arquivo de configurao da aplicao (faces-config.xml) ou atravs de anotaes no prprio Managed Bean.
3. Criar pginas utilizando componentes UI e core tags. 4. Definir a navegao de pginas no arquivo faces-config.xml.

Managed Bean uma classe java de Controller tradicional. Pode conter mtodos de aplicao e tratadores de eventos. Usado para guardar dados de uma pgina. A criao e o ciclo de vida so gerenciados pelo JSF:
Escopos: application, session, request, view
JSF mantm os dados da classe em sincronia com o componente de interface (UI).
Ativao do autocomplemento para JSF no eclipse

Esse procedimento precisa ser realizado, caso o autocomplemento de JSF no 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/xhtml1transitional.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/xhtml1transitional.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>
Formulrio simples com JSF
Formulrio 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="Nmero 1:" for="n1" /> <h:inputText id="n1" label="Nmero 1" value="#{somaBean.n1}" required="true" /> <h:outputLabel value="Nmero 2:" for="n2" /> <h:inputText id="n2" label="Nmero 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 Ao no Bean

possvel implementar um mtodo no bean de maneira que tal mtodo seja executado quando o usurio clicar em algum boto da pgina.
Para isso, deve-se definir a propriedade action do commandButton para executar tal mtodo (ao invs de apontar diretamente para um nome lgico).
No bean, o mtodo deve retornar uma String que representa o nome lgico da pgina de destino.
Expression Language 2.2 (Tomcat 7)

possvel receber parmetros direto no mtodo do Managed Bean.
Assim, no 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="Usurio:" for="usuario" /> <h:inputText id="usuario" label="Usurio" 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>
Exerccios
1) Faa o exerccio anterior para efetuar a verificao de usurio e senha como o visualizado nos slides
Caso o usurio consiga logar, mostre a pgina de saudao Caso contrrio, mostre uma pgina de erro
Forward x Redirect navegao implcita

Forward: public String salvar(){ ... return "listar"; } Redirect: public String salvar(){ ... return "listar?faces-redirect=true"; }
Forward x Redirect navegao explcita

<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 no sabe o que est ocorrendo durante o processamento no servidor, ou seja, no sabe por quais servlets ou pginas a requisio est passando. No final do processamento da requisio a url da barra de endereos do browser no muda. O reload da pgina resultante ir executar a requisio original.
Perigo: resubmisso de formulrio
Forward x Redirect
Forward
executado internamente pelo servlet (controller). O browser no sabe o que est ocorrendo durante o processamento no servidor, ou seja, no sabe por quais servlets ou pginas a requisio est passando. No final do processamento da requisio a url da barra de endereos do browser no muda. O reload da pgina resultante ir executar a requisio original.
Perigo: resubmisso de formulrio
Forward x Redirect
Redirect
um processo de dois passos, ao receber uma requisio a aplicao web pede ao browser para acessar uma segunda url, por isso a url muda. O reload de pgina no repetir a requisio original, mas sim a nova url (2 requisio). um processo muito mais lento que um forward, pois so necessrias duas requisies. Objetos colocados no escopo do request original so perdidos durante o segundo request.
Forward x Redirect
Forward mantm os atributos e parmetros do request original, j um redirect no. Um dos motivos para se utilizar um redirect para evitar que no reload/refresh da pgina ocorra uma resubmisso do form, evitando-se assim resultados inesperados na aplicao.
Auto-complemento de texto para JSF no Eclipse
Referncias
O que todo bom desenvolvedor JSF deveria saber
http://www.rponte.com.br/2009/01/19/o-quetodo-bom-desenvolvedor-jsf-deveria-saber/

Dsweb JSF PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Dsweb JSF PDF

Enviado por

Direitos autorais:

Formatos disponíveis

Desenvolvimento de Software para WEB

JSF (JavaServer Faces)

Prof. Regis Pires Magalhes regispires@lia.ufc.br

MVC com JSF

Estrutura MVC para JSF

Design Pattern Front Controller

Integrao Eclipse Tomcat

Integrao Eclipse Tomcat

Integrao Eclipse Tomcat

Configura o JSF no Eclipse

Configura o JSF no Eclipse

Configura o JSF no Eclipse

Configura o JSF no Eclipse

Desenvolvendo uma Aplicao

Clique em Next, Next e Next

Desenvolvendo uma Aplicao

Desenvolvendo uma Aplicao

Desenvolvendo uma Aplicao

JSF mantm os dados da classe em sincronia com o componente de interface (UI).

Ativao do autocomplemento para JSF no eclipse

Habilite JavaServer Faces

Exemplo 1 Hello World

Exemplo 2 Hello Nome

Hello Nome Managed Bean

Hello Nome hello.xhtml

Formulrio simples com JSF

Soma Managed Bean

Implementando uma Ao no Bean

Expression Language 2.2 (Tomcat 7)

public String getSenha() { return senha; }

Login Managed Bean

Forward x Redirect navegao implcita

Forward x Redirect navegao explcita

Auto-complemento de texto para JSF no Eclipse

Você também pode gostar