Usando RichFaces com o JSF 2

Migrando os componentes de sua página da web para o RichFaces 4

RichFaces, assim como a maioria das outras estruturas de componente rich/Ajax projetadas para uso com o JavaServer Faces (JSF), foi extensivamente revisada para obter compatibilidade com as mudanças significativas no JSF 2. Joe Sam Shirah examina os componentes novos e alterados do RichFaces 4.1 que fornecem a mesma funcionalidade demonstrada por ele em "An introduction to RichFaces" com a versão 3.1. Ele também atualiza os requisitos de instalação para o uso do RichFaces com JSF.

Joe Sam Shirah, Principal and developer, conceptGO

Joe Sam Shirah é diretor e desenvolvedor na conceptGO. Enquanto tentava manter os clientes felizes, ele criou diversos tutoriais para o developerWorks e para o site Oracle Java Developer e é ganhador do prêmio Java Community Award. Também foi moderador do fórum de filtro Java do developerWorks e gerenciou FAQs de JDBC, I18N e Java400 do jGuru.



27/Jan/2012

JavaServer Faces (JSF) 2, lançado em 2009, contém alterações e adições importantes em muitas áreas, incluindo eventos do sistema, recursos e padronização da manipulação do Facelets e do Ajax (consulte Recursos). Apesar de essa evolução ser bem-vinda como um todo, um efeito colateral infeliz e significativo é que praticamente todas as estruturas de componente rich escritas para JSF 1.2 — incluindo o RichFaces versão 3.x e inferior — não funcionam mais de forma confiável, se funcionarem. Em resposta, a equipe do RichFaces embarcou em uma extensa tarefa de correção para a versão 4. Como vocês verão neste artigo, alguns nomes de componente mudaram; outros componentes foram removidos e outros novos foram adicionados.

RichFaces 4.1

RichFaces 4.1 — nos estágios de marco e teste quando este artigo estava sendo escrito — é a versão alvo do artigo. Um desapontamento importante no release 4.0 foi a ausência do componente List Shuttle, que permitia a seleção e organização de diversos itens. A versão 4.1 retifica essa omissão com a adição da organização ao componente Pick List.

Em meu artigo de 2008 "An introduction to RichFaces", eu apresentei diversos componentes do RichFaces versão 3.1 e expliquei os requisitos de instalação para RichFaces e JavaServer Faces (JSF) 1.2. Este artigo de continuação serve como um guia para desenvolvedores iniciantes no RichFaces e como um auxílio para migrar das versões anteriores para a versão 4.x. Forneci um WAR com um código de demonstração (consulte Download).

Caso você seja iniciante no RichFaces e queira usá-lo com o JSF 2, leia somente este artigo (embora seja conveniente revisar o os recursos do artigo anterior ). Se você já tiver usado o RichFaces antes da versão 4, sugiro que leia os dois artigos lado a lado. Para facilitar a comparação entre as diferenças das versões, usei os mesmos cabeçalhos de seção em ambos. Também dupliquei a aparência e funcionalidade dos componentes.

A partir deste ponto, usarei RichFaces para me referir à versão 4.x, se eu não mencionar uma versão específica. Vou começar com uma análise de alguns elementos necessários da infraestrutura para o desenvolvimento com o RichFaces.

Desde o início

Os requisitos mínimos de infraestrutura para desenvolvimento com o RichFaces são:

  • Java™ SE 6
  • Um contêiner Servlet 2.5
  • Um navegador minimamente atual, como Firefox 3.5 ou Internet Explorer 7 ou superior

Para meu desenvolvimento e teste, usei o JDK 7, o Apache Tomcat 7.0.22 e o GlassFish 3.1.1. Os navegadores que usei foram o Firefox 7.0.1 e o Internet Explorer 8.

Em geral, você não deverá enfrentar nenhum problema com minha configuração e os requisitos mínimos indicados acima. No entanto, há algumas coisas que devem ser lembradas com relação ao código de demonstração:

  • Se você usar um contêiner que suporta somente o Servlet 2.5, é necessário alterar no web.xml <web-app version="3.0"...> para <web-app version="2.5"...>.
  • Para o GlassFish V3 e outros contêineres com suporte para JEE 6 / JSF 2, é possível remover o javax.faces.jar do projeto demo. A versão usada na demo é mojarra-2.1.4.
  • Em uma lista de emails, vi uma menção de problemas ocasionais com o Expression Language (EL) em algumas versões do JSF 2 e de contêineres mais antigos. Se você obtiver resultados estranhos, tente fazer o download dos JARs de EL mais recentes.

Este artigo presume que os leitores têm um conhecimento básico de JSF 2 e de Tomcat ou GlassFish. Se você precisar de mais informações sobre essas tecnologias, consulte Recursos para obter os links apropriados.


Não são faces pequenas

Facelets, apesar do nome, não é uma versão menor do JSF; em vez disso, a principal função do Facelets é fornecer uma alternativa para JavaServer Pages (JSP) como um JSF ViewHandler. O Facelets suporta todos os componentes de UI do JSF e constrói sua própria árvore de componentes, refletindo a visualização de um aplicativo JSF. A especificação JSF 2 torna obsoleta a JSP como uma view-definition language (VDL) e inclui uma versão padrão do Facelets como a VDL preferida. Por esse motivo, o RichFaces descartou o suporte ao JSP e exige o Facelets.

Prefiro manter as coisas o mais simples e direto possível. No projeto exemplo, você verá que praticamente todo o código da página (ao contrário da marcação) é composto por expressões de EL para métodos getters, setters e ligação de métodos. Embora projetos mais complexos possam exigir expressões muito mais complexas, em geral o Facelets facilita a separação do código Java de sua marcação de página da web.

As principais diferenças que você perceberá aqui com relação ao desenvolvimento anterior ao JSF 2 usando JSP são:

  • Algumas notações adicionais em web.xml e em faces-config.xml são exigidas ou tomadas como padrão.
  • Páginas da web são documentos XHTML.
  • Namespaces XML são usados em vez de bibliotecas de tag JSP.

Com relação à formatação, com exceção das partes iniciais (veja a Listagem 1), tudo no código da página da web deve parecer familiar. Eu vejo esse aspecto como um recurso minimizado do Facelets. Para o projeto deste artigo — e muitos outros nos quais o uso principal do Facelets é para manipulação da visualização — isso é realmente tudo o que você precisa saber. O Facelets também inclui vários outros recursos úteis, como a modelagem facilitada e elementos que facilitam a vida dos designers de página da web. (Para aprender mais sobre o Facelets, consulte Recursos.)

Listagem 1. Parte inicial de um documento XHTML do Facelets
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">

Os componentes de demonstração

Inicialmente, o RichFaces pode parecer assustador; o componente médio tem mais de 20 atributos específicos, além de atributos gerais que podem ser substituídos. No entanto, durante uma utilização normal, os componentes não são difíceis de configurar, com a maioria dos atributos tendo padrões razoáveis. A versão 4 apresentou padrões adicionais e alterados e vale a pena conferir a documentação.

Os principais componentes demonstrados neste artigo (com substituições para a Versão 4 indicadas) são:

  • Calendar : um componente pop-up que permite seleções de data. A Figura 1 mostra um exemplo. < e > mudam o mês; << e >> mudam o ano. Clicar em Today na parte inferior seleciona a data de hoje. Clean limpa a seleção de data. A primeira coluna de números no lado esquerdo mostra a semana do ano.
    Figura 1. Componente Calendar do RichFaces
    Componente Calendar do RichFaces
  • Pick List : um componente de seleção e organização. Pick List é uma substituição na versão 4 de List Shuttle que pode mover itens entre as áreas disponíveis e selecionadas e para cima e para baixo na área selecionada. A Figura 2 mostra um exemplo:
    Figura 2. Componente Pick List do RichFaces
    Componente Pick List do RichFaces
  • AutoComplete : uma substituição na versão 4 do componente de entrada Suggestion Box que fornece sugestões clicáveis para preencher ou completar uma entrada. A Figura 3 mostra um exemplo:
    Figura 3. Componente AutoComplete do RichFaces
    Componente AutoComplete do RichFaces
  • Tab Panel : um componente de saída que cria páginas tabuladas. A Figura 4 mostra um exemplo:
    Figura 4. Componente Tab Panel do RichFaces
    Componente Tab Panel do RichFaces
  • Accordion : uma substituição na versão 4 para o componente de entrada Panel Bar. O projeto amostra usa um Accordion para as instruções. A Figura 5 mostra um exemplo:
    Figura 5. Componente Accordion do RichFaces
    Componente Accordion do RichFaces
  • Collapsible Panel : uma substituição na versão 4 para o componente Simple Toggle Panel. O projeto amostra usa Collapsible Panels para os resultados. A Figura 6 mostra um exemplo:
    Figura 6. Componente Collapsible Panel RichFaces
    Componente Collapsible Panel RichFaces

RichFaces é desenvolvido sobre Ajax4jsf (consulte Recursos). Graças a essa base, qualquer componente pode ser habilitado para Ajax de diversas formas diferentes. Frequentemente, na versão 4, a funcionalidade de Ajax é automática ou padrão. O exemplo de aplicativo usa os recursos de Ajax para os componentes AutoComplete e Collapsible Panel.


Minha face corajosa

O exemplo de aplicativo dwRichFaces4Demo1 é mínimo; seu único objetivo real é demonstrar a configuração e uso dos componentes selecionados. Por esse motivo, tudo o que ele faz é coletar e exibir os dados de entrada. Deixarei sua imaginação resolver como usar os dados e os componentes em um aplicativo de produção. Além dos JARs, imagens, um arquivo de propriedades de apoio para um pacote de recursos e arquivos Cascading Style Sheets (CSS), o aplicativo é composto por duas páginas XHTML e duas classes Java.

A URL para a página de entrada exibida na Figura 7, assumindo a configuração padrão para Tomcat ou GlassFish, é http://localhost:8080/dwRichFaces4Demo1. Na página de entrada, é possível selecionar uma data usando o componente Calendar . O componente Pick List permite que você mova e reorganize os itens disponíveis. O componente City de AutoComplete permite que você tecle um nome de cidade. City é habilitado para Ajax; se você pressionar a barra de espaço, todas as cidades disponíveis serão exibidas. Se você teclar nomes de cidade que começam com A ou J, as cidades apropriadas serão exibidas. As cidades disponíveis na lista ficam mais limitadas à medida que você digita mais caracteres. É possível clicar nos itens de Accordion à esquerda para obter instruções básicas de componente.

Figura 7. dwRichFaces4Demo1 , página de entrada
dwRichFaces4Demo1 , página de entrada

Depois de inserir suas entradas, clique no botão Submit . O aplicativo é tão mínimo que nenhuma edição é realizada. Como a entrada manual está desativada para o componente Calendar, não é possível nem mesmo inserir uma data inválida. O botão Submit faz com que a página de resultados seja exibida, como mostra a Figura 8:

Figura 8. dwRichFaces4Demo1 , página de resultados
dwRichFaces4Demo1 , página de resultados

Na página de resultados, clique na guia Result , clique no item apropriado em Collapsible Panel para ver o valor de entrada. Clique no botão Edit para retornar à página de entrada.

Perceba que a cor de fundo do botão Submit na Figura 7 e do botão Edit na Figura 8 corresponde a dos outros elementos, embora esses botões sejam componentes JSF padrão, não RichFaces. Cobrirei o motivo na próxima seção.


Configure-me

As primeiras coisas necessárias a um aplicativo são os ativadores de JSF, Facelets e RichFaces — ou seja, os JARs que implementam seus recursos. Para migração, observe que as dependências mudaram completamente na versão 4.x. Esses JARs, com as versões indicadas abaixo, estão incluídos no diretório lib do WAR para download (consulte Download). A lista presume que seu contêiner da web suporta as versões atuais de EL e Servlet API. Se você tiver problemas com a execução da demonstração, confira os requisitos de JSF, Facelets e RichFaces (consulte Recursos.) Leia também a nota sobre Download .

Os JARs necessários para qualquer projeto RichFaces são:

  • JSF 2 (incluído nos contêineres JEE 6 como GlassFish V3.x)
    • javax.faces.jar
  • Facelets
    • Incluído no JSF 2 JAR
  • RichFaces
    • richfaces-components-api-ver.jar
    • richfaces-components-ui-ver.jar
    • richfaces-core-api-ver.jar
    • richfaces-core-impl-ver.jar
  • Outras dependências necessárias:
    • cssparser-ver.jar
    • guava-ver.jar
    • sac-ver.jar

Eu meu projeto e incluído no WAR para download (consulte Recursos para obter os sites para download), as versão usadas são:

  • JSF 2
    • javax.faces.jar — mojarra-2.1.4
  • Facelets
    • Incluído no javax.faces.jar
  • RichFaces
    • richfaces-components-api-4.1.0.20111111-CR1.jar
    • richfaces-components-ui-4.1.0.20111111-CR1.jar
    • richfaces-core-api-4.1.0.20111111-CR1.jar
    • richfaces-core-impl-4.1.0.20111111-CR1.jar
  • Outras dependências necessárias:
    • cssparser-0.9.5.jar
    • guava-10.0.1.jar
    • sac-1.3.jar

Em seguida, estão as entradas web.xml, exibidas na Listagem 2, necessárias para ativar o JSF. Observe que quando você usa o JSF 2 com um contêiner Servlet 3.0, essas entradas são opcionais. Eu prefiro ser explícito. Se for omitido, *.faces, *.jsf e /faces/* <url-pattern /> serão automaticamente mapeados.

Listagem 2. Entradas de JSF mínimas em web.xml
<servlet>
   <servlet-name>Faces Servlet</servlet-name>
   <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
   <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
   <servlet-name>Faces Servlet</servlet-name>
   <url-pattern>*.jsf</url-pattern>
</servlet-mapping>

Antes do JSF 2, uma entrada javax.faces.DEFAULT_SUFFIX era necessária para o Facelets fazer o .xhtml substituir o sufixo .jsp padrão. Essa entrada não é mais necessária, pois o Facelets agora é o VDL padrão.

O RichFaces 4 não exige mais os elementos org.ajax4jsf.VIEW_HANDLERS, filter ou filter-mapping no web.xml. Você pode simplesmente soltar os JARs e usá-los.

A Listagem 3 mostra as entradas web.xml relacionadas ao RichFaces, conforme foram usadas no aplicativo demo:

Listagem 3. Entradas relacionadas ao RichFaces no web.xml
<context-param>
  <param-name>org.richfaces.skin</param-name>
  <param-value>classic</param-value>
</context-param>
<context-param>
  <param-name>org.richfaces.enableControlSkinning</param-name>
  <param-value>true</param-value>
</context-param>

A Listagem 3 inclui dois parâmetros de contexto:

  • <param-name>org.richfaces.skin</param-name> define o esquema de cores (aparência) do aplicativo. RichFaces tem várias aparências integradas. a aparência classic é um azul moderado. O padrão será cinza claro se esse elemento estiver omitido.
  • O valor <param-name>org.richfaces.enableControlSkinning</param-name> tem um impacto na aparência de componentes RichFaces e, inesperadamente, componentes JSF padrão. Se seu valor for true, os controles padrão serão usados. É por isso que, por exemplo, os botões Submit e Edit nas Figuras 7 e 8 têm a mesma cor que o tema RichFaces. O padrão será true se esse elemento estiver omitido.

A boa notícia com relação às entradas nas Listagens 2 e 3 é que elas são praticamente as mesmas em todos seus aplicativos e são essencialmente um código padrão. Se você estiver disposto a aceitar o padrão e não se preocupar em ser explícito, poderá dispensá-los de uma vez.

Há mais uma parte que você verá em cada aplicativo: o namespace RichFaces nas páginas XHTML do aplicativo. A Listagem 4 é uma modificação da Listagem 1 , que inclui o namespace RichFaces:

Listagem 4. Parte inicial de um documento XHTML de Facelets/RichFaces
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:a4j="http://richfaces.org/a4j"
     xmlns:rich="http://richfaces.org/rich" >

Pronto para a ação

Agora você está pronto para ver como usar os componentes de RichFaces. Começarei com Accordion e Accordion Items (consulte a Figura 5 ). Esses itens substituíram Panel Bar e Panel Bar Items das versões anteriores ao RichFaces 4. Provavelmente, você não os usará com frequência, mas eles são fáceis de trabalhar e fornecem um bom primeiro caso de uso para a sintaxe de RichFaces.

A ideia aqui é que um Accordion é um contêiner para Accordion Items. Um Accordion Item tem um cabeçalho e pode conter qualquer outro componente. Accordion Items ficam empilhados um sobre o outro; o conteúdo real é exibido quando a barra do item é clicada. Somente o conteúdo de um item é exibido por vez. Nesse caso, como você pode ver na Listagem 5, estou usando apenas texto. Perceba que todos os componentes têm um prefixo rich: , que se refere à entrada de namespace incluída na Listagem 4. Na demo, o Accordion está contido em um JSF padrão de PanelGrid:

Listagem 5. Componente Accordion de RichFaces
<rich:accordion style="width: 256px;" styleClass="floatLeft">
    <rich:accordionItem header="#{dwRF4D1.calComp} #{dwRF4D1.info}">
        <h:outputText value="#{dwRF4D1.calCompText}" style="font: menu;" />
    </rich:accordionItem>
    <rich:accordionItem header="#{dwRF4D1.plComp} #{dwRF4D1.info}">
        <h:outputText value="#{dwRF4D1.plCompText}" style="font: menu;" />
    </rich:accordionItem>
    <rich:accordionItem header="#{dwRF4D1.acComp} #{dwRF4D1.info}">
        <h:outputText value="#{dwRF4D1.acCompText}" style="font: menu;" />
    </rich:accordionItem>
</rich:accordion>

O elemento <rich:accordionItem /> básico não exige muito mais do que um cabeçalho, que é obtido aqui de um pacote de recursos, usando uma expressão EL.

O conteúdo real para o Accordion Items de demonstração é simplesmente um elemento <h:outputText /> , novamente com texto do pacote de recursos. Eu uso um elemento de estilo font para uma legibilidade consistente e também para mostrar que o RichFaces permite a flexibilidade de CSS.

Perceba que nenhum envolvimento do programador com o JavaScript gerado é necessário. Em apenas algumas etapas, é possível criar um componente clicável, com diversos painéis e boa aparência. Esse é um dos ótimos pontos fortes do RichFaces. Até mesmo componentes simples como esse permitem Ajax (por meio do atributo switchType ), estilos ativos/inativos, eventos e mais.


Vamos criar uma data

O componente Calendar (consulte a Figura 1) deve ser familiar; a seleção de data provavelmente foi um dos primeiros aprimoramentos de JavaScript para as páginas da web. O Calendar de RichFaces tem mais de 80 atributos disponíveis, mas, como você pode ver na Listagem 6, é possível ativar muitas funcionalidades com apenas algumas linhas:

Listagem 6. Componente Calendar do RichFaces
<label for="CalendarID" >#{dwRF4D1.calendar}:</label>
<rich:calendar id="CalendarID"
               value="#{dwRF4D1Handler.selectedDate}"
               timeZone="#{dwRF4D1Handler.timeZone}"
               datePattern="#{dwRF4D1.datePattern}" >
</rich:calendar>

O atributo datePattern quer um padrão de data, conforme definido por java.text.SimpleDateFormat. O exemplo usa novamente o pacote de recursos para o valor, que define a chave datePattern como yyyy-MM-dd. Os atributos value e timeZone são carregados usando métodos de um bean gerenciado, que é definido em faces-config.xml, como mostra a Listagem 7:

Listagem 7. Definição de bean gerenciado para dwRF4D1Handler
<managed-bean>
  <managed-bean-name>dwRF4D1Handler</managed-bean-name>
  <managed-bean-class>com.dw.dwRF4D1Handler</managed-bean-class>
  <managed-bean-scope>session</managed-bean-scope>
</managed-bean>

A classe com.dw.dwRF4D1Handler é básica — composta principalmente por um inicializador, métodos getters e setters — e não deve precisar de mais discussão. Os métodos getSelectedDate() e setSelectedDate() esperam um java.util.Date. O método getTimeZone() retorna apenas java.util.TimeZone.getDefault(); se isso é apropriado ou não para produção depende dos requisitos de seu aplicativo.

Se você também quiser permitir que o usuário tecle valores de data, defina o atributo enableManualInput como true. Se você quiser apenas mostrar o Calendar, defina o atributo popup como false. Obviamente, há muitas outras configurações disponíveis, mas isso é tudo que você precisa para a funcionalidade básica de Calendar.

Se você estiver realizando a migração a partir de versões anteriores do RichFaces, a configuração do componente Calendar para a funcionalidade no código demo é praticamente idêntica na versão 4.


De um jeito ou de outro

O componente Pick List com o atributo orderable— substituição da versão 4 para List Shuttle (consulte a Figura 2 e a barra lateral do RichFaces 4.1) — é ideal para a seleção e organização de itens a partir de um grupo inicial. A Listagem 8 demonstra que ele também é mais fácil de usar do que você possa imaginar inicialmente:

Listagem 8. Componente Pick List do RichFaces
<label for="plID">#{dwRF4D1.pl}:</label>
<rich:pickList id="plID
               value="#{dwRF4D1Handler.orderByTarget}"
               orderable="true" listWidth="10em"
               sourceCaption="#{dwRF4D1.available}"
               targetCaption="#{dwRF4D1.selected}" >
     <f:selectItems value="#{dwRF4D1Handler.orderBySource}" />
</rich:pickList>

A marcação XHTML no código de exemplo inclui atributos adicionais para substituir alguns rótulos padrão, mas o uso típico exige somente value, <f:selectItems /> e normalmente orderable.

O value para valores selecionados e <f:selectItems /> para seleções disponíveis são classes java.util.List contendo qualquer tipo de objeto. No JSF 2, o valor de <f:selectItems /> pode ser uma coleção ou array contendo objetos de qualquer tipo; toString() é chamado para fornecer rótulos. Assim como ocorreu com o código demo, você provavelmente usará listas contendo Strings na maior parte do tempo. Além da inicialização de List para o valor do atributo <f:selectItems /> , a Listagem 9 mostra todo o código fonte Java relacionado ao exemplo de Pick List. O código Java fica praticamente inalterado com relação àquele usado em "An introduction to RichFaces."

Listagem 9. Código de Pick List dwRF4D1Handler relevante
private List<String> lOrderBySource = new ArrayList<String>(),
                     lOrderByTarget = new ArrayList<String>();
...
public List getOrderBySource()
{
  return lOrderBySource;
}

public List getOrderByTarget()
{
  return lOrderByTarget;
}
...
public void setOrderBySource( List<String> orderBySource )
{
  lOrderBySource = orderBySource;
}

public void setOrderByTarget( List<String> orderByTarget )
{
  lOrderByTarget = orderByTarget;
}

Após o usuário ter feito as seleções desejadas, no envio, seu manipulador recebe a lista contendo as opções.


Diga isso na minha face

Se você frequenta fóruns e listas de correspondência, mais cedo ou mais tarde verá uma pergunta sobre como manipular o download de milhares ou milhões de entradas em uma lista suspensa. O componente AutoComplete (consulte a Figura 3), que substitui Suggestion Box, oferece uma forma de mostrar as seleções de entrada válidas sem tentar aquele extremo impraticável. Na verdade, essa preocupação foi um motivo importante para eu começar a investigar o RichFaces e conjuntos parecidos: diversos itens de entrada em um aplicativo em andamento, como cidades, tinham muitas possibilidades para uma lista suspensa, o que não era prático. A funcionalidade AutoComplete é parecida com os componentes conhecidos de conclusão automática disponíveis em muitos aplicativos desktop. Deve ser aparente que os envios de Ajax provavelmente precisam ser invocados para esse tipo de recurso ter qualquer chance de funcionar de forma eficiente em um aplicativo da web.

A Listagem 10 mostra a marcação para o componente AutoComplete. A entrada do campo é inserida ou selecionada na lista suspensa.

Listagem 10. Componente AutoComplete do RichFaces
<h:form>
  <a4j:queue ignoreDupResponses="true"/>

...

<label for="CityID">#{dwRF4D1.city}:</label>
<rich:autocomplete id="CityID" mode="ajax"
                   value="#{dwRF4D1Handler.city}"
                   autocompleteMethod="#{dwRF4D1City.suggest}"
                   autofill="false"
                   selectedItemClass="selCtl" >
</rich:autocomplete>

Se você usou Suggestion Box anteriormente, apreciará as simplificações de AutoComplete. Os atributos mínimos exigidos são mode, value e autocompleteMethod:

  • mode é tipicamente ajax, causando uma solicitação Ajax em cada pressionamento de tecla — muito legal e essencialmente automático. Outros valores são: Cached Ajax, Client e Lazy Client.
  • O value é o mesmo para a maioria dos outros componentes: normalmente métodos getters e setters de um bean gerenciado.
  • O método autocompleteMethod é suggest() em outro bean gerenciado baseado na segunda classe Java no código demo, com.dw.City. A assinatura de método é public List suggest(Object anObject).

No código demo, uma lista de cidades que começam com a letra A e J é criada na inicialização. Se o usuário pressionar a barra de espaços no campo de texto City, toda a lista será retornada. Se A for pressionado, uma sublista contendo as cidades que começam com A é retornada; cidades com J são manipuladas da mesma forma. Os resultados são reduzidos a cada pressionando de tecla. Em seu próprio código, é possível fazer o que desejar, sendo apropriado à entrada. Em meu aplicativo de produção, os resultados vêm de um conjunto de banco de dados limitado, que é provavelmente mais comum. Se você estiver familiarizado com os dados, poderá executar etapas no método para otimizar os resultados. Há casos, por exemplo, em que determinados pressionamentos de tecla podem ser ignorados, de modo que o método somente retorne, eliminando uma viagem até o banco de dados.

Na versão 4.x, RichFaces é desenvolvido sobre a fila JSF padrão. O atributo <a4j:queue /> não é necessário, mas você provavelmente vai querer usá-lo com frequência. Seu uso aqui é para ignoreDupResponses; revise a documentação para saber sobre outros recursos. Observe que um <a4j:queue /> é usado apenas para eventos de componente do RichFaces. É possível usá-lo no nível de visualização ou de formulário. Uma fila de aplicativos global pode ser ativada em web.xml por meio de um parâmetro de contexto <param-name>org.richfaces.queue.global.enabled</param-name> .

Também é possível criar uma fila nomeada, que os componentes consultam usando <a4j:attachQueue name="myRequestQueue" />.

selectedItemClass é uma classe CSS a ser aplicada no componente. RichFaces usa o conceito de aparência. Isso é aplicado até na seleção do plano de fundo em componentes. Meu próprio aplicativo tinha várias listas suspensas JSF padrão que usavam a cor do sistema para o plano de fundo. O componente AutoComplete usou a cor de aparência classic , o que faz as coisas parecerem inconsistentes. A classe SelCtl informa ao componente para usar a cor de plano de fundo lightgrey em vez disso.


Mantendo as tabulações

O componente Tab Panel (consulte a Figura 4) é simples de usar, embora para migração você deva perceber algumas mudanças. Os atributos típicos do RichFaces estão disponíveis, mas o principal que você usará é switchType. Seu valor padrão é server. Para obter informações constantes, provavelmente você preferirá client; ajax também está disponível. Como você pode ver na Listagem 11, um "sanduíche" típico de RichFaces com elementos <rich:tabPanel /> e "sanduíches" empilhados de elementos <rich:tab /> são usados para criar um conjunto de páginas tabuladas:

Listagem 11. Componente Tab Panel do RichFaces
<rich:tabPanel switchType="client" >
        <rich:tab >
          <f:facet name="header">
            <h:panelGrid columns="2">
              <h:outputText value="#{dwRF4D1.info}" />
              <h:graphicImage value="/images/roseTab.jpg" height="20" width="25" />
            </h:panelGrid>
          </f:facet>
          #{dwRF4D1.resultText}
        </rich:tab>

        <rich:tab header="#{dwRF4D1.result}">
...
        </rich:tab>
...
</rich:tabPanel>

Um atributo header é usado para o nome de exibição de cada guia. No código demo, como de costume, o valor do cabeçalho é obtido do pacote de recursos. Assim como o Accordion Items, uma guia pode conter qualquer tipo de componente. Para a demo, eu usei um texto do pacote de recursos para o conteúdo da guia Info e Collapsible Panels para o conteúdo da guia Result.

Como uma alternativa para o atributo header , é possível usar um <f:facet /> chamado "header" para incluir conteúdo adicional. O código de demonstração usa um <h:panelGrid /> contendo texto e uma imagem para o cabeçalho da guia Info.


Sempre que vejo sua face sorridente

Collapsible Panel é uma substituição na versão 4.x para Simple Toggle Panel. É composto por uma barra e uma exibição de conteúdo, que pode ser qualquer componente (consulte Figura 6). Use o atributo header para o título. Clicar na barra mostra ou oculta o conteúdo, de forma bem parecida com um Accordion com somente um item. A Listagem 12 mostra a marcação Collapsible Panel do projeto demo:

Listagem 12. Componente Collapsible Panel do RichFaces
<h:panelGrid columns="1" width="50%">
  <rich:collapsiblePanel switchType="ajax"
                         header="#{dwRF4D1.calComp} #{dwRF4D1.value}"
                         expanded="false" >
      #{dwRF4D1Handler.selectedDate}
  </rich:collapsiblePanel>
  <rich:collapsiblePanel switchType="ajax"
                         header="#{dwRF4D1.plComp} #{dwRF4D1.value}"
                         expanded="false" >
      #{dwRF4D1Handler.orderByTarget}
  </rich:collapsiblePanel>
  <rich:collapsiblePanel switchType="ajax"
                         header="#{dwRF4D1.acComp} #{dwRF4D1.value}"
                         expanded="false" >
      #{dwRF4D1Handler.city}
  </rich:collapsiblePanel>
  <rich:collapsiblePanel switchType="ajax"
                         header="#{dwRF4D1.face}"
                         expanded="false" >
       <img src="images/myphoto.jpg"
            height="80" width="64"/>
  </rich:collapsiblePanel>
</h:panelGrid>

Observe que o atributo switchType faz uma reaparição. client e server estão disponíveis além do valor ajax usado no código. O atributo expanded determina se o conteúdo é exibido na primeira exibição. Para a demo, coloquei vários Collapsible Panels em um JSF <h:panelGrid />, que é colocado em um Tab, que é colocado em um Tab Panel.


Conclusão

RichFaces fornece muitos componentes JSF para o desenvolvimento de RIAs e aplicativos habilitados para Ajax. Este artigo demonstrou somente alguns, mas você deve ter sentido como as coisas funcionam no RichFaces e visto diversos componentes que podem ser úteis em muitos aplicativos. Com a introdução da versão 4, o Richfaces agora é compatível com o JSF 2 e inclui simplificações e eficiências que você apreciará. Há uma demo on-line de todos os componentes disponíveis no conjunto, na documentação e em outros recursos disponível na página de projeto do RichFaces (consulte Recursos).

Se você optou por usar o RichFaces, eu incentivo a se aprofundar nos componentes e processamento a4j: discutidos na documentação, a fim de entender como aplicar os conceitos aos outros componentes do RichFaces. O tempo de pesquisa investido gerará múltiplos dividendos em seu processo de desenvolvimento e desempenho do tempo de execução.


Download

DescriçãoNomeTamanho
Demonstration WAR for this article1j-richfaces4.zip8.9MB

Nota

  1. Os códigos-fonte Java estão incluídos no arquivo WAR. Para obter instruções sobre como usar o arquivo WAR, consulte o arquivo readme.txt incluído com o download.

Recursos

Aprender

  • RichFaces: o website do RichFaces tem links para informações, documentação, demo on-line e downloads.
  • Página inicial do JSF: encontre recursos de desenvolvedor para as implementações JSF.
  • "An introduction to RichFaces" (Joe Sam Shirah, developerWorks, março de 2008): o artigo anterior do autor cobre o RichFaces 3.x e o JSF 1.2.
  • JSF 2 fu: série de David Geary sobre o developerWorks demonstra uma ampla gama de recursos do JSF 2.
  • What's New in JSF 2?: esta entrada no blog de Andy Schwartz é um recurso antigo, mas ainda útil para os recursos de JSF 2.
  • Need to implement Richfaces 4.0 with JSF 2.0: essa sequência no fórum de discussão do RichFaces contém informações sobre como usar o RichFaces 4 com o IBM WebSphere.
  • Ajax4jsf: Ajax4jsf, agora parte do RichFaces, começou com um projeto separado.
  • Navegue na livraria de tecnologia para ver livros sobre este e outros tópicos técnicos.
  • Zona tecnologia Java do developerWorks: Encontre centenas de artigos sobre quase todos os aspectos da programação Java.

Obter produtos e tecnologias

  • RichFaces: faça o download do RichFaces.
  • JSF: faça o download do Mojarra 2.x ou de outras implementações de referência do JSF.
  • "How to add RichFaces 4.x to projects not based on maven" (Juan Camilo Prada, RichFaces Wiki, 2011): este artigo discute dependências e locais para download de cssparser.jar, sac.jar e guava.jar.
  • Apache Tomcat: encontre informações e downloads para o contêiner de servlet Tomcat.
  • GlassFish: encontre informações e downloads para o servidor de aplicativos GlassFish.
  • WebSphere Application Server for Developers: faça o download de uma oferta gratuita do WebSphere idêntica ao ambiente de tempo de execução de produção no qual seu aplicativo será executado.
  • Avalie os produtos IBM da maneira que for melhor para você: faça download da versão de teste de um produto, avalie um produto on-line, use-o em um ambiente de nuvem ou passe algumas horas na SOA Sandbox aprendendo como implementar Arquitetura Orientada a Serviços de forma eficiente.

Discutir

  • Participe da comunidade do developerWorks. Entre em contato com outros usuários do developerWorks, enquanto explora os blogs, fóruns, grupos e wikis orientados ao desenvolvedor.

Comentários

developerWorks: Conecte-se

Los campos obligatorios están marcados con un asterisco (*).


Precisa de um ID IBM?
Esqueceu seu ID IBM?


Esqueceu sua senha?
Alterar sua senha

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


A primeira vez que você entrar no developerWorks, um perfil é criado para você. Informações no seu perfil (seu nome, país / região, e nome da empresa) é apresentado ao público e vai acompanhar qualquer conteúdo que você postar, a menos que você opte por esconder o nome da empresa. Você pode atualizar sua conta IBM a qualquer momento.

Todas as informações enviadas são seguras.

Elija su nombre para mostrar



Ao se conectar ao developerWorks pela primeira vez, é criado um perfil para você e é necessário selecionar um nome de exibição. O nome de exibição acompanhará o conteúdo que você postar no developerWorks.

Escolha um nome de exibição de 3 - 31 caracteres. Seu nome de exibição deve ser exclusivo na comunidade do developerWorks e não deve ser o seu endereço de email por motivo de privacidade.

Los campos obligatorios están marcados con un asterisco (*).

(Escolha um nome de exibição de 3 - 31 caracteres.)

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


Todas as informações enviadas são seguras.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=80
Zone=Tecnologia Java, Software livre
ArticleID=788649
ArticleTitle=Usando RichFaces com o JSF 2
publish-date=01272012