Design & UX

28 nov, 2017

Customizando as cores de uma aplicação no Oracle APEX

Publicidade

Olá, pessoal! Como vocês estão?

Hoje vou mostrar como mudar as cores de uma aplicação no Oracle APEX de forma fácil e rápida. A nova versão do Oracle APEX possui um novo template, o tema “Universal Theme (42)”. Esse novo template, implementado a partir da versão 5.1 do APEX, permite customizar facilmente as cores de seus componentes, tais como: Botões, Headers, Grids, Colunas e Relatórios.

Vou criar uma aplicação exemplo simples, um cadastro de funcionários. O mais importante nesse momento é escolher o tema “Universal Theme (42)”. Por default já vem selecionado.

Após a criação da aplicação, efetuei alguns ajustes para facilitar o entendimento desse artigo.

Para alterar as cores dos componentes da aplicação, devemos utilizar a barra de tarefas do desenvolvedor. Essa barra de tarefas é habilitada quando executamos a aplicação, logados através da Workspace do APEX:

Clique na opção “Theme Roller” e irá abrir uma tela com as opções de customização:

Clique na opção “Show All” para ver todos as opções disponíveis.

Veja que a primeira propriedade “Style” possui algumas opções. São alguns estilos pré-definidos disponibilizados pela Oracle. Você também pode escolher algum e utilizar em sua aplicação.

Na seção Global Colors é onde estão definidas as cores do Header, Body, Links e Focus de todas as páginas da aplicação.

Vamos mudar para amarelo. Clique na cor do Header e irá abrir o seletor de cores.

Temos propriedades por componente, por exemplo. Podemos definir as cores das paletas e o arredondamento das bordas dos botões. Podemos definir uma cor exclusiva do texto ou do fundo do botão quando ele for Hot ou Danger.

Outro bom exemplo que podemos explorar é a seção “Navigation”. Lá você pode mudar as cores da barra de menu. Entre as opções, você pode mudar a cor do ícone, da lista e da entrada de menu que está sendo acessada pelo usuário.

Na seção “Forms” estão as opções de mudança dos itens de um formulário:

Já na seção “Regions”, podemos mudar as cores das regiões. Tais como seu Header e Body.

As outras seções são:

  • States – Determina as cores das mensagens que são exibidas ao usuário.
  • Pallete – Você pode customizar até 15 opções de cores para serem utilizadas nos componentes do APEX.
  • Interactive Reports – Refere-se as cores dos interactive reports, tanto a grid editável quanto aos relatórios.
  • Custom CSS – Permite inserir um tags CSS em toda a aplicação de maneira simples e central.

Em especial, a seção “Layout” possui propriedades que permitem mudar o tamanho do Header (título da aplicação), da árvore de menus, definir um tamanho fixo para o Body das páginas da aplicação.

Importante!

Clique no botão “Save As” e salve o seu estilo personalizado. Em seguida clique no botão “Set as Current” para definir o seu estilo como padrão da sua aplicação.

Veja como ficou a aplicação:

Para acessar a aplicação exemplo, clique no link abaixo:

https://apex.oracle.com/pls/apex/f?p=124881

O recurso “Theme Roller” permite facilmente e rapidamente customizar a aplicação conforme o gosto do usuário, possibilitando assim uma experiência ainda melhor com o Oracle APEX.