Olá desenvolvedores, neste novo tutorial sobre o PrimeFaces estruturaremos o layout da nossa aplicação deixando-o ainda mais amigável ao usuário. Em tutoriais anteriores mencionei a importância da usabilidade nos sistemas que desenvolvemos. Porque se algum aspecto da sua aplicação, por menor que seja deixar o usuário desconfortável, há grandes chances de que ele venha abandoná-la na primeira oportunidade.

É pensando nessas particularidades que o tutorial de hoje traz algumas alterações no layout do cadastro que estamos construindo.

PROMOVENDO ALTERAÇÕES DE LAYOUT

Na tela primefaces.xhtml o primeiro passo será substituir o componente PrimeFaces p:panelGrid pelo componente de mesmo nome do JSF alterando apenas o prefixo, h:panelGrid. Com essa pequena alteração conseguiremos promover uma melhor experiência de visualização ao eliminar o estilo de “grade” que separava o label dos campos de entrada.

Ainda no contexto do formulário seria interessante um layout horizontal em substituição a aparência de folha corrida que temos agora, e para isso basta adicionar mais duas colunas no h:panelGrid. Ressaltando que esta definição de colunas deverá sempre considerar números pares.

<h:panelGrid columns:“4”>

O componente de seleção p:selectOneMenu obedecerá sempre que não houver uma largura especifica o limite de caracteres, para ajustá-lo deixando-o igual aos demais componentes de entrada será preciso definir uma largura.

<p:selectOneMenu style=“width:190”>

Observe que o campo de entrada correspondente ao salário aceita também caracteres textuais. Precisamos auxiliar o usuário ao interagir com a nossa aplicação, e isso inclui diminuir as chances que ele cometa erros, e, impor restrições é uma forma de fazê-lo, se um campo é para entrada de um dado numérico, então ele deve aceitar apenas números. No PrimeFaces basta alterar o campo p:imputText por p:inputNumber.

REESTRUTURANDO A TABELA

Algumas informações são importantes para o contexto da aplicação e regras de negócio, mas não precisam ser visualizadas pelo usuário. Exiba para o usuário apenas informações relevantes para ele.

Assim, algumas colunas da tabela não precisarão ser visualizadas pelo usuário por mão serem relevantes para ele. Desse modo delete as colunas referentes a sobrenome e idade, e se achar pertinente remova também a coluna de login. E então poderemos aumentar a largura da coluna do Nome.

Ao definir uma largura fixa para o nome o PrimeFaces se adaptará automaticamente a largura das outras colunas. E se aumentarmos a coluna do Nome, em contrapartida poderemos diminuir a coluna do “id”. 

<p:column headerText=“id” width:“20”>
<p:column headerText="Nome" width:"450">

Outra interessante modificação é a centralização dos botões que no momento estão todos alinhados a direita, entregando um aspecto estranho a tabela. Para isso deveremos envolver a tag de componente do h:commandLink pela tag center.

ESTRUTURANDO O DIALOG

No dialog aumentaremos a largura do modal para 500pixels. Definiremos na tabela os mesmos 20 pixels para a largura da coluna do id, e 60 pixels para coluna do botão. Dessa forma a largura da coluna do e-mail aumentará automaticamente.

<p:column headerText=“id” width:“20”>
<p:column headertext="Nome" width:"60">

O componente de entrada referente ao e-mail também receberá uma largura fixa.

<p:inputText style“=width:315”>

EM POUCAS PALAVRAS

Obviamente as tags de componentes apresentam outras propriedades conforme implementamos em tutoriais anteriores, neste tutorial exibimos apenas as informações que nos interessava neste momento. Assim, estilizamos o nosso layout do PrimeFaces de forma que ele tenha uma aparência muito mais amigável para o usuário.