Pular para o conteúdo principal

RichFaces 4: Bean Validation no lado cliente para campos na tela, simples e fácil

No TDC2011 (SP) além de me divertir e aprender bastante também apresentei, na trilha Java EE, a palestra: "RichFaces 4: Desenvolvimento Web com JSF2 mais rico". Iniciei a palestra comentando sobre as vantagens em adotar uma suíte de componentes UI (User Interface) terceira no desenvolvimento de aplicativos web com JavaServer Faces versão 2.

Mas o foco da palestra foi explorar os novos recursos do RichFaces 4, uma das mais famosas suítes para desenvolvimento JSF, a nova versão recentemente lançada completamente compatível com JSF 2.

Nesse post vou explorar um pouco mais algumas uma funcionalidades citadas na palestra: RichFaces Client Side Validation (CSV), a validação de campos do RichFaces 4 com Bean Validation. Mais uma vez utilizei nossa cobaia para experiências com JSF, o ScrumToys.

Bean Validation no lado cliente

O novo componente rich:validator, do RichFaces 4, pode ser vinculado a componentes inputs em uma tela para aplicar validações de acordo com as restrições definidas através das anotação do Bean Validation.

O Bean Validation é uma especificação Java EE 6 (JSR 303) que padroniza um mecanismo de validação, aplicado a objetos que seguem o modelo JavaBean, configurados a partir de anotações. Os containers que implementam o Java EE 6 utilizam um provider do Bean Validation, como o Hibernate Validator por exemplo. Mas nesse caso as validações são processadas pelo container, no lado servidor.

Com o rich:validator as validações do Bean Validation ocorrem no browser, no lado cliente. O código a seguir demonstra trechos da entidade Story, com as anotações demarcando validações que deverão ser aplicadas no cadastro da entidade. Nesse caso o nome não pode ser nulo, deve conter no mínimo 3 e no máximo 5 caracteres, enquanto a prioridade dever estar entre 1 e 5. Veja:

(Story.java)
//...
import javax.validation.constraints.NotNull;
import javax.validation.constraints.Size;
import javax.validation.constraints.Min;
import javax.validation.constraints.Max;

@Entity
//... definicao de tables e namedqueries da entidade
public class Story extends AbstractEntity implements Serializable {

    @NotNull
    @Size(min=3, max=60)
    @Column
    private String name;
    
    @Min(value=1)
    @Max(value=5)
    private int priority;

    //... outros atributos e os metodos da entidade
}

No próximo trecho de código o uso do rich:validator dentro os inputs das propriedades name e priority da entidade Story. Um detalhe importante para a validação funcionar corretamente é utilizar em conjunto o componente rich:message ou rich:messages, responsáveis por exibir na tela as mensagens caso a validação reclame:

(\story\create.xhtml)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">
  <ui:composition template="/template.xhtml">
    ...
    <ui:define name="content">
      <h:form styleClass="scrumForm" id="createStoryForm">
        <h:panelGrid columns="3">
          <h:outputLabel value="Name:" for="itName"/>
          <h:inputText id="itName" 
             value="#{storyManager.currentStory.name}">
            <rich:validator />
          </h:inputText>
          <rich:message for="itName" styleClass="errorMessage"/>

          <h:outputLabel value="Priority:" for="itPriority"  />
          <h:inputText id="itPriority" 
             value="#{storyManager.currentStory.priority}">
            <rich:validator />
          </h:inputText>
          <rich:message for="itPriority" styleClass="errorMessage"/>
          ...
        </h:panelGrid>
      </h:form>
    </ui:define>
  </ui:composition>
</html>

Ao renderizar a página no browser, o código javascript gerado para a validação na camada cliente será parecido com o demonstrado a seguir (apliquei uma formatação básica pra melhorar a visualização):

(javascript gerado na tela de cadastro de uma nova Story)
function createStoryForm_3AitName_3Av(event,id,e,da){
  var p={da:da, 
       v:[{f:RichFaces.csv.validateSize,
           p:{"min":3,"max":60},
           m:{"detail":"size must be between 3 and 60",
              "severity":0,
              "summary":"size must be between 3 and 60"}},
          {f:RichFaces.csv.validateRequired,
           p:{},
           m:{"detail":"may not be null",
              "severity":0,
              "summary":"may not be null"}}]};
  RichFaces.csv.validate(event,id,e,p);
}

function createStoryForm_3AitPriority_3Av(event,id,e,da){
  var p={da:da,
       c:{f:RichFaces.csv.convertInteger,p:{},
          m:{"detail":"{2}: ''{0}'' must be a number between \u002D2147483648 and 2147483647 Example: {1}",
             "severity":0,
             "summary":"{2}: ''{0}'' must be a number consisting of one or more digits."} },
       v:[{f:RichFaces.csv.validateMin,
           p:{"value":1},
           m:{"detail":"must be greater than or equal to 1",
              "severity":0,
              "summary":"must be greater than or equal to 1"}},
          {f:RichFaces.csv.validateMax,p:{"value":5},
           m:{"detail":"must be less than or equal to 5",
              "severity":0,
              "summary":"must be less than or equal to 5"}}]};
  RichFaces.csv.validate(event,id,e,p);
}

$(document).ready(function() {
    new RichFaces.ui.Message("createStoryForm:j_idt68",
      {"forComponentId":"createStoryForm:itName",
       "showSummary":false,
       "showDetail":true} )
    new RichFaces.ui.Message("createStoryForm:j_idt74",
      {"forComponentId":"createStoryForm:itPriority",
       "showSummary":false,
       "showDetail":true})
});

Analisando o restante do html é possível identificar que as 2 funções javascript são associadas ao evento onchange dos 2 inputs. Esse é o comportamento padrão do rich:validator, mas é possível customizar outro evento através da propriedade event, por exemplo:

(\story\create.xhtml)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">
    ...

    <h:outputLabel value="#{i18n['story.form.label.name']}:" for="itName"/>
    <h:inputText id="itName" 
       value="#{storyManager.currentStory.name}">
      <rich:validator event="keyup" />
    </h:inputText>
    <rich:message for="itName" styleClass="errorMessage"/>

    ...
</html>

Os validadores JSF, como por exemplo o f:validateRange, funcionam mesmo quando misturados ao mesmo input que usa o rich:validator, mas isso não é recomendado. Adotando Bean Validation a configuração para validar os dados de uma entidade pode ser reaproveitada em várias camadas do aplicação.

Caso não exista código lado cliente (javascript) registrado para uma determinada validação, o rich:validator executa a validação no lado servidor via Ajax (Ajax fall-backs). Outro exemplo do uso e mais detalhes sobre o rich:validator estam disponíveis na documentação do RichFaces 4.


Links complementares:

[]s
Eder Magalhães
www.yaw.com.br
twitter.com/youandwe
twitter.com/edermag

Comentários

Postagens mais visitadas deste blog

PrimeFaces com JSF2 no ScrumToys

O JSF traz um grupo de componentes visuais prontos, a partir da versão 2.0 com suporte a Ajax nativo! Melhor que isso é a possibilidade de customizar ou utilizar uma suíte de componentes prontos para "turbinar" o projeto com o minimo de esforço. PrimeFaces é uma suite de componentes JSF customizados, a maioria com suporte a ajax, conta com um Kit para desenvolvimento mobile, é open source, a documentação é razoável, facíl de instalar e usar. Nesse exemplo utilizo o PrimeFaces 2.0.0, versão com suporte a JSF 2, no ScrumToys. Conheçe o ScrumToys ? ScrumToys é um Projeto Exemplo para JavaServer Faces 2.0 dentro do NetBeans 6.8, criado e mantido pelo time da Globalcode. É interessante que você tenha o NetBeans 6.8 para fazer esse exemplo, senão tiver baixe aqui . Baixe também, aqui , o PrimeFaces e o configure no NetBeans como biblioteca para o ScrumToys. Inicialmente o PrimeFaces requer a runtime JSF, mas isso pode variar dependendo de quais componentes você utilize, mai

Seja um Palestrante do TDC Connections 2022

A Equipe TDC está muito feliz e orgulhosa em começar mais uma jornada de eventos em 2022 e criar muitas oportunidades! Agora, chegou o momento para você que sempre quis ser palestrante mas não teve oportunidade, e também de quem já é palestrante experiente, e está ansioso para compartilhar aquela nova prática ou caso de sucesso fresquinho, submeter sua palestra para o TDC Connections e co-criar conosco o maior evento de desenvolvedores do Brasil.  Link de inscrição: https://cfp-conn.thedevconf.com.br/?_ga=2.103579840.1386204218.1643036190-1988609034.1631800014 Confira aqui o calendário do TDC 2022. Nesta edição teremos muitas novidades e você poderá palestrar de forma Online ou Presencial! Entenda como vai funcionar o TDC CONNECTIONS: Nesta edição, além de todo o conteúdo dividido em Trilhas transmitidas ao vivo (13 trilhas simultâneas) também teremos dois eventos híbridos em Recife e Belo Horizonte, que terão uma trilha por dia, ao vivo, para um público limitado, seguindo protocolo

Entendendo como funciona a programação de computadores: linguagens de programação, lógica, banco de dados

Nesse post, diferente dos últimos que foram mais enfáticos nas experiências com tecnologias, vou focar um pouco mais nos profissionais que estão começando, ou pretendem ingressar na área de desenvolvimento de software, falando sobre conceitos fundamentais relacionados a programação em geral . Mercado de trabalho para programação Conforme já sabemos, o mercado de desenvolvimento de software, especialmente no Brasil, continua em franca expansão, sendo que cada vez mais as empresas buscam desenvolver seus próprios sistemas usando as mais diferentes e novas tecnologias. Algumas matérias interessantes: As seis profissões mais valorizadas em 2010 no IDG Now! Muitas vagas e sensação de reaquecimento da economia Por isso, a área de desenvolvimento de software tem despertado interesse em muitos profissionais de outras áreas que desejam mudar de profissão, já que as oportunidades de trabalho tendem a ser maiores. Esse é um perfil presente em muitos dos clientes da Globalcode que acabou m

JSON fácil em Java com GSon !

Ola pessoal ! O formato JSON ( J ava S cript O bject N otation) vem se consagrando cada vez mais na comunicação de dados, principalmente nos dispositivos móveis devido a esse formato ser mais leve que o XML e também mais legível. Uma prova disso são as inúmeras bibliotecas que existem para manipular esse formato, e no caso do Android, o suporte ao JSON é nativo. Mas apesar de ter esse suporte nativo, algumas operações devem ser feitas manualmente e o código acaba ficando um pouco verboso e repetitivo, já que para cada objeto que se deseja transmitir é necessário fazer um método que lê as propriedades do JSON e faz as devidas atribuições no seu objeto Java. Vamos supor o seguinte objeto sendo transmitido em JSON: {   user: {     id: 123456,     name: "Neto Marin",     username: "netomarin",     email: "netomarin@globalcode.com.br"   } } Se você fosse tratar um Webservice que envia esse JSON para o seu aplicativo Android, além de criar a o

Top 4 desafios do gestor de TI e como superá-los

  O setor de TI se apresenta como uma área essencial ao desenvolvimento e expansão da empresa, em especial, aquelas que têm a criação de soluções tecnológicas como core business. O mercado dinâmico da atualidade, com mudanças constantes e concorrência elevada, exige aperfeiçoamento do gestor de TI para se destacar em suas atividades. Pensando em te ajudar nesse processo, separamos 4 desafios do gestor de TI e como superá-los. Acompanhe! Transformação digital na atualidade A transformação digital é constante e define os caminhos futuros da nossa sociedade. Por isso, o setor de TI vem se tornando mais estratégico em empresas de todos os segmentos. O home office é um bom exemplo de como a revolução digital está se processando. Vamos falar sobre ele e outros pontos nos tópicos a seguir. Confira! Desafios do gestor de TI Para se manter atualizado sobre o tema e permanecer competitivo no mercado, é  necessário acompanhar as tendências de TI . Confira, abaixo, alguns dos principais desafios d

Segurança da informação no alvo: o que esperar do futuro?

A segurança da informação não se trata apenas de proteger os dados contra acesso não autorizado. Na prática, refere-se aos recursos que impedem: uso; registro; inspeção; divulgação; interrupção; modificação; destruição de dados. O uso de dados pode abranger desde um perfil nas redes sociais a detalhes financeiros, biometrias ou novos projetos. Por isso, a preocupação com a proteção dos dados é crescente, tanto para empresas quanto clientes. Para muitas pessoas, a coleta de dados é considerada invasão de privacidade, criando desconfiança do titular dos dados, pois o uso dos dados pode ser facilmente corrompido, utilizado para fins não declarados. Apesar de o uso dos dados terem impulsionado os avanços tecnológicos na última década, as organizações lidam com o desafio de distinguir dados de informações pessoais de modo a proteger a privacidade e as preferências dos clientes. Neste artigo, abordaremos o impacto da segurança da informação e o que esperar do futuro. Confira casos conhecido