Frameworks RIA para JSF lado a lado

Maykon Junior Vaz (maykonjv@gmail.com): é graduando em Bacharelado em Sistemas de Informação na Universidade do Estado de Minas Gerais Frutal, onde desenvolveu diversos projetos Web utilizando tecnologia JSF. Sylvio Barbon Junior (sbarbonjr@gmail.com): é formado em Engenharia, Ciência da Computação. Mestre em Física Computacional e atualmente doutorando em Física Computacional pelo IFSC/ USP. Possui certificação SCJP, é docente na Universidade do Estado de Minas Gerais (UEMG) e na FATEC de São José do Rio Preto. Frameworks RIA para JSF lado a lado Entrada de Dados Uma comparação detalhada dos componentes RIA mais populares do JSF: RichFaces, IceFaces, PrimeFaces como os seus componentes de Entrada de Dados. O desenvolvimento para Web com Java está repleto de opções de tecnologias das mais variadas finalidades, tais como produtividade, robustez e flexibilidade. Considerando estas finalidades, o JSF é uma das soluções mais adotadas pelo mercado. O objetivo deste artigo é apresentar as principais características dos componentes de entrada de dados (famosos inputs de formulários HTML) dos frameworks IceFaces, RichFaces e PrimeFaces, que ajudam a tornar a camada de apresentação ainda mais rica e repleta de recursos. Com isso, espera-se que os desenvolvedores tenham uma base para escolher dentre um desses frameworks para utilizar em sua aplicação. 35

: : www.mundoj.com.br : : Podemos dizer que a interatividade é uma das características que mais chama a atenção dos usuários na web. Devido a esta necessidade, os sites dinâmicos devem apresentar cada vez componentes mais interativos, que são chamados de RIA (Rich Internet Applications). Na plataforma Java EE, a tecnologia JSF (JSR 314) estabelece um padrão para aplicações Web fundamentadas em componentes de interface, que junto com o uso de Ajax, proporcionam uma experiência cada vez mais próxima de um software desktop. Assim, JSF é um framework criado para facilitar o desenvolvimento de aplicações web com interfaces de usuário sofisticadas. Isso é feito com componentes de interface gráfica que interagem com os objetos de negócio de forma simples. Esta tecnologia faz uso do padrão MVC para Web e se relaciona com características de interface gráfica orientada a eventos. Esse padrão MVC é recomendado pela Sun Microsystems para o desenvolvimento Web com Java EE. Outra característica do JSF, atualmente em sua versão 2.0 (assunto abordado na MundoJ número 40), é a clara separação entre as camadas de lógica de negócio e a camada de interface de usuário. Para facilitar o uso do JSF com Ajax e adicionar componentes diferenciado baseados na JSR-314, três bibliotecas de componentes destacam-se: org); chfaces); Estas bibliotecas assemelham-se em funcionalidades e recursos, porém diferenciam-se principalmente em design de interface e variedade de componentes. Este artigo apresentará o funcionamento básico de bibliotecas sobre o JSF versão 1.2, pois nem todos os frameworks possuem versão estável para o JSF 2.0. Na sequência, serão apresentados componentes dos três frameworks agrupados segundo critérios baseados no uso e função dos componentes. O objetivo é que o desenvolvedor possa escolher com mais critério que framework utilizar em sua aplicação. O escopo deste artigo, por questões de espaço, abrange apenas componentes para a Interface de Entrada de Dados. Futuramente outros artigos irão abordar outros tipos de componente. Funcionamento dos frameworks baseados em JSF Os frameworks abordados neste artigo adicionam funcionalidades Ajax às páginas sem que o desenvolvedor necessite escrever uma linha de código JavaScript. Em muitos casos nem mesmo é preciso modificar o componente faces utilizado, bastando acrescentar um componente que adiciona a funcionalidade Ajax, como, por exemplo, o <a4j:support> do RichFaces. Na figura 1 podemos ver toda arquitetura de uma página JSF junto à utilização de um Framework baseado na implementação citada, neste caso o RichFaces. A principal característica da tecnologia Ajax é sua capacidade de troca de mensagens de forma assíncrona, em que a informação não fica restrita à requisição e resposta de todo conteúdo de uma página ao cliente. É possível a troca de informação entre o cliente e o servidor sem necessidade de reenvio de toda a página Web, o que possibilita a manipulação de alguns trechos da página e na execução de procedimentos como validações e cálculos, sem a necessidade da atualização de todo o conteúdo renderizado ao cliente (navegador), garantindo uma maior interatividade entre a aplicação e o usuário. A figura 1 contempla a troca de mensagens entre um cliente e um servidor através de mensagens Ajax. É possível observar que toda máquina Ajax está localizada no cliente e é manipulada pela linguagem Javascript, que encaminha uma requisição e também é responsável pela sua recepção. No caso da utilização de Ajax pelo framework RichFaces, uma camada (Ajax4jsf) está situada entre o kernel JSF e o cliente, assim é possível reconhecer requisições XML (padrão Ajax) e construir respostas na linguagem citada, sem modificar o padrão JSF, garantindo a sua sequência normal de fases independentemente do uso ou não da tecnologia assíncrona. Figura 1. Arquitetura Cliente Servidor com Ajax (retirada do RichFaces Developer Guide ver referências). Outra característica importante é a presença de atributos específicos para Ajax na grande maioria dos componentes, o que o torna encapsulado e configurável o uso dessa tecnologia diretamente por cada componente. Um exemplo é o componente <p:commandbutton> do pacote PrimeFaces, no qual através dos atributos onstart e oncomplete é possível especificar uma ação a ser realizada quando a requisição Ajax for iniciada e finalizada. A Listagem 1 apresenta o componente citado, que exibe um alert JavaScript com mensagens específicas para início e final da requisição assíncrona. Listagem 1. Implementação de atributos Ajax em um componente commandbutton. <p:commandbutton value= Ajax Submit update= display onstart= alert( Starting ) oncomplete= alert( Done ) /> O desenvolvedor que optar por um framework específico não precisa substituir o uso dos componentes JSF tradicionais. O framework deve ser utilizado como complemento, adicionando as funcionalidades propiciadas pelos novos componentes. Isso é devido ao framework encapsular a especificação faces e disponibilizar o uso dos componentes do padrão JSF. A figura 2 exibe o kernel JSF (JSF Application) encapsulado pelo framework IceFaces, identificado como 1 ICEfaces Framework, que possibilita a comunicação via Ajax através do Ajax Bridge sem modificar a estrutura tradicional do JSF. Como resposta a requisição, destacado como 3 ICEfaces Components, é possível observar o uso dos componentes do framework na renderização e manipulação do DOM, que são os objetos disponíveis pela linguagem HTML, como, por exemplo, os objetos de formulário Web.Considerando os navegadores indicados para o uso dos frameworks, temos: 36

Listagem 3. Configuração do RichFaces no web.xml. <context-param> <param-name>org.richfaces.skin</param-name> <param-value>bluesky</param-value> </context-param> <context-param> <param-name>org.richfaces.control_skinning</param-name> <param-value>enable</param-value> </context-param> Figura 2. Encapsulamento do JSF pelo Framework IceFaces (retirada do ICEFaces DataSheet ver referências). Para Saber Mais A edição 14 da MundoJ traz o artigo Ajax Desenvolvendo uma Web mais interativa. No qual se apresenta conceitos desta tecnologia, como também usos e vantagens. A edição 22 da MundoJ também trata do assunto. Configuração dos frameworks Listagem 2. Configuração do IceFaces no web.xml. <servlet> <servlet-name>persistent Faces Servlet</servlet-name> <servlet-class>com.icesoft.faces.webapp.xmlhttp.persistentfacesservlet</ servlet-class> <load-on-startup> 1 </load-on-startup> </servlet> <servlet> <servlet-name>blocking Servlet</servlet-name> <servlet-class>com.icesoft.faces.webapp.xmlhttp.blockingservlet</ servlet-class> <load-on-startup> 1 </load-on-startup> </servlet> <servlet-name>faces Servlet</servlet-name> <url-pattern>*.jspx</url-pattern> <servlet-name>persistent Faces Servlet</servlet-name> <url-pattern>*.iface</url-pattern> <servlet-name>persistent Faces Servlet</servlet-name> <url-pattern>/xmlhttp/*</url-pattern> <servlet-name>blocking Servlet</servlet-name> <url-pattern>/block/*</url-pattern> <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> Para que o framework desejado seja utilizado, é necessário o registro da Servlet específica de cada biblioteca. Como qualquer outro aplicativo Java Web, deve-se mapear a Servlet, nomeá-la internamente e publicamente no web.xml. As Listagens 2, 3 e 4 apresentam as configurações necessárias para os frameworks IceFaces, RichFaces e PrimeFaces, respectivamente. É possível verificar algumas diferenças já no mapeamento das bibliotecas, RichFaces é baseado em Filters e IceFaces e PrimeFaces em Servlets, além da possibilidade de especificar um Skin (padrão de cores, fontes e formatos) diretamente pelo arquivo de configuração. Vale a pena destacar que no caso do RichFaces, este framework apresenta um componente Skin, que mesmo tendo sua associação no web.xml permite a mudança dinâmica de layout pelo usuário baseado em uma série de Skins predefinidos. Listagem 4. Configuração do PrimeFaces no web.xml. <servlet> <servlet-name>resource Servlet</servlet-name> <servlet-class>org.primefaces.resource.resourceservlet</servlet-class> </servlet> <servlet-name>resource Servlet</servlet-name> <url-pattern>/primefaces_resource/*</url-pattern> O uso de mais de um framework com a mesma função, como, por exemplo, comunicação Ajax, não é recomendado pelos próprios fornecedores dos frameworks, uma vez que todos encapsulam o kernel JSF e não estão preparados para manipular outras filtragens, o que pode gerar diferentes erros nas requisições. Finalizando as configurações dos frameworks, deve-se ajustar a taglib no caso de integração com JSP de cada framework para realizar a importação da tecnologia para as páginas e disponibilizar os componentes na camada de view. 37

: : www.mundoj.com.br : : IceFaces http://www.icesoft.com/icefaces/component PrimeFaces Taglib Prefix http://primefaces.prime.com.tr/ui Framework RichFaces http://richfaces.org/rich rich http://richfaces.org/a4j Tabela 1. Taglib dos frameworks Icefaces, Primefaces e Richfaces. Caso o projeto utilize como padrão a camada de apresentação baseada em Facelets, os seguintes namespaces devem ser acrescentados, na ordem Icefaces, RichFaces e PrimeFaces: xmlns:ice= http://www.icesoft.com/icefaces/component xmlns:a4j= http://richfaces.org/a4j xmlns:rich= http://richfaces.org/rich xmlns:p= http://primefaces.prime.com.tr/ui Mais detalhes e características das configurações podem ser encontradas nas documentações referenciadas ao final deste artigo. Componentes de interface para entrada de dados Uma das maiores preocupações em aplicações Web é o suporte à requisição de informação, uma vez que os já tradicionais formulários HTML não garantem entrada de dados com qualidade e facilidade. Problemas relacionados à eficiência de uso, facilidade de aprendizado e funcionalidade correta são abordados pelos componentes descritos nessa seção. Serão discutidos componentes com equivalências HTML a <input>, <select> e <textarea>. O framework IceFaces apresenta os componentes: <ice:inputtext>, <ice:inputsecret>, <ice:inputhidden>, <ice:inputtextarea>, <ice:inputrichtext>, <ice:selectoneradio>, <ice:selectonelistbox>, <ice:selectbooleancheckbox>, <ice:selectmanycheckbox>, <ice:selectmanylistbox> e <ice:selectinputdate>. Cada um com seu respectivo similar HTML, uma característica importante destes componentes são os atributos valuechangelistener e partialsubmit. O primeiro especifica um método a ser disparado quando modificado o conteúdo do input, já o segundo especifica um campo único a ser enviado na requisição. Já o PrimeFaces apresenta uma quantidade menor de componentes para entrada de dados, sendo eles: <p:inputmask>, <p:password>, <p:autocomplete>, <p:editor>, <p:calendar>, <p:spinner>, <p:slider> e <p:inplace>. Diferente do IceFaces, o PrimeFaces não possui os componentes próprios para input de texto simples, porém os três primeiros componentes citados possuem atributos de validação e auxílio ao usuário. Finalmente, o Framework RichFaces com seus: <rich:editor>, <rich:combobox>, <rich:calendar>, <rich:inputnumberspinner>, <rich:inputnumberslider>, <rich:inplaceinput>, <rich:suggestionbox> e <rich:inplaceselect> apresentam componentes semelhantes aos do PrimeFaces. ice p a4j Os componentes básicos do JSF, representados pelo prefixo h, representam as tags HTML. Portanto, independentemente do framework que esteja sendo usado, podemos utilizar os códigos simples de HTML através das tags do JSF. A tabela 1 exibe a lista de componentes para o framework que não possui um componente especifico, a tabela exibe um similar HTML (componente h). Para facilitar a diferenciação dos componentes, separamos por cor. IceFaces = verde, PrimeFaces = turquesa, RichFaces = vermelho e componentes padrões JSF = amarelo. IceFaces PrimeFaces RichFaces <ice:inputtext> <h:inputtext> <h:inputtext> <ice:inputsecret> <p:password> <h:inputsecret> <ice:inputhidden> <h:inputhidden> <h:inputhidden> <ice:inputtextarea> <h:inputtextarea> <h:inputtextarea> <ice:inputrichtext> <p:editor> <rich:editor> <ice:selectoneradio> <h:selectoneradio> <h:selectoneradio> <ice:selectonelistbox> <h:selectonelistbox> <h:selectonelistbox> <ice:selectbooleancheckbo> <h:selectbooleancheckbox> <h:selectbooleancheckbox> <ice:selectmanycheckbox> <h:selectmanycheckbox> <h:selectmanycheckbox> <ice:selectmanylistbox> <h:selectmanylistbox> <h:selectmanylistbox> <ice:selectonemenu> <h:selectonemenu> <rich:combobox> <ice:selectinputdate> <p:calendar> <rich:calendar> <p:spinner> <p:slider> <p:inplace> <rich:inputnumberspinner> <rich:inputnumberslider> <rich:inplaceinput> <ice:selectinputtext> <p:autocomplete> <rich:suggestionbox> <p:inputmask> <rich:inplaceselect> Tabela 2. Componentes de entrada. Para exemplificar a criação de um formulário, a Listagem 5 apresenta um Cadastro de Usuário, onde são utilizados componentes de entrada de dados que responderão à requisição HTML com o retorno de <input> dos tipos text e password, um <select> e um <textarea>. Neste exemplo, foi utilizado um ManagedBean chamado usuariobean. Esse exemplo usa apenas os componentes padrão disponibilizados pelo próprio JSF. A figura 3 exibe a saída renderizada pelo navegador da implementação apresentada pela Listagem 5. Listagem 5. Exemplo com JSF (prefix h). <h1><h:outputtext value= Cadastro de Usuário /></h1> <h:panelgrid columns= 2 > <h:outputtext value= Nome: /> <h:inputtext value= #{usuariobean.usuario.nome /> <h:outputtext value= Senha: /> <h:inputsecret value= #{usuariobean.usuario.senha /> <h:outputtext value= Categoria: /> <h:selectonemenu id= Categoria value= #{usuariobean.usuario. categoria > <f:selectitems value= #{usuariobean.listacategoira /> </h:selectonemenu> <h:outputtext value= Descrição: /> <h:inputtextarea value= #{usuariobean.usuario.descricao /> 38

Baseado na implementação da Listagem 6, a figura 4 exibe os componentes renderizados pelo navegador. O componente exibido à direita na figura 4, <ice:inputrichtext> apresenta suas versões RichFaces e PrimeFaces, conforme listado na tabela 1, que são, respectivamente, <p:editor> e <rich:editor>. Figura 4. Componentes de entrada com IceFaces. Editores de texto Listagem 6. Exemplo com IceFaces. <ice:panelgrid columns= 2 > <ice:panelgrid columns= 2 > <ice:outputtext value= Nome /> <ice:inputtext/> <ice:outputtext value= Senha /> <ice:inputsecret/> <ice:outputtext value= Categoria /> <ice:selectonemenu value= Teste > Figura 3. Componentes de entrada com JSF. A Listagem 6 apresenta uma implementação similar utilizando o Framework IceFaces, onde o mesmo formulário Cadastro de Usuário é implementado, porém agora com os componentes IceFaces. Em adição ao código da Listagem 5, a implementação IceFaces exibida pela Listagem 6 apresenta o componente <ice:inputrichtext>, cuja função é acrescentar funcionalidade de edição e formatação de texto tal qual um editor de texto desktop. Com o uso deste componente é possível verificar que com o uso de apenas alguns atributos no componente é possível disponibilizar ao usuário uma interface rica com abundantes opções. A Listagem 7 apresenta a codificação para inserir o componente <rich:editor>. Este componente possui o atributo theme que caso não seja configurado como advanced, será renderizado o editor de texto na forma básica, com poucos recursos. Além dos recursos apresentados na versão advanced, o framework RichFaces possibilita a adição de novos recursos, como gravar, abrir arquivo, entre outros. Para mais opções de configuração deve-se acessar o guia do desenvolvedor referenciado no fim do artigo. Listagem 7. Trecho de código para adicionar <rich:editor> framework RichFaces. <rich:panel style= width: 500px; > <h:outputtext value= Editor de Texto Completo /> <rich:editor theme= advanced language= pt ></rich:editor> A figura 5 exibe as duas variações de editores de texto (rich:editor), deixando bem clara a quantidade de recursos disponibilizados para o usuário que, segundo critérios de usabilidade, devem adaptar-se de acordo com o conteúdo e características do usuário e sistema. <f:selectitem value= Aluno itemlabel= Aluno /> <f:selectitem value= Professor itemlabel= Professor /> <f:selectitem value= Administrador itemlabel= Administrador /> </ice:selectonemenu> <ice:outputtext value= Descrição /> <ice:inputtextarea rows= 10 /> </ice:panelgrid> <ice:panelgrid width= 600 > <ice:inputrichtext toolbar= Default value= Digite aqui o seu Comentario!!! /> </ice:panelgrid> </ice:panelgrid> Figura 5. Componente <rich:editor> (à esquerda sem declarar o theme e à direita declarado como advanced). Já o componente <p:editor> do framework PrimeFaces apresentado na Listagem 8 não possui a opção de editor básico, como representado pela figura 6, isto faz com que o mesmo não esteja preparado para qualquer tipo de aplicação, muitas vezes apresentando ao usuário opções não desejadas. Porém, como já descrito, o componente é de código aberto, o que possibilita a limitação implementada pelo desenvolvedor, através da modificação das classes básicas e css do pacote. 39

: : www.mundoj.com.br : : Listagem 8. Trecho de código para adicionar <p:editor> framework PrimeFaces. <p:editor language= pt /> Listagem 9. Componente <p:autocomplete> PrimeFaces. <h:panelgrid columns= 2 width= 200 > <h:panelgrid width= 150 > <h:outputlabel value= Auto Completar Nome: for= acsimples /> <h:panelgrid width= 200 > <p:autocomplete id= acsimples value= #{usuariomanagedbean.string completemethod= #{usuariomanagedbean.listanome /> Calendários Figura 6. Componente <p:editor>. Além de componentes com recursos refinados como os editores de texto comentados, temos outro importante recurso em comum aos três frameworks discutidos: o componente de Calendário conforme representado na figura 7. Ele é essencial para evitarmos erros e filtrar corretamente a entrada de dados, uma vez que o componente vem ajustado para o uso de máscaras que auxiliam o usuário na digitação de datas. Listagem 10. Método do Managed Bean utilizado para retornar a lista de sugestão (usuariomanagedbean). public List<String> listanome(string texto) { List<String> lista = new ArrayList<String>(); usuario = new Usuario(); for (String nome : usuario.getlistanomes()) { if (nome.tolowercase().startswith(texto.tolowercase())) { lista.add(nome); return lista; Figura 7. Calendários IceFaces, RichFaces e PrimeFaces. Autocompletar Outro componente muito interessante, principalmente por apresentar conceito de usabilidade, é o de autocompletar. Este recurso pode ser muito útil para auxiliar o usuário em preencher inputs e validar a informação fornecida. Na Listagem 9 é demonstrado o uso de um managed bean chamado usuariomanagedbean para buscar uma lista de nomes para serem sugeridos conforme o usuário digite no campos. Na Listagem 10 foi criado o método responsável por retornar esta lista. A figura 8 apresenta os componentes de autocompletar do Prime Faces e do Rich Faces.Para a implementação do método listanome (Listagem 10), na linha três é realizada uma instanciação da classe Usuario. Nesta classe existe um atributo listanomes (List<String> listanomes), o qual fornece uma lista de Strings para serem comparadas com o texto digitado e adicionado na caixa de sugestão, conforme mostrado na figura 8. Nas Listagens 11 e 12 está a implementação do mesmo componente, porém para RichFaces. É possível verificar que não existe muita diferença na classe e no managedbean. A única diferença básica é a questão que o método que retorna a lista em RichFaces recebe como parâmetro um Object diferente do PrimeFaces que recebe uma String. Figura 8. Componentes de autocompletar dos frameworks PrimeFaces e RichFaces, respectivamente. Listagem 11. Componente <rich:suggestionbox> RichFaces. <rich:panel style= width:270px; > <h:outputtext value= Sugestão /> <a4j:form> <h:outputtext value= Carro: /> <h:inputtext id= car value= #{usuariomanagedbean.carro /> <rich:suggestionbox for= car var= result height= 150 width= 150 suggestionaction= #{usuariomanagedbean.listacarro > <h:column> <h:outputtext value= #{result /> </h:column> </rich:suggestionbox> </a4j:form> 40

Listagem 12. Método do managed bean utilizado para retornar a lista de sugestão (usuariomanagedbean). public List<String> listacarro(object texto) { usuario = new Usuario(); List<String> listacarro = new ArrayList<String>(); for (String nome : usuario.getlistacarro()) { if (nome.tolowercase().startswith(((string) texto).tolowercase())) { listacarro.add(nome); return listacarro; Na classe Usuario existe um atributo que armazena uma lista de nome de carros (List<String> listacarro), esta, encapsulada pelo método getlistacarro que é utilizado como ferramenta de comparação com o texto digitado no campo e adicionado na caixa de sugestão, conforme mostra a figura 8. Spinner e Slider Outros componentes que facilitam o preenchimento de formulários que contêm campos de incremento e decremento de valores são o Spinner e Slider, que estão presentes nos frameworks PrimeFaces e RichFaces. A Listagem 13 apresenta o componente da RichFaces, que através do pressionar do botão disponibilizado, possibilita a modificação do número fornecido. Já a Listagem 14 exibe o código para implementação do Spinner segundo a implementação Prime- Faces, muito semelhante à implementação RichFaces. A figura 9 exibe a renderização dos componentes com suas interfaces padrão. Listagem 13. Componente <rich:inputnumberspinner> do framework RichFaces. <rich:panel style= width:270px; > <h:outputtext value= Spinner /> <h:outputtext value= Componente Spinner: /> <rich:inputnumberspinner value= 50 /> Listagem 14. Componente <p:spinner> do framework Prime- Faces. <p:panel style= width: 300px; > <h:outputtext value= Spinner /> <h:outputtext value= Componente spinner: /> <p:spinner maxlength= 10 /> </p:panel> Figura 9. Componente Spinner dos frameworks RichFaces e PrimeFaces, respectivamente. Como comentado, o componente Slider é utilizado no incremento e decremento de valores, com atributos que possibilitam a configuração do passo de cada incremento, assim como a orientação e comprimento do componente podem ser ajustados de acordo com o design e necessidade do formulário. As Listagens 15 e 16 apresentam a implementação desse componente, e a renderização dos mesmos está exposta na figura 10. Listagem 15. Componente <p:slider> do framework Prime- Faces. <p:panel style= width: 300px; > <h:outputtext value= Slider /> <h:outputtext value= Componente Slider Horizontal: /> <p:slider maxvalue= 50 minvalue= 0 tickmarks= 5 type= horizontal for= cmp > <h:inputtext id= cmp /> </p:slider> <h:outputtext value= Componente Slider Vertical: /> <p:slider maxvalue= 50 minvalue= 0 tickmarks= 5 type= vertical for= cmp2 > <h:inputtext id= cmp2 /> </p:slider> </p:panel> Listagem 16. Componente <rich:inputnumberslider> do framework RichFaces. <rich:panel style= width:300px; > <h:outputtext value= Slider /> <h:outputtext value= Componente Slider Vertical: /> <rich:inputnumberslider height= 100 orientation= vertical maxlength= 30 /> <rich:spacer height= 30 /> <h:outputtext value= Componente Slider Horizontal: /> <rich:inputnumberslider value= 50 /> 41

: : www.mundoj.com.br : : Conforme mostrado na figura 11, quando o usuário clicar onde está escrito: Digite Aqui Seu Nome, aparecerão os campos conforme apresentado após o Inplace. O componente apresenta implementação com o framework RichFaces, conforme apresentado na Listagem 18. Um exemplo do resultado do inplace RichFaces é exibido na figura 12, antes e depois de pressionar o componente. Inplace Figura 10. Componente Slider dos frameworks PrimeFaces e RichFaces, respectivamente. O framework RichFaces e PrimeFaces possui outro componente em comum, não apresentado no IceFaces. O componente Inplace. A função deste componente é esconder um campo de entrada até que o usuário clique no texto do inplace. Como mostra a figura 11. O fato de esconder o componente tem justamente a função de exigir que o usuário leia o componente e indicar qual tipo de informação deve ser preenchida no campo. Listagem 17. Componente <p:inplace> do framework PrimeFaces. <h:outputtext value= Nome: /> <p:inplace label= Digite Aqui Seu Nome > <h:inputtext value= #{usuariomanagedbean.usuario.nome /> <h:outputtext value= - Maior de 21 anos: /> <h:selectbooleancheckbox/> </p:inplace> Figura 11. Componente <p:inplace> do Framework PrimeFaces. Listagem 18. Componente <rich:inplaceinput> do framework RichFaces. <rich:panel style= width:270px; > <h:outputtext value= Inplace Simples ></h:outputtext> <h:panelgrid columns= 2 > <h:outputtext value= Nome: /> <rich:inplaceinput defaultlabel= click para digitar seu nome /> <h:outputtext value= Email: /> <rich:inplaceinput defaultlabel= click para digitar seu email /> Figura 12. Componente <rich:inplaceinput> do framework RichFaces. O RichFaces tem em sua coleção de componentes um Inplace específico para componentes do tipo select, o <rich:inplaceselect>, cuja implementação pode ser vista na Listagem 19 e sua respectiva exibição na figura 13. Listagem 19. Componente <rich:inplaceselect> do framework RichFaces. <rich:panel style= width:270px; > <h:outputtext value= Inplace com Select /> <h:panelgrid columns= 2 > <h:outputtext value= Tamanho: /> <rich:inplaceselect defaultlabel= Click Aqui para Escolher > <f:selectitem itemvalue= 0 itemlabel= Mínimo /> <f:selectitem itemvalue= 1 itemlabel= Pequeno /> <f:selectitem itemvalue= 2 itemlabel= Médio /> <f:selectitem itemvalue= 3 itemlabel= Grande /> <f:selectitem itemvalue= 4 itemlabel= Gigante /> </rich:inplaceselect> Figura 13. Componente <rich:inplaceselect> do framework RichFaces. Assim, o RichFaces possui dois componentes diferentes para a função Inplace (<rich:inplaceinput> e <rich:inplaceselect>), já 42

PrimeFaces dispõe de apenas um componente, porém combinado com diversos outros, conforme visto na Listagem 17. Ele esconde qualquer componente, podendo ser um input, select, checkbox, calendar etc. Entradas com máscara Como último componente a ser apresentado neste artigo, o <p:inputmask> do framework PrimeFaces tem como finalidade criar máscaras para os inputtexts. Com uma grande facilidade, é possível configurar um formulário com máscaras nos campos e assim implementar validação de dados. O componente é exibido na Listagem 20 e sua saída HTML exibida na figura 14. Listagem 20. Componente <p:inputmask> do framework PrimeFaces. <h:panelgrid columns= 2 > <h:outputtext value= Data: /> <p:inputmask value= #{pedidomaskbean.pedido.date mask= 99/99/9999 /> <h:outputtext value= Telefone: /> <p:inputmask value= #{pedidomaskbean.pedido.phone mask= (999) 999-9999 /> <h:outputtext value= CPF: /> <p:inputmask value= #{pedidomaskbean.pedido.cpf mask= 999.999.999-99 /> <h:outputtext value= SSN: /> <p:inputmask value= #{pedidomaskbean.pedido.ssn mask= 999-99-9999 /> <h:outputtext value= Codigo Produto: /> <p:inputmask value= #{pedidomaskbean.pedido.codproduto mask= a*-999-a999 /> <p:commandbutton value= Reset type= reset /> <p:commandbutton value= Submit update= form:output /> Para Saber Mais A edição 40 da MundoJ traz o artigo As novidades do JSF 2.0 sobre JSF 2.0 que aborda as características da tecnologia sem considerar o uso de frameworks, apenas as novidades lançadas na nova versão. Considerações finais Independentemente do Framework JSF utilizado, o desenvolvimento de um aplicativo RIA possibilita o uso mais eficiente do software projetado, aumentando ainda mais a usabilidade e alcançando um ponto máximo de produtividade no desenvolvimento de aplicativos enterprise Java EE. Considerando o uso pelos desenvolvedores brasileiros, em sua maioria utilizam o framework RichFaces por ser o framework mais tradicional e mantido pela popular JBoss, além de apresentar Toolkits de desenvolvimento para IDE Eclipse são distribuídos com componentes robustos e compatíveis com a maioria dos navegadores. Já o Icefaces tem seu uso estimulado diretamente pela SUN, porém não apresenta uma popularidade muito boa, devido a complexidade de configuração (comparada a outros concorrentes) e menor compatibilidade a navegadores em suas versões iniciais. Já o PrimeFaces é o caçula dos frameworks analisados, é o de mais fácil configuração apresenta componentes leves, o que torna a solução ideal para aplicações baseadas em servidores menos robustos. O desenvolvedor tem em mãos frameworks Open Source, que junto às comunidades de desenvolvimento é possível avançar a tecnologia e vivenciar inovações cada vez mais velozes. Os frameworks seguem os padrões Java EE para soluções empresariais, o que significa que independentemente da escolha, todos seguem um mesmo conceito, fato que torna a migração ou mesmo implementação em conjunto facilitada. Todos os frameworks trazem soluções de segurança, cada um com seu componente em especial, o que faz com que a utilização dos frameworks não apenas solucione dificuldades na camada de apresentação, mas também traga vantagens para outras questões. Problemas de segurança, como SQL Injection e submissão de formulários falsos (fake form submission), são facilmente tratados por eles. Não é necessária uma descrição muito prolongada sobre vantagens da utilização de Ajax com o uso dos componentes. Em resumo, basta uma tag para criar, tratar, recuperar e notificar uma requisição Ajax, sem preocupação com JavaScript e nem com compatibilidade com os diversos navegadores mais utilizados no Referências Figura 14. Componente <p:inputmask> do framework PrimeFaces. MANN, K. D. JavaServer Faces in Action. Greenwich: Manning, 2005. JACOBI, J.; FALLOWS, J. R. Pro JSF and Ajax: Building Rich Internet Components. [S.l.]: Apress, 2006. GEARY, D.; HORSTMANN, C. Core JavaServer Faces. 2ª. ed. [S.l.]: Prentice Hall, 2007. NIELSEN, J., LORANGER, H., Projetando Web Sites com Usabilidade, Campus, 2007. ICEFaces DataSheet, http://www.icesoft.com/pdf/icefaces-datasheet.pdf ICEFaces Developer s Guide, Versão 1.8, http://www.icefaces.org/docs/v1_8_2/icefacesdevelopersguide.pdf RichFaces Developer Guide, http://docs.jboss.org/richfaces/latest_3_3_x/en/devguide/pdf/richfaces_reference.pdf PrimeFaces User s Guide, http://primefaces.googlecode.com/files/primefaces_users_ guide_190410.pdf 43