Olá desenvolvedores, seguindo com a biblioteca de componentes PrimeFaces a exemplo do que fizemos no tutorial PRIMEFACES ESTRUTURANDO O LAYOUT”, neste tutorial iremos trabalhar ainda mais o nosso layout. A intenção é deixar o sistema funcional e bonito, proporcionando uma navegação fluida para o usuário, de forma que ele se sinta confortável ao interagir com a solução desenvolvida por nós. É isso que devemos buscar, além de um sistema útil e funcional um layout agradável que proporciona uma ótima experiência de navegação.

Em muitas outras oportunidades já falamos sobre a usabilidade, desse modo não me estenderei aqui. Porém, de forma sucinta entenda que usabilidade se refere a facilidade com que os usuários utilizam a sua solução, e a ausência dela pode implicar em um sistema que ninguém gostará de usar.

MEHORIAS NO CADASTRO DE TELEFONE

No cadastro de telefones poderemos, por exemplo, adicionar uma máscara, estabelecendo dessa forma um padrão de preenchimento e impondo uma restrição. Para conhecer todas as máscaras que você pode adicionar aos seus campos de entrada com os componentes do PrimeFaces é só consultar a documentação.

Assim, na tela telefoneprimefaces.xhtml troque o p:inpuText pelo p:inputMask e adicione o atributo mask para definir a estrutura de preenchimento desejada.

<p:inputMask value=“” mask=“(99) 99999-9999” required=“” requiredMessage=“” >

No campo de entrada referente ao tipo de telefone que está sendo adicionado deixamos o preenchimento livre, dessa forma o usuário poderá preencher o que e como quiser, não é o que queremos.

Desse modo, implementaremos um campo de opções de seleção, com o p:selectOneMenu, onde o itemValue do componente f:selectItem é o que será gravado na base de dados e o itemLabel se refere ao que será exibido para o usuário. Defina também a largura para o componente.

REESTRUTURANDO A TABELA

Na tabela atribua as seguintes dimensões as respectivas colunas, 20 pixels para a coluna do id, 200 pixels para a coluna referente ao tipo, e 50 pixels para a coluna do botão de “Excluir”. 

<p:column width=“” >

EM POUCAS PALAVRAS

Neste tutorial implementamos ainda mais melhorias em nossa aplicação com o PrimeFaces, impondo uma restrição a partir da implementação da máscara, reduzindo a possibilidade de preenchimentos de forma equivocada, e claro, promovendo uma navegação fluída e agradável.