Tutorial de Jsf

8/6/2019 Tutorial de Jsf

1/11

Grupo de Usurios Javahttp://www.guj.com.br

Grupo de Usurios Java http://www.guj.com.br Pgina 1

JavaServer Faces: A mais novatecnologia Java para desenvolvimento WEB

Talita Pitanga

Conhea um pouco sobre a mais nova tecnologia para desenvolvimento de aplicaes WEB:

JavaServer Faces.

Introduo

As tecnologias voltadas para o desenvolvimento de aplicaes WEB tm mudado constantemente.

Como sabemos, inicialmente os sites possuam apenas contedo esttico, ou seja, o contedo de uma

pgina no podia ser modificado em tempo de execuo. Depois, os sites passaram a oferecer pginas

com contedos dinmicos e personalizados. Diversas tecnologias esto envolvidas no desenvolvimento

das aplicaes WEB como, por exemplo, CGI (Common Gateway Interface), Servlets e JSP (Java Server

Pages).

A primeira tecnologia voltada para a construo de pginas dinmicas foi a CGI. Os programas

CGI podem ser escritos em qualquer linguagem de programao. Eles, porm, apresentam problemas de

portabilidade e escalabilidade, alm de mesclarem as regras de negcio com a visualizao. Vale salientar

que um servidor que usa este tipo de tecnologia pode ter seu desempenho comprometido, uma vez que

cada solicitao recebida de uma CGI requer a criao de um novo processo.

Em seguida vieram os servlets. Similarmente s CGIs, servlets so pequenos programas feitos

em Java que encapsulam alguma funcionalidade inerente sua aplicao WEB. Diferentemente das CGIs,

servlets so objetos Java que no precisam ser executados em outro processo: o processamento executado dentro de uma thread do processo do servidor. No entanto, eles ainda no resolvem o

problema da separao das regras de negcio da visualizao, dificultando a manuteno.

Posteriormente surgiram as pginas JSP. Elas so facilmente codificadas e produzem contedos

reutilizveis. Assim como os servlets, as JSPs tambm no resolvem o problema da manuteno das

aplicaes.

Esse problema s foi resolvido quando comeou a se aplicar os design patterns no

desenvolvimento das pginas. No caso das tecnologias para desenvolvimento WEB usando Java, o designpattern utilizado o MVC (Model-View-Controller). Se voc no sabe o que MVC, fique tranqilo!!

Falaremos um pouco sobre esse padro mais adiante. Mas voc pode encontrar algo sobre esse pattern

bem aqui pertinho: http://www.guj.com.br/forum/viewtopic.php?t=7228&highlight=mvc.

Com a grande utilizao dos patterns, principalmente no mundo Java, comearam a surgir

diversos frameworks para auxiliar no desenvolvimento de aplicaes WEB. Posso apostar que a maioria

de vocs j ouviu falar em Struts ou WebWork.

Finalmente chegamos ao assunto que se prope esse artigo. Se voc for como eu, j deve terfeito a seguinte pergunta para si mesmo: Beleza... mas e da? Afinal, o que JavaServer Faces?


2/11



O que JavaServer Faces?

JSF uma tecnologia que incorpora caractersticas de um framework MVC para WEB e de um

modelo de interfaces grficas baseado em eventos. Por basear-se no padro de projeto MVC, uma de

suas melhores vantagens a clara separao entre a visualizao e regras de negcio (modelo).

A idia do padro MVC dividir uma aplicao em trs camadas: modelo, visualizao e controle.

O modelo responsvel por representar os objetos de negcio, manter o estado da aplicao e fornecer

ao controlador o acesso aos dados. A visualizao representa a interface com o usurio, sendo

responsvel por definir a forma como os dados sero apresentados e encaminhar as aes dos usurios

para o controlador. J a camada de controle responsvel por fazer a ligao entre o modelo e a

visualizao, alm de interpretar as aes do usurio e as traduzir para uma operao sobre o modelo,

onde so realizadas mudanas e, ento, gerar uma visualizao apropriada.

O Padro MVC segundo JSF

No JSF, o controle composto por um servlet denominado FacesServlet, por arquivos de

configurao e por um conjunto de manipuladores de aes e observadores de eventos. O FacesServlet

responsvel por receber requisies da WEB, redirecion-las para o modelo e ento remeter uma

resposta. Os arquivos de configurao so responsveis por realizar associaes e mapeamentos de

aes e pela definio de regras de navegao. Os manipuladores de eventos so responsveis por

receber os dados vindos da camada de visualizao, acessar o modelo, e ento devolver o resultado para

o FacesServlet.

O modelo representa os objetos de negcio e executa uma lgica de negcio ao receber os dados

vindos da camada de visualizao. Finalmente, a visualizao composta por component trees

(hierarquia de componentes UI), tornando possvel unir um componente ao outro para formar interfaces

mais complexas. A Figura 1 mostra a arquitetura do JavaServer Faces baseada no modelo MVC.

Figura 1 - Arquitetura JSF baseada no modelo MVC


3/11


4/11



Vamos agora ao nosso exemplo.

Implementando um exemplo em JSF

Ser uma aplicao bem simples para demonstrar o uso dessa nova tecnologia. O nosso exemplo

consiste de uma pgina inicial contendo 2 links: um para a insero de dados e outro para a busca.

A pgina de insero consiste de um formulrio onde o usurio entrar com o nome, endereo,

cidade e telefone. Os dados sero guardados em um banco de dados (no meu caso, eu uso o

PostgreSQL) para uma posterior consulta. Se o nome a ser inserido j existir no banco de dados, uma

mensagem ser exibida informando ao usurio que o nome j est cadastrado (no nosso exemplo, o

nome a chave primria da tabela). Caso contrrio, uma mensagem de sucesso ser exibida ao usurio.

A busca se dar pelo nome da pessoa. Se o nome a ser buscado estiver cadastrado no banco,

ento uma pgina com os dados relativos ao nome buscado sero exibidos. Caso contrrio, serinformado ao usurio que o nome buscado no existe no banco.

Para a criao da tabela da base de dados foi utilizado o script apresentado abaixo.

CREATE TABLE pessoa

(

nome varchar(30) NOT NULL,

endereco varchar(50),

cidade varchar(20),

telefone varchar(10),

PRIMARY KEY (nome)

);

Vamos utilizar a IDE eclipse (http://www.eclipse.org/) para o desenvolvimento deste exemplo

devido existncia de um plugin para JSF (http://www.exadel.com/products_jsfstudio.htm), tornando o

desenvolvimento mais fcil.

No eclipse, escolha a opo New Project do menu File. Depois, escolha JSF Project. Nomeie seu

projeto como exemplo-jsf. Com o seu projeto criado, v at o diretrio WebContent. As pginas JSP

devem ficar armazenadas nesse diretrio.

O cdigo da pgina index.jsp ficar como mostrado abaixo.

Exemplo JSF

Agenda


5/11



Inserir

Buscar

Algumas tags aqui merecem ser comentadas:

gera um formulrio. cria um link para a pgina definida pelo campo value. O texto que

compe o link colocado utilizando-se a tag .

O usurio ter a opo de buscar ou inserir dados. Os cdigos das pginas de busca e insero

so mostrados a seguir, respectivamente.

buscar.jsp

Busca

Digite o nome:

voltar

inserir.jsp

Insero

Entre com os dados abaixo

Nome:

Endereo:


6/11



Cidade:

Telefone:

voltar

A tag cria uma caixa de texto onde o valor digitado guardado em value. Paracriar um boto, utilizada a tag . O label do boto colocado em value. Action

determina qual a ao que o boto deve tomar. Na pgina buscar.jsp, ao clicar no boto OK, o mtodo

buscar() da classe AgendaDB chamado.

O cdigo da classe bean AgendaDB com os mtodos getters e setters das variveis nome,

endereo, cidade e telefone e com os mtodos inserir e buscar ficar conforme mostrado abaixo. nesse

arquivo onde a conexo com o banco feita. Nas aplicaes JSF, os beans so usados para que dados

possam ser acessados atravs de uma pgina. O cdigo java referente a essa classe deve estar localizado

no diretrio JavaSource. J que estamos utilizando um Java bean, um managed-bean dever ser criadono arquivo faces-config.xml que est presente no diretrio WEB-INF.

import java.sql.*;

public class AgendaDB {

private String nome = blank;

private String endereco = blank;

private String cidade = blank;

private String telefone = blank;

private String result_busca = blank;

private String result_inserir = blank;

public static final String BUSCA_INVALIDA = "failure";public static final String BUSCA_VALIDA = "success";

public static final String SUCESSO_INSERCAO = "success";

public static final String FALHA_INSERCAO = "failure";

static Connection con = null;

static Statement stm = null;

static ResultSet rs;

static private String blank = "";

public AgendaDB() {

if (con==null) {

try {

Class.forName("org.postgresql.Driver");

con =

DriverManager.getConnection("jdbc:postgresql://localhost:5432/talita","talita","tata");

} catch (SQLException e) {

System.err.println ("Erro: "+e);con = null;

} catch (ClassNotFoundException e) {

System.out.println("ClassNotFound...");


7/11



e.printStackTrace();

}

}

}

public String getNome() {

return nome;

}

public void setNome(String nome) {this.nome = nome;

}

public String getCidade() {

return cidade;

}

public void setCidade(String cidade) {

this.cidade = cidade;

}

public String getEndereco() {

return endereco;

}

public void setEndereco(String endereco) {

this.endereco = endereco;

}

public String getTelefone() {

return telefone;

}

public void setTelefone(String telefone) {

this.telefone = telefone;

}

public String inserir() {

String result_inserir = FALHA_INSERCAO;

try {

stm = con.createStatement();

stm.execute("INSERT INTO pessoa(nome,endereco,cidade,telefone) VALUES ('" + nome + "','"+

endereco + "','" + cidade + "','"+ telefone + "')");stm.close();

result_inserir = SUCESSO_INSERCAO;


System.err.println ("Erro: "+e);

result_inserir = FALHA_INSERCAO;

}

return result_inserir;

}

public String buscar() throws SQLException {

String result_busca = BUSCA_INVALIDA;

try {

stm = con.createStatement();

rs = stm.executeQuery("SELECT * FROM pessoa WHERE nome = '" + nome + "'");

if (rs.next()) {nome = rs.getString(1);

endereco = rs.getString(2);

cidade = rs.getString(3);

telefone = rs.getString(4);

result_busca = BUSCA_VALIDA;

}

else

result_busca = BUSCA_INVALIDA;

rs.close();

stm.close();


System.err.println ("Erro: "+e);

}

return result_busca;

}

}

Ainda existiro mais 4 pginas JSP em nosso exemplo:


8/11



sucesso_busca.jsp: esta pgina informa ao usurio quea busca foi bem sucedida, apresentando os dados referentes ao nome procurado;

Resultado da Busca

Nome:

Endereo:

Cidade:

Telefone:

voltar

falha_busca.jsp: esta pgina informa ao usurio que o nome buscado no existe nobanco de dados;

no foi encontrado(a)!

voltar

sucesso_insercao.jsp: informa que os dados foram inseridos com sucesso no banco;


9/11



Dados Inseridos com Sucesso!

voltar

falha_insercao.jsp: informa que os dados no foram inseridos porque j existe nobanco um nome igual ao que est se tentando inserir.

j est cadastrado!Entre com outro nome!

voltar

Arquivos de configurao

Finalmente faltam os arquivos de configurao faces-config.xml e web.xml. No arquivo faces-

config.xml ns vamos definir as regras de navegao e o managed-bean relativo nossa classe

AgendaDB. O cdigo est mostrado logo abaixo.

/buscar.jsp

success

/sucesso_busca.jsp

failure

/falha_busca.jsp

/inserir.jsp

success/sucesso_insercao.jsp

failure


10/11



/falha_insercao.jsp

agenda

AgendaDB

session

O primeiro bloco contm uma regra de navegao para a pgina buscar.jsp. Caso o mtodo

buscar() da classe AgendaDB retorne success, ento a pgina chamada ser sucesso_busca.jsp. Caso a

palavra retornada pelo mtodo seja failure, ento a pgina a ser exibida dever ser falha_busca.jsp. O

segundo bloco contm a mesma regra do primeiro, sendo que para a pgina inserir.jsp.

O terceiro bloco refere-se ao managed-bean. No parmetro class, deve ser indicado o nome da

classe Java bean. O nome fica a critrio do desenvolvedor, podendo at mesmo ser o mesmo da classe.

O cdigo do arquivo web.xml pode ser visto abaixo.

javax.faces.STATE_SAVING_METHOD

client

javax.faces.CONFIG_FILES

/WEB-INF/faces-config.xml

com.sun.faces.config.ConfigureListener

Faces Servlet

javax.faces.webapp.FacesServlet

1

Faces Servlet*.jsf

A linha *.jsf presente no ltimo bloco desse arquivo, indica que as

pginas tero a extenso jsf. Por esse motivo que qualquer chamada de uma pgina dentro de outra a

extenso no jsp e sim jsf. Existem outras opes de configurao. Mas que no esto no escopo desse

artigo.


11/11



Dentro do diretrio lib ficam armazenados os arquivos .jar. Como o nosso exemplo acessa um

banco de dados, devemos adicionar a esse diretrio o driver relativo verso do banco que se est

utilizando. Para esse exemplo eu utilizei a verso 8.0 do PostgreSQL (http://www.postgresql.org). Voc

pode obter o driver em http://jdbc.postgresql.org/download.html.

Rodando o exemplo

Com todas as pginas, classe Java e arquivos de configurao criados, podemos finalmente rodar

a nossa aplicao. Podemos fazer isso de duas maneiras. Primeiro, voc pode utilizar as opes que o

Eclipse oferece. Clique com o boto direito em cima do diretrio exemplo-jsf. Em JSF Studio escolha

Register Web Context in Tomcat. Em seguida, inicialize o servidor. Abra o browser e digite

http://localhost:8080/exemplo-jsf/index.jsf.

Voc pode, ao invs de registrar a sua aplicao no Tomcat, gerar o arquivo WAR. Para isso, v

at o diretrio WebContent da sua aplicao e ento digitejar cvf exemplo-jsf .

Em seguida, copie o arquivo WAR para o diretrio webapps do Tomcat. Inicialize o servidor, abra

o browser e digite o mesmo endereo j dito anteriormente.

Concluso

JavaServer Faces uma tecnologia bastante recente para o desenvolvimento de aplicaes WEB

e pouco tem se visto ainda sobre essa tecnologia. Como j mencionado, esse artigo fornece apenas uma

simples introduo sobre o assunto. Existe muito mais a ser dito a respeito dessa tecnologia.

O exemplo aqui mostrado faz uso de pouqussimos recursos oferecidos pelo JSF. Lembre-se que oJSF faz uso do tratamento de eventos (que no foi demonstrado nesse exemplo). Mas acredito queoutros artigos viro e, quem sabe nos prximos poderemos tratar mais a fundo essa tecnologia

Talita Pitanga ([email protected]) estudante do curso de Engenharia de Computao da Universidade Federal doRio Grande do Norte UFRN.

Documents

Tutorial de Jsf