Recursos especiais neste artigo:
Artigo no estilo Curso Online
O desenvolvimento de software é uma das atividades que mais possuem variação na produtividade de seus profissionais, sendo esta produtividade relativa a uma série de elementos e um deles é a capacidade que um profissional tem de buscar e encontrar soluções prontas sem a necessidade de reinventar a roda. Este é o primeiro artigo de uma série onde realizamos um apanhado de bibliotecas JavaScript que podem nos auxiliar em diversas tarefas no nosso dia a dia. Nesta edição conheceremos cinco bibliotecas: Socialite, jQuery BlockUI, Alertify, PickadateJS e StickyJS.
Em
que situação o tema é útil
As
bibliotecas apresentadas nesta edição são úteis em diversas áreas como, por
exemplo, a Socialite pode ser usado para compartilhar conteúdo de sua aplicação
através de redes sociais, a BlockUI nos ajuda a bloquear a interface com o
usuário nos ajudando a garantir a integridade da aplicação, a Alertify nos
fornece uma maneira muito simples e amigável de gerar alertas para o usuário, a
Pickadate pode ser usada em formulários que possuem campos de data ou em
formulários de filtros de relatório ou consultas e a StickJS pode ser usada
para aumentar a usabilidade de sua página mantendo seus botões de ação sempre
visíveis ao usuário.
O desenvolvimento de software em cada plataforma possui suas particularidades e o desenvolvimento web não é diferente, sendo que diversos aspectos podem influenciar na produtividade do desenvolvimento web.
Um destes aspectos é o reuso de soluções prontas, porém,
neste aspecto muitas equipes de desenvolvimento web .NET ainda acabam
esbarrando. Parte disso se dá pelo fato de que muitos profissionais ainda estão
com a cultura dos Web Forms no sangue, com a dependência de controles
server-side. Acontece que após a chegada do ASP.NET MVC, muitos profissionais
tomaram um choque, pois todas as facilidades do Web Forms haviam desaparecido e agora é preciso mais do
que nunca conhecer a arquitetura web e alguns princípios do desenvolvimento client-side.
O client-side por sua vez é
formado basicamente por CSS, HTML e JavaScript, sendo este último o responsável
pelo comportamento da aplicação no cliente. Acontece que este comportamento era
implementado quase que integralmente via controles server-side dos Web Forms,
porém, agora os desenvolvedores precisam implementar estes comportamentos
usando JavaScript.
É neste ponto que entra uma das principais fragilidades
de muitas equipes .NET hoje, pois estas equipes agora se deparam com um novo
ambiente porém ficam presas a conceitos do server-side e com isso muitas das
vezes não conseguem identificar as oportunidades de reuso que o client-side nos
fornece através de milhares de bibliotecas JavaScript disponíveis na web,
fazendo com que muitas vezes o desenvolvedor implemente soluções que poderiam
ser facilmente reutilizadas.
Esta é a motivação deste
artigo, trazer uma seleção de algumas bibliotecas específicas JavaScript, sendo
algumas até mesmo plugins do jQuery, apresentando as mesmas para o leitor e
explicando como utilizá-las em seus projetos.
Desta forma você verá que
existem muitas soluções prontas e na maioria das vezes gratuitas, para resolver
diversos problemas que enfrentamos todos os dias. Este artigo está divido em
partes e nesta edição nós veremos 5 bibliotecas.
A primeira delas é Socialite,
que nos possibilita compartilhar conteúdo facilmente com diversas redes
sociais. A segunda é a jQuery BlockUI que nos ajuda a bloquear determinados
trechos da página, ou a página toda, enquanto alguma ação é executada. Em
seguida veremos como Alertify pode deixar nossos alertas mais amigáveis ao
usuário. A quarta biblioteca que veremos nesta edição é a Pickadate JS, que
possibilita ao usuário uma fácil manipulação de campos data e hora. Por fim
veremos o Sticky JS que nos ajuda a aumentar a usabilidade de nossa aplicação,
garantindo que determinados controles sempre fiquem visíveis ao usuário.
Socialite
Atualmente uma das principais características da WEB é o colaborativismo, onde as pessoas compartilham e distribuem conteúdo a todo tempo. Com isso, torna-se fundamental que seu conteúdo, seja um artigo, um site, ou uma aplicação WEB, possam ser compartilhados pelos seus usuários, fazendo com que você utilize o poder de disseminação de informação da WEB a seu favor.
Cada rede social possibilita um tipo de compartilhamento diferente e tornar sua página compartilhável por todos pode tomar certo tempo. Por isso, foram criadas algumas bibliotecas JavaScript que encapsulam a implementação do compartilhamento de diversas redes sociais diferentes, nos permitindo abstrair dos detalhes de cada uma.
A biblioteca JavaScript SocialiteJS nos fornece um meio muito simples de realizar esta tarefa, como podemos ver na Listagem 1.
Listagem 1. Exemplo de uso do SocialiteJS
01 @{
02 ViewBag.Title = "Social";
03 }
04 <html>
05 <head></head>
06 <script src="https://ajax.googleapis.com/ajax/libs/
jquery/1.7.1/jquery.min.js">
07 </script>
08 <script src="../../Scripts/bibliotecas/socialite.js"
type="text/javascript">
09 </script>
10 <body>
11 <h1>Teste Socialite - Compartilhando</h1>
12 <div id="dvCompartilhar"class='socialite twitter-share'>
Compartilhar</div>
13 </body>
14 </html>
15 <script>
16 $(document).ready(function () {
17 Socialite.load();
18 });
19 </script>Para utilizar o Socialite em suas páginas, basta adicionar uma referência ao script do mesmo como mostrado na linha 8, incluir a classe CSS socialite seguida da classe do compartilhamento desejado nos elementos que forem usados como botões de compartilhamento (linha 12) e executar a função Socialite.load(). Com isto, o Socialite irá percorrer todos os elementos da página, verificar quais possuem a classe socialite e em seguida irá substituir o elemento em questão por um botão de compartilhamento da rede desejada.
No nosso exemplo usamos o compartilhamento com o Twitter (Figura 1), através da classe twitter-share, porém existem outros compartilhamentos disponíveis no Socialite: facebook-like, twitter-share, twitter-follow, twitter-mention, twitter-hashtag, googleplus-one, googleplus-share, googleplus-badge, linkedin-share, linkedin-recommend.
Figura 1. Resultado da opção de compartilhamento com Twitter
Além disso, os compartilhamentos via Twitter, Facebook e Google+ podem ser customizados através de algumas configurações. Estas customizações são feitas através do método setup do socialize, passando um objeto identificando a rede social como parâmetro, como ilustrado na linha 2 da Listagem 2.
Listagem 2. Exemplo de uso do SocialiteJS
01 Socialite.setup({
02 facebook: {
03 lang: 'pt_BR',
04 appId: 123456789,
05 onlike: function (url) { /* faça alguma coisa */ },
06 onunlike: function (url) { /* faça alguma coisa */ },
07 onsend: function (url) { /* faça alguma coisa */ }
08 }
09 }); O Twitter por sua vez possui configuração de idioma através da propriedade lang e as funções: onclick, ontweet, onretweet, onfavorite e onfollow.
Já o Google+ também possui a configuração de idioma com a propriedade Lang, porém possui as funções: onstartinteraction, onendinteraction e callback.
jQuery BlockUI
Em diversos momentos quando estamos desenvolvendo nossos sistemas temos a necessidade de bloquear a tela para realizar algum processamento, impedindo que o usuário clique em algum botão ou realize alguma outra interação até que este processamento acabe. Nestes casos é comum implementarmos rotinas em JavaScript que aliadas a estilos CSS criam uma camada absoluta que se posiciona acima de todos os controles, normalmente conhecida como overlay. Acontece que nem sempre desejamos simplesmente bloquear a tela toda, as vezes desejamos incluir um texto informativo, uma imagem ou até mesmo bloquear apenas parte da tela, como um controle específico por exemplo. Com isso, nossa simples implementação acaba se tornando mais complexa e tomando mais tempo de desenvolvimento.
Para atender a esta demanda existe o plugin chamado jQueryBlockUI que nos permite bloquear facilmente toda a página ou um elemento específico. Para utilizar o mesmo basta adicionar uma referência ao seu arquivo JavaScript na página em questão. Seu uso mais simples consiste no bloqueio total da tela, como mostra a Figura 2.
Figura 2. Bloqueando a tela completamente
Além do bloqueio completo da tela com uma mensagem padrão, é possível realizar o bloqueio de um elemento específico. Esta funcionalidade é muito útil em requisições AJAX quando estamos aguardando uma resposta do servidor para carregar algum controle na tela, fazendo com que o controle em questão fique bloqueado até que a resposta seja obtida. Um exemplo de aplicação destas duas formas pode ser visto na Listagem 3.
Listagem 3. Exemplo de bloqueio da página e de um controle específico
01 <html>
02 <head>
03 <script src="jquery-1.7.1.js"></script>
04 <script src="jquery.blockUI.js"
type="text/javascript"></script>
05 </head>
06 <body>
07 <h1>Teste BlockUI</h1>
08 <div id="dvInformacoes">
09 <span>CPF</span>
10 <input type="text" id="txtCPF"/>
11 </div>
12 <input type="button" id="btnValidarCPF"
onclick="ValidarCPF()" value="Validar CPF"/>
13 <input type="button" id="btnSalvar"
onclick="Salvar()" value="Salvar"/>
14 </body>
15 <script>
16 function Salvar() {
17 $.blockUI();
18 }
19
20 function ValidarCPF() {
21 $("#dvInformacoes").block();
22 }
23 </script>Na linha 17 da Listagem 3 nós podemos ver o método blockUI, responsável por bloquear toda a tela com a criação de um overlay por cima de todos os controles, enquanto que na linha 21 nós temos o método block aplicado apenas a um seletor do jQuery, bloqueando apenas um elemento HTML. Para desbloquear um determinado controle basta invocarmos o método unblockUI ou unblock. ...
