JSFcomAjaxusandoICEfaces

AprendaautilizarestapoderosaAPIparaconstruiraplicaes webcomsuporteaoAjax
FRANCISCOCALAAXAVIER Existe m vrias im ple m e n t ae s d a es p ecificao JavaServer Faces (JSF), co m o a im ple m e n t a o d e refer ncia d a Sun e o Apac he MyFaces. H t a m b m divers o s co m p o n e n t e s q ue p o d e m se r agrega d o s im ple m e n t ao JSF u s a d a, oferece n d o rec u r s o s a dicio nais, al m d o s p revis to s p ela es pecificao JSF. Exe m plos s o o To m a h awk d o MyFaces e o ICEfaces. O ICEFaces u m conj u n t o d e co m p o ne n te s o pe n s o u rce, d e se nvolvido p ela ICESoft. Te m p o r finalida de integra r a s tec n ologias JSF e Ajax d e for m a n a tiva, o u s eja, t o d o s o s co m p o n e n te s d o ICEfaces s o co m p o n e n te s JSF q u e d o s u p o r t e ao Ajax. Nes te a r tigo a p re se n t a re m o s o ICEfaces, d e s de s u a integrao co m o Eclipse a t u m exe m plo inicial u tili za n d o es t a t ec nologia.

Instalando os plug-ins
Para co n s t r uir u m a a plicao web co m ICEfaces n eces s rio a co nfigurao d e alg u n s s e rvlet s n o d e sc ritor web (w eb.x ml), a colocao d o s JARs d o ICEfaces n o dire t rio lib d a a plicao, be m co m o a d eclarao d a t aglib corre s p o n d e n te n o cabealh o d a s p gina s JSP. Existe u m ti m o pl ug - in q ue agrega o s u p o r t e a o ICEfaces n o Eclipse e realiz a t o d a s es t a s t a refa s. Este p o d e s er o b ti do n o site .icefaces.org / m ai n / d ow nloa d s / o s - d ow nloa d s.iface e se cha m a ICEfaces Eclip se - JSF. Na Listage m 1 es t p a r te d o c digo d o d e scritor web (web.x ml) gera d o p o r es s e pl ug - in. Obse rve q u e exis te u m n ovo m a p ea m e n t o, o *.iface, q u e a p o n t a p a r a o s ervlet PersistentFacesServlet, q u e o s e rvlet d o ICEfaces. Note q u e ain d a n eces s ria a co nfigu rao d o m a p e a m e n t o *.faces, a t r avs d o q u al o ICEfaces invoca o FacesServlet (o s ervlet d e co n t role d o JSF) a p s te r recebi d o a re q uisio. Por s u a ve z o JSF invoca a p gina JSP (veja o es q ue m a n a Figura 1 ).

Figura1.FluxodechamadasdoICEFaces

Para ins t alar es te pl ug - in n eces s rio s eg uir es te s p a s s o s: 1. Ins t ale o Eclipse 3.2 co m o WTP (Web Tools Project) q u e p o d e se r o b ti do e m eclipse.org / w e btools / m ai n.p h p . 2. Ap s a ins t alao d o Eclipse /WTP n eces s rio ins talar o JSF Tools, u m pl ug in q u e agrega a o Eclipse o s u p o r te ao JavaServer Faces. Para isto, exec u te o co m m a n d o Help|Soft w are Updates>Find a n d Install. Clique e m Search for n e w Features to Install e d e p ois e m Next. Aparecer u m a tela co m o a d a Figura 2 . Cliq ue e m Web Tools Platfor m (WTP) Updates e d e p ois e m Finish. 3. Co m o JSF Tools ins t ala d o ins t ale o pl ug - in q ue d a r s u p o r te a o ICEfaces. Para isto, b aixe o a r q uivo ICEfaces - v 1.5.3 - Eclipse - JSF.zip (ou vers o m ais rece n te) d e icefaces.org / m ai n / do w nloads / os - do w nloads.iface. Observe q ue n e s t e site o leitor p o d e o b te r o s a r q uivos d o p r p rio ICEfaces se p a ra d a m e n t e, fa z e n d o o d ow nloa d d o ICEfaces - 1.5.3 - bin.zip (no n eces s rio fa ze r isto p a r a e s te exe m plo). Desco m p ac te o ar q uivo ZIP o b ti d o e co pie o s a r q uivos d e sco m p ac t a d o s p a ra a p a s t a o n d e se e nco n t r a o Eclipse. Pro n t o. Ap s te r seg ui d o es tes p a s s o s voc te r u m Eclipse co m s u p o r te a o ICEfaces.

Figura2.Seleodepacotesainstalarnoeclipse

Criando um projeto com suporte ao ICEfaces

Veja m o s ag ora co m o criar u m a a plicao JSF co m Ajax, u s a n d o o ICEfaces, co m o s pl ug - ins in s t ala d o s. Inicial me n t e n ece s s rio criar u m n ovo Dyna mic Web Project. Na rea Config ur ations d eve se r s elecio na d o ICEfaces Project. Ap s algu n s cliques e m n ex t s er a p r e se n t a d a a d a Figura 3 o n d e p o s svel escolher q u ais bibliotecas s o n eces s rias a o p r oje t o. Selecio ne ICEFaces Libraries. Para criar u m a p gina JSP co m s u p o r te ao ICEfaces ba s t a criar u m n ovo JSP e, n o m o m e n t o d a criao, infor m a r q ue d e s eja u tiliza r o te m pla te ICEfaces. Ap s es tes p a s s o s o pl ugin t er co nfigu ra d o o d e scritor web (web.x ml), dis p o nibiliza d o as biblioteca s d o ICEfaces e cria d o u m JSP co m as tag s d o JSF e d o ICEfaces d eclara d a s.

Um Exemplo prtico
Noss o exe m plo co n sis te e m u m carrin h o d e co m p r a s. A Figura 4 a p re se n t a a tela

d a a plicao. Observe q ue s o m o s t ra d o s algu n s ite n s. Qua n d o o u s u rio clica n o b o t o a dicio na r p r xi m o ao ite m, e s te a p a rece n o carri n h o d e co m p r a s.

Figura3.AdicionandoasbibliotecasdoICEFacesaonossoprojeto

Figura4.Aparnciadaaplicaoexemplo.

Na Listag e m 2 m o s t r a d o o c digo d a p gina li vraria.jsp co m a u tiliz ao d e d ois h:dataTable s. Um p a r a a p re se n t ao d o es t o q ue e o u t r o p a r a a p res e n t ao d o s ite n s d o carrin h o. Na Listag e m 3 p o s svel ver o c digo d o Manage d Bean LojaMB. Esta clas se p o s s ui o s m t o d o s adicionarCarrinho e rem o v erCarrinh o . Obse rve q u e q u a n d o o m t o d o adicionarCarrinho execu t a d o o ite m n o q u al o u s u rio clico u A dicion ar a dicio n a d o n a lis ta seleciona d o s e re m ovido d a lista e s t o q ue. O co n t r rio oco r r e co m o m t o d o rem o v erCarrinh o . Os o u t r o s d ois m t o d o s: g etLivro sEstoqu e e g etLivro sSelecionado s s o u tiliza d o s p a r a p r ee nc her o s d a t aTable s u tili za d o s n o js p. Na Listag e m 4 a p re se n t a m o s a co nfigur ao final d o face s - co nfig.x ml e n a Listag e m 5 a p re se n t a m o s a clas se Livro q ue u tiliza m o s n o Manage d Bean LojaMB. Qu a n d o e s t a a plicao for exec u ta d a o leitor ob se rvar q u e a o clicar e m a dicio n ar o u re m over algu m ite m o b r ow se r n o realiz a re q uisie s. Isto p o r q u e n o s s a a plicao p o s s ui s u p o r te ao AJAX.

Adicionando Drag-and-Drop

Ire m o s ago r a a dicion ar o co m p o r t a m e n t o ar ra s t a r e s olta r ao s ite n s d o n o s s o car rin h o. Para is to n ece s s rio a diciona r o s m t o d o s d a Listage m 6 n a clas se LojaMB. A f u no d o m t o d o g etLivro re t or n a r o livro co m d e t er mi na d o n o m e. Reco me n d a m o s ao leitor a inclus o d e s t e m t o d o e m u m a clas s e d e n egcio p r p ria. Inclu m o s es te n a clas se LojaMB p a ra t o r n a r o exe m plo m ais si m ples. Na Listag e m 6 existe t a m b m o m t o d o dragListen er. A fu no d e s te m t o d o re s p o n d e r a eve n t o s q u a n d o o u s u rio ar ra s t a u m objeto n a tela. O Drag - a n d - Dro p d o ICEfaces co n sis te e m e nvolver o q ue se d e s eja a rr a s t a r co m u m a t ag < i c e:panelGroup draggable = true > e a dicio na r u m a t ag < i c e:panelGroup dropTarget = true > n o ele m e n t o q ue for o p o n t o d e p a r a d a d o a r r a s t a r s oltar. No n o s s o cas o o carrin h o d e co m p r a s. A u tilizao d e s t a s t ag s p o d e se r vista n a Listage m 7 o n d e m o s t r a m o s o c digo co m plet o d a li vrariadragdrop.jsp. Des taca m o s e m n egrito o m eca nis m o d o d r ag - a n d - d r o p. No q u a d r o Outros Exe mplo s c o m ICEface s a p re se n t a d o co m o b u sca r m ais info r m aes s o b re o u s o d o s d e m ais co m p o n e n t e s d o ICEfaces. No q u a d r o Outros Comp on ente s ICEface s feito u m res u m o d o s co m p o n e n t e s p ri ncip ais d o ICEfaces.

Figura5.UmLivrosendoarrastadoaocarrinhodecompras.

Concluses
O ICEfaces u m a API b a s t a n t e p o d e r o s a. Trat a - se d e u m co nj u n t o d e co m p o n e n t e s d o JavaServer Faces e p r ov, d e for m a fcil, a integrao d e s te co m o AJAX. Pos s ui co m p o n e n t e s be m s ofis tica d o s co m o o cale n d rio, aba s, rvore, p o p - u p, e a t m e s m o d r ag - a n d - d r o p. Integra - se be m co m o ide s co m o Eclipse e Netbea n s . Em re s u m o, co m ICEfaces p o s svel co n s t r uir a plicaes co m vrios rec u r s o s s ofistica d o s d e m a n eira m ais r pi da d o q ue q u a n d o se u tiliz a a m a n eira co nve ncio n al.
Listagem 1. Cdigo completo do web.xml gerado pelo plugin.
<webappid="WebApp_ID"> <displayname>calendario</displayname> <servlet> <servletname>FacesServlet</servletname> <servletclass>javax.faces.webapp.FacesServlet</servletclass> <loadonstartup>1</loadonstartup> </servlet> <servlet> <servletname>PersistentFacesServlet</servletname> <servletclass> com.icesoft.faces.webapp.xmlhttp.PersistentFacesServlet </servletclass> <loadonstartup>1</loadonstartup> </servlet> <servlet> <servletmapping> <servletname>PersistentFacesServlet</servletname> <urlpattern>/xmlhttp/*</urlpattern> </servletmapping> <servletmapping>

<servletname>PersistentFacesServlet</servletname> <urlpattern>*.iface</urlpattern> </servletmapping> <servletmapping> <servletname>PersistentFacesServlet</servletname> <urlpattern>*.faces</urlpattern> </servletmapping> </webapp>

Listagem 2. livraria.jsp
<%@tagliburi="http://java.sun.com/jsf/html"prefix="h"%> <%@tagliburi="http://java.sun.com/jsf/core"prefix="f"%> <%@tagliburi="http://www.icesoft.com/icefaces/component"prefix="ice"%> <f:view> <html> <head> <title>ICEfacepage</title> <linkrel="stylesheet"type="text/css"href="estilo.css"> </head> <body> <ice:form> <h:panelGridcolumnClasses="colunas"width="100%"columns="1"> <h:dataTablestyleClass="grid"frame="hsides" value="#{loja.livrosEstoque}"var="estoque"> <f:facetname="header"> <h:outputTextvalue="LivrosnoEstoque:"/> </f:facet> <h:column> <h:outputTextvalue="#{estoque.titulo}"/> </h:column> <h:column> <h:graphicImagevalue="#{estoque.imagem}"/> </h:column> <h:column> <h:commandButtonactionListener="#{loja.adicionarCarrinho}"value="Adicionar"/> </h:column> </h:dataTable> <h:dataTablestyleClass="grid"frame="hsides" columnClasses="colunas"value="#{loja.livrosSelecionados}" var="selecionados"> <f:facetname="header"> <h:outputTextvalue="LivrosnoCarrinho:"/> </f:facet> <h:column> <h:outputTextvalue="#{selecionados.titulo}"/> </h:column> <h:column> <h:graphicImagevalue="#{selecionados.imagem}"/> </h:column> <h:column> <h:commandButtonactionListener="#{loja.removerCarrinho}"value="Remover"/> </h:column> </h:dataTable> </h:panelGrid> </ice:form> </body> </html> </f:view>

Listagem 3. MagagedBean: LojaMB.java

packageorg.javacerrado.icefaces; importjava.util.*; importjavax.faces.event.*; importjavax.faces.model.*;

publicclassLojaMB{ privateListestoque=newArrayList(); privateListselecionados=newArrayList(); privateDataModellivrosEstoque; privateDataModellivrosSelecionados; publicLojaMB(){ //Criadadosipotticosparaoexemplo Livrolivro1=newLivro("GrandeSertoVeredas","imagens/veredas.jpg"); Livrolivro2=newLivro("Neve","imagens/neve.jpg"); Livrolivro3=newLivro("OCasamento","imagens/casamento.jpg"); estoque.add(livro1); estoque.add(livro2); estoque.add(livro3); } publicDataModelgetLivrosEstoque(){ livrosEstoque=newListDataModel(estoque); returnlivrosEstoque; } publicDataModelgetLivrosSelecionados(){ livrosSelecionados=newListDataModel(selecionados); returnlivrosSelecionados; } publicvoidadicionarCarrinho(ActionEventevent){ Livrolivro=(Livro)livrosEstoque.getRowData(); selecionados.add(livro); estoque.remove(livro); } publicvoidremoverCarrinho(ActionEventevent){ Livrolivro=(Livro)livrosSelecionados.getRowData(); estoque.add(livro); selecionados.remove(livro); } }

Listagem 4. Configurao do Managed Bean no faces-config.xml

<facesconfig> <managedbean> <managedbeanname>loja</managedbeanname> <managedbeanclass>org.javacerrado.icefaces.LojaMB</managedbeanclass> <managedbeanscope>session</managedbeanscope> </managedbean> </facesconfig>

Listagem 5. Classe Livro

packageorg.javacerrado.icefaces; publicclassLivro{ privateStringtitulo; privateStringimagem;

//gettersesettersomitidos publicbooleanequals(Objectobj){ if(objinstanceofLivro){ Livrolivro=(Livro)obj; returntitulo.equals(livro.getTitulo()); }else{ returnfalse; } } }

Listagem 6. Mtodos adicionados na classe LojaMB para caracterstica Drag&Drop

privateLivrogetLivro(Stringtitulo){ for(Livrolivro:estoque){ if(livro.getTitulo().equals(titulo)){ returnlivro; } } returnnull; } publicvoiddragListener(DragEventitem){ if(item.getEventType()==DndEvent.DROPPED){ Stringtitulo=((HtmlPanelGroup)item.getComponent()).getDragValue().toString(); Livrolivro=getLivro(titulo); selecionados.add(livro); estoque.remove(livro); } }

Listagem 7. Cdigo do livrariadragdrop.jsp

<%@tagliburi="http://java.sun.com/jsf/html"prefix="h"%> <%@tagliburi="http://java.sun.com/jsf/core"prefix="f"%> <%@tagliburi="http://www.icesoft.com/icefaces/component"prefix="ice"%> <f:view> <html> <head> <title>ICEfacepage</title> <linkrel="stylesheet"type="text/css"href="estilo.css"> </head> <body> <ice:form> <h:panelGridcolumnClasses="colunas"width="100%"columns="1"> <h:dataTablestyleClass="grid"frame="hsides" value="#{loja.livrosEstoque}"var="estoque"> <f:facetname="header"> <h:outputTextvalue="LivrosnoEstoque:"/> </f:facet> <h:column> <h:outputTextvalue="#{estoque.titulo}"/> </h:column> <h:column> <ice:panelGroupdragValue="#{estoque.titulo}" draggable="true"dragListener="#{loja.dragListener}" dragOptions="revert"> <h:graphicImagevalue="#{estoque.imagem}"/> </ice:panelGroup> </h:column> <h:column> <h:commandButtonactionListener="#{loja.adicionarCarrinho}"value="Adicionar"/> </h:column> </h:dataTable> <ice:panelGroupdropTarget="true">

<h:graphicImagevalue="imagens/shoppingcart.gif"/> </ice:panelGroup> <h:dataTablestyleClass="grid"frame="hsides" columnClasses="colunas"value="#{loja.livrosSelecionados}" var="selecionados"> <f:facetname="header"> <h:outputTextvalue="LivrosnoCarrinho:"/> </f:facet> <h:column> <h:outputTextvalue="#{selecionados.titulo}"/> </h:column> <h:column> <h:graphicImagevalue="#{selecionados.imagem}"/> </h:column> <h:column> <h:commandButtonactionListener="#{loja.removerCarrinho}"value="Remover"/> </h:column> </h:dataTable> </h:panelGrid> </ice:form> </body> </html> </f:view>

Outros exemplos com Ice faces

Osdesenvolvedoresdoicefacesmontaramumaaplicaocomvrioscomponentescom aintenodedemonstrarasfuncionalidadesdecadaumdeles.possvelobteresta aplicaoWEB(.war)noseguinteendereo:http://www.icefaces.org/main/downloads/os downloads.iface,baixandoICEfaces1.5.3bin.zip.Descompacteoarquivoelocalize componentshowcase.wardentrodapastasamples.Copieoarquivocomponent showcase.warparaapastawebappsdoseutomcateacesseoseguinteendereo: http://localhost:8080/componentshowcase/.

Figura6.AmostradoscomponentesdoICEfaces.

SerapresentadaumatelacomoaFigura6.Doladoesquerdodatelaexisteumarvore comvrioscomponentes.Cliqueemumcomponentedeseuinteresse.Aparecernolado direitoocomponente.Tambmpossvelverocdigofonteclicandoemsource. tambmpossvelacessarestaaplicaodiretamentedoservidordoicefacespelo

endereco:http://componentshowcase.icefaces.org/componentshowcase/. Estaaplicaobastantetilquandosedesejaconhecernovoscomponenteseaforma corretadeutilizlos.

Outros componentes ICEfaces

AbaixodescritoalgunsdoscomponentesdoICEfaces:

Menu:

<ice:menuBar>Criaummenu.Parasubmenusouitensdomenupodeserutilizado <ice:menuItem>,e<ice:menuItemSeparator>paracriarumalinhaseparadoraentreos submenus.

rvore:

<ice:tree>Criaumrvore.Paraadicionarnovosnodosrvoreutilizaseatag <ice:treeNode>.

Calendrio:

<ice:selectInputDate>Criaumcalendrio.

Painel com abas

<ice:panelTabSet>Criaumpainelcomabas.Paracadaabautilizase</ice:panelTab>.

Pop Up

<ice:panelPopup>Criaumajanelapopup.Comojanelasdeconfirmao,consulta,etc.

Links

Icefaces.org PginaoficialdoprojetoIcefaces eclipse.org/webtools PginaoficialdoWTP(WebToolsPlatform)

Livros
CoreJavaServerFaces,DavidGearyeCayHorstmann ApresentaoJavaServerFaces

Peridicos

Edionmero43daJavaMagazine DescrevecommaisdetalhesoJavaServerfaceseoAJAX,