- Criado por Igor Andrade, última alteração em 20/04/2020
Você está vendo a versão antiga da página. Ver a versão atual.
Comparar com o atual Ver Histórico da Página
« Anterior Versão 16 Próxima »
O Bootstrap é um framework web com código-fonte aberto para o desenvolvimento de componentes de interface e front-end, é composto por 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 baixar, 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
Lembramos que você não deve alterar ou adicionar arquivos dentro das pastas de plugin do Cronapp (cronapi-js, cronapp-common-js, cronapp-framework-js e cronapp-lib-js), pois essas pastas são substituídas durante as atualizações da IDE. Os arquivos do novo tema serão adicionados no diretório css (localizada em src / main / webapp / ).
Apesar de não usarmos nesse tutorial, vale lembrar que as alterações de CSS usando o Editor de Views ficam armazenadas no arquivo app.css
(item 4 da figura 2.1).
Escolha do tema
Existem diversos sites que disponibilizam temas para o Bootstrap v3.3.4 e 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 css (localizada em src / main / webapp / ), acesse Novo > Diretório e nomeie para solar.
Faça o upload dos arquivos que você descompactou do template DokuWiki para o Cronapp: deixe selecionado o diretório recém-criado (solar) na árvore de arquivos do Cronapp, em seguida, no seu computador, encontre o arquivo bootstrap.min.css (localizado na pasta assets \ bootstrap \ solar \ ) e arraste-o para o seu navegador (Figura 2.2), um pop-up aparecerá solicitando a cópia do arquivo para a pasta selecionada.
Figura 2.2 - Arrastando o tema do Windows para o diretório criado no Cronapp
Afim de facilitar a identificação dos arquivos, selecione o arquivo bootstrap.min.css que você acabou de arrastar, pressione F2
ou escolha a opção Renomear no menu de contexto, e altere seu nome para solar-theme.min.css.
Esse tema necessita de algumas fontes, dessa forma, crie outro diretório dentro da pasta css com o nome fonts (Figura 2.3). Novamente, na árvore de arquivos do Cronapp, deixe selecionado o diretório recém-criado (fonts), no seu sistema operacional, acesse o local onde você descompactou o template do DokuWiki, na pasta "assets \ bootstrap \ fonts \" selecione todos os arquivos e arraste-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
Chamando o tema
No menu de contexto da pasta css (localizada em src / main / webapp / ) acesse Novo > CSS e nomeie o arquivo para solar.css. Esse arquivo irá chamar o nosso tema e os outros arquivos CSS usados pelo Cronapp (Figura 2.4). Esse arquivo terá a mesma função que os arquivos da pasta themes, apontado no item 2 da figura 2.1.
Figura 2.4 - Criando o arquivo que centralizará a importação dos CSS
Copie os imports do bloco abaixo e cole no arquivo que acabamos de criar (solar.css).
@import URL("/plugins/cronapp-lib-js/dist/js/kendo-ui/styles/kendo.common-bootstrap.min.css"); @import URL("/plugins/cronapp-lib-js/dist/js/kendo-ui/styles/kendo.bootstrap.min.css"); @import URL("/plugins/cronapp-lib-js/dist/js/kendo-ui/styles/kendo.bootstrap.mobile.min.css"); @import URL("/css/solar/solar-theme.min.css"); @import URL("/plugins/cronapp-framework-js/css/themes/custom/navigator/custom-navigator.css"); @import URL("/plugins/cronapp-framework-js/css/cronos.css");
Caso você não tenha seguido os nomes sugeridos para os arquivos nesse tutorial, altere o endereço do tema na quarta linha. Porém, não altere a ordem dos imports, isso afetará alguns estilos em seu projeto.
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" (Figura 2.5).
Figura 2.5 - Local onde devemos alterar a chamada para o tema do projeto
Substitua no href o
endereço do tema padrão do Cronapp para o endereço do arquivo que criamos no passo acima.
<link id="themeSytleSheet" rel="stylesheet" href="css/solar.css">
Caso o tema necessite de algum arquivo Javascript, você deve adicioná-lo no index.html também.
Teste e observações
Execute o seu projeto web para visualizá-lo com o novo tema.
Figura 2.6 - Exemplo de página com o tema que adicionamos
Problemas que podem ocorrer:
- Sem alterações: verifique e limpe o cache do seu navegador;
- 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;
- 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
Nessa página
- Sem rótulos