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

Você já pensou em ser palestrante em algum evento ?

Você já deve ter participado de algum evento e pensado como deve ser legal ser palestrante... E para falar a verdade, é muito bom mesmo. Eu adoro, o Vinicius adora e conheço muitas pessoas que curtem cada minuto da participação no evento como palestrante. Com certeza é uma responsabilidade a mais. Você sente medo, adrenalina, tem que se preparar. Literalmente coloca a cara a tapa para qualquer pessoa te avaliar em todos os sentidos. Qual o seu tom de voz?  Seus slides são legais? Você manja mesmo ?  Seu português está ok?  E as palavras em inglês ?  Teve algum deslize técnico? E MUITO mais.  Mas é claro que a exposição tem dois lados... e os resultados podem ser ótimos. Normalmente conhecemos mais pessoas como palestrantes e podem surgir boas oportunidades de negócio. É sempre positivo ter uma nova referência positiva quando as pessoas buscam nosso nome no Google, podemos fazer a diferença para quem está assistindo a palestra e muito mais.  No The Developer's

TDC ONLINE: SUA PLATAFORMA DE PALESTRAS GRAVADAS DO TDC DISPONÍVEL

Além do conteúdo ao vivo transmitido online nas edições do TDC, agora você pode ter acesso à centenas de palestras gravadas, através da nossa nova plataforma de vídeos - o TDC Online, que reúne todas as Trilhas premium, Stadium e Salas dos Patrocinadores das edições anteriores de 2022, TDC Innovation e TDC Connections.  Para acessar, basta clicar na edição em que você participou ( TDC Innovation ou TDC Connections ); Fazer o mesmo login (com e-mail e senha) cadastrados na hora de adquirir ou resgatar o seu ingresso no TDC; E clicar na Trilha de sua opção, e de acordo com a modalidade do seu ingresso. Logo em seguida, você será direcionado para a seguinte página com a lista de todas as palestras por Trilha: Pronto! Agora você tem acesso à centenas de palestras gravadas da sua área de interesse, para assistir como e quando quiser! Caso tenha esquecido a senha, clique na opção "Esqueci a senha" , insira o e-mail que você realizou para o cadastro no evento, e aparecerá a op

TDC INNOVATION lança University Pass

Modalidade de ingresso tem como objetivo ajudar na capacitação dos universitários Uma pesquisa realizada em 2020 pela Associação Brasileira das Empresas de Tecnologia da Informação e Comunicação (Brasscom) diz que até o ano de 2024 o Brasil precisará de cerca de 420 mil profissionais na área de Tecnologia da Informação. Porém, por ano, a mesma pesquisa diz que o país forma apenas 46 mil profissionais capacitados no nicho. Pensando nisso, para ajudar na formação e capacitação desses jovens profissionais, o TDC INNOVATION, segunda edição do ano do The Developer's Conference, lança o University Pass, modalidade de ingresso que possibilita aceso digital gratuito a todas as palestras do evento, ou com 50% de desconto para quem preferir ir pessoalmente. Com o tema central “Desafios para a criação do futuro Digital”, o TDC INNOVATION ocorrerá entre 1 e 3 de junho, de forma híbrida: presencialmente no Centro de Convenções CentroSul, em Florianópolis, e com transmissão simultaneamente pela

TDC Digital: o que você precisa saber para transformar sua carreira em 2022

O TDC Digital é o maior evento de TI do mercado e proporciona crescimento profissional a partir de palestras com especialistas e oportunidades de networking com o mundo todo, direto da sua casa. Através da escolha individual de cada participante é possível obter experiências imersivas e transformadoras conforme o tema-chave de cada trilha.  O evento também é o lugar ideal para ajudar no desenvolvimento de carreiras, permitindo que qualquer pessoa com vontade — e um tema interessante — seja palestrante e compartilhe suas experiências e conhecimentos. Para aqueles que querem  participar como ouvinte a plataforma do TDC favorece conferências dinâmicas, e o encontro de diversas comunidades e ecossistemas de TI. E, após a escolha de uma trilha, fica mais fácil acompanhar especialistas para aprender e se inspirar. Em 2021, o The Developer’s Conference (TDC) foi 100% digital e, em três dias de evento, contou com mais de 300 horas de conteúdos , incluindo: Agile; Testes; Design; Web e Mobile;

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

Inspire a mudança com a liderança ágil

A liderança ágil é essencial para que uma organização realize mudanças de negócios significativas. Ser líder é uma tarefa desafiadora, especialmente em um cenário de constantes transformações, principalmente na forma de lidar com a relação empresa e pessoal. Pesquisas sobre liderança na era digital revelam que algumas soft skills têm sido substituídas por outras, o profundo conhecimento na área de negócio, ser referência nas tecnologias utilizadas, ter foco total no prazo e nas entregas e conhecer um arsenal de técnicas e ferramentas, têm dado espaço a habilidades, como: empatia; adaptabilidade; visão e propósito; engajamento constante; senso de equipe.   A colaboração entre pessoas de todos os níveis hierárquicos são vitais, afinal, as equipes estão trabalhando para o mesmo objetivo: o encantamento e atendimento das necessidades do cliente que proporcionarão um crescimento sustentável da organização. Com propósito claro, estratégia e prioridades definidas, os times desfrutam de uma