Tag Archives: JQuery

AngularJS: o primeiro componente a gente nunca esquece! #soudev

Caso não faça idéia do que seja o AngularJS, existe um screencast com uma introdução aqui: http://blog.vedovelli.com.br/?p=1946

Ao cair de paraquedas no mundo Javascript, vindo do mundo do Flex, a primeira coisa que senti falta foi a ausência do data binding. Mais ainda, do two-way data binding. Uma rápida explicação:

Quando se tem a disposição do two-way data binding, sua preocupação volta-se apenas para a informação, que está ligada (bind) ao um elemento de interface de usuário que a representa. Quando uma mudança é feita na informação, é refletida no elemento de interface. Quando é o elemento que recebe a mudança, esta é refletida na informação. Nenhum acesso ao elemento precisa ser feito para mudar seu valor.

A segunda ausência sentida foi a possibilidade de rapidamente desenvolver componentes de interface personalizados e utiliza-los em diversos projetos, coisa corriqueira quando desenvolvendo com Flex. Os plugins para jQuery fazem este papel e são relativamente fáceis de desenvolver, porém, é necessária bastante expertise para chegar a um resultado satisfatório. Finalizando, o uso do plugin de jQuery deve ser feito na programação e não de forma declarativa, HTML style, coisa que gosto muito.

AngularJS: a forma declarativa é como escrever HTML!

Bem, ao utilizar seu documento HTML como template, o AngularJS (http://angularjs.org/) faz, após o parse do browser, o seu próprio parse da marcação HTML, procurando por elementos conhecidos do framework, para transforma-los em qualquer coisa que vc tenha determinado. Estes elementos são as diretivas. Podemos defini-las como elementos HTML criados por você e que são parseados pelo framework em tempo de execução. É como criar componentes no Flex.

Com muita determinação, fui atrás de informações sobre como desenvolver uma diretiva básica: uma propriedade a ser utilizada num <select> para aplicar a ele o plugin jQuery Select2 (http://ivaynberg.github.com/select2/), sem que fosse necessário inicia-lo dentro do meu controller, o que me obrigaria a fazer acesso ao DOM, algo que é desencorajado no uso da AngularJS (lembra-se de se preocupar apenas com os dados?).

E como dito acima, foi preciso muita determinação para chegar num bom resultado, algo que fosse possível utilizar num projeto real. A informação está muito fragmentada, a documentação oficial não contém exemplos de como fazer algo personalizado, porém o grupo no Google ajuda muito, pois está repleto de exemplos no JSFiddle.

Se você ficou interessado e quiser ver o código, basta acessar o repositório no GitHub (https://github.com/vedovelli/angularjs_estudos) e encontrará o código fonte todo comentado. Os arquivos a serem lidos são: /index.html e /directive/riaSelect.js

Para ver funfando: http://blog.vedovelli.com.br/angularjs_estudos/

Se quiser fazer um fork e melhorar o código, para um posterior pull request, be my guest… =D

SSSlider (Super Simple Slider) – jQuery Plugin #soudev

Agora que estamos bastante confortáveis no desenvolvimento de apps web com HTML5/CSS3 e Javascript, eu e minha equipe começamos a colocar as asinhas de fora e desenvolver elementos personalizados, que tínhamos a disposição no Flex. O primeiro a entrar para a lista foi um slider para conteúdo. Algo bem simples de usar e de entender, caso queira ver o código fonte para estudar.

Esteja a vontade para baixar, usar, clonar o código no GitHub, fazer alterações e fazer pull request.

As instruções de uso estão no README.md: https://github.com/vedovelli/jquery.ssslider

Um exemplo: http://blog.vedovelli.com.br/ssslider/

Treinamentos e mais treinamentos!

O ensino tá no meu sangue! A cada novo treinamento ministrado coloco mais uma pedra na base dessa convicção! Neste ano de 2012 o ensino a distância focado em tecnologia deu um salto espantoso: todos os desenvolvedores que conheço que possuem aptidão para ensinar estão ensinando algo, seja como atividade principal ou secundária.

Desde muito tempo eu venho querendo fazer com que o ensino se torne minha atividade principal e a oportunidade se apresentou neste ano, com uma boa parceria com a School of Net. Ali, encontrei o ambiente que eu precisava para me soltar e ensinar da maneira que eu gosto: com liberdade total de criação.

O curso mais recente foi de aplicações com atualização da interface em tempo real, utilizando tecnologias de ponta, tais como node.js, mongodb, raphäel.js, HTML5 e php 5.4. O produto desenvolvimento para o curso foi um sistema para acompanhamento de partidas de futebol, à semelhança do que é encontrado no site globo.com. Além do placar, lances e estatísticas em forma de gráfico são apresentados, todos com atualização realtime.

Clique para visualizar a imagem original

O treinamento foi um sucesso e os alunos receberam além de explicações detalhadas, todo o código fonte da aplicação, para utilizar como base para estudos, material de referência ou ainda utilizar trechos do código em aplicações próprias. No final, Wesley Willians ensinou a turma como criar uma máquina virtual no Amazon Webservices e instalou todos os serviços necessários para a publicação do sistema.

Se você quiser saber mais e se inscrever para a próxima turma, o link do curso é http://www.schoolofnet.com/realtime/

Workshop Online jQuery pela School of Net

http://www.schoolofnet.com/jquery/

Apesar do meu nome ser bastante ligado ao Adobe Flex, sempre tive bastante gosto em trabalhar com HTML e Javascript, tendo ao longo dos anos desenvolvido websites para clientes, sempre utilizando jQuery para facilitar o desenvolvimento e manutenção. Eis que com isso acumulei bastante conhecimento, inclusive sobre boas práticas e performance, pois apesar de ser uma biblioteca fácil de ser utilizada, pode impactar negativamente na performance dos documentos HTML se mal utilizada.

Este workshop online, que será ministrado em 2 sábados de maio, durante todo o dia, tem por objetivo explicar os fundamentos do Javascript, sua história e papel no mundo web, o que é a jQuery e quais os problemas que ela tem por objetivo resolver, explicar o porquê de ser tão largamente adotada, demonstrar muitos exemplos práticos e finalizar com boas práticas e performance.

Mais informações:

  • dias 12 e 19 de Maio de 2012, das 9h30 as 17h30 (1 hora de intervalo)
  • carga horária: 14 horas
  • evento online, através do ambiente Adobe Connect
  • valores:

    • até 28/04/2012 – R$400,00 para novos alunos ou R$360,00 para ex-alunos
    • a partir de 29/04/2012 – R$440,00 para novos alunos ou R$400,00 para ex-alunos
    • parcelamento no cartão de crédito está disponível

  • Conteúdo programático aqui: link

Aguardo vocês lá! Caso tenham alguma dúvida, não se acanhe: pergunte nos comentários!

Um abraço!

Ved

[Javascript] Desabilitando teclas de função (F1, F2…)

12 Replies

Saudações meus caros leitores,

Há muito que estou com vontade de dar a atenção que blog (e vcs) merece, mas a vida anda atribulada e por isso não tenho encontrado tempo.

Hoje eu precisei desabilitar a ação padrão de todas as teclas de função (F1 a F12) ao utilizar um browser para acessar uma app Flex. A necessidade se deve ao fato do sistema atual ter funções específicas associadas a estas teclas. No novo sistema (o que estamos desenvolvendo em Flex) essas funções devem permanecer e associadas as mesmas teclas. Isso é mandatório e a empresa não pode abrir mão.

Assim, lá fui eu procurar soluções prontas em Javascript. Após não encontrar nada de muito consistente, decidi escrever minha própria solução, utilizando fragmentos de diversas dicas isoladas. Para facilitar as coisas, estou usando a JQuery para gerenciar eventos e me informar sobre qual o browser atual.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
 
	// Captura o evento da tecla pressionada e associa à função grabKey
	$(document).keydown(grabKey); // Para IE, Chrome e FF
	$(document).keypress(grabKey); // Para FF, Safari e Opera
 
	function grabKey(event){
 
	  var e = (window.event) ? window.event : event; // Essecial para funcionar no IE
 
	  if(e.keyCode >= 112 && e.keyCode < = 123){ // Verifica se a tecla pressionada é F1 a F12
 
	  	if ($.browser.msie) {
		  	e.returnValue = false;  // Previne o comportamento padrão no IE
			e.cancelBubble = true;  // Previne o comportamento padrão no IE
			e.keyCode = 0;   // Previne o comportamento padrão no IE
			document.onhelp=new Function("return false"); // Previne a abertura do help no IE
			window.onhelp=new Function("return false"); // Previne a abertura do help no IE
		} else {
			e.stopPropagation(); // Previne o comportamento padrão nos browsers bons
			e.preventDefault(); // Previne o comportamento padrão nos browsers bons
	  	}
	  }
	}
</script>
</script>

O script functionou corretamente nos seguintes browsers:

  • IE 6+
  • FF 3 Windows
  • FF 3 Mac
  • Chrome
  • Safari 4 Windows
  • Safari 4 Mac
  • Opera 9

Basta usar o código acima no seu index.template.html encontrado na pasta html-template do seu projeto Flex. Este arquivo é utilizado para geração do html container de sua app Flex.

Agora, basta chamar suas funções AS3 a partir do Javascript, utilizando Flex AJAX Bridge ou então capturando o ato de pressionar a tecla diretamente pelo Flex.

Um abraço,

Ved