A aparência das aplicações web e mobile é um fator extremamente importante na hora de desenvolver um sistema. Em muitos casos, será o "cartão de visitas" para o seu projeto. Assim, selecionar um bom tema e definir características visuais que representem bem o seu negócio é vital para se destacar frente aos concorrentes.

Com isso em mente, o Cronapp desenvolveu diversos recursos que possibilitam a personalização visual do seu projeto a partir de diversas camadas:

  • Escolha entre diversos temas para as aplicações web e mobile;
  • Acrescente características únicas aos temas, adicionando uma camada visual (skin) acima do tema;
  • Por fim, aplique folhas de estilos (CSS) de forma abrangente ou em pontos específicos da sua aplicação.


Figura 1 - Seleção do tema durante a criação do projeto

Temas

Os temas são estruturas em HTML e CSS que permitem modificar radicalmente o visual da aplicação, alterando cores, fontes e algumas pequenas características do layout. Dessa forma, com poucos cliques é possível sair de um tema de fundo escuro, de cores fortes e densa para um tema branco, clean e minimalista. Os temas Cronapp foram desenvolvidos em cima da estrutura do Bootstrap e todos possuem o mesmo padrão, possibilitando alternar entre os temas a qualquer momento durante o desenvolvimento do projeto. 

A seleção de tema pode ser feita em dois momentos:

  • No último passo da criação do projeto (Figura 1), nesse momento só será possível selecionar o mesmo tema para as aplicações web e mobile;
  • Na aba Configurações do Projeto da janela de Configurações do Projeto (Figura 2), o acordeão Tema possui os campos Tema Web e Tema Mobile que permite selecionar temas distintos entre as aplicações.


Figura 2 - Seleção do tema a partir da janela de configurações do Projeto


Atualmente o Cronapp possui 20 temas disponíveis:

  • Material: inspirado no tema Material criado pelo Google, é o tema padrão dos projetos Cronapp e o único que possui suporte total à acessibilidade.
  • Aquamarine: seu design foi inspirado no verde produzido pelas algas marinhas e possui cores vibrantes e bonitas.
  • Fuse: inspirado em um tema de mesmo nome, o Fuse apresenta um visual sofisticado com variação de cores entre o azul escuro e o branco. 
  • DsGov: esse tema segue todos os padrões e regras definidos pelo Design System do Governo Federal brasileiro.
  • Material-Round: possui cor lilás e um visual moderno.
  • Krypton: tema escuro com um visual moderno.
  • Nature: remete a natureza, contrastando entre verde escuro, verde claro e branco.
  • Cerulean: remete a um calmo céu azul.
  • Cosmo: inspirado em linhas de metrô, possui cores variando entre azul e cinza escuro.
  • Cyborg: o tema se destaca por possuir cores vibrantes sobre um fundo preto vivo.
  • Darkly: ótima opção para um tema mais escuro.
  • Flatly: contém cores planas e modernas.
  • Journal: possui cores que lembram uma folha de papel colorida.
  • Lumen: tema limpo com efeitos de luz e sombra.
  • Paper: tema claro com características fortes.
  • Readable: otimizado para a legibilidade.
  • Sandstone: possui cores relaxantes.
  • Simplex: tema com estruturas pequenas e minimalistas.
  • Slate: contém tons de cinza metalizados.
  • Spacelab: possui um degrade elegante com foco na cor prata.
  • Superhero: exibe tons escuros, porém suaves.
  • United: possui cor laranja e fonte inspirada no sistema operacional Ubuntu.
  • Yeti: apresenta uma base amigável.


Além dos temas disponibilizados, também é possível obter temas externos que sigam o padrão bootswath/bootstrap. Porém, ao utilizar temas externos ou depreciados, não será possível utilizar Skins. Veja mais detalhes em Alterar temas do Bootstrap.

Temas depreciados

Após a versão 2.9 do Cronapp, os temas disponibilizados passaram por uma grande reformulação interna para permitir o uso de Skins. Porém, para manter a compatibilidade com projetos antigos foram mantidos todos os temas em sua versão antiga (depreciado) nas aplicações web e o tema Material [depreciado] nas aplicações mobile. Os temas depreciados só são acessíveis através da janela de configurações do projeto e são encontrados no final da lista de seleção de temas, possuem um fundo vermelho e o termo "[Depreciado]" em seu nome (destaque 1 da figura 2.1). Ao selecionar um tema depreciado, não será possível incluir Skins ao tema (destaque 2).


Figura 2.1 - Seleção de temas depreciados

Skins

Skins são estruturas que geram conteúdo em CSS para modificar algumas características do tema selecionado, aplicando uma camada visual sobre o tema e personalizando ainda mais a aplicação.

Algumas características das skins:

  • Skins podem ser aplicadas em qualquer tema (web e mobile) criado após a versão 2.9 do Cronapp (ver mais detalhes em temas depreciados).
  • Skins são independentes de aplicação, sendo possível utilizar a mesma skin ou skins diferentes para as aplicações web e mobile.
  • É possível criar diversos arquivos de skins e alterná-los a qualquer momento durante o desenvolvimento do projeto.
  • Através da propriedade Skin em um componente visual no Editor de Views, é possível modificar apenas o componente selecionado.
    Essa opção afetará todos os componentes e elementos internos ao elemento selecionado (Árvore DOM).
  • É possível utilizar uma skin aplicada sobre o tema e outra sobre um componente visual, modificando áreas diferentes de forma específicas dentro da página.
  • Após aplicar a skin sobre o tema ou sobre um componente visual, ainda será possível aplicar outras folhas de estilo (CSS) (ver mais detalhes no tópico Hierarquia de Prioridades).


Para criar uma skin, com o modo avançado desabilitado, acesse o diretório virtual Interfaces (destaque 1 da figura 3), posicione o mouse sobre o diretório Skins (Localização: Skins/

Endereço: skins/

) e clique no ícone (+) ao lado (destaque 2). Em seguida, uma janela será exibida (3), permitindo a inserção do nome do arquivo. Clique em OK para abrir o Editor de Skins. 


Figura 3 - Criação de uma skin


Ao criar um arquivo de skin (<nome_do_arquivo>.skin) também serão criados arquivos CSS de mesmo nome nos diretórios das aplicações web e mobile. Essas folhas de estilo serão modificadas sempre que houver alterações no arquivo de skin. Os arquivos CSS gerados pelas skins serão mantidos nos endereços:

  • Aplicação mobile: src/main/mobileapp/www/css/skins/
  • Aplicação web: src/main/webapp/css/skins/

Seleção de Skins

Para aplicar o CSS gerado pela skin em toda a aplicação, é necessário acessar as Configurações do Projeto e selecionar o arquivo através dos campos Skin do Tema Web e Skin do Tema Mobile no acordeão Tema (figura 3.1).


Figura 3.1 - Seleção do skin a partir da janela de configurações do Projeto


  1. Identificador Skin: exibe as 4 principais cores da skin selecionada, possui a seguinte ordem:
    • Cor Padrão do Tema,
    • Cor Secundário,
    • Cor Sucesso,
    • Cor Informação / Calmo.
  2. Campo: exibe o endereço do arquivo CSS selecionado.
  3. Buscar: abre a janela de seleção da skin.
  4. Limpar: remove a skin selecionada.


Para aplicar o CSS gerado pela skin apenas em um componente visual ou em uma página, é necessário acessar o Editor de views e configurar a propriedade Skin (figura 3.2). Essa opção afetará todos os subcomponentes e subelementos do componente selecionado (Árvore DOM).


Figura 3.2 - Seleção do skin a partir da propriedade Skin do Editor de views

Editor de Skins

A janela do editor de skins possui uma página web e uma tela mobile que são alternadas a partir dos botões Web e Mobile (destaque 4 da figura 3.3), essas páginas possuem a maioria dos componentes visuais do Cronapp (destaque 3). Esses componentes são estáticos e existem apenas para servir de modelo para as alterações visuais feitas a partir dos campos do menu lateral (2), dessa forma, a maioria dos componentes visuais não são funcionais.

A figura 3.3 descreve os principais elementos da janela do Editor de Skins.


Figura 3.3 - Visão geral do Editor de Skins


  1. Botão sanduíche: expande ou recolhe o menu de configurações, aumentando a área de visão da página modelo.
  2. Menu de configurações: possui diversos campos associados a quatro acordeões, clique sobre os acordeões para expandir ou recolher os campos associados.
  3. Página modelo: exibe uma página com a maioria dos componentes visuais do Cronapp.
  4. Seleção da aplicação: permite alternar entre uma página web (figura 3.2) e uma tela mobile (figura 3.4), exibindo os componentes visuais característicos de cada aplicação. 
  5. Seleção da skin base: permite modificar a skin atual a partir das configurações de uma skin já criada ou a partir da skin de um dos temas do Cronapp.

Menu de configurações

O menu de configurações lateral possui diversos campos de configurações divididos em 4 categorias, cada categoria pode ser expandida ou recolhida através do seu acordeão (destaques 1, 2, 3 e 4 da figura 3.4). Também é possível expandir ou recolher o menu através do Botão sanduíche (destaque 1 da figura 3.3), ampliando a área de visualização da página.


Figura 3.4 - Visão geral do Editor de Skins


Cada campo do menu é responsável por alterar uma variável dentro do CSS, que por sua vez irá afetar a folha de estilo do elemento onde a skin estiver sendo aplicada.

  1. Configurações de Texto: variáveis que afetam o texto.
  2. Configurações Básicas: variáveis que afetam algumas características da aplicação.
  3. Configurações Menu: realiza ajustes na Barra de navegação da aplicação. Algumas variáveis só terão efeito quando o Menu do sistema estiver em modo vertical ou horizontal.
  4. Cores: altera as definições de cores do tema. Esses campos vão afetar principalmente componentes visuais que possuem a propriedade Cor. Esses padrões são utilizados para apresentar alguma informação ou característica para o usuário: Padrão do tema, Secundário, Sucesso, Informação, Aviso, Perigo, Claro, Link, Estável, Real e Escuro.
  5. Campo Seletor de cores: os campos que definem cores se destacam por possuir uma área quadricular com a cor atualmente definida. Ao clicar no campo, uma janela é aberta permitindo selecionar uma nova cor. São aceitas cores no formato hexadecimal (exemplo: #eec7c6) ou RGBA (exemplo: rgba(238, 199, 198, 1) ).


Definição dos campos:

CategoriaNome do campoVariável CSS afetada / descrição
Configurações de Texto

Tipo de Fontefont-family
Cor de Textocolor
Tamanho do Textofont-size
Configurações BásicasTamanho do Íconefont-size no ícone
Raio da Bordaborder-radius
Margem da Páginamargin
Cor do Plano de Fundobackground
Cor Base do Plano de Fundo da Página Loginbackground da tela de login
Configurações MenuLargura do Menu VerticalSó possui efeito quando a Barra de navegação estiver na posição vertical.
Tamanho do Menu LateralDefine o tamanho do menu.
Tamanho do Item de MenuDefine o tamanho do item de menu.
Preenchimento Geral do Elemento de MenuDefine o tamanho interno do item de menu.
Tamanho do Ícone dos Itens de MenuDefine o tamanho dos ícones do menu.

Cores


Cor Padrão do Tema--colorDefault
Cor do Texto Padrão do Tema--textColorDefault
Cor Secundário--colorPrimary
Cor do Texto Secundário--textColorPrimary
Cor Sucesso--colorSuccess
Cor do Texto Sucesso--textColorSuccess
Cor Aviso--colorWarning
Cor do Texto Aviso--textColorWarning
Cor Perigo--colorDanger
Cor do Texto Perigo--textColorDanger
Cor Real--colorRoyal
Cor do Texto Real--textColorRoyal
Cor Informação/Calmo--colorCalm
Cor do Texto Informação/Calmo--textColorCalm
Cor Claro--colorLight
Cor do Texto Claro--textColorLight
Cor Estável--colorStable
Cor do Texto Estável--textColorStable
Cor Escuro--colorDark
Cor do Texto Escuro--textColorDark

Seleção da skin base

Sempre que uma skin for criada, ela virá com todas as configurações da skin do tema. Porém, é possível iniciar a configuração da skin a partir de qualquer outra skin de tema ou a partir de uma skin já personalizada. Essa seleção pode ser feita através da caixa de seleção da Skin base (destaque 1 da figura 3.5).


Ao selecionar uma opção na caixa de seleção da Skin base, todos os ajustes feitos no Menu de configurações serão automaticamente redefinidos. Dessa forma, recomendamos selecionar o skin base no início da configuração da skin em edição.


Figura 3.5 - Seletor do Skin base


  1. Caixa de seleção da Skin base: selecione uma skin já configurada no projeto ou a skin de um dos temas.
  2. Minhas Skins: lista de skins criadas no sistema.
  3. Skins Padrão: lista de skins de temas padrão.

Hierarquia de prioridades

Ao trabalhar com temas, skins e folhas de estilo, é importante entender a ordem de prioridades em que cada um atua. Dessa forma fica fácil saber se uma alteração em um nível será sobrescrita por outro nível na hierarquia de prioridades.

Na lista abaixo, quanto menor o número (mais acima da lista), maior a prioridade.


Prioridade

Onde é configurável

O que faz
0 (maior)

Nas propriedades do Editor de views:

  • Estilo (Subaba propriedades)
  • Em Linha (Subaba Estilos)
Adiciona o CSS no formato inline (atributo style) no elemento ou componente visual selecionado.
1

Nas propriedades do Editor de views:

  • Campos da subaba Estilos (com exceção do "Em linha")

Os campos dessa subaba variam conforme o elemento selecionado

Adiciona o CSS de forma interna à página, criando classes CSS com a referência do id do elemento a ser alterado.
2

Nas propriedades do Editor de views:

  • Classes CSS (Subaba propriedades)
Inclui no atributo class do elemento ou componente visual selecionado as classes criadas a partir do editor de CSS.
3

Nas propriedades do Editor de views:

  • Skin (Subaba propriedades)
Inclui no atributo crn-skin do elemento ou componente visual selecionado o arquivo CSS gerado pela skin selecionada.
4

Janela de Configurações do projeto (Figura 3.5):

  • Skin do tema Web
  • Skin do tema Mobile

Importa o CSS gerado pela skin nos arquivos index.html das aplicações:

  • Endereço Web: src/main/webapp/index.html
  • Endereço Mobile: src/main/mobileapp/www/index.html
5 (menor)

Janela de Configurações do projeto (Figura 2):

  • Tema Web
  • Tema Mobile

Importa o  gerado pelo tema nos arquivos index.html das aplicações:

  • Endereço Web: src/main/webapp/index.html
  • Endereço Mobile: src/main/mobileapp/www/index.html

Nesta página

Assista sobre o tema no Cronapp Academy

Caso seja seu primeiro acesso ao Cronapp Academy, crie antes uma conta gratuita e matricule-se no curso abaixo.