Javascript

O que todo desenvolvedor Javascript precisa saber

js

O título é quase um spoiler, mas saber de tudo é um tanto quanto convexo, já que o Javascript, embora padronizado no ECMAScrpit, ele segue vários caminhos e vários players, se fosse colocar em comparação à algo que você conheça não existe nada melhor que dizer: “É caneta para todo papel”.

Brincadeiras à parte, Javascript muda da água para o vinho dependendo onde ele é executado, no Chrome é de uma forma, no Firefox é de outra, No IE ele é uma hidra, no servidor ele é um bom moço, fora novas implementações como o DART, Coffescript e por ai vai.

De Janeiro para cá o que deu para lembrar eu fui juntando e guardando em minha lista de snipets, e resolvi publicar aqui para vocês guardarem e sempre consultarem quando for possível.

Me baseei em algumas coisas interessantes que eu achei sobre a linguagem, a melhor forma de aprender é tentar criar seu próprio framework.

Tipos

O Javascript é um PHP da vida, começa como String e terminar como Boolean, ele possui 9 tipos de variáveis possíveis de serem adotadas.

null – Nulo ou vazio. Semelhante ao Actionscript 3.0

undefined – Indefinido no Actionscript 3.0 seria NaN

string – String é isso em todo lugar, diferente do Java, aqui tanto faz você declarar com aspas simples ou dupla.

number – Igual no Actionscript, tudo aqui é tratado como Float e a grande vantagem é que a biblioteca Math do JS é semelhante ao AS3.0

boolean – Semelhante em qualquer linguagem de programação ( True ou False)

Array – Pode ser declarado como new Array() ou simplesmente [], semelhante ao AS3.0. Tem suporte à Multi-dimencional e várias APIs que implementam o Array Tipado. Ainda estão tentando implementar e definir isso de uma vez por todas.

Object– Igual no AS3.0,C#, Java, pode ser declarado como new Object(); ou pode ser criado de forma literal

     // new
     obj = new Object();
     // ou semelhante
     obj.title="Hello World";
     obj = {title:"Hello"};

E na hora que for verificar o tipo, por exemplo você recebe uma mensagem do servidor 1 // Numero e quer saber se é Boolean, geralmente você faria.

 
var resposta = true;
    resposta == typeof Boolean;
    // false
 
var itens = [1,2];
itens == typeof Array;
// false

O certo mesmo seria você usar o construtor

 
  resposta.constructor == Boolean;
// true

É bizarro isso, o que seria para ajudar, acaba é estragando tudo, mais bizarro é quando você pede por exemplo para definir o tipo.

 
typeof [1,2]; // Object ao invés de Array;
typeof typeof; // Saiba como destruir o firefox de alguém com isso, o Chrome dá erro de sintaxe
typeof null; // Object Essa ai é de matar

Function – Igual em toda linguagem de programação, função é função no mundo de pandora ou nas terras do senhor dos anéis, no JS ela pode ser sua maior amiga e pior amiga, é ai onde entra o problema e faz muita gente odiar o Javascript, a Mayara amiga minha detesta o JS justamente por desconhecer essas particularidades dele, espero que ela esteja lendo esse post.

Por que Functions é tudo isso?

Por que por padrão retornará sempre undefined se você não especificar o retorno, e a palavra [highlight bg=”#ff999d” color=”#ffffff”]this[/highlight] que você tanto se refere ao escopo da função pode ser considerada tanto Global (window) ou local do objeto que ela foi chamada e nunca pertencente ao escopo da função em sí.

Ex: O paraíso

 
function imprima (){
return "Hello World";
}
imprima();
 
// lazy 
var echo = function(){ return echo};
echo() === echo // retorna true;
 
// Como objeto
var somar = new Function("a","b","return a + b");
somar(15,15); // 30
 
// Pegar argumentos da forma tradicional
 
var multiplica = function(){return arguments[0]*arguments[1]};
multiplica(5,5);
// 25

Continuando com Functions, ela possui dois métodos um tanto intrigantes que tem o mesmo funcionamento, [highlight bg=”#ff999d” color=”#ffffff”]call()[/highlight] e [highlight bg=”#ff999d” color=”#ffffff”]apply()[/highlight]

var operacao = function(){ switch(arguments[0]){ case 'somar': return arguments[1]+arguments[2];break}};
 
operacao.call(this,'somar',1,3);
// 4
operacao.apply(this,['somar',1,3]);
// 4

A única diferença é que um você precisa colocar em array no caso do Apply e o outro é literal, é meio louco isso, embora você não viu nem a metade.

Passagem de parametros com valor padrão definido

Imagine você congelado no tempo sem saber por que raios ele não funciona com parametros pre-definidos.

 
var nasceu = function (resposta){ return resposta !== undefined ? resposta + ', finalmente decidiu' : "Decide ai"};
nasceu(); // "Decide ai"
nasceu('SIM'); // SIM, finalmente decidiu;
 
<pre>
 
<h3>Operadores</h3>
 
Ah, É cilada bino! Nesse ponto, aquele primeiro argumento de comparação faz você xingar a mãe <a href="http://en.wikipedia.org/wiki/Brendan_Eich" target="_blank">do cara</a> que fez o Javascript, por quê?
 
<pre lang="javascript">
true == 1// true
true == '1'//true
'1' == 1 // true
undefined == null // true
false == 0 // true
false == '' // true
'' == 0 // true

Especialmente quando você usa esse tipo de comparação em uma resposta de uma chamada Ajax, Deus! Como eu já perdi tempo fazendo isso. Embora a W3C insiste em ensinar errado, eu prefiro que você use as opções:

true === 1 // false
true === 0 // false
 
// usem o equivalente !== para não igual e %== para módulo

Verificando a qualidade do seu Javascript

Só existe um de respeito, e esse é o JSLint, não adianta você querer me convencer que existam outros para medir sua qualidade de código, o JSLint é fenômeno e faz o que promete de uma maneira direta e simples, te ajuda a corrigir erros bizarros que você não nota no dia-a-dia.

Testando o código de forma unitária

Nesse quesito, Jasmine é a resposta, se você espera que seu código retorne 5 e ele retorna 10, então ele vai te mostrar um erro, e a essência do Jasmine é bem simples para implementar.

Cada um em seu quadrado

O Javascript sofre a cada mudança do ECMAScript e atualmente na versão 1.8.6 faz com que a linguagem ganhe inimigos, por achar que é complexo, o fato é que a cada nova release essa quebra de padrão de uma versão anterior ou nova maneira de fazer alguma coisa que era mais simples na anterior, tira o sono de muita gente. Só que eu acho o seguinte, toda linguagem precisa de evolução, vai dizer que tu sabia o que era Tchu Tcha em 1999?

Essa fragmentação da linguagem é de lascar, da 1.5 até a 1.8.x fez muita gente adotar o JQuery como ponto de partida ou o Javascript.NET, justamente para não ter que lhe dar com tanta diferença de um navegador para outro, e essa é uma briga que nunca acabará, por que todos querem uma fatia dos usuários conectados, Browsers ainda são a janela da Internet.

Conheça os recursos

Fonte de material MDN (https://developer.mozilla.org/en-US/docs/Web/JavaScript)
Fonte de material de primeira (http://stackoverflow.com/questions/tagged/javascript)
Refresh no Javascript (http://typedarray.org/javascript-refresh/)
Melhor overview já feito, na minha opinião (http://en.wikipedia.org/wiki/JavaScript)

AngularJS/ HTML5 / CSS3/ Javascript/ JQuery

Criando um scroll Infinito com o AngularJS e JQuery

scrollinfinito-jquery

Esse post é o início de uma série de posts relacionados ao AngularJS, se você não conhece, é bom conhecer, muito de seu comportamento é semelhante ao que tinhamos no Flex, por exemplo Databind e a idéia de componentizar. E o mais legal de tudo é que ele é compatível com qualquer biblioteca que manipule o DOM, por exemplo Zepto e JQuery, ou até mesmo o Twitter Bootstrap.

O AngularJS facilita e muito certas tarefas e mantem o DRY bem vivo. Por exemplo, esse post eu quero falar sobre o scroll infinito, igual o comportamento que o Twitter possui ou o LinkedIn possui quando você vai rolando a página e dados vão pipocando em sua frente. Pois bem, como eu faria isso em puro Javascript e usando o seletor do DOM jQuery?

O scroll é um mal necessário, é o que a Microsoft tenta adotar na nova interface do Windows 8 e o que o Flex tentou quando lançou a versão 4.0. Porém é necessário trazer informações à medida que elas vão acontecendo ou carregar só o necessário e à medida que o usuário for investigando elas forem brotando.

scrollinfinito-jquery

Scroll Infinito com Javascript e JQuery.

O HTML é bem simples:

	<div id="conteudo">
    <ul id="lista"></ul>
</div
var contador = 1;
 
$(document).ready(function () {
    carregar();
    $(this).on('scroll', function () {
        if ($(window).scrollTop() + $(window).height() >= $(this).height()) {
            carregar();
        }
    });
});
 
function carregar() {
    for (var i = 0; i < 10; i++) {
        $("#lista").append('<li><img src="http://placehold.it/100x100"/><div><h4>' + contador + ' Item</h4><p>Descrição do item '+contador+'</p></div></li>');
        contador++;
    }
}

A medida que a soma da posição da barra mais a altura da janela superar o tamanho da altura do documento, ele executa a função carregar, jogando mais itens na lista.

O truque também está na maneira como você declara o CSS, margin faz um estrago danado quando não aplicada de forma correta, nesse exemplo eu coloquei uma aparência de uma lista de smartphone, igual no Android.

body, ul,li,img,h4,p{
    margin:auto;
    font-family:'Droid Sans';
}
ul {
	margin-left: -40px;
	list-style:none;
}
li {
    color:#111;
    height: 100px;
    border-bottom:1px solid #fff;
    padding:10px;
}
li h4 {
    font-weight:400;
    font-size:20px;
    padding:0;
}
li img {
    padding-right:10px;
    float:left;
    display:block;
    vertical-align:text-top;
}
li div {
    display:inline;
}
li p {
    font-weight:300;
    font-size:12px;
}
#conteudo {
    width:100%;
    background:rgba(0,0,0,0.1);
    overflow:auto;
}

E aqui está o exemplo rodando, eu usei o jsFiddle para demonstrar melhor.

Você pode ver sendo executado diretamente no jsFiddle

Criando agora uma lista infinita com o AngularJS

O AngularJS possui vários truques na manga para deixar sua vida mais fácil, módulos, tags personalizados, data-bind, repetidores, diretivas, controllers, esses são alguns de seus recursos. A melhor parte dele como mencionei acima é que é compatível com outras bibliotecas.

Para fazer esse exemplo você vai fazer uma pequena alteração no html e substituir o Javascript, os estilos que é o visual continuam o mesmo.

Logo de cara para identificar como um App, você precisa alterar o html e fazer da seguinte forma:

<!doctype html>
<html ng-app="Rolagem">
<head>

Isso define que o módulo Rolagem será seu App nesse arquivo de html, então na parte de repetir os itens você faz da seguinte forma.

<body ng-controller="Main">
	<div id="conteudo" fazer-rolagem="carregar()">
    <ul id="lista">
         <li ng-repeat="i in items">
            <img src="http://placehold.it/100x100"/>
            <div><h4>{{i.id}} Item</h4>
            </div>
        </li>
    </ul>
</div
</body>

Como o AngularJS abstrai bastante o escopo do javascript para com o HTML, é notável algumas propriedades como o ng-controller, fazer-rolagem que são primariamente customizáveis, a presença do ng-repeat indica que o arquivo vai ser repetido N vezes, conforme vamos adicionando novos itens à lista.

E a parte fundamental desse processo é o Javascript:

function Main($scope) {
    $scope.items = [];
 
    var counter = 1;
    $scope.carregar = function() {
        for (var i = 0; i < 10; i++) {
            $scope.items.push({id: counter});
            counter += 1;
        }
    };
 
    $scope.carregar();
}
 
angular.module('Rolagem', []).directive('fazerRolagem', function() {
         return function(scope, elm, attr) {
        elm = $(document);
 
        elm.bind('scroll', function() {
             if ($(window).scrollTop() + $(window).height() >= $(this).height()) {
                 scope.$apply(attr.fazerRolagem);
             }
        });
    };
});

Agora você já sabe como criar uma diretiva, fazer um módulo e carregar os itens conforme forem feitos os scrolls, no JQuery quando você quer escutar um evento você geralmente usa o $on(), no AngularJS é necessário usar o bind, ele que vai escutar pelo evento.

Maneiras diferentes de aplicar a mesma técnica, para um resultado igual, Eu gostei mais do AngularJS, escrevi menos código e atingir o mesmo resultado.

Ah! lembrando que esses códigos estão disponíveis no Github.

Android/ Blackberry/ Flex/ Flex Mobile Framework/ HTML 5/ HTML5 / CSS3/ JQuery/ JQuery Mobile

Criando uma lista de scroll infinito para seu próximo projeto Mobile

scroll_inifinito_1

Coisa boa na vida é ter desafios, puxa daqui e puxa dali, e acabamos com uma idéia nova em um novo projeto não é verdade? Outra coisa melhor é você ter alunos onde você dá suporte o tempo todo, é o que acabou motivando a criação desse artigo.

Independente de qual é seu próximo projeto, você vai acabar querendo implementar isso uma vez na vida no seu próximo projeto mobile.

Sorte sua se seu próximo projeto for escrito em Flex Mobile ou JQuery Mobile.

Como funciona o Scroll Inifinito?

Independente do tamanho da tela de seu dispositivo, você pode calcular a altura da tela disponível no aparelho vs. altura que o conteúdo produziu para ser disponibilizado, sendo que você pode pegar a posição atual da barra de rolagem “scroller” quando ela atingir a altura  total do conteúdo ou seja, quando ela não tiver mais para onde deslizar até o final.

É ai onde entra o scroll inifinito, você pegando essas variáveis e fazendo o calculo direito, você pode fazer um Append ou incrementar os elementos de uma lista existente, seja Array, Lista, Datalist não importa, você pode implementar isso de maneira fácil usando o seguinte calculo.

 

posicaoAtualDoScroll == ( tamanhoAtualDaLista – tamanhoDisponivelNaTela)

 

Assim, você pode ir incrementando a lista se a barra de rolagem atinge o tamanho máximo disponível na tela e com isso vai paginando os resultados, tanto localmente quanto via chamada de processo remoto RESTful,RTMP,Ajax.

 

Versão Flex Mobile

Para fazer no Flex Mobile, você precisa conhecer bem a arquitetura Spark, uma vez que é desacoplada, a interface do componente, você pode começar investigando o Skin atual do componente <s:List/> até chegar duas propriedades importante do Skin que fazem menção ao componente em sí, dataGroup e scroller , ambos são peça fundamental para começar a implementar tal tarefa.

O dataGroup é onde os dados são guardados na lista e scroller é o componente que faz a barra de rolagem, é com ele que observamos a mudança acontecendo da posicaoAtualDoScroll e assim fazer o uso da formula  de condição e carregar mais itens.
Já que eu observo a mudança de posição do Scroller, eu tenho que chegar até o componente e escutar via EventListener qual é a propriedade que está sendo modificada, para isso o framework do Flex tem o evento PropertyChangeEvent, ele me dá o novo valor que a propriedade sofreu.

As propriedades em questão do scroller que eu quero saber são “verticalScrollPosition” para posição vertical e “horizontalScrollPosition” para posição horizontal.

Então sabendo qual é as propriedades que eu tenho que olhar eu procuro alinhar a formula usando o novo valor menos o tamanho atual da lista sobre o tamanho da tela.

Acabei criando o seguinte código:

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayList;
			import mx.events.FlexEvent;
			import mx.events.PropertyChangeEvent;
 
 
			[Bindable]private var dados:ArrayList = new ArrayList();
			private var proxima_pagina:int = 20; // numero de itens para carregar
 
			protected function loadItens(event:FlexEvent):void
			{
				for (var i:int = 0; i <19; i++) 
				{
					var item:Object = new Object();
					item.label = "Item "+i;
					dados.addItem(item);
				}
				lista.scroller.viewport.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE,getPosicao);
 
			}
 
			private var posicao_anterior:int;
 
			protected function getPosicao(event:PropertyChangeEvent	):void
			{	
 
				if(event.property == "verticalScrollPosition"){
 
					if(event.newValue == (event.currentTarget.measuredHeight - event.currentTarget.height)){
							carregarMaisItens();
					}
				}
			}
 
			private function carregarMaisItens():void
			{
				var indice:int = dados.length;
 
				for (var i:int=0;i<=proxima_pagina;i++) 
				{
					var item:Object = new Object();
					item.label = "Item Carregado "+(i+indice);
					dados.addItem(item);
					trace(item['label']);
				}
 
 
			}
 
		]]>
	</fx:Script>
	<s:List id="lista" dataProvider="{dados}" creationComplete="loadItens(event)" width="100%" height="100%">
 
	</s:List>
</s:View>

 

Veja que além do scroller me dá as propriedades de posição do verticalScrollPosition e horizontalScrollPosition, você precisa usar a propriedade reservada dele para pegar essas mudanças acontecendo, é como se fosse uma caixa onde a barra de rolagem vai indo porém é pre-definido um espaço onde isso pode acontecer, que é o caso da variável viewport.

 

Versão JQuery Mobile

Para fazer em JQuery mobile, é também a mesma técnica, porém uma ressalva, o componente de lista do JQuery Mobile requer que você dê um refresh no listView, é uma espécie de renderização dos itens para aplicar os estilos padrões de CSS.

A diferença entre Flex Mobile e JQuery Mobile é que no Flex eu adiciono direto ao componente, já que o pai View não é passível de ter o Scroller, já no caso do JQuery Mobile como tudo é HTML e o DOM é manipulado diretamente no documento, eu escuto as mudanças do $(window) que é a janela ou tamanho da tela disponível, assim comparo através da mesma fórmula o scrollTop que basicamente é equivalente a verticalScrollPosition e diminuo do tamanho da lista menos o tamanho disponível da tela.

O código acabou ficando assim:

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<html>
<head>
	<title></title>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function($) {
 
 
 
 
 
	carregarItens(20); // 20 itens 
 
 
 
 
	$(window).scroll(function()
	{
	    if($(window).scrollTop() == $(document).height() - $(window).height())
	    {
	    	  carregarItens(20); // carrega sempre 20 itens
	    }
	        
	    	
	});
 
 
 
 
});
 
 
 
 
function carregarItens(pagina){
	var tamanhoLista = $("#lista li").length; // tamanho atual da lista
	for (var i = 1; i < pagina; i++) {
		var indice = i + tamanhoLista;
		$("#lista").append('<li data-theme="c"><a href="#page1" data-transition="slide"> Item '+indice+'</a></li>');
		$("#lista").listview('refresh');
	};
}
</script>
<!-- Home -->
<div data-role="page" id="page1">
    <div data-theme="d" data-role="header" data-position="fixed">
        <h3>
            Exemplo Lista
        </h3>
    </div>
    <div data-role="content" style="padding: 15px">
        <ul id="lista" data-role="listview" data-divider-theme="d" data-inset="false">
            <li data-theme="c">
                <a href="#page1" data-transition="slide">
                    Item
                </a>
            </li>
        </ul>
    </div>
</div>
</body>
</html>

Da próxima vez que você ver no Twitter ou no Dzone uma lista de scroll infinito, você já saberá como implementa-la.

 

HTML 5/ JQuery

Comandos de voz e a sua app Web

Eu não sei você, mais o mundo da tecnologia encurtou seu paradigma de mudança de 5 anos para 6 meses. E quem melhor se adaptar a isso, conseguirá tirar o máximo de proveito das oportunidades que forem surgindo.
Até um tempo atrás, eu e você tinhamos apenas 2 maneiras de interagir com sua aplicação web, via Teclado e Mouse. Nem só via Web App, mais também aplicações desktop.
Passou e muito o tempo que isso era artigo de luxo, Apple lançando o Magic Mouse, Microsoft e seus maravilhosos teclados série 5000. Hoje temos Tablets, smartphones, smart tvs, Kinect e por ai vai.

Quando você pagou aquela matéria absurda e idiota chamada Interação Homem máquina na faculdade, você mal podia saber que isso seria realidade, caso contrário você seria um Steve Jobs. Pois é, saímos dos 2 dispositivos e entramos no jogo corporal, onde o Dedo interage com a interface e gestos realizam comandos.

Só que existe por outro lado uma revolução acontecendo silenciosamente, essa sim, é uma verdadeira maneira de como interagir com a tecnologia. Acidentalmente ou via mensagem subliminar Hollywood tem nos inspirado a interagir dessa maneira. Ou vai dizer que você nunca assistiu o Homem de ferro falando com o JAVIRS?

Já tem até gente criando algo semelhante, só que no mundo real.

O que eu estou falando é da revolução de comunicar com seu computador via comandos de voz. Quem tem por exemplo um Kinect e um XBOX Slim comprado de Nov/2010 para cá, pode interagir com seu XBOX via comando de voz , ao mesmo tempo que você usa o sistema, você ajuda os engenheiros da Microsoft a criarem um verdadeiro JAVIRS para sua vida pessoal.

E o SIRI da Apple heim? Esqueçeu dele? Pois é, chega de ficar engordurando o teclado, a sua tela, o jeito e a maneira mais legal de se interagir com seu sistema é realmente via comando de voz e quando isso passar a ser um diálogo como o Watsom da IBM, a coisa vai mudar de cenário.

Talvez quando eu e você tiver 40 anos, daqui 1 década, isso vai ser tão comum, como comprar um pendrive de 16GB na esquina. Não é KurzWeil.

Em fim, eu terei que esperar tanto tempo assim para que essa revolução seja real, para que eu tenha um assistente do tipo JAVIRS ou coisa parecida, bom, só o senhor do tempo dirá, mais hoje você pode testar no SIRI se tiver um iphone, XBox, ou usar as tecnologias da NUANCE. Que na verdade, é a única empresa no mundo que tem expertise no assunto e que está por trás do SIRI e do XBOX Kinect voice commands.

Alias, tanto blá blá blá, eu posso usar isso em uma aplicação real? Bom Poder pode, desde que seu cliente ou você use o navegador Google Chrome ou qualquer navegador web que tenha o engine Webkit para mobile. Assim você pode usar comandos de voz para fazer uma pesquisa, criar novos itens e por ai vai.

Um fato importante mencionar é que, como 99% dos navegadores Mobile usam o Webkit, então provavelmente será fácil, fazer funcionar os comandos de voz pelo lado mobile também.

O Google como sempre saiu na frente, e lançou até uma especificação no W3C sobre o assunto. Onde eu acredito fortemente que a semântica da Web terá muito mais dinamismo, já que o futuro de plug-ins em navegadores é incerto.

Na especificação menciona que se você usar o código:

 
x-webkit-speech

Em seu tag de Input, você dará habilidades de apresentar o seguinte resultado abaixo:



O resultado acima, foi feito apenas com o seguinte código.

<form>
      <fieldset>
                   <label>Fale:</label>
                   <input x-webkit-speech type="text" lang="pt_BR"/>
      </fieldset>
</form>

Clique no ícone do microfone e você pode falar em português mesmo do Brasil e ele vai preencher o campo de input com o que ele entendeu de sua fala.

Ai me veio umas idéias, eu poderia fazer esse mesmo experimento usando alguns eventos do Speech e também usando jQuery para realizar algumas mashups.

A primeira delas é uma App simples de TO-DO-LIST, teste a App abaixo, basta clicar no ícone do microfone e falar.

O código da App acima você pode pegar aqui abaixo:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>TO-DO-LIST com comando de voz</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style type="text/css">
 
	form,div {width:400px; margin:0 auto;}
	ul { list-style:none;}
</style>
 
<!-- Código do JQuery para o TO-DO-LIST VIA COMANDO DE VOZ -->
<script type="text/javascript">
	$(document).ready(function(e) {
 
		// escuto a mudança do texto quando for preenchido
		// o campo e executo uma função
        $("#nova_tarefa").live('webkitspeechchange','',function(e){
 
				addTarefa($(this).val());
		});
 
		// limpar todas as tarefas adicionadas
		$("#btnLimpar").click(function(e) {
            	$("#tarefas").html('');
        });
    });
 
		function addTarefa(value){
				$("#tarefas").append('<li><input type="checkbox"/>'+value+'</li>');
				$("#nova_tarefa").val('');
		}
</script>
 
 
</head>
 
<body>
	<form>
    	<fieldset>
        <label>Nova tarefa:</label>
        <input id="nova_tarefa" x-webkit-grammar="builtin:search" lang="pt-BR" type="text" speech x-webkit-speech/>
		 <a href="#" id="btnLimpar">Limpar lista</a>
    	</fieldset>
    </form>
    <div>
    		<ul id="tarefas">
            </ul>
    </div>
</body>
</html>

Para funcionar eu usei uma série de atributos que estão habilitados e não documentos pelo Google, porém se você for analisar o código acima, bem especificadamente nos atributos, verá que tem um built-in search, eu uso o que o Google já possui, um dicionário baseado em SGRL, como especificado no Próprio navegador e seu dicionário de termos.

x-webkit-grammar="builtin:search" lang="pt" type="text" speech x-webkit-speech/

Tudo é possível através do x-webkit-speech, que reconhece todo o trabalho a ser realizado, consultando o serviço do Google, sintetizando a voz, e o retorno disso é um JSON com o termo que ele entendeu baseado no que foi falado, você até pode consultar o código fonte do Chrome aqui.

Ai eu pensei, bom, por que não fazer uma mashup legal, do tipo, pesquisar termos do Twitter, ou postar alguma coisa no twitter falando ao invés de escrevendo.

O código do aplicativo ai acima é esse aqui:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Web e comandos por voz</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 
<style type="text/css">
	body{font-family:Verdana, Geneva, sans-serif; font-size:16px;}
	form,div {width:400px; margin:0 auto;}
 
</style>
 
<script type="text/javascript">
    $(document).ready(function(e) {
 
        var URL_SUFIX = "&result_type=mixed";
 
 
        $("#tweettermo").live('webkitspeechchange','',function(e){
             $.getJSON("http://search.twitter.com/search.json?q="+$("#tweettermo").val(),"&callback=?",function(data){
				 $("#resultado").html('');// limpar a cada nova busca
                $.each(data.results, function(i,tweet){
                     // this is where we do what we want with the tweet
                     $("#resultado").append('<p><img src="'+tweet.profile_image_url+'" align="left" />'+tweet.text+'</p><br/>');
                });
             });
 
 
        });
   });
</script>
</head>
 
<body>
<div><img src="twitter_logo.png"/></div>
<form>
<input id="tweettermo"  size="41" autocomplete="off" dir="ltr"
 spellcheck="false" x-webkit-grammar="builtin:search" lang="pt"
 type="text" speech x-webkit-speech>
 </form>
 	<div id="resultado">
 
    </div>
</body>
</html>

Legal não é? Isso abre uma porta absurda para novas implementações, interações com o usuário e você pode até criar seu assistente pessoal JAVIRS combinando strings e comandos.

Até a próxima

HTML 5/ HTML5 / CSS3/ JQuery/ Web 2.0

10 mitos da incompatibilidade nos navegadores para HTML/CSS/JS

Quem anda de cabresto, sempre tende a olhar para baixo, excluindo a curiosidade de olhar o mundo exterior ao seu redor, depois que eu saltei da minha zona de conforto a 10 meses atrás, eu tinha a notória sensação de que eu descobria coisas novas a cada segundo, e as lembranças da zona de conforto me acomodaram mal, muito mal por sinal.
Uma das coisas que te deixam infeliz é a tal preguiça de inovar, justamente por que confortavelmente você acha que nunca precisa mudar, e nessa migração constante deparamos com mitos criados ou expurgados por quem não dá a mínima atenção em inovar e ser competitivo.

Quando eu comecei a estudar HTML5/CSS3/JS, eu tinha aquela sensação de mal estar adquirido, achando que nada prestava, tudo precisava melhorar, CSS então era a brincadeira de estica e puxa,Deus nos acuda!

Ao passar das semanas eu fui percebendo que os navegadores evoluíram bastante, frameworks e desenvolvedores de padrões web colaboraram para essas evoluções e no final percebi que quem estava atrasado na história era eu mesmo.

Então somei o que eu achava mito e decidi escrever esse post para você abrir sua mente e se liberar de seus medos.

10 Mitos da incompatibilidade nos navegadores

MITO 1 – HTML e CSS é feito para fazer sites e não sistemas.

Resposta: Então você nunca usou o Hotmail, Gmail, adWords, adSense na vida, você nunca usou itaú bankline, Bradesco on-line e por ai vai. o HTML e CSS é poli valente, funciona para tudo.

MITO 2 – Tenho que fazer vários ifs e elses para suportar N navegadores

Resposta: Não há necessidade, já que existem N frameworks no mercado que fazem a manipulação perfeita entre engines de navegadores, grande parte dos navegadores usam webkit/gecko e o único a usar um engine diferente é o IE com seu msie, porém na última versão 8, já vem com suporte a padrões web.

Frameworks que podem te ajudar a quebrar esse mito: JQuery, MooTools, EXT Js, Script.aculo.us, ProtoType.

Ou seja, alternativas é o que não falta para esse mito, já que todos peleijam em achar que irá voltar a época das cavernas por manipular DOM de cada engine de navegador.

MITO 3 – HTML5 é incompatível com navegadores

Respota: Desde quando HTML é incompatível com navegadores? HTML5 nada mais é que uma nova versão do HTML, existem alguns recursos como WebGL, Canvas, Audio, Video, codecs de audio e video que são específicos de cada navegador, que ao total 93% de todos os recursos que você vai usar em um único projeto é compatível com todos os navegadores.

Caso você ainda tenha problemas em achar que o HTML5 pode não rodar perfeitamente no IE7,8 você pode usar bibliotecas já prontas para isso. Uma delas inclusive é amplamente utilizada, a Modernizr.

MITO 4 – Não posso usar MVC em uma aplicação web feita em Javascript e HTML

Resposta : Mito detonado, no bom estilo caçadores de mitos, desde que javascript é javascript, e tudo é Objeto. Então eu manipulo qualquer objeto aplicando qualquer padrão existente, Aconselho você usar esse slides para te influenciar a pensar diferente.

MITO 5 – Não consigo criar interfaces com facilidade como no Flex

Resposta: É por que você não conhece o JQuery UI, YUI, Prototype UI, UKI, MochaUI, Livepipe UI, Alloy UI e GWT. Ou seja, alternativas para você criar interfaces não faltam.

MITO 6 – Aplicações Web feitas em HTML 5 e CSS3 não são cross-plataforma.

Resposta: Navegadores hoje são cross-plataformas, rodam no Linux, MAC, Windows, ios, Android e Windows Phone. Se sua aplicação fica na caixinha de areia do navegador então ela também será cross-plataforma, não tendo a necessidade absoluta de portar seu aplicativo para diferentes plataformas. Assim como no Flash Player ser cross-plataforma, é por que ele tira proveito dos navegadores.

MITO 7 – Aplicações feitas em HTML5 e CSS3 são lentas

Resposta: Uma vez que sua aplicação pronta, ela trafega muito mais rápido para o navegador do usuário do que seu SWF, já que não é compilável, é apenas lida.
O Flex compila o que você escreve em um SWF, esse SWF é binário, como uma imagem em JPEG ou PNG é. A diferença é que uma vez baixado ele se torna mais rápido por que não é interpretado. Já com HTML, CSS e JS ele é interpretado sempre que você manipula.

A grande vantagem está no tráfego de dados e na re-utilização do sistema, á que por padrão ele tem cache ativo. roda muito mais macio no navegador e não depende de plug-in.

MITO 8 – Em aplicações Web eu não consigo fazer Sockets, usar o AMF

Resposta: Você consegue sim, WebSockets são novidade, são feitos em js, veja o Node.JS. E AMF conheça o AMFJs.

MITO 9 – As IDE atuais são péssimas, produtividade ZERO

Resposta: Mito detonado também, existem N IDEs excelentes uma delas é as IDEs feitas pela JetBrains, compatíveis com os padrões do mercado e cheia de recursos, outras tão boas são para o Eclipse como o Aptana. E claro o Dreamweaver CS5.

MITO 10 – Meus aplicativos são re-escritos sempre que for criar uma versão mobile deles.

Resposta: Existem 2 posibilidades de você usar HTML, CSS e JS em aplicações Móveis, uma é usar os Media-Queries de CSS, fazendo o layout de suas aplicações responsivas. Ou criando um aplicativo específico para Mobile usando o mesmo HTML 5 e CSS3 feito para versão Web/Desktop.

Então se você chegou até aqui, é sinal que alguns mitos já passaram por sua cabeça e a dúvida pairava no ar. A minha sugestão é, ajude outras pessoas a se libertar desses mitos.

HTML 5/ JQuery/ JQuery Mobile/ Playbook

jQuery Mobile 1.0 lançado

O suporte a CSS3 e HTML5 para dispositivos móveis é espantoso, 98% dos dispositivos tem suporte a todas as tecnologias web standards.

E o JQuery Mobile 1.0 está ai para provar isso.

Com sua recém lançada versão para o mercado, incrivelmente dá suporte a diversos dispositivos desde, iPads, iphones, blackberrys, androids, nokia e até web os.
Eu estudei e testei ele uns 6 meses atrás, acabei fazendo alguns testes que você pode conferir aqui do seu device., quando foi lançada a versão alpha, eu vi potêncial, porém na época era pouco provável adota-lo em uma solução comercial. Isso acaba por desmoronar, pelo que eu andei lendo dessa versão final.

Mesmo tendo sua versão mais estável lançada hoje, incrivelmente você já vê um número de soluções feitas com jQuery Mobile nesse site, chamado JQuery Mobile Gallery.

O que me impressiona nesse projeto é a velocidade de desenvolvimento e sua documentação. Que é ultra intuitiva.

Convido você a olhar de perto esse projeto e considera-lo, já que você conta com todo o poder do framework JQuery, fora os 250 mil plug-ins para plataforma.

Flex/ Flex 4/ Flex 4.5/ JQuery

Redescobrindo o gosto pelos padrões Web : JQuery para devs Flex – Parte 4

Estou fascinado como ambas tecnologias possuem suas particularidades e ao mesmo tempo compartilham tantas coisas em comum. Se por um lado aprender Javascript é parte fundamental para seu progresso com JQuery, serve a mesma deixa para Flex, que depende exclusivamente de Actionscript.

Embora a zona de conforto que o Flex lhe proporciona como design padrão já pre-definido, layout Manager já ajustadinho para qualquer tela, composição de componentes, arquitetura componentizada, tudo isso acarreta na escolha de se adotar ou não JQuery e padrões Web em seus projetos e em sua carreira profissional.

Fato é, que da uma preguiça fora de sério aprender tudo isso novamente, como denominar dependências e heranças com DOM, live encoding. É deverás complicado para quem sai de outro idioma programático e cai de pará-quedas no ambiente do navegador.

Nessa quarta parte, quero mostrar em diante como é a estrutura padrão de eventos no JQuery e como isso pode encurtar pontos no aprendizado.

Eventos

A gramática de eventos no Flex é composta por pacotes e mais pacotes definhados por componentes e seus containers, tanto que é muito bem distribuído, é como se fosse 1 caixa de palito de fósforo, contendo palitos com respectivas funções programáticas, um para cada tipo de fogo que se pretende ascender.
É estimado que por padrão no Flex 4.5 existam cerca de 98 tipos de evento, boa parte eles são herdeiros do evento chave que fica no pacote flash.events.Event os demais são de uso exclusivo de cada plataforma como AIR e Flash Player.

Já a gramática de eventos do JQuery, é um tanto simplificada, onde não passa mais que 36 tipos eventos, todos herdeiros de um só evento pai que é amarrado ao HTML, o DOM Object.

Porém, essa maneira simplista da coisa tem seu certo fundo técnico, uma vez que você tem N tipos de navegadores com N tipos de engine, ou você simplifica a coisa ou acaba fadado ao fracasso. Não tão distante, por mais que você queira relutar, os eventos no Flex também seguem um padrão cronológico ou técnico possa se dizer, do modelo de DOM level 3. Onde há uma certa semelhança em nomenclatura e a estrutura de como funciona, tal como adicionar listener, remover listener.

O que o JQuery fez foi pegar tudo isso e simplificar o máximo possível, trazendo ao desenvolvedor maior facilidade nessa execução de eventos. Porém em contra partida ele pecou pela exclusão do processo de fase, o que é umas das partes fundamentais em aplicações que tomam por base eventos.

Exemplo prático:

Criar um Div ( Bloco), onde ele siga a posição do mouse. Uns dos segredos desse exemplo é o CSS, com seu subselector position:relative;

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<style type="text/css">
.bloco {width:200px; height:200px; background:#000; display:block; position:relative;}
</style>
<script type="text/javascript">
 
	$(document).ready(function(e) {
 
		// começar a brincadeira com JQuery
 
			$(document).mousemove(function(e) {
                	$(".bloco").css("left",e.pageX);
					$(".bloco").css("top",e.pageY);
					var nova_cor = 'rgb(' + (Math.floor((-256)*Math.random()) + 200) + ','
                     + (Math.floor((-55)*Math.random()) + 200) + ','
                     + (Math.floor((-55)*Math.random()) + 200) + ')';
					$(".bloco").css("background",nova_cor);
            });
			$(document).mouseout(function(e) {
               setInterval(loop,4000);
            });
 
			function loop()
			{
				$(".bloco").animate({left:Math.random()*  screen.availWidth/2},1000);
				$(".bloco").animate({top:Math.random()* screen.height/2},1000);
			}
 
    });
</script>
</head>
 
<body>
			<div class="bloco"></div>
</body>
</html>

Se eu fizer esse exemplo no Flex, como seria?

 
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="init(event)">
 
	<fx:Declarations>
		<s:Move id="mover" target="{bloco}" duration="4000" />
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.events.EffectEvent;
			import mx.events.FlexEvent;
			import mx.events.FlexMouseEvent;
 
			protected function init(event:FlexEvent):void
			{
				this.addEventListener(MouseEvent.MOUSE_MOVE,mudarBloco);
				this.addEventListener(MouseEvent.ROLL_OUT,randomizar);
				this.addEventListener(MouseEvent.ROLL_OVER,pegarListeners);
 
			}
 
			protected function mudarBloco(event:MouseEvent):void
			{
				bloco.x = mouseX;
				bloco.y = mouseY;
				cor.color = Math.random()*0xffffff;
			}
 
			protected function randomizar(event:MouseEvent):void
			{
				mover.xTo = Math.random()* screen.width/2;
				mover.yTo = Math.random()* screen.height/2;
				mover.play();
				this.removeEventListener(MouseEvent.ROLL_OUT,randomizar);
 
			}
 
			protected function pegarListeners(event:MouseEvent):void
			{
				// TODO Auto-generated method stub
 
				this.addEventListener(MouseEvent.ROLL_OUT,randomizar);
			}
 
		]]>
	</fx:Script>
	<s:Rect id="bloco" width="200" height="200">
		<s:fill>
				<s:SolidColor id="cor"/>
		</s:fill>
	</s:Rect>
</s:Application>

Viu que tudo não passa de mousemove, mouseOut, posição do mouse. Tudo é igual, o que realmente muda nesse exemplo é a nomenclatura das palavras chaves usadas.

Uma simples lista de tarefa no JQuery

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link href="css/padrao.css" rel="stylesheet" type="text/css">
 
<script type="text/javascript">
 
	$(document).ready(function(e) {
 
			$("#btn").click(function(e) {
                	// adicionar itens
					$("#tarefas").append('<li><input name="Tete" type="checkbox" value="'+$('input').val()+'"><label>'+$('input').val()+'</label></li>');
					$('input').val('');
					$('input').focus();
            });
    });
</script>
</head>
 
<body>
<input class="input" name="tarefa" type="text" lang="pt" value="Digite sua tarefa" size="30" maxlength="50">
<a id="btn" class="button green large">+</a>
 
<ul id="tarefas" class="lista">
</ul>
</body>
</html>

Até ai tudo bem, e se você quiser dinamicamente adicionar um evento sempre que um novo item é adicionado, você faz através do evento bind (), que é próprio para isso.

					$('li input').bind('change',function (e){
						if($("li input").is(':checked')){
							$(this).toggle();
						}
					});

O código fica no final

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link href="css/padrao.css" rel="stylesheet" type="text/css">
 
<script type="text/javascript">
 
	$(document).ready(function(e) {
 
			$("#btn").click(function(e) {
                	// adicionar itens
					$("#tarefas").append('<li><input name="Tete" type="checkbox" value="'+$('input').val()+'"><label>'+$('input').val()+'</label></li>');
 
					$('li input').bind('change',function (e){
						if($("li input").is(':checked')){
							$(this).toggle();
						}
					});
					$('input').val('');
					$('input').focus();
            });
 
    });
</script>
</head>
 
<body>
<input class="input" name="tarefa" type="text" lang="pt" value="Digite sua tarefa" size="30" maxlength="50">
<a id="btn" class="button green large">+</a>
 
<ul id="tarefas" class="lista">
</ul>
</body>
</html>

E com isso você pode partir para exemplos mais sofisticados como um dataGrid por exemplo:

Veja abaixo

jquerytabela

Tem editar, selecionar tudo, soma de valores.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link href="css/padrao.css" rel="stylesheet" type="text/css">
 
<script type="text/javascript">
 
 
 
	$(document).ready(function(e) {
		editable();
		disable();
 
 
 
		$("#checkAll").change(function(e) {
 
			 $("table td input").each(function(index, element) {
 
								if($("#checkAll").is(':checked')){
									$(element).attr("checked",true);
								}
								else{
									$(element).attr("checked",false);
								}
							///	alert($(element).val());
 
					});
        });
 
		var count = 1;
		$("#addMaisButton").click(function(e) {
			if(count == 1){
  			$("table").append('<tr class="d1"><td><input class="checkbox" type="checkbox"></td><td></td><td></td></tr>');
			count++;
			}else if(count == 2)
			{
				$("table").append('<tr class="d2"><td><input class="checkbox" type="checkbox"></td><td></td><td></td></tr>');
				count--;
			}
			editable();
        });
 
    });
 
	function disable()
	{
			$("table tr td:first-child").each(function(index, element) {
                	$(element).unbind('dblclick');
					$(element).unbind('keyup');
					$(element).unbind('focusout');
            });
 
	}
	function editable(e)
	{
		$("table tr td").each(function(index, element) {
 
				$(element).bind("dblclick",function edit(){
					$(element).html('<input class="input" type="text" value="'+$(element).text()+'" size="30" maxlength="50">');
					$('input').bind('focus',function focusEdit(){this.select()});
				});
 
				$(element).bind("keyup",
						function closeEdit(e){
							if(e.keyCode == 13){
							$(element).text($(element).find('input').val());
							somarTotal();
							}
				});
            });
 
	}
 
	function somarTotal()
	{
			var somageral = 0;
			$("table tr td:nth-child(3)").each(function(index, element) {
					//	somageral += ;
						if(!isNaN(parseInt($(element).text()))){
							somageral += parseInt($(element).text());
							//alert($(element).text());
						}
 
            });
			//alert(total);
		$(".total").text(somageral + ',00');
	}
</script>
</head>
 
<body>
<a class="button green large" id="addMaisButton">Adicionar +</a>
<table class="grid" width="650" border="0" cellpadding="10">
  <tr>
    <th width="26" scope="col">
      <input name="checkAll" type="checkbox" class="checkbox" id="checkAll"></th>
    <th width="340" scope="col">Descrição dos itens</th>
    <th width="184" scope="col">Valor</th>
  </tr>
  <tr class="d1">
    <td class=""> <input name="checkAll1" type="checkbox" class="checkbox" id="checkAll1"></td>
    <td>q</td>
    <td>10</td>
  </tr>
  <tr class="d2">
    <td class=""><input class="checkbox" type="checkbox" name="checkAll2" id="checkAll2"></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="d1">
    <td class=""><input class="checkbox" type="checkbox" name="checkAll3" id="checkAll3"></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="d2">
    <td class=""><input class="checkbox" type="checkbox" name="checkAll4" id="checkAll4"></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<p>&nbsp;</p>
<p>Soma Total:R$<span class="total"></span></p>
</body>
</html>

Estude o código e veja como fiz, eu gastei uma média de 4 horas para fazer isso. Embora o código não esteja optimizado.

Abraços e até o próximo.

Flex/ JQuery

Redescobrindo o gosto pelos padrões Web : JQuery para devs Flex – Parte 3

Continuando com a série de posts sobre JQuery para desenvolvedores Flex, começo com um tema bem pertinente, formulários, já que é o calcanhar de aquiles de qualquer sistema que trafegue ou manipule dados.

Formulários

Dar-se com formulários é um caso muito sempre discutido em todas as instancias de linguagens de programação, seja ela para Desktop ou Web. Ninguém concorda com a API e acaba criando alguns mecanismos extras.

Não é diferente no Flex e nem tampouco no JQuery. Existem coisas em ambas que umas deveriam ser implementadas, para ficar igual.

Os formulários no Flex estão indo muito bem nessa versão 4.x do SDK, já que estão sempre em constante evolução, coisa que nas versões 3.x era bem divertida e tinha complementos bases que ajudavam bastante.

No JQuery

Veja esse exemplo simples.

jquery_forms

Embora o JQuery seja um complemento de manipulação ao HTML e CSS, ele traz uma série de funções pré-dispostas que facilita bastante o trabalho nesse exato momento de enviar os dados.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link href="css/padrao.css" rel="stylesheet" type="text/css">
<title>JQuery e formulários</title>
 
 
<script type="text/javascript">
 
	$(document).ready(function() {
 
			// pegar valores do form e jogar em um alert
 
			$("#enviar").click(function(e) {
                	pegarValores();
            });
 
    });
 
	function pegarValores(){
			var resposta = $("#meuform").serialize();
		return alert(resposta);
	}
</script>
 
</head>
 
 
<body>
	<form id="meuform" style="width:240px;">
    	<p>
    	  <label>Usuario</label>
    	  <input id="login" name="login" type="text" size="10" maxlength="10">
   	  </p>
    	<p>
    	  <label>Senha</label>
    	  <input id="senha" name="senha" type="password" size="10" maxlength="10">
  	  </p>
      <p>
      	<a id="enviar" class="medium button green">Entrar</a>
      </p>
    </form>
</body>
</html>

Incrivelmente simples, passo o #id do formulário e executo a função serialize(). É fantástico, com uma função simples eu consigo fazer isso. Se eu fosse fazer no Flex, eu teria que criar minha classe própria para isso.

O que o serialize() realmente faz, ele faz um loop no form, pega cada campo e seu label correspondente caso exista e traz para mim os valores formatados em queryString já prontinhos para usar em qualquer um de seus métodos para trafegar dados. Se eu quiser implementar mais posso usar o serializeArray(), e ele me retorna em Array a resposta.

No Flex
Então se você cria forms básicos no Flex você faria uma função para coletar aquelas informações e envia elas para um servidor via HTTPService, RemoteObject, WebServices ou DataServices.
Querendo ou não se você for partir para um framework MVC,MVP você usaria o mecanismo automático do framework para cuidar disso.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
 
	<fx:Script>
		<![CDATA[
			import com.riacycle.form.FormUtil;
 
			import mx.controls.Alert;
			protected function pegarValores(event:MouseEvent):void
			{
				// TODO Auto-generated method stub
				Alert.show(FormUtil.serialize(meuform));
			}
		]]>
	</fx:Script>
 
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:Form id="meuform" x="201" y="87" width="256" height="128">
		<s:FormItem label="Usuario">
			<s:TextInput maxChars="10"/>
		</s:FormItem>
		<s:FormItem label="Senha">
			<s:TextInput displayAsPassword="true" maxChars="10"/>
		</s:FormItem>
	</s:Form>
	<s:Button x="349" y="223" label="Entrar" click="pegarValores(event)"/>
 
</s:Application>

Claro, utilizando a seguinte classe, cedida gentilmente pela RIACycle.

////////////////////////////////////////////////////////////////////////////////
//
//  RIACYCLE INC. LTDA BRAZIL
//  Copyright 2011 RIACycle Inc. LTDA
//  All Rights Reserved.
//
//  NOTICE: RIACycle Inc. permits you to use, modify, and distribute this file
//  in accordance with the terms of the license agreement accompanying it.
//	Code Licensed by MPL http://www.opensource.org/licenses/MPL-1.1
//
// Author: Igor Costa
//
////////////////////////////////////////////////////////////////////////////////
 
package com.riacycle.form
{
	import mx.core.IVisualElement;
	import mx.core.IVisualElementContainer;
	import mx.core.UIComponent;
 
	import spark.components.Form;
 
	public class FormUtil
	{
		public function FormUtil()
		{
		}
		/**
		 * @public
		 * Retorna em QueryString os campos de um formulário padrão do flex
		 * @return String
		 * @see spark.components.Form
		 * */
		public static function serialize(value:Form):String
		{
 
			var query:String;
			for (var i:int = 0 ;i <= value.numElements-1;i++)
			{
				var item:IVisualElementContainer = value.getElementAt(i) as IVisualElementContainer;
 
				for (var j:int = 0; j<=item.numElements-1;j++)
				{
					var input:UIComponent = item.getElementAt(j) as UIComponent;
 
					if(i <= value.numElements-1)
						query += item['label'] + "=" + input['text'] +'&';
				}
			}
			return String(query).substr(4,query.length-5); // remove o label do Form para title e remove o ultimo &
		}
	}
}
Flex/ Flex 4/ Flex 4.5/ HTML 5/ JQuery

Redescobrindo o gosto pelos padrões Web : JQuery para devs Flex – Parte 2

Continuando com as minhas descobertas, descritas nesse post. Gostaria de comentar algumas comparações para desenvolvedores Flex que queiram aprender JQuery.

Alguns aspectos interessantes

Mudança de propriedade em tempo de execução (tempo real)

Flex: Facilmente no Flex você muda propriedades em tempo de execução, através de várias formas, com CSS(StyleManager), Skin, Skinnable Class, Reflection e Actionscript.
Imagine o código abaixo do Flex, onde você tem um Rect (Retangulo) e você quer mudar sua largura e altura depois de 4 segundos que a App disparou o CreationComplete.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="init(event)">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
 
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
 
			private var tempo:Timer;
 
 
			protected function init(event:FlexEvent):void
			{
				// TODO Auto-generated method stub
				tempo = new Timer(4000);
				tempo.addEventListener(TimerEvent.TIMER,executar);
				tempo.start();
			}
			private function executar(e:TimerEvent):void
			{
				alvo.width = 100;
				alvo.height = 100;
				tempo.stop();
			}
 
		]]>
	</fx:Script>
 
	<s:Rect id="alvo" x="109" y="53" width="200" height="200">
			<s:fill>
				<s:SolidColor color="#000000"/>
			</s:fill>
	</s:Rect>
</s:Application>

Basicamente a única coisa que você precisa é da classe Timer e 2 métodos para mudança.

JQuery: Se eu for fazer isso no JQuery, basicamente eu uso do JQuery só a facilidade de chegar até o objeto e usar o método .css para alterar as propriedades, o resto é puro Javascript, eu faria assim.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<style type="text/css">#alvo { width:200px; height:200px; background:#000; position:relative; top:40px; left:140px;}</style>
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(e) {
    // inicia o documento
 
	var tempo = setTimeout("mudarPropriedades()",4000);
});
function mudarPropriedades(){
			$("#alvo").css("width",100);
			$("#alvo").css("height",100);
}
</script>
</head>
<body>
		<div id="alvo"></div>
</body>
</html>

Fácil, não? Esse assunto acaba levando a outro assunto que é estilo.

Estilo CSS

Flex:Uma das grandes facilidades que o Flex 4.x, tem é seu novo esquema de CSS, que é baseado na especificação nova do CSS 3, que é justamente a inclusão de namespaces para facilitar a compatibilidade e não só isso, como também sub selectors, typed selectors e os media query para diferentes telas (Multi-screen). O que era uma enorme desvantagem nas versões anteriores 2.x e 3.x que ainda eram baseadas na especificação CSS 2, que diga-se de passagem não suportava tudo do CSS2.

Tanto que o negócio era tão ruim no Flex 2.x e 3.x que tinha-se espaço para o Flex Style Explorer, eu achava isso um salvador da pátria. Já que programmatic skin era uma coisa horrível de se fazer.

Graças aos com noção, isso foi banido do novo Flex 4.x SDK e a coisa agora está uma maravilha. Então baseando-se na nova. como eu estilizo meus componentes em Flex via CSS?

O código abaixo me gera isso ai.
button

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx">
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
 
		s|Button {
				chromeColor:#000000;
				fontSize:20;
				color:#ffffff;
		}
	</fx:Style>
 
	<s:Button x="100" y="200" width="149" height="46" label="Hello World"/>
</s:Application>

JQuery: Na verdade nem seria JQuery e sim, CSS3 padrão, já que o CSS é uma linguagem de estilos para o HTML, isso teria mais sentindo se eu aplicasse o CSS 3 em um documento HTML 5, que a compatibilidade é quase 100%. Então para aplicar como eu faria?

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Blogs Post</title>
 
<style type="text/css">
.Button, .Button:visited {
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	margin: 0 2px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.black {
	color: #d7d7d7;
	border: solid 1px #333;
	background: #333;
	background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
	background: -moz-linear-gradient(top,  #666,  #000);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
}
</style>
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(e) {
    // inicia o documento
 
	var tempo = setTimeout("mudarPropriedades()",4000);
});
function mudarPropriedades(){
			$("#alvo").css("width",100);
			$("#alvo").css("height",100);
}
</script>
</head>
 
</head>
<body>
	<a class="Button black">Hello World</a>
</body>
</html>

Veja que se você salvar esse html e executar, ele vai te trazer a mesma aparência arredondada de um button padrão do Flex, uma coisa que me deixou desconfortável nesse ponto, foi o fato de ter que fazer N hacks e filtros para funcionar igual como no Flex, depois caiu a ficha e eu lembrei que o Flex para tornar isso fácil, ele já pre-define isso, então estão equiparados. Porém é compatível a aparência, só que no CSS e HTML como a linguagem é diferente do Flex que é compilada e no HTML e CSS3 ela é interpretada pelo navegador, eis o motivo dessa discrepância de aparência entre navegadores e o real motivo para os hacks em CSS3.

Módulos e modularizar Apps

Flex: Módulos, você tem ModuleLoader, Module, e uma cacetada de técnicas e teorias para deixar sua app leve e rápida, é um assunto extenso e não me cabe colocar aqui todo o assunto em poucos paragráfos, o assunto para mais de manga.
Em fim, em resumo, se você quer deixar a App leve, você modulariza ela em swf separados e os carrega apenas quando for necessário. A técnica mais básica para fazer isso, seria assim:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx">
 
	<fx:Script>
		<![CDATA[
			protected function button1_clickHandler(event:MouseEvent):void
			{
				mdContainer.unloadModule();
				mdContainer.loadModule("moduloA.swf");
			}
 
			protected function button2_clickHandler(event:MouseEvent):void
			{
				mdContainer.unloadModule();
				mdContainer.loadModule("moduloB.swf");
			}
 
		]]>
	</fx:Script>
 
	<s:controlBarContent>
	<s:Button label="Carregar Modulo A" click="button1_clickHandler(event)"/>
	<s:Button label="Carregar Modulo B" click="button2_clickHandler(event)"/>
</s:controlBarContent>
	<s:ModuleLoader id="mdContainer" width="100%" height="100%" >
 
	</s:ModuleLoader>
</s:Application>

Você descarrega o módulo anterior caso exista e carrega o próximo. Fácil não?

JQuery: O JQuery traz a tona um funcionamento muito similar a API do Flash que é para Carregar coisas , a Classe Loader, que é uma subclass do LoaderInfo, assim como o ModuleLoader.

No JQuery ele faz esse processo através do método .load ().

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Blogs Post</title>
 
<style type="text/css">
#Menu {
		width:100%;
		height:40px;
		display:block;
		position:fixed;
}
.meusModulos{ position:absolute; margin-top:44px; width:500px; height:500px;background:#f4f4f4;}
 
.Button, .Button:visited {
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	margin: 0 2px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.black {
	color: #d7d7d7;
	border: solid 1px #333;
	background: #333;
	background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
	background: -moz-linear-gradient(top,  #666,  #000);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
}
</style>
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(e) {
    // inicia o documento
 
	$("#btnA").click(function(){
			$("#moduleLoaderHTML").load("moduloA.html");
	});
	$("#btnB").click(function(){
			$("#moduleLoaderHTML").load("moduloB.html");
	});
});
 
</script>
</head>
 
</head>
<body>
	<div id="Menu">
	<a class="Button black" id="btnA">Carregar Modulo A</a>
    <a class="Button black" id="btnB">Carregar Modulo B</a>
    </div>
 
    <div class="meusModulos" id="moduleLoaderHTML"></div>
</body>
</html>

Os módulos basicamente são iguais, então posto aqui só modulo A o modulo B tem o mesmo código.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
#estilos {background:#000; height:100% !important}
h2 {color:#fff; size:40px;}
</style>
</head>
 
<body >
<div id="estilos">
<h2>Modulo A Carregado com sucesso!</h2>
</div>
</body>
</html>

Tem uma infinidade de funções no JQuery, HTML e CSS que me fascinam, acho que vou colocar por aqui. Até a parte 3.

HTML 5/ JQuery

Redescobrindo o gosto pelos padrões Web : JQuery para devs Flex

Cerca de 20 dias atrás eu decidi que chegou a hora de aprender outras tecnologias além do Flex. Para mim não há nada de novo no SDK que eu já não consiga fazer, aquele tesão que você tem quando dia-a-dia trabalha com um framework. Eu ainda continuarei firme e forte com o Flex, mais não me deixa de lado o fato de querer tentar coisas novas. É da natureza do ser humano ser curioso. Eu acredito que eu nasci com isso em um nível 2.

Uma das minhas facilidades é de aprender rápido, super rápido, levando em consideração algumas técnicas absorvidas ao longo desses 11 anos na área de desenvolvimento. E isso me fez aprender com um método simples, associação por absorção. É mais ou menos assim. Deixa eu ver se explico.

Eu faço assim; Imagine um método no Flex chamado createChildren, eu associo a 2 coisas ( Criar Porcos) e desfio 1 porca com 10 leitões. 10 Leitões correspondem a 10 possibilidades que o método createChildren do Flex pode me dá ( add UI, executar função, remover UI, disparar evento, invalidar métodos, aplicar estilos, nascer com propriedades, criar definições de skins em tempo de execução, sobrescrever).

Então se 1 método pode fazer tudo isso, eu consigo absorver não só seu funcionamento, como também onde e porque usa-lo. Essa é umas das razões pelas quais eu consigo aprender rápido um novo idioma, e pode ser usado para qualquer área.

Porém voltando ao post, já que viajamos demais, eu queria me redescobrir, achar novos desafios, e adicionar funções não existentes ao Flex SDK que podem existir em outros frameworks, padrões e etc.

Decidir correr o risco de tentar algo novo com JQuery, já que de acordo com minhas pesquisas ajudadas pelo Homer Simpson, ele é um framework Top de linha para desenvolvedores Javascript. E no final das contas ele, faz muita coisa que o Flex já faz. Quem é desenvolvedor Flex, com toda certeza vai notar algumas semelhanças.

De lá para cá, foram ótimas coisas, muito legal fazer isso funcionar em N navegadores, uma das coisas que também o Flex faz com excelência.

Então para enfatizar meu aprendizado e ajudar você, meu fiel leitor, juntei algumas informações equivalentes tanto no JQuery quanto no Flex.

Definição de Documentos:

No Flex, você cria um novo Aplicativo, criando um arquivo qualquer com extensão (.mxml), porém dentro com as delimitações de tag

No JQuery, você cria um novo arquivo (.html) e adiciona a dependência do JQuery que está na versão 1.6.2, dentro de seu arquivo HTML entre as delimitações do tag

A inclusão da dependência, vai de gosto, você pode fazer referência tanto do diretório do seu projeto para o arquivo .js do JQuery, como também linkar direto da biblioteca do Google, A diferença é que local, você consome 31kb de banda do seu servidor, toda vez que alguém abrir teu site. Já via Link do Google;

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</script>
Você economiza a banda do servidor.
 
<strong>Completou o load</strong>
 
No Flex, ele é caracterizado por uma série de eventos que são disparados em ordem quando o swf é despejado na tela do cliente. que vai desde o pre-initialize até creationComplete.
 
 
No JQuery, você define esse comportamento apenas pelo ready, que é uma espécie de creationComplete do Flex.
 
<pre lang="php">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>igorcosta.com - Testes de JQuery</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 
<script type="text/javascript">
<!--
 
 $(document).ready(function() {
 
 
});
-->
 
</script>
 
</head>
 
<body>
 
</body>
</html>

O Ready, significa dizer que o documento está pronto para você executar o que deseja dentro dele.

Identificação de Objetos e Componentes

Quando se programa em Flex, você faz a referência de componentes por id ou por associação à uma classe específica.

Geralmente você identifica um componente no Flex assim:

 
  <s:Button label="Teste" id="meuBtn" click="execHandler(event)"/>

Fica fácil chegar a tal objeto pela sua referência pública.

Já no JQuery, ele chega até o objeto igual no Flex, por um ID ou por associação de uma tag, ao invés de classe como é no Flex.

Porém a sintaxe dele é um pouco diferente do Flex, já que ele faz referência ao $ dollar e o # para chegar ao elemento, ele sempre faz o loop geral para encontrar o individo dentro do documento e executar a tarefa do click como mostrei abaixo. Essa parte você vai se perder um pouco quando estiver aprendendo, já que parenteses e colchetes juntos em handlers, você sempre faz separado no Flex e não closure Functions.

 
<script type="text/javascript">
<!--
 
 $(document).ready(function() {
 
	 $("#btnChamar").click (function(e) {
		 alert('Hello World');
	 });
});
-->
 
</script>

Comunicação de dados

No Flex temos os tags (HTTPServices,WebServices,RemoteObject,DataServices).

Digamos que você quer chamar um serviço HTTP.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx:Script>
		<![CDATA[
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;
 
			protected function blogService_resultHandler(event:ResultEvent):void
			{
				// TODO Auto-generated method stub
 
			}
 
			protected function faultHandler(event:FaultEvent):void
			{
				// TODO Auto-generated method stub
 
			}
 
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
 
	<s:HTTPService id="blogService" url="arquivo.php" result="blogService_resultHandler(event)" fault="faultHandler(event)"/>
	<s:Button click="blogService.send()" label="Executar Serviço"/>
</s:Application>

No JQuery temos os métodos ($.post(),$.get(),$.ajax(),$.load(),$.param())

Todos os métodos do JQuery para comunicar com dados são fantásticos, cada um tem sua particularidade, e quando você tem um certo conhecimento no JQuery ou é acostumado com o Flex, você vai acabar utilizando apenas o $.ajax(), já que é o único método que controla, eventos, cache e por ai vai.

No Flex para você pegar um resultado no PHP por exemplo que retorne um JSON, você teria que fazer.

Além de que você teria que usar alguma biblioteca JSON como (as3json ou as3corelib) para dar o parse do JSON.

No JQuery para você fazer isso, é hiper simples também.

<script type="text/javascript">
<!--
 
 $(document).ready(function() {
 
	 $("#btnChamar").click (function(e) {
 
				$.ajax({
					url: "recursos.php",
					type: "GET",
					dataType:'json', // aceita html,json,xml,script
					success: function (data){
						$("#resposta").html(data.paragrafo);
 
					},
					error: function (data){
						alert(data);
					}
 
					});
	 });
});
-->
 
</script>
 
</head>
 
<body>
 
<a id="btnChamar" href="#chamar-servico">Executar tarefa</a>
	<p id="resposta"></p>
</body>

Eu estou requisitando essa página simples de PHP que me retorna um JSON.

<?php
 
$retorno = array();
 
 
$retorno['paragrafo'] = "Gooollll, conseguimos!";
 
 
echo json_encode($retorno);

Documentação

Ninguém pode negar que a documentação do Flex é bem completa, detalha muitas classes e quase algumas são esquecidas propositalmente, porém a documentação é hiper vasta.

No JQuery, a documentação dele também é completa, e semelhante ao Flex, com integração de comentários em cada página, que é meio que um padrão no mundo web, já que muita gente implementa de maneira diferente a mesma coisa, e acaba que essas implementações vão te ajudando a solucionar problemas.

Efeitos

Umas das grandes qualidades do Flex que eu considero bastante, são os efeitos, sinceramente muita coisa foi herdada das classes Tween de Robert Penner, e as mais recentes mudanças com o atual extinto do Flex SDK Chet Haase(Atualmente trabalhando no Google SDK), fez nas animações, e muita coisa hiper bacana como 3D, reverse, reuse, pause, cache e por ai vai.

Os efeitos são básicos, mais tem gente que anda por ai fazendo muito mais, já que existem Zilhões de plug-ins para o JQuery. 3D por exemplo.

Um exemplo prático, estou usando o efeito Flip, um plug-in já criado para isso, criado por Luca Manno.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>igorcosta.com - Testes de JQuery</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.flip.min.js"></script>
 
<script type="text/javascript">
<!--
 
 $(document).ready(function() {
 
	 $("#meuBloco").click (function(e) {
 
			$("#meuBloco").flip({
				direction:'lr', // esquerda para direita
				color:'#aa0000' // cor final do flip
			})
 
	 });
});
-->
 
</script>
<style>
		#meuBloco { width:120px; height:120px;background:#F90; margin-left:220px; margin-top:100px; position:relative;}
</style>
 
</head>
 
<body>
 
    <div id="meuBloco"></div>
</body>
</html>

Adicionando Elementos em tempo de execução

Outra facilidade tremenda do Flex é a adição e subtração de itens da tela, o que agente chama de “em tempo de execução”.

Para fazer isso no Flex de maneira fácil, você geralmente faz:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
 
		<s:layout>
			<s:BasicLayout/>
		</s:layout>
 
	<fx:Script>
		<![CDATA[
			protected function addHandler(event:MouseEvent):void
			{
				var novo:Button = new Button();
				novo.label = "Botao " + Math.random()*1000;
				comps.addElement(novo);
 
			}
		]]>
	</fx:Script>
 
	<s:Button label="Add Componente" click="addHandler(event)" />
	<s:Group id="comps">
			<s:layout>
				<s:VerticalLayout/>
			</s:layout>
	</s:Group>
</s:Application>

No JQuery, é também simples, veja um exemplo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>igorcosta.com - Testes de JQuery</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.flip.min.js"></script>
 
<script type="text/javascript">
<!--
 
 $(document).ready(function() {
 
	 $("#add").click (function(e) {
 
			$("#lista").append("<li>Elemento</li>");
	 });
});
-->
 
</script>
<style>
		ul { list-style:none; width:100px; }
		ul li { background:#000; color:#fff; margin-top:5px; margin-bottom:5px;}
</style>
 
</head>
 
<body>
		<a id="add" href="#adicionando">Adicionar Itens</a>
        <ul id="lista">
        </ul>
</body>
</html>

Ao longo de alguns posts, vou falando mais sobre as descobertas que fiz, se eu fosse você começava também a explorar novos mundos. Aguardem a parte 2.