O Bootstrap é um framework web com código-fonte aberto para o desenvolvimento de componentes de interface e front-end, utiliza HTML, CSS e JavaScript. Foi criado no ano de 2011 por uma equipe do Twitter com o objetivo de melhorar a experiência do usuário em um site amigável e responsivo.

Por ser open-source, qualquer pessoa pode baixa, alterar ou criar temas próprios e distribuí-los. Dessa forma, são necessários poucos passos para deixar o seu sistema de cara nova!

Mas antes de procurar por temas, é necessário saber a versão do Bootstrap que seu sistema usa e, a depender do quanto queira personalizar seu sistema, a versão de outros plugins que possam ser requisitados. Atualmente o Cronapp utilizar a versão 3.3.4 do Bootstrap e o AngularJS na versão 1.5.9.

Pré-requisitos

Antes de começar a seguir os passos do tutorial é preciso ter certeza de que se tem um ambiente minimamente preparado para reproduzir o exemplo. Abaixo estão os requisitos principais.

Requisitos:

• Projeto do web criado. Caso haja dúvidas de como criar esse tipo de projeto acesse o link ( Criar novo projeto );

Temas internos

Além do Material, tema padrão do Cronapp e com suporte à acessibilidade, existem mais 16 temas disponíveis. Estes temas podem ser selecionados durante a criação do projeto (Figura 1.1) ou posteriormente (Figura 1.2).

Figura 1.1 - Etapa de seleção de tema durante a criação do projeto

Após a criação do projeto, será necessário acessar o arquivo index.html, localizado em src / main / webapp / index.html (Visualização de pastas), para alterar o tema. O index.html possui todas as chamadas para os plugins que o Cronapp usa, inclusive o seu tema. Procure o elemento <link> com o id "themeSytleSheet":

<link id="themeSytleSheet" rel="stylesheet" href="plugins/cronapp-framework-js/css/themes/material.min.css"> 

Exclua o nome do tema no final do atributo href, pressione Ctrl + Espaço para exibir a lista de temas e selecione uma opção de CSS minificado: <nome do tema>.min.css.

Figura 1.2 - Selecionando um dos temas inclusos no Cronapp

Concluída a seleção do tema no arquivo index.html, salve e rode o projeto em um navegador web. (Figura 1.3)

Figura 1.3 - Tela de login com o tema Material (esquerdo) e Flatly (direito)

Temas externos

Para adicionarmos um tema externo, são necessárias algumas informações sobre a estrutura de arquivos do Cronapp.

Estrutura de arquivos

Como informado no tópico anterior, a seleção do tema é feito no arquivo index.html que chama um dos temas contidos na pasta themes (localizada em src / main / webapp / plugins / cronapp-framework-js / ). Dentro dessa pasta temos vários arquivos com nomes de temas (ex.: material.min,css), esses arquivos são responsáveis por centralizar as chamadas ( @import ) de vários arquivos de estilização usados no Cronapp, inclusive o arquivo com o código de estilização do tema, que encontra-se dentro da pasta /custom/<nome do tema>/custom-<nome do tema>.min.css.

Em resumo, baseando-se na estrutura de arquivos da figura 2.1, o arquivo index.html (item 1 da figura 2.1) aponta para o arquivo que importa diversos arquivos de estilização (item 2 da figura 2.1), que por sua vez, chama o arquivo que possui os dados do tema (item 3 da figura 2.1).

Figura 2.1 - Caminho para o diretório com os temas do Cronapp

Escolha do tema

Existem diversos sites que disponibilizam temas para o Bootstrap v3.3.4, para esse tutorial usaremos um tema disponibilizado em um template criado pelo site DokuWiki. Baixe através do download em sua página ou pelo GitHub do projeto, em seguida, descompacte o conteúdo em seu computador.

Desse kit usaremos apenas os arquivos:

• bootstrap.min.css, localizado na pasta assets \ bootstrap \ solar \ 
• arquivos fontes, localizado na pasta assets \ bootstrap \ fonts \ 

Importação do tema

Na árvore de arquivos do Cronapp, clique com o botão direito sobre a pasta custom (localizada em src / main / webapp / plugins / cronapp-framework-js / themes / ), acesse Novo > Diretório e nomeie para Solar.

Na árvore de arquivos do Cronapp deixe selecionado o diretório recém-criado, no seu sistema operacional, acesse a pasta onde você descompactou o template do DokuWiki, encontre o arquivo bootstrap.min.css (localizado na pasta assets \ bootstrap \ solar \ ) e arraste-o para o seu navegador, na árvore de arquivos do Cronapp (Figura 2.2).

Figura 2.2 - Arrastando o tema do Windows para o diretório criado no Cronapp

Afim de manter a nomenclatura no Cronapp, selecione o arquivo bootstrap.min.css que você acabou de arrastar e pressione F2 ou escolha a opção Renomear no menu de contexto e altere o nome do arquivo para custom-solar.min.css.

Esse tema necessita de algumas fontes próprias, dessa forma, crie outro diretório dentro da pasta custom com o nome fonts. Novamente na árvore de arquivos do Cronapp, deixe selecionado o diretório recém-criado, no seu sistema operacional, acesse a pasta onde você descompactou o template do DokuWiki e na pasta "assets \ bootstrap \ fonts \" selecione todos os arquivos, arrastando-os para a árvore de arquivos do Cronapp (Figura 2.3).

Figura 2.3 - Arrastando os arquivos de fontes do Windows para o diretório no Cronapp

Após o upload do tema para o Cronapp, vamos ajustar os arquivos que chamarão esses arquivos.

Chamando o tema

Subindo uma geração na árvore de arquivos, na pasta themes (localizada em src / main / webapp / plugins / cronapp-framework-js / ), além do diretório custom, existem diversos arquivos css (item 2 da figura 2.1), acesse o menu de contexto de algum deles (ex.: cerulean.min,css) e duplique-o, renomeando para solar.min,css (Figura 2.4).  

Figura 2.4 - Duplicando o arquivo que centraliza a importação dos css

Abra o arquivo que acabamos de renomear e lá encontraremos chamadas para vários arquivos de estilização, incluindo o tema. Altere a importação do tema, substituindo o endereço antigo pelo endereço do tema que acabamos de subir, ficando: @import 'custom/solar/custom-solar.min.css';

Figura 2.5 - Alterando o endereço do tema

Por fim, precisamos selecionar o tema no arquivo index.html, abra-o em src / main / webapp / e procure o elemento <link> com o id "themeSytleSheet":

<link id="themeSytleSheet" rel="stylesheet" href="plugins/cronapp-framework-js/css/themes/material.min.css"> 

Exclua o nome do tema no final do atributo href, pressione Ctrl + Espaço para exibir a lista de temas e selecione o tema que importamos: solar.min.css, salve o arquivo index.html em seguida.

Figura 2.6 - Selecionando o tema que importamos

Teste e observações

Execute o seu projeto web para visualizar o seu projeto com o novo tema.

Figura 2.7 - Exemplo de página com o tema que adicionamos

Problemas que podem ocorrer:

1. Sem alterações: verifique e limpe o cache do seu navegador;
2. Páginas com componentes mal formatados:
   • verifique os arquivos que alteramos e se os endereços estão chamando corretamente;
   • caso tenha escolhido outro tema, verifique se este é compatível com a versão 3.3.4 do Bootstrap;
3. O estilo de algum componente não combinou com o tema: selecione o tema na página e altere o seu estilo, veja mais detalhes em Estilização de componentes. 

Página home

Diferentemente do tema material, que destaca a div ui-view das páginas home.view.html (pasta public ou logged), alguns temas não fazem esse destaque. Caso arraste um componente para fora dessa área, todas as outras páginas visualizarão esse componente.

Figura 3.1 - Elemento div ui-view da página home.