Flex/ Flex 4/ Flex 4.5

Flex comunicando com o Skins

É possível fazer isso no mundo de duas formas, sendo um super herói ou sendo um framework do Flex. 😀

Criar skins é maravilhoso no Flex, você faz seu sistema ganhar vida, uma vida não só fantástica mais uma vida dinamica. Alguns tem dúvidas quanto e como fazer isso fluir de forma simples.

A explicação mais clara e objetiva que eu posso dar é : Veja o Camaleão. Sua pele é altamente camuflável e adaptada a qualquer terreno. Skins no Flex é justamente isso, adaptar o feio em bonito. Embora o camaleão continue feio, mudando só sua cor.

Vejamos o exemplo vivo abaixo

Requer o Flash Player

Agora veja como é feito, eu crio um novo Skin no Flash Builder com as seguintes caracteristicas.

Arquivo MySkin.mxml

<?xml version="1.0" encoding="utf-8"?>
 
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5">
 
    <fx:Metadata>
    <![CDATA[
        /**
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("MyContainer")]
    ]]>
    </fx:Metadata>
 
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
 
    <!--- Defines the appearance of the SkinnableContainer class's background. -->
    <s:Ellipse width="{hostComponent.raio}" height="{hostComponent.raio}" id="background" verticalCenter="0" horizontalCenter="0">
        <s:fill>
            <!--- @private -->
            <s:SolidColor id="bgFill" color="{hostComponent.color}"/>
        </s:fill>
    </s:Ellipse>
 
    <!--
        Note: setting the minimum size to 0 here so that changes to the host component's
        size will not be thwarted by this skin part's minimum size.   This is a compromise,
        more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
    -->
    <!--- @copy spark.components.SkinnableContainer#contentGroup -->
    <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0">
        <s:layout>
            <s:BasicLayout/>
        </s:layout>
    </s:Group>
 
</s:Skin>

A comunicação do skin com o componente que vai usa-lo, se dá pela palavrinha reservada hostComponent, veja que no meu tag Ellipse, eu uso ele para mudar a largura e altura usando a propriedade raio que é uma propriedade do componente que eu tenho e irei usar.

Outro detalhe é que esse skin eu seto quem será o host, ou seja quem hospedará ele.

   <fx:Metadata>
    <![CDATA[
        /**
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("MyContainer")]
    ]]>
    </fx:Metadata>

No Caso eu tenho o componente MyContainer

Que tem o seguinte código:

Arquivo MyContainer.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
					  xmlns:s="library://ns.adobe.com/flex/spark"
					  xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"
					  skinClass="MySkin">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Script>
		<![CDATA[
 
 
			[Bindable]private var _color:uint = 0x000000;
			[Bindable]private var _raio:Number = 100;
 
 
			[Bindable]
			public function get raio():Number
			{
				return _raio;
			}
 
			public function set raio(value:Number):void
			{
				_raio = value;
			}
 
			[Bindable]
			public function get color():uint
			{
				return _color;
			}
 
			public function set color(value:uint):void
			{
				_color = value;
			}
 
		]]>
	</fx:Script>
</s:SkinnableContainer>

E para usar basta eu arrastar meu Container para tela e setar via CSS ou até mesmo direto no container a propriedade skinClass.

<s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
					  xmlns:s="library://ns.adobe.com/flex/spark"
					  xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"
					  skinClass="MySkin">

E aqui é o código de App que você viu lá em cima.

<?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"
			   xmlns:ns1="*"
			   width="385" height="340" minWidth="955" minHeight="600">
 
	<fx:Script>
		<![CDATA[
			protected function changeMyCompInnerSize(event:Event):void
			{
				MyComp.raio = radioChanger.value;
			}
		]]>
	</fx:Script>
 
	<s:HSlider id="radioChanger" x="143" y="303"
			   change="changeMyCompInnerSize(event)" maximum="500" minimum="10"
			   stepSize="1"/>
 
	<ns1:MyContainer color="#84C239" id="MyComp" x="59" y="35" width="265" height="229">
		<s:Label text="hello World" verticalCenter="0" horizontalCenter="0"/>
	</ns1:MyContainer>
 
</s:Application>

Fácil não? Os skins realmente são salvadores da pátria, você consegue absorver muita e transformar o que era complexo em simples. Vejamos outro exemplo abaixo.

Nesse exemplo eu usei de forma bem simples o Gauge Chart , uma pequena demonstração de como Skins podem nos ajudar e muito, principalmente criar gráficos.

Requer o Flash Player

Aqui abaixo você ver o código fonte da App de cima.

 
<?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"
			   xmlns:ns1="*"
			   width="581" height="362" minWidth="955" minHeight="600">
 
	<fx:Script>
		<![CDATA[
			protected function mudarValor(event:Event):void
			{
				// TODO Auto-generated method stub
				grafico.value = valorChanger.value;
			}
 
			protected function mudarPressao(event:Event):void
			{
				// TODO Auto-generated method stub
				pressaoChart.value = pressaoValor.value;
			}
 
		]]>
	</fx:Script>
 
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<ns1:MyGauge id="grafico" x="30" y="70" width="240" height="240">
	</ns1:MyGauge>
	<s:HSlider id="valorChanger" x="108" y="330" change="mudarValor(event)" maximum="360" minimum="0"
			   stepSize="1" value="90"/>
	<s:HSlider id="pressaoValor" x="399" y="331" change="mudarPressao(event)" maximum="360" minimum="0"
			   stepSize="1" value="90"/>
	<s:Label x="321" y="330" text="Valor"/>
	<s:Label x="30" y="329" text="Valor"/>
	<s:Label x="39" y="41" fontSize="22" text="Análise do Dosador"/>
	<s:Label x="313" y="40" fontSize="22" text="Pressão no catalizador"/>
	<ns1:MyGauge value="220" fillColors="{[0xe70505,0xb40909]}" id="pressaoChart" x="301" y="70" width="240" height="240">
	</ns1:MyGauge>
</s:Application>

O Componente MyGaugue.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:SkinnableContainer skinClass="GaugeSkin" 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:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
 
			[Bindable]private var _value:Number = 90;
			[Bindable]private var _ponteiroColor:uint = 0x000000;
			[Bindable]private var _fillColors:Array = [0x6FC9FF,0x5380D0];
 
 
 
			[Bindable]
			public function get fillColors():Array
			{
				return _fillColors;
			}
 
			public function set fillColors(value:Array):void
			{
				_fillColors = value;
			}
 
			[Bindable]
			public function get ponteiroColor():uint
			{
				return _ponteiroColor;
			}
 
			public function set ponteiroColor(value:uint):void
			{
				_ponteiroColor = value;
			}
 
			[Bindable]
			public function get value():Number
			{
				return _value;
			}
 
			public function set value(value:Number):void
			{
				_value = value;
			}
 
		]]>
	</fx:Script>
</s:SkinnableContainer>

E finalmente o código do GaugeSkin.xml

<?xml version="1.0" encoding="utf-8"?>
 
<!--
 
    ADOBE SYSTEMS INCORPORATED
    Copyright 2008 Adobe Systems Incorporated
    All Rights Reserved.
 
    NOTICE: Adobe permits you to use, modify, and distribute this file
    in accordance with the terms of the license agreement accompanying it.
 
-->
 
<!--- The default skin class for a Spark SkinnableContainer container.
 
     @see spark.components.SkinnableContainer
 
      @langversion 3.0
      @playerversion Flash 10
      @playerversion AIR 1.5
      @productversion Flex 4
-->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5">
 
    <fx:Metadata>
    <![CDATA[
        /**
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("MyGauge")]
    ]]>
    </fx:Metadata>
 
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
 
    <!--- Defines the appearance of the SkinnableContainer class's background. -->
	<s:Group width="100%" height="100%">
 
 
	<s:Ellipse width="100%" height="100%">
		<s:fill>
			<s:LinearGradient rotation="90">
				<s:GradientEntry alpha="1.0" color="{hostComponent.fillColors[0]}" ratio="0"/>
				<s:GradientEntry alpha="1.0" color="{hostComponent.fillColors[1]}" ratio="1"/>
			</s:LinearGradient>
		</s:fill>
	</s:Ellipse>
	<s:Rect x="{Math.ceil(hostComponent.width*0.5)}" y="0" width="10" height="{hostComponent.width/2}"
			rotation="{hostComponent.value}" transformX="5"
			transformY="{Math.ceil(hostComponent.width*0.5)}">
		<s:fill>
			<s:SolidColor color="{hostComponent.ponteiroColor}"/>
		</s:fill>
	</s:Rect>
	<s:RichText  horizontalCenter="0" y="30" color="#ffffff" fontFamily="Arial" fontSize="14" fontWeight="bold"
				tabStops="S0 S50" text="{hostComponent.value}"/>
	</s:Group>
    <!--
        Note: setting the minimum size to 0 here so that changes to the host component's
        size will not be thwarted by this skin part's minimum size.   This is a compromise,
        more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
    -->
    <!--- @copy spark.components.SkinnableContainer#contentGroup -->
    <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0">
        <s:layout>
            <s:BasicLayout/>
        </s:layout>
    </s:Group>
 
</s:Skin>

Até a próxima e bons estudos com Skins.

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/ 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.

AIR Mobile/ Android/ Dicas/ Flex/ Flex 4/ Flex Mobile Framework/ Tablets

Antes de comprar seu Android para testar o Flex leia esse post

Amigo leitor, você está totalmente satisfeito que agora o Flex está disponível na plataforma Android, Playbook e futuramente logo em junho ios.
O fato é que esse post é mais direcionado a você que está comprando um smartphone ou um tablet com Android apenas para testar o Flex nele ou criar soluções corporativas para sua empresa.
Hoje aconteceu uma coisa bem ruim com o Maurício Martins um de meus alunos do último curso de Adobe AIR Mobile. Ele comprou um Samsung Galaxy 551 apenas por suportar o Android 2.2 que é um dos pré-requisitos para você testar qualquer aplicação mobile na plataforma Android.

Infelizmente você acaba esquecendo que existem outros pre-requisitos importantes que devem ser levados em conta, como quantidade de memória instalada, resolução da tela, arquitetura do processador.
Então antes de sair comprando seu Android só por que já suporta 2.2, lembre-se desses fatores.
O que eu mais indico é visitar a lista de tablets, smartphones que já suportam o Adobe AIR e estão certificados pela Adobe para tal fim. Confira a lista aqui.

A lista pode sofrer mudanças constantemente, então é sempre bom ficar de olho nela, pois ela só lista o que realmente já foi testado pela própria Adobe e ela aconselha seus desenvolvedores e usuários finais a usar esses aparelhos.

Os requisitos técnicos para ter suporte ao Adobe AIR são:

MOBILE SYSTEM REQUIREMENTS

* Android devices
o Google Android™ 2.2 operating system
o ARMv7-A processor with vector FPU
o OpenGL ES 2
o H.264 and AAC hardware decoders
o 256MB of RAM
* BlackBerry™ Tablet OS
* iOS 3 and higher

AIR Mobile/ Flex/ Flex 4/ Flex Builder 4/ Flex Mobile Framework/ iPad/ Iphone

Novo curso da RIACycle Flex para dispositivos móveis

Como vocês viram no último post a Adobe recentemente lançou o Flex 4.5 e Flash Builder 4.5 para criação de aplicações móveis usando o Flex.

Criação de aplicações móveis com Flex tem sido um debate pertinente em nosso dia-a-dia, assim como várias palestras.
bannerflexmobile

E através disso, acabamos de lançar o curso Flex para dispositivos móveis na RIACycle onde eu sou o instrutor.

Participe, são vagas limitadas.

AIR Mobile/ Flex/ Flex 4/ Flex Mobile Framework

Novo Flex 4.5 SDK e Flash Builder 4.5 disponível para download

É com grande alegria que anuncio a disponibilidade do Flex 4.5 SDK e o Flash Builder 4.5, foram 15 meses de desenvolvimento, alguns atrasos e finalmente a Adobe e o Flex Team se superaram em criar uma excelente ferramenta de desenvolvimento e framework para múltiplas telas.

Hoje com o Flex 4.5 você poderá criar aplicativos para Desktop, Web, Mobile, Tablets e TV. Fora essas grandes novidades de Mobile, a Adobe elaborou novos componentes para o Flex Desktop e Web como o Datagrid Spark, Form Spark, Formatadores e Validadores.

Uma lista completa das mudanças você pode conferir aqui no artigo da Deepa Subramaniam, que é Product Manager do Flex SDK.

Do lado Mobile, já tem disponível para compra o livro do Rich Tretola “Desenvolvendo aplicativos Flex 4.5 para Android“.

Actionscript/ AIR Mobile/ AS 3.0/ Flex/ Flex 4/ Flex Mobile Framework/ Tablets

5 Webcasts para você criar aplicações para o Playbook da RIM

Quer criar aplicativos para o tablet da RIM?

Domina o Adobe AIR /Flex / Actionscript 3.0?

Então, você facilmente irá criar uma aplicação do zero usando o Framework Adobe AIR para a plataforma da RIM.

O Playbook é a grande aposta da RIM para o mundo dos tablets, e vem com força total, um dos recursos é que mais agrada é o fato da FULL WEB, sem quadradinho do lego dizendo que Flash Player não está disponível e claro, reprodução de video em FULL HD 1080p, processador rápido e por ai vai.

Assista aqui os 5 webcasts para você começar a detonar no Playbook

Flex/ Flex 4/ Flex Builder 4/ HTML 5

Flex 4 e Geolocation usando no navegador do seu desktop

Mundo moderno, Web moderna, querendo ou não você vai acabar criando ou vendo em algum site, a integração da sua localização com o aplicativo, e isso acaba virando regra em algumas opções que temos por ai. Imagine você ter formulários mais inteligentes, que ao invés de pegar o endereço completo do cliente, você pega sua latitude, longitude e o número da residência e complemento. Bingo! Você cativa inúmeros usuários.

O HTML 5, ou melhor HTML, tem uma API em Javascript padronizada pela W3C, que possui essa funcionabilidade, pegar sua localização através de IP ou registro do seu ponto de acesso wi-fi caso esteja cadastrado na base do NIC ou coisa parecida.

Essa API ao menos funciona nos seguintes navegadores (Firefox 3.5+, Chrome 8+, IE9+,Opera 10.6+,Safari 5), conseqüentemente se seu usuário tiver um navegador anterior a essas versões, peça-o gentilmente para atualizar, assim você consegue usar essa funcionabilidade.

Infelizmente, o Flash Player ainda não tira proveito disso. Logo em breve acredito que ele utilize esse artifício. Hoje o Adobe AIR 2.5 possui API pronta para isso, só que para celular, para Desktop você tem que fazer um workaround, ou no popular brasileiro, da-se um jeito.

O Flash Player comunica-se muito bem com o Javascript, e vice-versa. Por que não usar esse canal de comunicação e criarmos nosso aplicativo Flex que tire proveito da API do navegador já padronizada e usar a classe External Interface do Flash Player para pegar a latitude, longitude e por ai vai.

Mão na massa, ou melhor no código!

Supondo que você já tenha o Flash Builder devidamente instalado. você pode seguir o passo-a-passo.

1. Crie um novo Projeto em seu Flash Builder
2. geo

Analise a extrutura de nosso projeto, veja que existe uma pasta chamada html-template, abra ela e você vai ver que existe 3 arquivos e 1 diretório, index.template.html, playerProdutInstall.swf, swfobject.js e o diretório history

O que nos interesse nesse momento é o index.template.html, caso você esteja usando o Flash Builder puro sem nenhum editor de HTML, você pode clicar sobre o botão direito do mouse em cima do arquivo, escolher a opção Open With- > Text Editor.

Como a publicação do Flash Builder é inteiramente dinâmica, queremos que nossa função de pegar o geolocation seja dinamica. Ou melhor, respeite a execução do projeto sempre que você der um build ou run.

3. Próximo passo é criar a função em javascript nesse arquivo de index.template.html para pegar o geolocation.

Para inserir o código em Javascript, coloque no intervalo .

        

Criei 2 funções, 1 que fará a requisição, para o navegador, e automaticamente ele vai pedir ao seu usuário para permitir ou não o uso de sua posição para aquela aplicação em questão. Aparecendo um pequeno alerta do navegador. É interessante notar ou avisar ao seu usuário sobre isso, por que o alerta de pedido de geolocation é um alerta similar a barra de lembrar senha do navegador, e poucos podem não prestar atenção a essa barra e ficar sem saber o que fazer em algum determinado momento em sua aplicação.

geo2

Preste atenção na função document.getElementById, eu uso o js para aplicar o envio automático da minha localização através da passagem de parametro do meu swf, aplicando a sintaxe básica do SWFObject.

Não esqueça de marcar a opção , caso contrário ele não vai enviar a posição ou se comunicar com o js.
Por que alterar o index.template.html?

Por que sempre que você publica ou executa o Run no Flash Builder ele gera novamente um arquivo de html, swf, js sempre. Então se você altera ele uma única vez no template, você não precisará fazer isso sempre.

Okay, feito isso. Vamos ao Flex.

Crie uma nova Classe e estenda da classe EventDispatcher, eu chamei minha classe de GeoLocation.as.

package
{
	import flash.events.Event;
	import flash.events.EventDispatcher;
	import flash.external.ExternalInterface;

	public class GeoLocation extends EventDispatcher
	{

		private var _lat:String = "";
		private var _long:String = "";


		public function GeoLocation()
		{
			super();
			//adiciono primeiro o callback
			ExternalInterface.addCallback("enviarLatLong",geoInfo);
			// Chamo posteriormente o requisitarGeo
			ExternalInterface.call("requisitarGeo");
		}


		[Bindable(event="change")]
		public function get latitude():String
		{
			return _lat;
		}

		public function set latitude(value:String):void
		{
				_lat = value;
		}

		[Bindable(event="change")]
		public function get longitude():String
		{
			return _long;
		}

		public function set longitude(value:String):void
		{
				_long = value;

		}

		private function geoInfo(lati:String,longi:String):void
		{
			_lat = lati;
			_long = longi;
			dispatchEvent(new Event(Event.CHANGE));
		}

	}
}

Com a classe GeoLocation, eu consigo agora pegar as informações de localização, embora eu não tratei nenhum erro, é importante você notar isso quando for implementar, lembrando que essa classe não é visível, ela é apenas para exemplo.

Feito isso, como implementar a classe na sua aplicação Flex?

Simples, dentro do tag , eu instancio a classe, já que a chamada do processo de externo chamei no construtor. Então veja como podemos usar.




	
		
		
	
		
				
		

		
		


E voilá, temos as coordenadas estabelecidas.

geo3

Ok, com a latitude e longitude eu consigo usar o Google Maps for Flash e criar um mapa que aponte.

AIR Mobile/ Android/ Eventos/ Flex/ Flex 4/ Flex Mobile Framework/ iPad/ Iphone/ Open-source

Gravação/Slides/Codigo fonte do Flex Mobile no Campus Party Brasil 2011

Quem perdeu ou não teve a oportunidade de ir até o Campus Party 2011. Não fique triste, na TV Campus Party existe todas as gravações de cada palestra que rolou por la; Inclusive a minha.

Então quem quer aprender um pouco, rir e se interter , aqui vai a gravação publicada no youtube.

No do próximo ano você deve ir, é um evento gigante com várias pessoas do Brasil inteiro, eu achei que o público era apenas adolescentes com vontade de baixar torrents pela velocidade da internet, pelo contrário, tem vários networks rolando durante o evento e a probabilidade de sair uma start-up nova é gigantesca.

Slides da palestra: http://slideshare.net/igorcosta
Código fonte da aplicação demonstrada: Código fonte
Baixar o Flash Builder “Burrito” : http://labs.adobe.com
Baixar o PlayBook SDK e Emuladores: http://us.blackberry.com/developers/tablet/

AMFPHP/ Flex/ Flex 4

Flex 4 com PHP – Primeira Parte

O framework Flex tem uma limitação, ele não comunica-se diretamente com coleções de dados e para isso você precisa de uma linguagem de back-end como php, coldfusion,python, Java, etc para comunicar e trocar dados entre o banco e o lado cliente(flex).

Tem gente que acha isso super complicado, por que envolve uma série de fatores como, configuração, mapeamento, conhecimento da API e tradutores. Na verdade todos são ingredientes chaves para você colocar seu aplicativo Flex em contato com o mundo exterior dos bancos de dados.

A configuração que me refiro é o famoso arquivos services-config.xml onde você vai mapear tudo que for preciso de canais, channels para que os dados trafeguem entre o Flex, php, tradutor e banco de dados em um processo assincrono.
Essa configuração de uma certa forma ajuda a encaixar os dados em um trilho, só que você vai precisar mapear os objetos para deixar tudo bonito e nos conformes como assim voce costuma fazer, deixar organizado a budega.
A api para fazer isso é tudo muito simples, basta você saber usar o RemoteObject,ResultEvent,FaultEvent e o resto é lenda.
Já a parte do tradutores, é que nem você viajar para rússia e tentar falar português por lá. Dificilmente você será entendido, há não ser que você seja muito bom em mimica.
É que funciona assim, os VO (Value Object) do Actionscript 3.0 são tipados, ou seja você tem diferentes tipos de variáveis, sejam elas, string, inteiros ou próprias, e no PHP isso não existe, essa tal de tipação só existe no caso de tipação própria e mesmo assim ainda é virtual e não real, como manda o protocolo.
Com isso você precisa que um tradutor faça o trabalho sujo para você viver o sonho americano da comunicação funcionar perfeitamente e os VO tanto do Actionscript 3.0 quanto do PHP conversem entre sí de modo fácil.
Existem diversos no mercado como o famoso Zend_AMF,AMFPHP,Weborb for PHP ,etc . Cada um tem uma particularidade. Usaremos o mais comum em projetos que é o AMFPHP e por se tratar de ser gratis. Eu sei que você gosta de coisa grátis?!

Read More