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.

4 thoughts on “Redescobrindo o gosto pelos padrões Web : JQuery para devs Flex

  1. Quando você escreveu isto, mais uma vez estava pensando no futuro.

    Lá vou eu começar novamente, com sua ajuda, claro.

    Abraços

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios são marcados com *