Herberth Amaral

Software development adventures

Archive for the ‘Flex & Actionscript’ Category

Dica rapida: Usando ActionScript em expressoes de DataBinding para alinhar elementos na tela

without comments

Vamos ao ponto:

<mx :Label id="meuLabel"
x="{Application.application.width/2 - meuLabel.width/2}"
y="{Application.application.height/2 - meuLabel.height/2}"
/>

O que o código acima faz é manter um label exatamente no centro da tela. Pra isso, ele coloca o seu X na metade da largura da tela menos a metade da própria largura. O mesmo acontece para o Y.

Ainda dá pra fazer mais combinações como esta:

<mx :Label id="meuLabel"
x="{Application.application.width*0.8 - meuLabel.width/2}"
y="{Application.application.height/2 - meuLabel.height/2}" />

Neste caso, o Label estaria alinhado mais à direita, 80% pra ser mais preciso. Você pode combinar várias expressões de binding dentro de atributos de posicionamento de seus elementos.

Os exemplos acima funcionam bem em qualquer situação, mas há como economizar código:

<mx :Label id="meuLabel"
x="{this.width/2 - meuLabel.width/2}"
y="{this.height/2 - meuLabel.height/2}" />

Nesse caso, eu estou usando container raiz como referencia. Se você deixar esse label dentro da sua aplicação, ele vai ficará posicionado exatamente no centro da mesma. Mas se estiver dentro de um módulo, ele estará no centro do módulo.

O mais bacana de tudo é que ele reposiciona o elemento caso a janela seja redimensionada.

Simples, não?

nota: post mais rápido da história: 5 minutos :D

Written by Herberth Amaral

May 14th, 2010 at 1:30 pm

Flex For Kids foi 10!

with 8 comments

Depois de um dia inteiro de correria, muita palestra e principalmente comida, estou aqui para contar um pouco do Flex For Kids para vocês.

Infelizmente, perdemos uma palestra que parecia ser bem legal: Desenvolvimento Multi-touch com AIR 2.0. Tivemos problemas com a conexão e iniciamos meio atrasados. Bem que a porta de saída poderia ser a 80 mesmo… evitaria muitos problemas.

Conseguimos pegar a palestra do Igor Musardo (Construa painéis administrativos em Flex integrados com ASP.NET MVC) bem no início, quando ele começou a falar sobre ASP.NET MVC e Flex. Ele mostrou um pequeno sistema para gerenciamento de conteúdo usando o Flex 3 e o ASP.NET MVC como backend e usou o JSON como formato de comunicação. A maioria dos presentes não tinha familiaridade com .NET, mas serviu pra mostrar um pouco da tecnologia. Bem interessante a palestra, mas eu fiquei curioso com o fato dele não usar AMF para isso. Devido à alguns problemas técnicos com a transmissão, a palestra do Musardo acabou atrasando um pouco, mas nada grave.

A palestra a seguir foi a do Mário Junior: Swiz Framework: MVC Simples e Poderoso para projetos Flex/AIR. Como o Mario mesmo disse, o Swiz é extremamente simples e leve, no entanto a palestra dele serviu para mostrar como eu subutilizo os recursos que o Swiz oferece. Ele é muito mais poderoso que eu pensava. Valeu muito pra mim e pra galera da Infobits. Muito boa a palestra dele.

Como eu estava na organização e nós tínhamos que trazer o almoço para a Unimontes, eu acabei perdendo a palestra do Eberton Consolim: Flex e VOIP: Adicione essa tecnologia em suas aplicações. Segundo a galera que assistiu, a palestra foi excelente, mas infelizmente terei que aguardar o acesso às gravações para ter certeza :)

A próxima palestra logo após o almoço foi a do Daniel Lopes: Desktop com HTML, Javascript e  Adobe AIR. A palestra foi muito bem ministrada: muito conceito, muita idéia e pouca explicação de código e ele incrivelmente conseguiu fazer um hands-on sem muitas delongas. Incrível.  Excelente palestra.

A palestra da Gabriela teria sido mais interessante se eu entendesse um pouco mais de User eXperience. No entanto, foi bom ter uma palestra no-code no meio de tantas. Aliás, foi bom ter visto uma mulher no meio de tanto marmanjo :) . Mesmo assim, foi proveitosa.

O Eric Calvancanti assumiu a missão de desmistificar o Cairngorm. E posso dizer que ele o fez com muito sucesso! Segundo o Vedovelli, até a avó dele entenderia o que o Eric quis passar. Foi a apresentação mais didática que tivemos, apesar do Cairngorm ser o framework mais complexo apresentado hoje.

A palestra do Vedovelli foi uma das mais esperadas. Muito conhecido pelos seus screencasts e sua irreverência, o Ved, como costuma ser chamado, se tornou um dos ícones dos Flexers nacionais. Ele explicou como funciona a arquitetura de uma aplicação usando o framework Mate. O framework é interessante e comparável em muitos pontos com o Swiz. Muito boa apresentação.

O “vírus da bactéria” que o cachorro do Igor Costa não consegue ver deixou a sua apresentação muito divertida, além de informativa! O Igor é uma das maiores referencias em Flex e Java no Brasil e sua palestra foi memorável. Eu não saco muita coisa de JEE, mas a palestra dele foi bem inteligível.

E por último e com a melhor palestra do dia, a do Beck Novaes. Ele deu uma geral sobre a plataforma Adobe de desenvolvimento de RIAs: Flash, Flex, Flash Builder e Flash Catalyst. A palestra foi incrível. Ele tem um mix de explicação extremamente fácil de entender com informação útil. Deveria ter sido a primeira palestra do dia, com toda certeza.

Nossa reunião na Unimontes teve uma audiência de 15 pessoas e contou com a organização e apoio da Infobits e da Gerência de Tecnologia da Informação da Unimontes. Queria agradecer a todos que vieram e prestigiaram o evento. Também gostaria de dar os parabéns a todos que tiraram o escorpião do bolso e doaram para o Cotolengo. Muito bacana! A seguir, as fotos do evento:

Written by Herberth Amaral

February 6th, 2010 at 11:46 pm

Eu vou participar do Flex For Kids. E voce?

without comments

Como eu bloguei em outro blog anteriormente, eu vou participar do Flex For Kids!

Basicamente, o evento é praticamente uma maratona de palestras: nove palestras de uma hora cada em exatamente nove horas de duração, de 8:00 às 17:00, e contará com palestrantes da comunidade Flexer Brasiliera.

Todo dinheiro arrecadado com as inscrições será destinado à Cotolengo, uma instituição do Mato Grosso do Sul que acolhe pessoas com necessidades especiais.

Nós, da Infobits, conseguimos reservar o auditório do Centro de Ciências Exatas e Tecnológicas para acomodar os participantes do evento, estamos organizando algumas outras coisas (como o almoço, a alimentação no resto do dia e a inscrição no evento) e temos 8 pessoas já confirmadas (o número vai subir até amanhã).

Só lembrando: se você quer participar do Flex For Kids conosco, ainda tem tempo! Nos procure na Infobits*, mande email, sinal de fumaça ou comente esse post :)

*Sala 10A do Centro de Ciências Exatas e Tecnológicas. Perdido? Veja no Google Maps.

Written by Herberth Amaral

February 4th, 2010 at 7:13 am

Testes unitarios no Flex usando o FlexUnit 4

without comments

O FlexUnit 4 é a mais nova versão (não tem a oficial, só a RC, por enquanto) e apresenta uma série de vantagens sobre o seu antecessor, o FlexUnit 0.9, como os metadados de teste ([Test], [After] e [Before], para citar as mais populares), Theories, DataPoints e Assumptions que são úteis para testar grandes quantidades (talvez até infinita) de dados e ver como a aplicação se comporta e a possibilidade de executar os testes com diferentes Runners.

Este tutorial tem como objetivo mostrar o básico de testes unitários no Flex, sem se aprofundar muito nos recursos avançados do framework de testes.  Eu pretendo ir postando mais tutoriais à medida que eu for me aprofundando na tecnologia.

O setup

Para usar o FlexUnit4, você precisa baixa-lo aqui. Após isso, crie um projeto no Flex Builder e adicione todas as libs que vieram no pacote no seu diretório libs:

Verifique se todas as libs estão lá

Como o bom e velho TDD manda, vamos primeiro escrever a classe de teste de exemplo antes de escrever nosso código de produção.

A classe de teste

Uma classe de testes é uma classe comum que usa a classe Assert para fazer asserções. No exemplo que irei mostrar, usarei dois tipos básicos de asserção, mas se você observar, o FlexUnit possui vários tipos diferentes de asserções:

package tests
{
	import org.flexunit.Assert;
	import org.flexunit.runner.manipulation.filters.IncludeAllFilter;

	import production.BasicClass;

	public class BasicTests
	{
		public function BasicTests(){}
		private var basicClass:BasicClass;

		[Before]
		public function before():void
		{
			basicClass = new BasicClass();
		}

		[Test]
		public function Verifica_Se_As_Duas_Strings_Sao_Iguais():void
		{
			var str:String = "MinhaString";
			Assert.assertTrue(basicClass.areStringsEqual(str,"MinhaString"));
		}

		[Test]
		public function Verifica_Se_A_Soma_Retorna_Resultado_Correto():void
		{
			var soma:int = 10;
			Assert.assertEquals(soma,basicClass.somar(2,8));
		}

		[After]
		public function after():void
		{
			//codigo de after
		}

	}
}

A suíte de teste

A suíte de testes inclui nosso caso de teste descrito acima e será útil para o Flex executar nossos testes. Sendo assim, nossa suíte de testes ficaria mais ou menos desse jeito:

package tests
{
	[Suite]
	[RunWith("org.flexunit.runners.Suite")]
	public class MyTestSuite
	{
		public var baseTest:BasicTests;
		public function MyTestSuite(){}

	}
}

UITestRunner e o FlexUnitCore

O UITestRunner é um componente do FlexUnit que mostra os testes numa interface gráfica. Ele ficará na nossa aplicação e mostrará os resultados dos testes.

O FlexUnitCore será o responsável por carregar as suítes de teste e por passar os dados de saída de testes para o UITestRunner. No nosso caso, nossa aplicação principal ficaria assim:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="run()" layout="absolute" xmlns:flexUnitUIRunner="http://www.adobe.com/2009/flexUnitUIRunner">
    <mx:Script>
    <![CDATA[
       import tests.MyTestSuite;
       import org.flexunit.listeners.UIListener;
       import org.flexunit.runner.FlexUnitCore;

       public var core:FlexUnitCore;
       public function run():void
       {
           core = new FlexUnitCore();
           core.addListener(new UIListener(uiRunner));
           core.run(MyTestSuite);
      }
    ]]>
   </mx:Script>
   <flexUnitUIRunner:TestRunnerBase id="uiRunner"  width="100%" height="100%"/>
</mx:Application>

O código de produção

Ufa! Depois de escrever a classe de teste, a suíte de teste e o runner, podemos nos focar em fazer nosso código de produção :) . Dêem uma olhada em como ficaria o dito:

package production
{
	public class BasicClass
	{
		public function BasicClass(){}

		public function areStringsEqual(string1:String,string2:String):Boolean
		{
			return (string1==string2);
		}

		public function somar(valor1:int,valor2:int):int
		{
			return valor1+valor2;
		}

	}
}

E Voilà!

Depois de tudo pronto, a cara da criança ficaria mais ou menos assim:

Legal, não? E ainda dá pra fazer com que o FlexUnit4 exporte o resultado dos testes para um arquivo XML, permitindo que seus testes no Flex sejam importados pelo seu sistema de Integração Contínua, mas isso é assunto para outro post :)

Você pode baixar o código fonte aqui e ver os exemplos rodando online aqui.

Good testing!

Written by Herberth Amaral

January 28th, 2010 at 12:12 pm

Usando o SabreAMF com o CakePHP

with one comment

O AMF é um formato aberto de comunicação do Flash. É o formato preferido para tais aplicações por possuir diversas vantagens, sendo que a principal delas é a velocidade, já que o AMF não precisa ser deserializado como o XML e o JSON.

Por ser um formato aberto, ele pode ser implementado em qualquer linguagem. Há várias implementações para o PHP, sendo que as mais notáveis são o AMFPHP, Zend_AMF e o SabreAMF.

Neste tutorial, eu mostrarei como desenvolver aplicações em PHP com o framework CakePHP que se comunicam com o Flash (usando a plataforma Flex 3) através da biblioteca SabreAMF.

1- Baixando e instalando os componentes

1 – Baixe os CakePHP 1.2.5 no site do CakePHP e o SabreAMF no Google Code.

2- Instale o CakePHP de forma que ele fique disponível em http://localhost/cakeflex.

3 – Descompacte o SabreAmf em app/vendors/SabreAMF

2 – Colocando os dois para trabalhar

Para fazer com que o CakePHP trabalhe de forma transparente com o SabreAMF, é necessário criar um componente para o CakePHP.

Para tal, vamos criar o nosso componente: (salve-o em app/controllers/components/sabre_amf.php)

<?php

set_include_path(APP.'vendors' . PATH_SEPARATOR . get_include_path());
App::import('Vendor', 'SabreAMF_CallbackServer', array('file'=>'SabreAMF/CallbackServer.php'));

class SabreAmfComponent extends Object {

    function startup(&amp;$controller) {
        if ($controller->action == 'gateway') {
            global $_cakeController;
            $_cakeController = $controller;
            Configure::write('debug', 0);
            $controller->autoRender = false;
            $server = new SabreAMF_CallbackServer();
            $server->onInvokeService = array($this,'amfCallBack');
            $server->exec();
            exit;
        }
        else if(empty($controller->amfExclude) ||
                        !in_array($controller->action,$controller->amfExclude))
            exit();
    }

    function amfCallBack($service, $method, $data) {
        global $_cakeController;
        $res = null;
        if ($_cakeController) {
            if (strpos($method, "_") !== 0) {
                if (method_exists($_cakeController, $method)  and
                    !in_array($_cakeController->action,$_cakeController->amfExclude))
                    $res = call_user_func_array( array( $_cakeController, $method ), $data );
                else
                    $res = "Action nao encontrada.";
            } else
                $res = "Nome de metodo invalido.";
        }
        else
            $res = "Controller nao encontrado.";
        return $res;
    }
}
?>

O que nós fizemos acima foi redirecionar todas as chamadas à action ‘gateway’ do controller para nosso gateway do SabreAMF.

Agora, um exemplo de como utilizar isso em um controller:

<?php
// app/controllers/teste_amf_controller.php
class TesteAmfController extends AppController
{
    var $components = array('SabreAmf');

    function hello($nome){
        $ret = "Olá, ".$nome."! agora são: ".date("H:i:s")." horas";
        return  $ret;
    }
}
?>

Nosso server side não estaria completo sem o nosso model. No meu caso, como é só uma demonstração, eu não quero criar uma tabela no banco de dados. Portanto, eu crio o meu model dessa forma:

<?php
// app/models/teste_amf.php
class TesteAmf extends AppModel
{
    var $useTable = false;
}
?>

Para demonstrar nosso código funcionado, nada melhor que uma aplicação Flex. Segue abaixo, um exemplo de como a configuração criada acima pode ser usada no Flex:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

	<mx:RemoteObject
		endpoint="http://localhost/cakeflex/teste_amf/gateway"
		id="rmoTeste"
		source=""
		destination="minhaApp"
		result="rmoTesteResult(event)"
		fault="rmoTesteFail(event)"
		showBusyCursor="true"
		/>

        <mx:Button label="Hello!" click="rmoTeste.hello('Herberth')" />
        <mx:Script>
		< ![CDATA[
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;
			import mx.controls.Alert;

			public function rmoTesteResult(e:ResultEvent):void
			{
				Alert.show(e.result.toString());
			}

			public function rmoTesteFail(e:FaultEvent):void
			{
				Alert.show("Fail!");
			}
		]]>
	</mx:Script>
</mx:Application>

4 – Conclusão

O resultado final deve ficar parecido com isso:

hello_flex

É possível retornar tipos mais complexos para serem usados em tipos mais complexos (tipo AdvancedDataGrid), mas irei abordar tal aplicação mais futuramente.

5 – Referências

É isso aí pessoal. Até a próxima!

Written by Herberth Amaral

December 15th, 2009 at 7:25 pm