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

Design Pattern

Front Controller

Estrutura MVC para JSF

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.

Integrao Eclipse Tomcat

Windows -> Preferences

Server -> Runtime Environments

Depois clique em Add

Selecione Apache Tomcat 7

Depois Next

Integrao Eclipse Tomcat

Indique o local de instalao 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 pginas 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 cdigo abaixo:

Page title

Contents

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

Desenvolvendo uma Aplicao Em URL Mapping Patterns, remova todos os itens e

adicione *.xhtml.

Desenvolvendo uma Aplicao

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.

Desenvolvendo uma Aplicao

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

Hello JSF

Hello World com JSF

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

Hello Nome

Ol, #{helloBean.nome}

Formulrio simples com JSF

Formulrio simples

Marca:

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

Soma

Soma

A soma #{somaBean.resultado}

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

Login

Login

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

public String salvar(){ ... return "listar"; }

public String salvar(){ ... return "listar?faces-redirect=true"; }

Forward:

Redirect:

Forward x Redirect navegao explcita /marca/editar.xhtml sucesso /marca/listar.xhtml #{marcaBean.excluir} sucesso /home.xhtml falha /marca/editar.xhtml

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-que-todo-bom-desenvolvedor-jsf-deveria-saber/