Frameworks RIA para JSF lado a lado

(1)

Gerais – Frutal, onde desenvolveu diversos projetos Web

utilizando tecnologia JSF. Estado de Minas Gerais (UEMG) e na FATEC de São José do

Rio Preto.

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.

Frameworks RIA para JSF lado a lado

Uma comparação detalhada dos componentes RIA

mais populares do JSF: RichFaces, IceFaces,

PrimeFa-ces como os seus componentes de Entrada de Dados.

Entrada de Dados

(2)

Podemos dizer que a interatividade é uma das características que mais chama a atenção dos usuários na web. Devido a esta necessida-de, 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 in-terface, 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:

t *DF'BDFT NBOUJEB QFMB *DFTPGU 5FDIOPMPHJFT *OD XXXJDFGBDFT org);

t 3JDI'BDFT EFTFOWPMWJEB QFMB 3FE)BU+#PTT XXXKCPTTPSHSJ-chfaces);

t 1SJNF'BDFTEPHSVQP1SJNF5FDIOPMPHZ XXXQSJNFGBDFTPSH Estas bibliotecas assemelham-se em funcionalidades e recursos, po-rém diferenciam-se principalmente em design de interface e varieda-de varieda-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 apresen-tados componentes dos três frameworks agrupados segundo critérios baseados no uso e função dos componentes. O objetivo é que o de-senvolvedor 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 exem-plo, 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 espe-cíficos para Ajax na grande maioria dos componentes, o que o torna encapsulado e configurável o uso dessa tecnologia dire-tamente 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 requi-sição assíncrona.

Listagem 1. Implementação de atributos Ajax em um compo-nente commandButton.

<p:commandButtonvalue=”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 pro-piciadas pelos novos componentes. Isso é devido ao framework encap-sular 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 nave-gadores indicados para o uso dos frameworks, temos:

t "QQMFo4BGBSJ Y YFY t (PPHMFo$ISPNF

Podemos dizer que a intera : : www.mundoj.com.br : :

(3)

Listagem 2. Configuração do IceFaces no web.xml.

Listagem 4. Configuração do PrimeFaces 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-name>Blocking Servlet</servlet-name>

<servlet-class>com.icesoft.faces.webapp.xmlhttp.BlockingServlet</ servlet-class>

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

<servlet-mapping>

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

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

<servlet-mapping>

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

<servlet-mapping>

<url-pattern>/xmlhttp/*</url-pattern> </servlet-mapping>

<servlet-mapping>

<servlet-name>Blocking Servlet</servlet-name>

<url-pattern>/block/*</url-pattern> </servlet-mapping>

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

<ﬁlter>

<display-name>RichFaces Filter</display-name>

<ﬁlter-name>richfaces</ﬁlter-name>

<filter-class>org.ajax4jsf.Filter</filter-class> </filter>

<ﬁlter-mapping>

<ﬁlter-name>richfaces</ﬁlter-name>

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

<dispatcher>REQUEST</dispatcher>

<dispatcher>FORWARD</dispatcher>

<dispatcher>INCLUDE</dispatcher> </ﬁlter-mapping>

<servlet-name>Resource Servlet</servlet-name>

<servlet-class>org.primefaces.resource.ResourceServlet</servlet-class> </servlet>

<servlet-mapping>

<servlet-name>Resource Servlet</servlet-name>

<url-pattern>/primefaces_resource/*</url-pattern>

</servlet-mapping>

Para Saber Mais

A edição 14 da MundoJ traz o artigo “Ajax – Desenvolvendo uma Web mais interativa”. No qual se apresenta conceitos desta tecno-logia, como também usos e vantagens. A edição 22 da MundoJ também trata do assunto.

Figura 2. Encapsulamento do JSF pelo Framework IceFaces (retirada do ICEFaces DataSheet – ver referências).

Configuração dos frameworks

Para que o framework desejado seja utilizado, é necessário o registro da Servlet específica de cada biblioteca. Como qualquer outro apli-cativo 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 es-pecificar 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 mes-mo 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.

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.

(4)

Fra-mework Taglib

Pre-fix IceFaces http://www.icesoft.com/icefaces/compo-_nent ice

PrimeFa-ces http://primefaces.prime.com.tr/ui p

RichFaces http://richfaces.org/rich rich

http://richfaces.org/a4j 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 acres-centados, 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 en-contradas 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 à re-quisiçã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 aprendi-zado e funcionalidade correta são abordados pelos componentes descritos nessa seção. Serão discutidos componentes com equiva-lê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 partialSub-mit. 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, po-ré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.

Os componentes básicos do JSF, representados pelo prefixo h, repre-sentam 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 = tur-quesa, RichFaces = vermelho e componentes padrões JSF = amarelo.

Tabela 2. Componentes de entrada.

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> <rich:inputNumberSpinner> <p:slider> <rich:inputNumberSlider> <p:inplace> <rich:inplaceInput> <ice:selectInputText> <p:autoComplete> <rich:suggestionbox>

<rich:inplaceSelect> <p:inputMask>

Para exemplificar a criação de um formulário, a Listagem 5 apre-senta 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 chama-do usuarioBean. Esse exemplo usa apenas os componentes padrão disponibilizados pelo próprio JSF. A figura 3 exibe a saída renderi-zada pelo navegador da implementação apresentada pela Listagem 5.

Listagem 5. Exemplo com JSF (prefix h). <h1><h:outputTextvalue=”Cadastro de Usuário”/></h1> <h:form>

<h:panelGridcolumns=”2”>

<h:outputTextvalue=”Nome:”/>

<h:inputTextvalue=”#{usuarioBean.usuario.nome}”/>

<h:outputTextvalue=”Senha:”/>

<h:inputSecretvalue=”#{usuarioBean.usuario.senha}”/>

<h:outputTextvalue=”Categoria:”/>

<h:selectOneMenuid=”Categoria”value=”#{usuarioBean.usuario. categoria}”>

<f:selectItemsvalue=”#{usuarioBean.listaCategoira}”/>

</h:selectOneMenu>

<h:outputTextvalue=”Descrição:”/>

<h:inputTextareavalue=”#{usuarioBean.usuario.descricao}”/>

</h:panelGrid> </h:form>

(5)

Listagem 6. Exemplo com IceFaces.

Listagem 7. Trecho de código para adicionar

<rich:editor> framework RichFaces.

<ice:panelGridcolumns=”2”>

<ice:outputTextvalue=”Nome”/>

<ice:inputText/>

<ice:outputTextvalue=”Senha”/>

<ice:inputSecret/>

<ice:outputTextvalue=”Categoria”/>

<ice:selectOneMenuvalue=”Teste”>

<f:selectItemvalue=”Aluno”itemLabel=”Aluno”/>

<f:selectItemvalue=”Professor”itemLabel=”Professor”/>

<f:selectItemvalue=”Administrador”itemLabel=”Administrador”/>

</ice:selectOneMenu>

<ice:outputTextvalue=”Descrição”/>

<ice:inputTextarearows=”10”/>

</ice:panelGrid>

<ice:panelGridwidth=”600”>

<ice:inputRichTexttoolbar=”Default”value=”Digite aqui o seu Comentario!!!”/>

</ice:panelGrid> </ice:panelGrid>

<rich:panelstyle=”width: 500px;”>

<f:facetname=”header”>

<h:outputTextvalue=”Editor de Texto Completo”/>

</f:facet>

<rich:editortheme=”advanced”language=”pt”></rich:editor> </rich:panel>

Figura 3. Componentes de entrada com JSF.

Editores de texto

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 disponibili-zar ao usuário uma interface rica com abundantes opçõ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.

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 possi-bilita 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.

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.

Figura 5. Componente <rich:editor> (à esquerda sem declarar o theme e à direita declarado como advanced).

Já o componente <p:editor> do framework PrimeFaces apresen-tado 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 apresen-tando 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.

(6)

Listagem 8. Trecho de código para adicionar

<p:editor> framework PrimeFaces.

Listagem 9. Componente <p:autoComplete> PrimeFaces.

Listagem 11. Componente <rich:suggestionbox> RichFaces. Listagem 10. Método do Managed Bean utilizado para retornar a lista de sugestão (usuarioManagedBean). <h:form>

<p:editorlanguage=”pt”/> </h:form>

<h:form>

<h:panelGridcolumns=”2”width=”200”>

<h:panelGridwidth=”150”>

<h:outputLabelvalue=”Auto Completar Nome:”for=”acSimples”/>

</h:panelGrid>

<h:panelGridwidth=”200”>

<p:autoCompleteid=”acSimples”value=”#{usuarioManagedBean.string}”

completeMethod=”#{usuarioManagedBean.listaNome}”/>

</h:panelGrid>

</h:panelGrid> </h:form>

<rich:panelstyle=”width:270px;”>

<h:outputTextvalue=”Sugestão”/>

</f:facet>

<a4j:form>

<h:outputTextvalue=”Carro: “/>

<h:inputTextid=”car”value=”#{usuarioManagedBean.carro}”/>

<rich:suggestionboxfor=”car”var=”result”height=”150”width=”150”

suggestionAction=”#{usuarioManagedBean.listaCarro}”>

<h:column>

<h:outputTextvalue=”#{result}”/>

</h:column>

</rich:suggestionbox>

</a4j:form> </rich:panel>

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 6. Componente <p:editor>.

Calendários

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.

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 in-formaçã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 forne-ce 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, po-ré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, res-pectivamente.

(7)

Listagem 14. Componente <p:spinner> do framework Prime-Faces.

Listagem 15. Componente <p:slider> do framework Prime-Faces.

Listagem 16. Componente <rich:inputNumberSlider>

do framework RichFaces. Listagem 13. Componente <rich:inputNumberSpinner> do

framework RichFaces.

<h:form>

<p:panelstyle=”width: 300px;”>

<h:outputTextvalue=”Spinner”/>

</f:facet>

<h:outputTextvalue=”Componente spinner: “/>

<p:spinnermaxlength=”10”/>

</p:panel> </h:form>

<h:form>

<p:panelstyle=”width: 300px;”>

<h:outputTextvalue=”Slider”/>

</f:facet>

<h:outputTextvalue=”Componente Slider Horizontal: “/>

<p:slider maxValue=”50”minValue=”0”tickMarks=”5”

type=”horizontal”for=”cmp”>

<h:inputTextid=”cmp”/>

</p:slider>

<h:outputTextvalue=”Componente Slider Vertical: “/>

<p:slider maxValue=”50”minValue=”0”tickMarks=”5”

type=”vertical”for=”cmp2”>

<h:inputTextid=”cmp2”/>

</p:slider>

</p:panel> </h:form>

<h:outputTextvalue=”Slider”/>

</f:facet>

<h:outputTextvalue=”Componente Slider Vertical: “/>

<rich:inputNumberSliderheight=”100”orientation=”vertical”

maxlength=”30”/>

<rich:spacerheight=”30”/>

<h:outputTextvalue=”Componente Slider Horizontal: “/>

<rich:inputNumberSlidervalue=”50”/>

</rich:panel> <h:form>

<h:outputTextvalue=”Spinner”/>

</f:facet>

<h:outputTextvalue=”Componente Spinner:”/>

<rich:inputNumberSpinnervalue=”50”/>

</rich:panel> </h:form>

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 com-paraçã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.

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 confi-guraçã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.

(8)

Figura 10. Componente Slider dos frameworks PrimeFaces e RichFaces, respectivamente.

Inplace

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 figu-ra 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.

Listagem 19. Componente <rich:inplaceSelect> do fra-mework RichFaces.

Listagem 18. Componente <rich:inplaceInput> do framework RichFaces.

<h:form>

<h:outputTextvalue=”Nome: “/>

<p:inplacelabel=”Digite Aqui Seu Nome”>

<h:inputTextvalue=”#{usuarioManagedBean.usuario.nome}”/>

<h:outputTextvalue=” - Maior de 21 anos: “/>

<h:selectBooleanCheckbox/>

</p:inplace> </h:form>

<h:outputTextvalue=”Inplace com Select”/>

</f:facet>

<h:outputTextvalue=”Tamanho: “/>

<rich:inplaceSelect

defaultLabel=”Click Aqui para Escolher”>

<f:selectItemitemValue=”0”itemLabel=”Mínimo”/>

<f:selectItemitemValue=”1”itemLabel=”Pequeno”/>

<f:selectItemitemValue=”2”itemLabel=”Médio”/>

<f:selectItemitemValue=”3”itemLabel=”Grande”/>

<f:selectItemitemValue=”4”itemLabel=”Gigante”/>

</rich:inplaceSelect>

</h:panelGrid> </rich:panel>

<h:outputTextvalue=”Inplace Simples”></h:outputText>

</f:facet>

<h:outputTextvalue=”Nome: “/>

<rich:inplaceInputdefaultLabel=”click para digitar seu nome”/>

<h:outputTextvalue=”Email:”/>

<rich:inplaceInputdefaultLabel=”click para digitar seu email”/>

</h:panelGrid> </rich:panel>

Figura 11. Componente <p:inplace> do Framework PrimeFaces.

Conforme mostrado na figura 11, quando o usuário clicar onde está escrito: “Digite Aqui Seu Nome”, aparecerão os campos con-forme apresentado após o Inplace. O componente apresenta im-plementaçã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.

Figura 12. Componente <rich:inplaceInput> do framework RichFaces.

O RichFaces tem em sua coleção de componentes um Inplace es-pecí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.

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á : : www.mundoj.com.br : :

(9)

Listagem 20. Componente <p:inputMask> do framework PrimeFaces.

<h:outputTextvalue=”Data: “/>

<p:inputMaskvalue=”#{pedidoMaskBean.pedido.date}”

mask=”99/99/9999”/>

<h:outputTextvalue=”Telefone: “/>

<p:inputMaskvalue=”#{pedidoMaskBean.pedido.phone}”

mask=”(999) 999-9999”/>

<h:outputTextvalue=”CPF: “/>

<p:inputMaskvalue=”#{pedidoMaskBean.pedido.cpf}”

mask=”999.999.999-99”/>

<h:outputTextvalue=”SSN: “/>

<p:inputMaskvalue=”#{pedidoMaskBean.pedido.ssn}”

mask=”999-99-9999”/>

<h:outputTextvalue=”Codigo Produto: “/>

<p:inputMaskvalue=”#{pedidoMaskBean.pedido.codProduto}”

mask=”a*-999-a999”/>

<p:commandButtonvalue=”Reset”type=”reset”/>

<p:commandButtonvalue=”Submit”update=”form:output”/>

</h:panelGrid>

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.

checkbox, calendar etc.

Figura 14. Componente <p:inputMask> do framework PrimeFaces.

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 desenvolvi-mento 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 de-senvolvedores 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 na-vegadores 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 empre-sariais, 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 tra-zem soluções de segurança, cada um com seu componente em es-pecial, 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 van-tagens 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 NFSDBEPt

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/ICEfa-cesDevelopersGuide.pdf

RichFaces Developer Guide, http://docs.jboss.org/richfaces/latest_3_3_X/en/devgui-de/pdf/richfaces_reference.pdf

PrimeFaces User´s Guide, http://primefaces.googlecode.com/files/primefaces_users_ guide_190410.pdf