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.

Image Added

Figura 1 - Seleção do tema durante a criação do projeto<TODO: Figura representando o conteúdo apresentado>

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 alguns 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 um o mesmo tema para as duas aplicações ( web e mobile);
• Na janela de configurações do projeto, essa janela permite selecionar temas (e skins [DI-1565]Temas e Skins) distintos entre as aplicações.

Image Added

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.
• 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 destaque pelo azul elétrico sobre o destaca por possuir cores vibrantes sobre um fundo preto vivo.
• Darkly: ótima opção para o modo noturno.
• 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 tom de prata elegantedegrade elegante com foco no 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.

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 projetos 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).

Image Added

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);
• Utilize a mesma skin ou skins distintas 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 de um componente visual no Editor de Views é possível modificar apenas o componente selecionado.
• É possível utilizar uma skin aplicada sobre o tema e outra sobre um componente visual, modificando áreas específicas dentro da página.
  Essa opção afetará todos os componentes e elementos internos ao elemento selecionado (Árvore DOM).
• 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 em Estilos - CSS).

Para criar uma skin, acesse o menu de contexto do diretório skins (Localização: Skins de Tema/

) e selecione a opção Novo > Skin do Tema para abrir a janela onde será possível inserir o nome do arquivo. Clique em OK para abrir o Editor de Skins. 

Image Added

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/

Editor de Skins

A janela do editor de skins possui em seu menu lateral diversos campos para alterar as características visuais do tema selecionado. Essas alterações serão refletidas, em tempo real, na área principal, onde existem uma página web e uma tela mobile com a maioria dos componentes visuais do Cronapp (destaque 3). Os componentes exibidos nessa tela são estáticos e existem apenas para servir de modelo para as alterações visuais, não sendo funcionais.

Ao criar um arquivo de skin e abrir seu editor, será selecionado automaticamente o tema corrente do projeto.

Image Added