http://www.guj.com.

br

Minha primeira aplicao utilizando Java Server Faces + Glassfish

Este tutorial apresenta de forma simples, como iniciar no desenvolvimento com o framework Java Server faces 1.2, utilizando-se o servidor glassfish como servidor de aplicao e a IDE eclipse. Requisitos deste tutorial: Conhecer o bsico sobre projetos Java EE (Projetos Web, Servlets, JSP). Introduo Ns desenvolvedores de software, estamos assistindo a rpida evoluo da internet e seus sites. Quem se lembra dos CGI e logo depois os Servlets /JSPs, Struts e agora o Java Server Faces que tem disponibilizado ao desenvolvedor uma forma de desenvolver uma aplicao web 2 que prov interao do usurio s aplicaes. O fato que cada vez mais as aplicaes web fornecem interao ao usurio, e, para prover padres de mercado e de desenvolvimento surgiu o framework Java Server Faces. O que o Java Server Faces? O Java Server Faces um framework MVC que prov componentes UI, mecanismos de aes, validadores e toda a estrutura necessria para que seja criada uma aplicao Web complexa. Por que utilizar o Java Server Faces? O framework Java Server Faces foi desenvolvido na tecnologia Java e utiliza-se dos padres de projetos atuais, alm de possuir uma poderosa arquitetura para o desenvolvimento de aplicaes de grande porte com qualidade, e fornece recursos e componentes web 2 tornando assim possvel a criao de produtos interativos. Evoluo do framework Como sabemos, uma mudana radical no surge da noite para o dia, e com o Java Server Faces no seria diferente. As primeiras verses das especificaes do Java Server Faces possuam muitos bugs, mas j dava para ter uma viso do potencial que o framework disponibilizaria para o desenvolvimento de aplicaes JEE. Foram tantas as marteladas no dedo, horas na frente do computador buscando uma soluo para problemas que pareciam to simples. Mas Hoje, podemos dizer que temos uma boa verso do framework, e que podemos sim desenvolver com produtividade uma aplicao que rode 24x7 com compatibilidade entre navegadores e servidores de aplicao. Objetivo Para mostrar que possvel e introduzir esta tecnologia aos desenvolvedores que esto curiosos para conhec-la, iremos desenvolver uma aplicao de login. Requisitos Para desenvolvermos a aplicao deste tutorial, devemos realizar o download da Api JBoss RichFaces, o Glassfish o Eclipse Ganymede. Richfaces: http://www.jboss.org/jbossrichfaces/downloads/ Eclipse:

http://www.guj.com.br http://www.eclipse.org/downloads/ Commons Beanutils, Collections, Logging e Digester http://commons.apache.org Glassfish: https://glassfish.dev.java.net/ Obs: Para realizar a instalao do glassfish necessrio que o apache ant esteja instalado na mquina. Segue abaixo o link do tutorial de como instalar o servidor de aplicao do glassfish(Em Ingls): http://blogs.sun.com/bharath/entry/glassfish_installation_process_the_beginner Mos na Massa Nossa aplicao utilizar a API richfaces, que prov componentes UI ao framework JSF e neste projeto, ser realizado o armazenamento dos dados, porm na memria voltil e no em um banco de dados. Incio Aps configurar o seu eclipse com o glassfish e o Java 5, iremos iniciar o nosso Projeto. Obs: O glassfish j acompanha a implementao da Sun do Java Server Faces, portanto no ser necessrio o download do pacote no site da Sun. Instalando o suporte ao glassfish ao Eclipse Primeiro ser preciso instalar o suporte ao servidor Glassfish ao eclipse, pois por default na distribuio do eclipse, ele no vem com o suporte.

http://www.guj.com.br

ACESSAR O MENU WINDOW -> PREFERENCES DO ECLIPSE NO ITEM SERVER > RUNTIME ENVIORNMENTS SELECIONAR O BOTO ADD

http://www.guj.com.br

SELECIONARAOPODOWNLOADADDITIONALSERVERADAPTERS

http://www.guj.com.br

O SISTEMA IR CARREGAR A CONFIGURAO DO SERVIDOR GLASSFISH. SELECIONLA E SEGUIR OS PASSOS DO BOTO NEXT. SER NECESSRIA A REINICIALIZAO DO ECLIPSE.

http://www.guj.com.br

INICIANDO O PROJETO

Agorairemoscriaronossoprojetowebondeutilizaremosoframeworkdojavaserverfaces.Como ditoanteriormenteoservidorglassfishjpossuiumabilbiotecacomaimplementaodoJavaServer faces,eparaqueestasbibliotecassejaminclusasnaaplicao,precisaremosconfiguraraaplicao comafacetadoprojeto,bastaseguirospassosaseguir:

SELECIONAR O MENU FILE > NEW > OTHER > WEB > DYNAMIC WEB PROJECT

http://www.guj.com.br

ConfiguraroseuprojetocomonomedessWeb,configurarumruntimedoGlassfishv2(versoque vocfezodownload),mdulodaweb2.5econfiguraodefacetadoJavaServerfaces1.2.

http://www.guj.com.br

http://www.guj.com.br

http://www.guj.com.br

SelecionaroradioServerSuppliedJavaServerFacesimplementation,oquefarcomqueoprojeto utilizeabibliotecapadrodoservidorglassfish. Apstudoconfiguradocorretamente,clicaremfinish.

Osegundopassoincluirasbilbiotecasdorichfaceseconfigurarosarquivosxmldeconfiguraodo JavaServerFacesparafazerautilizaodesuasbibliotecas. Aps descompactar o zip de distribuio do richfaces, copiar os arquivos jar richfacesapi 3.2.2.GA.jar, richfacesimpl3.2.2.GA.jare e richfacesui3.2.2.GA.jar contidos na pasta lib para a pastalibdoseuprojeto. Incluatambmosjarsdoapachecommons(logging,collections,beanutilsedigester)

http://www.guj.com.br

http://www.guj.com.br

Colarnapastalibdeseuprojeto. Emseguidavocdeveralteraroarquivoweb.xml,incluindoasseguinteslinhas:
<context-param> <param-name>org.richfaces.SKIN</param-name> <param-value>blueSky</param-value> </context-param> <filter> <display-name>RichFaces Filter</display-name> <filter-name>richfaces</filter-name> <filter-class>org.ajax4jsf.Filter</filter-class> </filter> <filter-mapping> <filter-name>richfaces</filter-name> <servlet-name>Faces Servlet</servlet-name> <dispatcher>REQUEST</dispatcher> <dispatcher>FORWARD</dispatcher> <dispatcher>INCLUDE</dispatcher> </filter-mapping>

http://www.guj.com.br

CriandoaPginadeLogin Oprximopassocriarnossaprimeirapginautilizandoorichfaces,paraisso,devointroduzira estruturabsicadosdocumentosjspdoJavaServerfaces. Noseuprojetocriarodocumentondex.jspecolocaroseguintecontedodentrodosarquivo:

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%> <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%> <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%> <html> <head> <title>Solicitao de Servio Web</title> </head> <body> <f:view> </f:view> </body>

http://www.guj.com.br </html>

1. Taglibs: a. Asduasprimeiraslinhas,soastaglibsobrigatriasdoframeworkJavaServerfaces, elascontmasestruturasbsicasparasetrabalharcomoscomponentesdoJSF. i. AtaglibcorereferenteasfuncionalidadesdoframeworkJSFcomovalidao, conversoemanipulaodeeventos. ii. AtaglibHTMLreferenteaoscomponentesHTML(botes,tabelas,camposde texto,etc). b. Aterceiraequartalinhasoastaglibsdorichfaces,quecontmoscomponentese estruturasbsicasparasetrabalharcomoscomponenteseajax. i. AtaglibrichreferenteaoscomponentesUIricos,comoabas,painis, menus,etc.. ii. AtaglibAjaxreferentesfuncionalidadesdoAjax4JSfparasetrabalharcom chamadasAjax. 2. Atagf:viewEstatagobrigatrianodocumentoJSFelaindicaoincioeofimdodocumento JSF.onvelmaisaltodetagsdoJSF. Criartambmoarquivopainel.jspecolocaroseguintecontedodentrodoarquivo:
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%> <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%> <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%> <html> <head> <title>Solicitao de Servio Web</title> </head> <body> <f:view> <div align="center"> <h:outputText value="Solicitaes de Servio"></h:outputText> <rich:tabPanel style="width: 500px;"> <rich:tab label="Em Andamento"> No existem itens a serem exibidos. </rich:tab> <rich:tab label="Encerradas"> No existem itens a serem exibidos. </rich:tab>

http://www.guj.com.br </rich:tabPanel> </div> </f:view> </body> </html>

Oobjetivodestetutorialnoabordartodososcomponentesdorichfaces,masintroduziros conceitosbsicosparaqueodesenvolvedoratravsdasdocumentaesconsigadesenvolver aplicaesutilizandotodososcomponentesdisponveis. Utilizandooprimeirocomponente Apscriarmosnossaestruturabsicairemosadicionarumpaineldorichfacesnossaaplicao.Este painelserreferenteaoagrupamentodoscamposdelogin:

http://www.guj.com.br

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%> <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%> <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%> <html> <head> <title>Solicitao de Servio Web</title> </head> <body> <f:view> <h:form> <rich:panel id="painelLogin" style="width: 250px;"> <f:facet name="header"> <h:outputText value="Login"></h:outputText> </f:facet> <h:panelGrid columns="2"> <h:column><h:outputText value="Login:"/></h:column> <h:column><h:inputText/></h:column> <h:column><h:outputText value="Senha:"/></h:column> <h:column><h:inputText/></h:column> </h:panelGrid> <h:commandButton value="Logar"></h:commandButton> </rich:panel> </h:form> </f:view> </body> </html>

Explicaodastags: H:formestatagproduzumformulriodoJSF Rich:panelAtagrich:panelincluiumpaineldorichfacesnatela.Todooseucontedodeveficar aninhadodentrodesuatag. F:facetname=header:Estatagindicaqueestamosconfigurandooheaderdenossopainel

http://www.guj.com.br

H:outputtextEstatagproduzumlabelnospadresdoskinutilizado H:panelgridEstatagproduzumatabelaorientadaacolunnas.Oatributocolumnsindicaa quantidadedecolunasqueatabelapossuir,acada2tagscolumnumanovalinhacriada. H:column:Atagcolumnproduzumacolunadentrodopanelgrid h:inputTextAtagh:inputtextproduzumcampodeentradadetexto,aseguir,veremoscomo associarestecampocomosatributosdobackbean. H:commandButton:estatagproduzumbotodeaoparaenviaroformulrio Resultado:

AssociandoumBeanTela

http://www.guj.com.br

Oprximopassocriaracamadacontrollerdanossaaplicaodelogin.OJSFutilizaummodelo diferentedosservlets,struts.Paraentendermosmelhorestesmecanismosvamosfalarsobreociclo devidadoJSF.SegueabaixoaimagemdociclodevidadoJSF.

Ocicloiniciasequandoousuriofazumarequisio. RestauraraviewEstafaseiniciadaquandoousuriofazumarequisio. Nestafase,apginainiciada,osvalidadoresemanipuladoresdeeventosso invocadoseaviewsalvanoFacesContext. **OFacesContextcontmtodainformaodoestadodapgina,necessriaparamanipularos componentesGUIparaarequisioatual. Fase:Atualizarvaloresdomodelo Apsconfirmarqueosdadossovlidosnafaseanterior,osvaloresdos backingbeanssoatualizados/armazenados.Casoosdadosnosejam compatveis,ofluxodociclodevidasegueparaaetapadeexibiraresposta. Fase:Invocarafasedaaplicao

http://www.guj.com.br

Antesdestafase,oscomponentesforamconvertidos,validados,e armazenadosnosbeansentoagora,vocpodeutilizarestesdadospara executararegradenegciodaaplicao.Apsexecutarsuasregrasde negcio,aaplicaopodedirecionarparaumapginacontidanaregrade navegaodofacesconfig. Faser:Renderizararesposta Nestafasearespostarenderizadaaoclienteeoscomponentesso exibidosemseusestadosatuais. AsclassesreferentescamadacontrollernoJavaServerFacessocomumentechamadasdeback beans(ActionsnoStruts). Oprximopassosercriarumbackbeaneassociloaonossoformulriodelogin,paraisto criaremosopacotessweb.bean.CrieumbeanJavasimplescomonomedeLoginBean.
package ssweb.bean; public class LoginBean { private String login; private String senha; /** * Mtodo responsvel por executar a ao de Login * @return String contendo o forward */ public String executarLogin() { if(login.equals("admin") && senha.equals("123")) { return "sucesso"; } return "falha"; } public String getLogin() { return login; } public void setLogin(String login) { this.login = login;

http://www.guj.com.br } public String getSenha() { return senha; } public void setSenha(String senha) { this.senha = senha; } }

Apscriarmosonossobean,sernecessrioconfiguraroarquivofacesconfig.xml.Oeclipseprov umeditordofacesconfig,paraabrilobastadarumduplocliquenoarquivoemsuarvorede navegao.

ApsoeditordoArquivodeConfiguraodoJSFestiveraberto,selecioneaabaManagedBean.E adicioneumnovomanagedbeanutilizandoseoescopoderequest.UtilizeonomeloginBean.

http://www.guj.com.br

Apscriadoobean,sernecessriaacriaodaregradenavegaoquedirecionarousurioodo formulriodeloginparaateladopainel,casoousurioesenhaestejamcorretos. Paracriarestaconfigurao,selecionenoeditordoArquivodeConfiguraodoJSFaabasourcee incluanoarquivoaseguinteconfigurao:

<navigation-rule> <from-view-id>/index.jsp</from-view-id> <navigation-case> <from-outcome>sucesso</from-outcome> <to-view-id>/painel.jsp</to-view-id> </navigation-case> <navigation-case> <from-outcome>falha</from-outcome> <to-view-id>/index.jsp</to-view-id> </navigation-case> </navigation-rule>

As regras de navegao definem as regras de mudanas de pginas que podem ocorrer no framework. Estas configuraes so obrigatrias e devem ser configuradas corretamente. Para criaodeumaregrautilizadaatagnavigationrule.Atagfromviewiddefineaqualpginaaregra

http://www.guj.com.br

pertenceecadanavigationcasecasereferenteumfluxoaserdirecionado...Estesfluxossoo retornostringdomtodoreferentesaesdocommandButtonqueveremosaseguir. ConfigurandooJSPpararefletiraaodeLogin. Abranovamenteoarquivoindex.jspealtereseucdigofontepara:

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%> <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%> <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%> <html> <head> <title>Solicitao de Servio Web</title> </head> <body> <f:view> <h:form> <rich:panel id="painelLogin" style="width: 250px;"> <f:facet name="header"> <h:outputText value="Login"></h:outputText> </f:facet> <h:panelGrid columns="2"> <h:column><h:outputText value="Login:"/></h:column> <h:column><h:inputText value="#{loginBean.login}"/></h:column> <h:column><h:outputText value="Senha:" value="#{loginBean.senha}"/></h:column> <h:column><h:inputText/></h:column> </h:panelGrid> <h:commandButton action="#{loginBean.executarLogin}"></h:commandButton> </rich:panel> </h:form> </f:view> </body> </html> value="Logar"

Agoraexecuteaaplicaonovamente,forneaousurioadminesenha123eexecuteaaode login. Concluso EstefoiumtutorialrpidodecomoiniciarnodesenvolvimentodeaplicaesJSF,esperoquepossa ter aberto a primeira porta para que voc deslanche no desenvolvimento com este framework e venhaacriarnovostutoriaisparaacomunidadeJava.

http://www.guj.com.br

Vocpodevisualizarexemplosdeoutroscomponentesem: http://livedemo.exadel.com/richfacesdemo Eincluirnapginapainel.jsposcdigosfontes. AdemirConstantino