Controles e apresentação

Os elementos de IU da Pega Platform™ incluem controles básicos prontos para uso, incluindo:

• Controles de conclusão automática
• Botões
• Gráficos
• Caixas de seleção
• Listas suspensas
• Links
• Botões deslizantes
• Editores de rich-text

É possível reaproveitar e customizar os elementos de IU conforme o necessário aplicando os estilos existentes para permitir que os desenvolvedores gerenciem os controles e os estilos separadamente. Os elementos de IU prontos para uso, como botões básicos, vêm com formatos de estilo (style formats) predefinidos. Botões e formatos de etiqueta predefinidos ou prontos para uso são retirados do skin do aplicativo. Uma das melhores práticas da Pega Platform é utilizar formatos existentes de estilo, a não ser que haja um desenvolvedor experiente de IU que possa modificar ou criar novos formatos de estilos. O uso de formatos de estilos predefinidos poupa tempo de desenvolvimento, reduz o trabalho de manutenção e melhora a consistência na aparência do aplicativo.

Os formatos predefinidos de estilo para um botão incluem Padrão (Standard), Simples (Simple) e Forte (Strong).

É possível estilizar todos os elementos de apresentação da interface, incluindo tipografia, bordas, fundos, layouts e posicionamento e alinhamento da IU. O uso de formato predefinido de estilo aplica uma combinação dessas opções de estilização. Por exemplo, é possível aplicar um formato de estilo em botões para que tenham uma borda preta, fundo branco, fonte de cor preta, texto centralizado e alinhamento centralizado na interface. A aplicação do formato de estilo utiliza toda a estilização definida para aquele formato de estilo. Os formatos de estilo para tipos de controle específicos são reaproveitados entre os aplicativos.

A apresentação e a estilização são definidas para um controle específico. Dependendo do tipo de controle, é possível estilizar diferentes aspectos dele. Por exemplo, diferente de um campo de texto, um link não tem uma borda, ou seja, não se aplica cor de borda a um link.

Alguns controles permitem mudar a apresentação da etiqueta ou legenda. Por exemplo, é possível adicionar uma legenda acima de um botão ou substituir a etiqueta do botão por um ícone, conforme mostrado na imagem a seguir.

Ao especificar o texto em um botão, como melhor prática, o texto deve descrever a ação realizada e o objeto sobre o qual a ação é executada. Desde que cada controle tenha uma etiqueta clara e distinta. Por exemplo, a visualização da confirmação de um pedido tem três botões descritivos. Ao clicar no botão Modificar detalhes (Modify details), os usuários podem modificar o e-mail, endereço de entrega, forma de pagamento e número de contato informado pelos usuários. 

Estabelecer uma aparência consistente nos controles dos botões do aplicativo poupa tempo de desenvolvimento, oferece ao aplicativo uma interface de usuário mais previsível e facilita o preenchimento dos formulários para os usuários. Atribua o formato de estilo do controle do botão para oferecer uma dica visual aos usuários sobre a importância relativa do botão. Por exemplo, para o botão Enviar (Submit) de um formulário, defina a opção Formato do controle (Control format) para Forte (Strong) como dica aos usuários de que é a ação primária que possam tomar no formulário.

Na imagem a seguir, clique nos ícones + para saber mais sobre os controles básicos disponíveis.