Máscaras de componentes

A máscara define o padrão a ser seguido em campos de formulários nas páginas. Uma máscara pode ser aplicada em um componente específico ou em vários componentes, caso todos eles sigam os mesmos padrões.

Definindo uma máscara em um componente

A máscara é aplicada através de um Behavior do Wicket, um comportamento aplicado a aquele componente em específico. Para adicionar uma máscara ao seu componente é bem simples, basta adicionar o Behavior de máscara nele.

Exemplo adicionando uma máscara de data em um input de data:

public class MyPage extends WebPage {

         @Override
         protected void onInitialize() {
             TextField<Date> data = new TextField<Date>("data");
             data.add(new FixedMaskBehavior("99/99/9999"));
             this.add(data);
         }
}

Tipos de máscaras

Hoje, existem dois tipos principais de máscara e são eles:

  • FixedMaskBehavior (FixedMaskBehavior), máscara fixa no input.
  • DynamicMaskBehavior (DynamicMaskBehavior), máscara dinâmica no input.

O tipo fixo criará uma máscara fixa, imutável, que deverá ser preenchida exatamente como o esperado. No caso de um input de data com máscara “99/99/9999” o input apresentará sempre a máscara que deve ser utilizada para o preenchimento, no caso “__/__/____”.

O tipo dinâmico criará uma máscara dinâmica, que será exibida conforme o preenchimento. No caso de um input de data com máscara “99/99/9999” o input não apresentará nenhuma máscara de começo, apenas conforme o campo seja preenchido, utilizando a máscara somente quando necessário. No caso, pode apresentar 2013, 08/2013 ou 21/08/2013.

Definindo uma máscara por padrão de um componente

Você pode definir uma máscara para todos os componentes que possuírem um mesmo padrão. Para isso, basta utilizar o Listener de instanciação de componentes responsável por adicionar máscaras, o FormComponentMaskInstantiationListener (FormComponentMaskInstantiationListener).

Exemplo de uso:

public class MyApplication extends WebApplication {

         @Override
         protected void init() {
             this.getComponentInstantiationListeners().add(new FormComponentMaskInstantiationListener(FixedMaskBehavior.class, "99/99/9999") {
                 @Override
                 public boolean matches(Component target) {
                     return Date.class.isAssignableFrom(target.getDefaultModelObject().getClass());
                 }
             });
         }
}

No exemplo acima, todos os inputs que possuírem como objeto de model um objeto do tipo Date receberá uma máscara fixa de “99/99/9999”.