Arquivos da categoria: JavaScript

Single page application com VueJS

VueJS

VueJS

VueJS é um framework Javascript reativo e é também conhecido como um framework progressivo, o que significa basicamente que você não vai precisar estudar toda a documentção do framework para começar a usar.

Vamos ver um exemplo básico com o mínimo preciso para ter um código VueJS funcionando:

Declaramos uma div simples com o id de nossa aplicação e com o template {{text}} que será substituido pelo valor da variável text.

  1. Na aba HTML importamos o código do framework do cdnjs
  2. Na aba Javascript criamos a instancia de nossa aplicação
  3. O parâmetro el é onde deve ser inormado um QuerySelector indicando onde a aplicação será renderizada.
  4. E por fim o parâmetro data que irá conter os valores utilizados em nossa aplicação, em nosso exemplo a variável text.

VueJS para usuários de JQuery

O jQuery tem um objetivo diferente do VueJS e por isso não devem ser considerados concorrentes, e por terem paradigmas muito diferentes, é recomendado que não sejam utilizados no mesmo projeto.

Enquanto o jQuery é uma ferramenta que tem como principal objetivo auxiliar na manipulação dirata do DOM ( HTML ) o VueJS se propoe a encapsular todo a manipulação do DOM. Neste momento surge a pergunta mais importante:

E como posso mudar a informação exibida na tela ?

O VueJS espera que seu desenvolvimento seja focado em  manipular os dados e não o html, sendo assim, sempre que você lterar os valores do campo data definido no setup de nossa aplicação o framework irá alterar automaticamente todos os pontos do html que fazem referencia a este valor.

O objetivo é que você não precise mais se preocupar com a renderização de seus dados sobrando tempo para se dedicar aos pontos mais importantes de sua aplicação.

Agora um exemplo demonstrando o framework fazendo este trabalho de “comunicação” dos dados da tela para o seu objeto e de seu objeto para a tela o que é conhecido como Two Way Data Bind.

Ex:

No exemplo acima, sempre que o iniput for alterado  o texto dentro do span será automaticamente alterado, mostrando a “reatividade” do framework.

Referencias:

VueJS no GitHub

Ordenamento por Data no DataTables

Logo do DataTables plugin jQuery

O DataTables é hoje uma dos plugin jQuery mas utilizado por resolver ordenamento e paginação de forma automática. Mas em qualquer ferramenta que tente fazer ordenamento sem reflection, ocorre um problema que é a identificação automática do tipo de dados da coluna ou lista ordenada.
Isto ser torna um problema no seguinte caso:

  • 01/02/2015
  • 02/01/2015
  • 03/12/2014
Na lista acima as datas estão ordenadas como “string”.
Por padrão, o plugin do dataTables reconhece automáticamente os tipos “string”, “numeric”, e, “date” , mas todos em formato americano.

Para burlar este problema, é possível criar um tipo de dado extendendo a api do jQuery (Clique em Result para ver o resultado ):

Você pode testar o código acima no JsFiddle.

Gráfico pizza com jQuery e CSS

Ja vi muitos sites precisarem fazer uso de plugins que criam applets para gerar gráficos, o problema é que além da necessidade de ter a JVM instalada no cliente para o funcionamento, ainda precisa estar atualizada para que o usuário não tenha que ver a notificação de segurança, que gera desconfiança.
Abaixo esta o código do plugin jquery para criação de gráfico do tipo pizza com CSS, que é bem mas leve que uma applet, e não depende de uma máquina virtual instalada.
OBS: Para o funcionamento, é preciso ter a lib jQuery ( downoad ).
Link do projeto no github

Exemplo de uso:

Teste o código aqui

Resultado:

Como desabilitar componentes com jQuery

Desabilitar componentes

Sempre tive problemas em aplicações desktop com operações demoradas quando o usuário clicava no botão e como o processamento demorava ele continuava a clicar ate obter a resposta esperada. Este procedimento vai no mínimo sobrecarregar o seu banco de dados com muitas requisições de um mesmo usuário para o mesmo serviço.

Resolvendo o problema

Uma possível solução para este problema é desabilitar o componente/botão assim que ele for clicado e quando a rotina terminar, habilita-se novamente este botão.

Exemplos com jQuery:

Documentação do jQuery sobre a opção attr: https://api.jquery.com/attr/

Uso da tag canvas do HTML5 com JavaScript

A tag CANVAS é basicamente uma tela para desenho.

 

Com o JavaScript pode-se obter a tela, dai será nescessário um objeto Context para desenhar nesta tela:

Resultado:

Principais funções:
 
moveTo(int x, int y);   //Move para as cordenadas indicadas

lineTo(int x, int y); //Desenha uma linhas do ponto inicial definido por “moveTo” ate o pondo indicado nos valores de X e Y

stroke(); //Imprime o senho na tela
 
fillRect(int x, int y, int width, int height); //Desenha um retângulo, onde X e Y indica o posicionamento e Width e Height indicam o tamanho do retângulo
 
arc(int x, int y, int radius,double start, double end); //Desenha um arco onde X e Y indica o posicionamento do centro do arco, Radius é o raio , Start indica onde o arco deve iniciar, o valor 0(zero) é a posiçao de 3(três) horas no relógio e vai ate Math.PI (3.14), End é o fim do arco, desta forma para desenhar um círculo, usa-se 0 para Start e 3.14 (Math.PI) para End

Abaixo você pode ver um exemplo de uma animação que renderiza um relogio em uma tag

Seu navegador não suporta HTML5

Fonte: developer.mozilla.org