Desenvolvimento • Gerenciamento de projetos • Scriptcase Conheça algumas bibliotecas externas para usar no seu projeto web

Para você que se pergunta: “Quais tipos de bibliotecas posso utilizar dentro do Scriptcase ?“, aqui neste post você encontrará a resposta. No post a seguir, eu Camila Moreira, vou apresentar-lhes algumas bibliotecas externas que costumo utilizar na estilização dos meus projetos.

Primeiramente gostaria de informar que qualquer bibliotecas pode ser incluída dentro do Scriptcase, basta que você saiba como incluir e como efetuar o uso de forma correta, vou citar agora um exemplo bem simples e muito utilizado de biblioteca, que é o Bootstrap.

Como você já sabe, o Bootstrap é um framework front-end que facilita a vida dos programadores a criar sites e sistemas web sem precisar digitar uma linha se quer de código CSS. No nosso caso dentro do Scriptcase, utilizamos mais para estilizar nossas aplicações, pois o mesmo já nos contempla com o código da aplicação prontinho e estilizado, então apenas damos um “tapa” no visual.

Existem também outras bibliotecas, digamos que pouco conhecidas e utilizadas, mas a minha missão hoje é apresentar-lhes um pouco das que utilizo. Então vamos ao que realmente interessa…

O principio de quaisquer bibliotecas será baixar o conteúdo do site e criar as bibliotecas externa com este conteúdo dentro, apesar de já existirem vários tutorias mostrando como criar e usar as bibliotecas externas, no vídeo abaixo mostrarei como fazer isso, então agora vamos focar apenas em como utilizar as bibliotecas, certo ?
Animate: Esta biblioteca, como o próprio nome já diz, possui animações que deixaram o seu sistema ou site mais animados, simples e muito fácil de usar. O site possui várias animações, você só precisará ter criatividade na hora de usar.

No exemplo a seguir, criei um formulário do tipo “único registro” e coloquei no evento onScriptInit  o código a seguir:

Primeiro fiz a chamada do arquivo necessário para que a biblioteca animate funcionasse, depois criei um pequeno script que ao passar o mouse em cima do botão “Novo” irá incluir duas classes (animated tada – animated é a classe padrão que precisará sempre ser incluída e tada é a classe que fará a animação acontecer) e ao tirar o mouse de cima do botão irá remover a classe da animação, isso para que sempre que passarmos o mouse em cima aconteça a animação, para ver quais animações existem, acesse: https://daneden.github.io/animate.css/.

A criatividade de como acrescentar essa biblioteca no sistema fica a critério de vocês, mas eu utilizo muito para animar a logotipo nas telas de login, para animar mensagens de erro ou alerta, entre outras coisas…

Pace JS: É uma biblioteca Javascript e CSS utilizada para adicionar automaticamente um progresso bonito e indicadores de atividades para carregamentos de página e navegação AJAX, a mesma é gratuita. No site existem alguns modelos já criados para uso, veja aqui: http://github.hubspot.com/pace/docs/welcome/.

No exemplo abaixo, criei uma grid do tipo “consulta” e coloquei no evento onHeader o código a seguir:

Para utilizar esta biblioteca basta fazer a chamada do arquivo “pace.js” que é o arquivo padrão e do arquivo CSS referente ao tema que deseja utilizar, no exemplo acima utilizei o tema “Corner Indicator“, por isso o arquivo “pace-theme-corner-indicator.css”.

Onde tem ” data-pace-options='{ “ghostTime”: 2000 }’ “, está sendo definido que a estilização seja executada durante 2 segundos.

Caso queira utilizar outro tema, basta alterar o nome do arquivo “.css”. Por exemplo:

• Minimal – “pace-theme-minimal.css”
• Loading bar – “pace-theme-loading-bar.css”
• Center atom – “pace-theme-center-atom.css”

Agora fica a critério de vocês aproveitar essa biblioteca da melhor forma. Ah! Já ia esquecendo, você ainda pode trocar a cor dos temas, basta clicar no botão “choose a color” e selecionar a cor desejada, para que a cor seja alterada você precisa ir no tema desejado e clicar no botão “Download”.

Irá aparecer um código CSS, você pode copiar este código e substituir dentro do arquivo do tema que fica na biblioteca externa ou retirar a chamada do arquivo “.css” e adicionar o código dentro do evento(depende da aplicação) na aplicação utilizada.

Cole o código e clique em “Salvar”.

Agora é com você, dê uma estuda de como utilizar melhor a biblioteca e inclua nos seus projetos também.

EChats: Esta é uma biblioteca de gráficos, desenvolvida por chineses, mas muito boa de usar. Contém gráficos limpos e atrativos.

Muitas pessoas conhecem FusionCharts, GoogleCharts, HigthCharts, entre outras… Mas está biblioteca é muito fácil de integrar ao seu site ou projeto.

Sim, este código é um pouco mais complexo, mas não é nenhum bicho de sete cabeças. Vou tentar explicar resumidamente para que você possa entender. No exemplo acima vamos mostrar um gráfico com a soma total de notas por matéria.

Primeiro criei duas variáveis e informei que ambas receberão um array, depois fiz uma busca no banco de dados para obter os valores desejados. Criei um loop para poder montar meu array com os valores do banco. Logo fiz uma concatenação junto com uma conversão de array para string. A função implode do php, desmonta um array separando os valores pelo que você definir entre as aspas, no caso de materia separei os valor por “,” (aspas duplas – vírgula – apas duplas) e no caso de nota separei apenas por , (vírgula). Note também que antes e depois da função implode concatenei um valor (colchetes), isso para que eu não precise concatenar nada no JAVASCRIPT, apenas pegue o valor do PHP.

Logo, fechei o código php e adicionei a chamada para o arquivo da biblioteca externa ECharts, depois inclui uma DIV que será responsável por receber o gráfico(está div é obrigatória, pois o gráfico é incluso no ID “main”). Abaixo teremos o código responsável por montar o nosso gráfico, neste exemplo que é simples apenas joguei os valores nos lugares corretos. Note que não precisei fazer nenhuma requisição ajax ou passar os valores por json, apenas puxei as variáveis do PHP para o JAVASCRIPT.

Há quem diga que isto é uma gambiarra, porém eu particularmente não acho e ainda acho muito mais fácil.

Você pode usar outros modelos de gráficos e ainda estudar um pouco sobre suas funcionalidades.Acredito que este código irá abrir sua mente para outros coisas futuramente.

Clicando aqui você aprenderá a fazer a chamada da biblioteca e clicando aqui você poderá ver os modelos que a mesma disponibiliza.

Espero que tenham gostado deste post, se quiserem podem deixar dicas de post aqui nos comentários que faremos um levamento para produzir os mais votados. Até a próxima pessoal! E confira mais post no nosso blog!