JavaServer Faces: A mais nova tecnologia Java para desenvolvimento WEB

(1)

htt p: / / www.guj .com .br

Ja va Se r ve r Fa ce s: A m a is n ova

t e cn ologia Ja va pa r a de se n volvim e n t o W EB

Ta lit a Pit a n ga

Conheça um pouco sobre a m ais nova t ecnologia para desenvolvim ent o de aplicações WEB:

JavaServer Faces.

I n t r odu çã o

As tecnologias voltadas para o desenvolvim ento de aplicações WEB têm m udado constantem ente. Com o sabem os, inicialm ente os sites possuíam apenas conteúdo estático, ou sej a, o conteúdo de um a página não podia ser m odificado em tem po de execução. Depois, os sites passaram a oferecer páginas com conteúdos dinâm icos e personalizados. Diversas tecnologias estão envolvidas no desenvolvim ento das aplicações WEB com o, por exem plo, CGI ( Com m on Gat eway I nt erface) , Servlet s e JSP ( Java Server Pages) .

A prim eira tecnologia voltada para a construção de páginas dinâm icas foi a CGI . Os program as CGI podem ser escritos em qualquer linguagem de program ação. Eles, porém , apresentam problem as de portabilidade e escalabilidade, além de m esclarem as regras de negócio com a visualização. Vale salientar que um servidor que usa este tipo de tecnologia pode t er seu desem penho com prom et ido, um a vez que cada solicitação recebida de um a CGI requer a criação de um novo processo.

Em seguida vieram os servlets. Sim ilarm ente às CGI s, servlets são pequenos program as feitos em Java que encapsulam algum a funcionalidade inerente à sua aplicação WEB. Diferentem ente das CGI s, servlets são obj etos Java que não precisam ser executados em outro processo: o processam ento é executado dentro de um a thread do processo do servidor. No entanto, eles ainda não resolvem o problem a da separação das regras de negócio da visualização, dificultando a m anutenção.

Posteriorm ente surgiram as páginas JSP. Elas são facilm ente codificadas e produzem conteúdos reutilizáveis. Assim com o os servlets, as JSPs tam bém não resolvem o problem a da m anutenção das aplicações.

Esse problem a só foi resolvido quando com eçou a se aplicar os design patterns no desenvolvim ento das páginas. No caso das t ecnologias para desenvolvim ento WEB usando Java, o design pattern utilizado é o MVC ( Model- View- Controller) . Se você não sabe o que é MVC, fique tranqüilo!! Falarem os um pouco sobre esse padrão m ais adiante. Mas você pode encontrar algo sobre esse patt ern bem aqui pertinho: ht t p: / / www.guj .com .br/ forum / viewtopic.php?t = 7228&highlight = m vc.

Com a grande utilização dos patterns, principalm ente no “ m undo Java” , com eçaram a surgir diversos fram eworks para auxiliar no desenvolvim ent o de aplicações WEB. Posso apostar que a m aioria de vocês j á ouviu falar em St rut s ou WebWork.

(2)

O qu e é Ja va Se r ve r Fa ce s?

JSF é um a tecnologia que incorpora características de um fram ework MVC para WEB e de um m odelo de interfaces gráficas baseado em eventos. Por basear- se no padrão de proj et o MVC, um a de suas m elhores vantagens é a clara separação entre a visualização e regras de negócio ( m odelo) .

A idéia do padrão MVC é dividir um a aplicação em três cam adas: m odelo, visualização e controle. O m odelo é responsável por represent ar os obj etos de negócio, m anter o estado da aplicação e fornecer ao controlador o acesso aos dados. A visualização representa a interface com o usuário, sendo responsável por definir a form a com o os dados serão apresentados e encam inhar as ações dos usuários para o controlador. Já a cam ada de controle é responsável por fazer a ligação entre o m odelo e a visualização, além de interpretar as ações do usuário e as traduzir para um a operação sobre o m odelo, onde são realizadas m udanças e, então, gerar um a visualização apropriada.

O Pa dr ã o M VC se gu n do JSF

No JSF, o controle é com posto por um servlet denom inado FacesServlet, por arquivos de configuração e por um conj unto de m anipuladores de ações e observadores de eventos. O FacesServlet é responsável por receber requisições da WEB, redirecioná- las para o m odelo e ent ão rem eter um a resposta. Os arquivos de configuração são responsáveis por realizar associações e m apeam entos de ações e pela definição de regras de navegação. Os m anipuladores de eventos são responsáveis por receber os dados vindos da cam ada de visualização, acessar o m odelo, e então devolver o resultado para o FacesServlet.

O m odelo representa os obj etos de negócio e executa um a lógica de negócio ao receber os dados vindos da cam ada de visualização. Finalm ente, a visualização é com posta por com ponent t r ees ( hierarquia de com ponent es UI ) , tornando possível unir um com ponente ao outro para form ar interfaces m ais com plexas. A Figura 1 m ost ra a arquitet ura do JavaServer Faces baseada no m odelo MVC.

(3)

Ca r a ct e r íst ica s e Va n t a ge n s

JavaServer Faces oferece ganhos no desenvolvim ento de aplicações WEB por diversos m otivos: • Perm ite que o desenvolvedor crie UI s através de um conj unto de com ponentes UI s

pré-definidos;

• Fornece um conj unto de tags JSP para acessar os com ponentes; • Reusa com ponentes da página;

• Associa os eventos do lado cliente com os m anipuladores dos eventos do lado servidor ( os com ponentes de entrada possuem um valor local representando o est ado no lado servidor) ;

• Fornece separação de funções que envolvem a construção de aplicações WEB.

Em bora JavaServer Faces forneça tags JSP para representar os com ponentes em um a página, ele foi proj etado para ser flexível, sem lim itar- se a nenhum a linguagem m arkup em particular, nem a protocolos ou tipo de clientes. Ele tam bém perm ite a criação de com ponentes próprios a partir de classes de com ponent es, conform e m encionado ant eriorm ent e.

JSF possui dois principais com ponentes: Java API s para a representação de com ponentes UI e o gerenciam ento de seus estados, m anipulação/ observação de eventos, validação de entrada, conversão de dados, internacionalização e acessibilidade; e taglibs JSP que expressam a interface JSF em um a página JSP e que realizam a conexão dos obj etos no lado servidor.

É claro que existe m uito m ais a ser dito sobre JavaServer Faces. Esse artigo apenas fornece um a visão geral, m as espero t er criado um a certa curiosidade a respeito dessa nova tecnologia.

D ow n loa d e I n st a la çã o

JavaServer Faces pode ser usado em conj unt o com o Sun JavaTM_{System Application Server -} Plat aform Edition 8, com o JavaTM_{Web Services Developer Pack ( Java WSDP) ou ainda com outro} Cont ainer, t al com o o Tom cat .

O download de JavaServer Faces pode ser obtido em

ht t p: / / j ava.sun.com / j 2ee/ j avaserverfaces/ download.ht m l. Caso você ainda não t enha o Tom cat , você pode fazer o download em ht t p: / / j akart a.apache.org/ t om cat.

I nstale o Tom cat e logo em seguida descom pacte o arquivo do JavaServer Faces. Acrescente ao seu Classpath o diretório lib do JavaServer Faces. Copie qualquer arquivo .WAR do diretório sam ples do JavaServer Faces para o diretório webapps do seu servidor Tom cat. Se o seu servidor não estiver rodando, inicialize- o.

(4)

Vam os agora ao nosso exem plo.

I m ple m e n t a n do u m e x e m plo e m JSF

Será um a aplicação bem sim ples para dem onstrar o uso dessa nova tecnologia. O nosso exem plo consiste de um a página inicial contendo 2 links: um para a inserção de dados e outro para a busca.

A página de inserção consist e de um form ulário onde o usuário ent rará com o nom e, endereço, cidade e telefone. Os dados serão guardados em um banco de dados ( no m eu caso, eu uso o PostgreSQL) para um a posterior consulta. Se o nom e a ser inserido j á existir no banco de dados, um a m ensagem será exibida inform ando ao usuário que o nom e j á está cadast rado ( no nosso exem plo, o nom e é a chave prim ária da tabela) . Caso contrário, um a m ensagem de sucesso será exibida ao usuário.

A busca se dará pelo nom e da pessoa. Se o nom e a ser buscado estiver cadastrado no banco, então um a página com os dados relativos ao nom e buscado serão exibidos. Caso contrário, será inform ado ao usuário que o nom e buscado não exist e no banco.

Para a criação 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) );

Vam os utilizar a I DE eclipse (ht t p: / / www.eclipse.org/) para o desenvolvim ento deste exem plo devido à existência de um plugin para JSF (ht t p: / / www.exadel.com / product s_j sfst udio.htm) , t ornando o desenvolvim ent o m ais fácil.

No eclipse, escolha a opção New Proj ect do m enu File. Depois, escolha JSF Pr oj e ct. Nom eie seu proj et o com o exem plo- j sf. Com o seu proj et o criado, vá at é o diret ório WebCont ent. As páginas JSP devem ficar arm azenadas nesse diretório.

O código da página index.j sp ficará com o m ost rado abaixo.

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <html>

<head>

<title>Exemplo JSF</title> </head>

<h1>Agenda</h1>

<br>

(5)

<h:outputLink value="inserir.jsf">

<f:verbatim>Inserir</f:verbatim> </h:outputLink>

<h:outputLink value="buscar.jsf">

<f:verbatim>Buscar</f:verbatim> </h:outputLink>

</h3>

</center> </h:form>

</f:view>

</body> </html>

Algum as tags aqui m erecem ser com entadas: • < h: form > gera um form ulário.

• < h: out put Link> cria um link para a página definida pelo cam po value. O t ext o que com põe o link é colocado utilizando- se a tag < f: verbatim > .

O usuário terá a opção de buscar ou inserir dados. Os códigos das páginas de busca e inserção são m ostrados a seguir, respectivam ente.

bu sca r .j sp

<h:form>

<center><h2> Busca </h2></center>

<br>

Digite o nome:

<h:inputText id="nome" value="#{agenda.nome}"/>

<h:commandButton value="OK" action="#{agenda.buscar}"/> </h:form>

<br>

<h:outputLink value="index.jsf">

<f:verbatim>voltar</f:verbatim> </h:outputLink>

</f:view>

</body> </html>

in se r ir .j sp

<h:form>

<center><h2> Inserção </h2></center>

<br>

<h3>Entre com os dados abaixo</h3>

<table>

<tr>

<td>

<h:inputText value="#{agenda.nome}"/>

</td>

</tr>

<tr>

<td>Endereço:</td>

<td>

<h:inputText value="#{agenda.endereco}"/>

</td>

</tr>

(6)

<td>Cidade:</td>

<td>

<h:inputText value="#{agenda.cidade}"/>

</td>

</tr>

<tr>

<td>Telefone:</td>

<td>

<h:inputText value="#{agenda.telefone}"/>

</td>

</tr> </table> <p>

<h:commandButton value="Inserir" action="#{agenda.inserir}"/> </p>

</h:form>

<br>

<f:verbatim>voltar</f:verbatim>

</h:outputLink> </f:view>

</body> </html>

A tag < h: inputText> cria um a caixa de texto onde o valor digitado é guardado em value. Para criar um botão, é utilizada a tag < h: com m andButton> . O label do botão é colocado em value. Act ion determ ina qual a ação que o botão deve tom ar. Na página buscar.j sp, ao clicar no botão OK, o m étodo buscar( ) da classe AgendaDB é cham ado.

O código da classe bean AgendaDB com os m étodos gett ers e setters das variáveis nom e, endereço, cidade e telefone e com os m étodos inserir e buscar ficará conform e m ostrado abaixo. É nesse arquivo onde a conexão com o banco é feita. Nas aplicações JSF, os beans são usados para que dados possam ser acessados através de um a página. O código j ava referente a essa classe deve estar localizado no diret ório JavaSource. Já que est am os ut ilizando um Java bean, um m anaged- bean deverá ser criado no arquivo faces- config.xm l que está present e no diretório WEB- I NF.

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) {

(7)

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;

} catch (SQLException e) {

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();

} catch (SQLException e) {

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

return result_busca; }

}

(8)

• sucesso_busca.j sp: esta página inform a ao usuário que

a busca foi bem sucedida, apresentando os dados referentes ao nom e procurado; <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <html>

<body>

<f:view> <h:form>

<center><h2> Resultado da Busca </h2></center>

<br>

<table>

<tr>

<td>

<h:outputText value="#{agenda.nome}"/>

</td> </tr> <tr>

<td>Endereço:</td>

<td>

<h:outputText value="#{agenda.endereco}"/>

</td> </tr> <tr>

<td>Cidade:</td>

<td>

<h:outputText value="#{agenda.cidade}"/>

</td> </tr> <tr>

<td>Telefone:</td>

<td>

<h:outputText value="#{agenda.telefone}"/>

</td> </tr> </table>

</h:form>

<br>

</h:outputLink>

</f:view> </body> </html>

• falha_busca.j sp: esta página inform a ao usuário que o nom e buscado não existe no banco de dados;

não foi encontrado(a)! </h3>

</h:form> <br>

<h:outputLink value="buscar.jsf">

</h:outputLink>

• sucesso_insercao.j sp: inform a que os dados foram inseridos com sucesso no banco;

(9)

Dados Inseridos com Sucesso! </h:form>

<br>

</h:outputLink> </f:view>

</body> </html>

• falha_insercao.j sp: inform a que os dados não foram inseridos porque j á existe no banco um nom e igual ao que está se t entando inserir.

<body>

<f:view> <h:form> <h3>

já está cadastrado!Entre com outro nome! </h3>

</h:form> <br>

<h:outputLink value="inserir.jsf">

</h:outputLink>

Ar qu ivos de con figu r a çã o

Finalm ente faltam os arquivos de configuração faces- config.xm l e w eb.xm l. No arquivo

faces-config.xm l nós vam os definir as regras de navegação e o m anaged- bean relativo à nossa classe

AgendaDB. O código está m ostrado logo abaixo.

<?xml version="1.0"?>

<!DOCTYPE faces-config PUBLIC

"-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.0//EN"

"http://java.sun.com/dtd/web-facesconfig_1_0.dtd"> <faces-config>

<navigation-rule>

<from-view-id>/buscar.jsp</from-view-id> <navigation-case>

<from-outcome>success</from-outcome>

<to-view-id>/sucesso_busca.jsp</to-view-id> </navigation-case>

<navigation-case>

<from-outcome>failure</from-outcome> <to-view-id>/falha_busca.jsp</to-view-id> </navigation-case>

</navigation-rule>

<navigation-rule>

<from-view-id>/inserir.jsp</from-view-id> <navigation-case>

<from-outcome>success</from-outcome>

<to-view-id>/sucesso_insercao.jsp</to-view-id> </navigation-case>

<navigation-case>

(10)

<to-view-id>/falha_insercao.jsp</to-view-id> </navigation-case>

</navigation-rule>

<managed-bean>

<managed-bean-name>agenda</managed-bean-name> <managed-bean-class>AgendaDB</managed-bean-class> <managed-bean-scope>session</managed-bean-scope> </managed-bean>

</faces-config>

O prim eiro bloco contém um a regra de navegação para a página buscar.j sp. Caso o m ét odo buscar( ) da classe AgendaDB retorne “ success” , ent ão a página cham ada será sucesso_busca.j sp. Caso a palavra retornada pelo m étodo sej a “ failure” , então a página a ser exibida deverá ser falha_busca.j sp. O segundo bloco contém a m esm a regra do prim eiro, sendo que para a página inserir.j sp.

O terceiro bloco refere- se ao m anaged- bean. No parâm etro class, deve ser indicado o nom e da classe Java bean. O nom e fica a critério do desenvolvedor, podendo até m esm o ser o m esm o da classe.

O código do arquivo web.xm l pode ser visto abaixo.

<?xml version="1.0"?>

<!DOCTYPE web-app PUBLIC

"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">

<web-app>

<context-param>

<param-name>javax.faces.STATE_SAVING_METHOD</param-name>

<param-value>client</param-value>

</context-param> <context-param>

<param-name>javax.faces.CONFIG_FILES</param-name>

<param-value>/WEB-INF/faces-config.xml</param-value>

</context-param>

<listener-class>com.sun.faces.config.ConfigureListener</listener-class>

</listener>

<servlet-name>Faces Servlet</servlet-name>

<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>

<load-on-startup> 1 </load-on-startup>

</servlet>

<servlet-mapping>

<servlet-name>Faces Servlet</servlet-name>

<url-pattern>*.jsf</url-pattern> </servlet-mapping>

</web-app>

(11)

Dentro do diretório lib ficam arm azenados os arquivos .j ar. Com o o nosso exem plo acessa um banco de dados, devem os adicionar a esse diretório o driver relativo à versão do banco que se est á utilizando. Para esse exem plo eu utilizei a versão 8.0 do PostgreSQL (ht t p: / / www.post gresql.org) . Você pode obter o driver em http: / / j dbc.post gresql.org/ download.htm l.

Roda n do o e x e m plo

Com todas as páginas, classe Java e arquivos de configuração criados, podem os finalm ente rodar a nossa aplicação. Podem os fazer isso de duas m aneiras. Prim eiro, você pode utilizar as opções que o Eclipse oferece. Clique com o botão direito em cim a do diretório exem plo- j sf. Em JSF St udio escolha

Regist er Web Cont ext in Tom cat. Em seguida, inicialize o servidor. Abra o browser e digite

http: / / localhost: 8080/ exem plo- j sf/ index.j sf.

Você pode, ao invés de regist rar a sua aplicação no Tom cat , gerar o arquivo WAR. Para isso, vá até o diretório WebCont ent da sua aplicação e então digite

j a r – cvf e x e m plo- j sf .

Em seguida, copie o arquivo WAR para o diretório webapps do Tom cat. I nicialize o servidor, abra o browser e digite o m esm o endereço j á dito anteriorm ente.

Con clu sã o

JavaServer Faces é um a t ecnologia bastante recent e para o desenvolvim ento de aplicações WEB e pouco tem se visto ainda sobre essa tecnologia. Com o j á m encionado, esse artigo fornece apenas um a sim ples introdução sobre o assunto. Existe m uito m ais a ser dito a respeito dessa tecnologia.

O exem plo aqui m ostrado faz uso de pouquíssim os recursos oferecidos pelo JSF. Lem bre- se que o JSF faz uso do tratam ento de eventos ( que não foi dem onstrado nesse exem plo) . Mas acredito que outros artigos virão e, quem sabe nos próxim os poderem os trat ar m ais a fundo essa tecnologia