Shake Them All

Um cliente deixou comigo um Motorola Milestone para que pudesse desenvolver um aplicativo para tal. O problema foi que o Milestone 1, não vinha com o Android 2.2(froyo) e a atualização parece que vai demorar ainda(o Motorola Milestone 2 já vem com Android 2.2). Mas como não podia esperar (e claro, com o aval do cliente), decidi usar uma room customizada para instalar o Android 2.2 no Milestone 1. Segui os passos desse artigo e correu tudo bem e a primeira coisa que fiz foi instalar o Adobe AIR for Android(que surpresa ).

Após alguns testes e um tempo me familiarizando com a interface do Android, resolvi rodar o código que usei para demontrar o uso do acelerômetro com Flash Lite 4.0.
Veja o resultado sem precisar mudar uma linha de código:

E o código fonte:
DOWNLOAD

A imagem que ilustra o artigo é do live wallspaper Shake Them All que usa o acelerômetro do aparelho como simulação de gravidade para os robozinhos android “cairem” pelo home screen

Salve pessoal
Estou voltando à ativa nesse blog, espero que agora eu encontre tempo para criar os tutoriais.

Inicialmente gostaria de deixar claro que o foco desse blog não é o público que eu chamo de “Hard ActionScript Developer” o meu foco são aqueles desenvolvedores que estão iniciando ou que são intermediários no mundo do Actionscript 3.0, então nem sempre vamos focar no “melhor código” para os exemplos, mesmo porque eu nem teria tempo para fazer isso, na verdade a minha intenção e abordar superficialmente algumas coisas que vejo no meu dia-a-dia e apresentar coisas realmente usuais para todos.

Dito isso, fica claro que não tenho a intenção de criar uma metodologia definitiva para desenvolvimento, então pegue leve nas críticas =)

Hoje vamos falar sobre a utilização do Gaia Framework para desenvolvimento de pequenos projetos (games, hotsites etc…)

O que é o Gaia Framework?

O Gaia Framework é um projeto Open-Source para Actionscript 2.0 e 3.0 que visa facilitar sua vida na hora de desenvolver projetos em Flash, ele reduz drasticamente o tempo que você leva desenvolvendo, pois cria automaticamente alguns dos processos comuns a qualquer site em Flash.
Com o Gaia Framework é possível criar sites usuais em flash em pouco tempo com características que você levaria horas para fazer tais como:

1. Navigation
2. Transitions
3. Preloading
4. Asset Management
5. Dynamic Font Loading
6. SEO
7. DeepLinks

Para maiores informações e detalhes sobre o que é o Gaia Framework acesse o site

Instalando o Gaia Framework

Acesse o site e faça download do arquivo MXP do Gaia Framework, feito isso clique duas vezes no arquivo para instalar. Abra o Adobe Flash Cs5 e vá na aba Help > Manage Extentions ,certifique-se que o Gaia Framework esteja instalado corretamente como na imagem abaixo:

Pronto, agora o seu Adobe Flash Cs5 já está pronto para trabalhar com o Gaia Framework.

Instalando Gaia Site Creator

O Gaia Site Creator é um aplicativo AIR que facilita ainda mais o desenvolvimento com Gaia Framework ele irá nos ajudar na hora de criar o arquivo “site.xml” que define as “paginas” que nosso site em Flash vai ter, sobre esse arquivo XML vamos falar nas próximas aulas, por hora apenas acesse o site e instale o Gaia Site Creator.

Criando 1º projeto com Gaia Framework

Com o Adobe Flash Cs5 aberto vá na aba Window > Other Panels > Gaia Framework
Uma janela como essa vai se abrir para você:

1. Criar um novo projeto em Actionscript 3.0
2. Criar um novo projeto em Actionscript 2.0 (sai fora, credo!)
3. Importar um projeto existente
4. Fazer uma doção para o Steven Sacks =)
5. Lista de projetos criados (ainda em branco)

Esse é o painel que você vai trabalhar durante todo o tempo de desenvolvimento com o Gaia Framework aconselho você a deixar ele em um lugar de fácil acesso durante o desenvolvimento.
Agora é a hora de começarmos realmente a desenvolver utilizando o Gaia Framework, com o painel do Gaia Framework aberto clique no botão “Create AS3″ e configure como a imagem abaixo:

1. Nome do projeto que vamos desenvolver
2. Pasta raiz do projeto
3. Versão do Flash Player que esse projeto vai ser compilado
4. Versão do Gaia Framework e do Greensock (motor de animação) utilizado
5. Tamanho do Stage, Framerate e cor
6. Estrutura de pastas criada pelo Gaia Framework aconselho a deixar dessa forma
7. Tipo de projeto utilizado, nesse exemplo vamos usar o FlashDevelop para desenvolver

Com todos esses requisitos preenchidos clique no botão “Create New Project” para criar o projeto do Gaia Framework.
Pronto, o Gaia Framework acabou de criar a estrutura básica para trabalharmos o projeto veja como ficou nossa estrutura:

1. Arquivo de configuração do Gaia Framework
2. Arquivo de projeto do FlashDevelop
3. Pastas com arquivos publicáveis (swf, imagens, XML…)
4. Pasta com os arquivos FLAs
5. Pasta com os arquivos .as
6. Pasta com os templates (não vamos usar mais não delete)

Agora é hora de configurar o arquivo “site.xml” que determina quais “paginas” serão criadas em nosso projeto, lembra do nosso amigo Gaia Site Creator? Então é hora de iniciar ele, com o Gaia Site Creator aberto importe o arquivo “site.xml” que se encontra dentro da pasta “bin>xml” o arquivo deve aparecer como na imagem abaixo:

Essa é a estrutura básica que o Gaia Framework cria para o projeto, porém, não é a estrutura que vamos usar para esse projeto inicial siga os próximos passos para configurar corretamente o arquivo “site.xml”
Clique no item “home” e no item “id:nav” e arraste eles para o campo vermelho chamado “drop here to delete” como mostra a figura abaixo:

Configurando um projeto de portfólio dentro do Gaia Site Creator

O item “id:index” funciona como uma “Main page” ele é o root do nosso aplicativo(existe ainda uma classe chamada “Main.as” mas vamos falar sobre ela depois. Nesse projeto todas as paginas serão filho da pagina “índex.fla”

Para criar um novo “filho” no arquivo “site.xml” você deve clicar na aba “assets” do Gaia Site Creator e arrastar o item “New Page” para dentro do item “id:index” e depois configurar algumas propriedades como mostra na figura abaixo:

1. Nome utilizado posteriormente para acessar essa pagina
2. Nome do arquivo swf que será criado quando o Gaia Framework for compilado
3. Titulo da “pagina” quando esse arquivo for acessado

A descrição para as outras configurações desse arquivo não serão abordadas nesse momento e podem ser encontradas nesse link

Antes que eu esqueça de dizer esse projeto vai ser um portfólio de um Flash Developer como eu e você então a estrutura de paginas vai ser como mostra a imagem abaixo:

1. Pagina de apresentação
2. Perfil do desenvolvedor
3. Portfólio
4. Fotos
5. Vídeos
6. Contato

A minha intenção com esse tutorial é que posteriormente eu mostre como trabalhar com algumas classes que utilizo então podemos explorar integrações com Twitter, Flickr, Youtube etc… Esse projeto vai servir como base para outros tutoriais.

Criada essa estrutura dentro do Gaia Site Creator clique na aba “file > Export > ExportSiteXML” e sobrescreva o arquivo “site.xml” com essa nova configuração, abra esse arquivo dentro do software Flash Develop (imagino que você já esteja utilizando ele para desenvolver seus projetos) a estrutura do arquivo “site.xml” ficou da seguinte forma:

Se você seguiu todos os passos que descrevi acima, abra novamente o Adobe Flash Cs5, com o painel do Gaia Framework aberto vá até a aba “scaffold” e clique em “scaffold project”.

Ele vai criar todos aqueles arquivos que configuramos no “site.xml” dentro da pasta de projeto, aguarde os arquivos serem criados/compilados, ao final desse processo ele vai abrir uma aplicação como na figura abaixo:

Agora no painel do Gaia Framework a aba que ficou marcada é “Publish” clique no botão “save” que fica no canto direito superior para salvar esse projeto. Agora na lista de projetos criados você tem todos os projetos que está trabalhando no Gaia Framework como mostra uma visão dos meus projetos na figura abaixo:

Clique duas vezes sobre o projeto que estamos trabalhando, vá até a aba “publish” clique na pasta “lib” e veja que todos os arquivos configurados no “site.xml” foram criados dentro do projeto como mostra a figura abaixo:

1. Esse botão deve ser usado sempre que você fizer alterações nos arquivos, não adianta apenas dar um CTRL+Enter no arquivo é preciso clicar nesse botão para compilar os arquivos marcados na lista, caso algum arquivo não esteja marcado ele NÃO vai compilar o arquivo
2. Botão abre a pasta raiz do projeto
3. Lista de arquivos do projeto
4. Esse botão sincroniza as modificações feitas no arquivo “site.xml” e vamos tratar disso nos próximos tutoriais

Clique no botão “Test Project” para ver o resultado desse tutorial, lembrando que essa tela preta que aparece é fruto de uma configuração inicial feita pelo Gaia Framework, se você abrir por exemplo a pagina “home.fla” não vai ver nenhum “asset” dentro dela ou da library, não se assuste vamos tratar desses e de outros assuntos no próximo tutorial.

Nesse tutorial não vamos abordar o desenvolvimento do menu do site, então para navegar no projeto feito até aqui utilize o botão direto do mouse e clique no ContextMenu para navegar entre as paginas.

Conclusão

Nesse tutorial eu abordei os aspectos básicos para desenvolver usando o Gaia Framework, veja que não fizemos nenhuma linha de código, mas não se engane existem muitas coisas para aprender ainda.

No próximo tutorial vou falar sobre a estrutura de pastas criadas pelo Gaia Framework e como iniciar nosso projeto com as modificações em Actionscript 3.0 ou seja, prepare-se para programar no próximo tutorial.

Arquivos utilizados no tutorial

Baixar

Resultado desse tutorial

Link

Meu perfil no Facebook
Meu Twitter

Uma abraço a todos, divulguem esse tutorial!

O iPhone, lançado por volta de 2007, foi revolucionario em relação a experiencia do usuário e naturalmente criou-se um novo nicho de mercado para desenvolvimento de aplicações. A App Store(loja virtual onde os aplicativos da Apple são disponibilizados) já pagou mais de 2 bilhões de dolares aos seus desenvolvedores e com a chegada do iPad, esse número tende a crescer muito. Então se você quer entrar nesse nicho de mercado, precisa saber do que precisa para criar seus aplicativos para rodar no sistema operacional movél da Apple, o iOS(antes da chegada do iPad, era simplesmente iPhone OS), no qual rodam o iPhone e iPad, portanto vamos iniciando com Adobe AIR for iOS.

Antes de começar, precisamos de alguns esclarecimentos em relação a como irá funcionar seu aplicativo feito com Adobe AIR rodando no iOS. Você só podera criar aplicativos com Adobe AIR, não é possivel criar aplicativos que rodem no navegador com o Flash Player.

Você só podera criar aplicativos com Adobe AIR, não é possivel criar aplicativos que rodem no navegador com o Flash Player.

Sem Flash Player no iOS =õ(

Com o runtime do Adobe AIR, temos o mesmo problema, não é possivel instalar o runtime do Adobe AIR da maneira que estamos acostumados a fazer no desktop ou no Android.
O que a Adobe fez foi criar uma ferramenta usando o Low Level Virtual Machine (LLVM) que permite que você converta seu aplicativo feito em Adobe AIR para um aplicativo nativo do iOS. A Adobe mudou o modo de compilação completamente para que seu aplicativo pudesse rodar no iOS, do modo JIT (Just in Time) para o AOT (Ahead-of-Time) permitindo que seu aplicativo em Adobe AIR pudesse ser convertido para um aplicativo nativo do iOS.

A Adobe mudou o modo de compilação completamente para que seu aplicativo pudesse rodar no iOS, do modo JIT (Just in Time) para o AOT (Ahead-of-Time) permitindo que seu aplicativo em Adobe AIR pudesse ser convertido para um aplicativo nativo do iOS.

LLVM é um sistema modular, o sistema compilador flexível que é amplamente utilizado em uma variedade de projetos. A principal razão que a Adobe escolheu o LLVM é a sua flexibilidade e aplicabilidade para o desenvolvimento do iOS. LLVM já é utilizado no projeto Alchemy(Alchemy = C/C++ com ActionScript 3.0).

A criação de aplicativos para iOS usando a Flash Platform só é possivel a partir do iOS 3.0 ou superior.

Ferramentas de desenvolvimento
Adobe Flash CS5 Professional – Com a atualização do Packager for iPhone, você pode a partir do Adobe Flash CS5(com o Packager for iPhone instalado), criar seus aplicativos para o iOS(iPhone/iPad), teremos um novo profile chamado “AIR for iOS”, gerando o arquivo ja com o tamanho padrão de 320×480. Por enquanto não existem componentes pré-programados para iOS e não é recomendado usar os já existentes no Flash.

Adobe Flash Builder 4 (burrito) – A Adobe disponilibizou juntamente com o Flash Builder 4 (burrito), o SDK do Flex versão 4.5, com componentes otimizados para dispositivos moveis, no entanto, esses componentes ainda estão sendo otimizados para rodarem no iOS e serão disponibilizados numa futura versão do Flash Builder, mas você pode criar tranquilamente um projeto ActionScript(usando somente ActionScript 3.0 sem o SDK do Flex) e usar o compilador por linha de comando(ADT).

Qualquer editor de texto – Você pode usar qualquer editor de texto salvando na extensão .as ou seu editor ActionScript favorito.

Distribuição
Você pode gerar o instalador do seu aplicativo pelo Flash Builder(próximas versões), Flash CS5(com o Packager for iPhone instalado) ou por linha de comando usando o ADT. É gerado um aplicativo com a extensão .ipa. A distribuição pode ser feita atraves da App Store, para se tornar um publisher da App Store, basta pagar a inscrição de 99 dolares. Acompanhe esse tutorial sobre como publicar seu aplicativo na App Store.

Acompanhe alguns tutoriais:
Developing for iOS using Flash Professional
Optimizing content for Apple iOS devices
Guide for Apple App Store submissions
Saving state in AIR applications for iOS devices
Using screen orientation APIs for smartphone application development

Nos proximos artigos, mostrarei como usar alguns recursos do AIR for iOS

EU VOU!!!

Em abril teremos a segunda versão do Flash Camp Brasil, com certeza é o maior evento sobre a plataforma Flash ocorrido no Brasil, reunindo os maiores profissionais e especialistas do Brasil e do mundo especialmente para mostrar ao publico brasileiro as ultimas novidades da plataforma Flash, é um evento obrigatorio tanto para designers quanto desenvolvedores além de uma otima oportunidade de aumentar seu networking.
O evento acontecerá em macéio, e contaremos com palestrantes nacionais e internacionais, e muitos workshops para que voce possa aproveitar o maximo o que o evento tem para oferecer.
Entre os temas discutidos teremos:

• Anúncios inéditos trazidos por empregados e evangelistas da Adobe
• Flash em dispositivos móveis (AIR/BlackBerry/Android/iOS/Flex etc)
• Plataformas e App Stores disponíveis no mercado
• Novos métodos de geração de negócios e pagamentos
• Aplicações Flex no mundo corporativo, focadas em produtividade e ROI
• Adobe MAX 2010 Recap, novidades da maior conferência Adobe no mundo
• Fluxos de trabalho com a Flash Platform
• Molehill, o futuro do Flash Player focando em 3D para Games e Rich Internet Applications
• Flash na TV e em aparelhos multitouch
• A importância do design e User Experience (UX) em projetos interativos
• Apresentações de agências premiadas como Seagulls Fly (USA e São Paulo), Gringo (São Paulo), Adobe (USA e Brasil), Dedo US e University of California San Diego (UCSD)
• Tecnologias e novidades que facilitam a vida de designers e developers
• Plataformas de publicações como revistas e jornais em dispositivos móveis
• E-learning e transmissão de vídeo
• Estratégias de Social Media e uso de APIs públicas (Facebook, Linkedin, Twitter, Flickr, Google, PayPal, etc)

Não perca tempo e faça já sua inscrição para o Flash Camp Brasil
http://www.flashcampbrasil.com.br

Veja minha experiencia no primeiro Flash Camp Brasil

Já temos há algum tempo a possibilidade de criar aplicativos para Android com a Flash Platform, usando o Adobe AIR ou Flash Player. Além disso o Android vem se tornando a cada dia mais popular, diariamente surgem varios aparelhos cada vez mais poderosos rodando o sistema operacional do Google e a Android Market foi reformulada para facilitar os usuarios e desenvolvedores.
Um detalhe importante é que não são todas as versões do Android que suportam o Adobe AIR e o Flash Player, é necessario que o smartphone tenha o Android 2.2(Froyo) ou posterior, e as versões do AIR deve ser a 2.5 ou Flash Player 10.1.

O desenvolvimento de aplicativos com a Flash Platform para o Android só é possivel a partir do Android 2.2(Froyo) e usando Adobe AIR 2.5 e Flash Player 10.1

Ferramentas de desenvolvimento
Adobe Flash CS5 Professional – É possivel desenvolver aplicativos para Android usando o Adobe Flash CS5 Professional, na ultima versão foi adicionado um profile “AIR for Android”, gerando o arquivo ja com o tamanho padrão de 480?800. Por enquanto não existem componentes pré-programados para Android e não é recomendado usar os já existentes no Flash.

Adobe Flash Builder 4 (burrito) – A Adobe disponilibizou juntamente com o Flash Builder 4 (burrito), o SDK do Flex versão 4.5, com componentes otimizados para dispositivos moveis, para quem se recordar, a Adobe tinha um projeto de uma versão do Flex para mobile chamado “Slider”, em virtude do rápido crescimento do processamento do smartphones atuais, a Adobe decidiu juntar esse projeto ao SDK padrao do Flex.

Qualquer editor de texto – Você pode usar qualquer editor de texto salvando na extensão .as ou seu editor ActionScript favorito.

Runtime Adobe AIR
Para que seu aplicativo rode em um dispotivo com Android, é necessario que seja instalado o runtime do Adobe AIR para logo em seguida você instalar seu aplicativo.

Distribuição
Você pode gerar o instalador do seu aplicativo pelo Flash Builder, Flash CS5 ou por linha de comando usando o ADT. É gerado um aplicativo com a extensão .apk. A distribuição pode ser feita atraves da Android Market, para se tornar um publisher da Android Market, basta pagar a inscrição de 25 dolares.
Acompanhe esse tutorial sobre como publicar seu aplicativo na Android Market
Caso você crie algo para rodar no Flash Player, basta rodar pelo navegador do smartphone, a Adobe tem uma página para que você possa ver alguns sites que usam Flash Player e que foram otimizados para mobile. Acesse o Adobe Flash Showcase for Mobile

Acompanhe alguns tutoriais:
Exemplos no Adobe Labs
Advanced Android development
Creating mobile apps for Android using Flash Builder “Burrito” and Flex SDK “Hero”
Test Drive for Mobile: Style the application

Nos proximos artigos, mostrarei como usar alguns recursos do AIR for Android

A dica flex de hoje mostra como podemos criar um componente TitleWindow que será aberto como um popup em nossa aplicação.

Primeiro vamos definir nosso componente que terá como sua base class a classe TitleWindow.

“MyPopup.mxml“:

?
<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   title="My popup"
			   close="close_handler()"
			   width="400" height="300">
	<fx:Script>
		[CDATA[
			import mx.managers.PopUpManager;
?
			protected function close_handler():void
			{
				PopUpManager.removePopUp(this);
			}
		]]>
	fx:Script>
?
	<mx:Form>
		<mx:FormItem label="User">
			<s:TextInput width="200" />
		mx:FormItem>
		<mx:FormItem label="Passwd">
			<s:TextInput width="200" />
		mx:FormItem>
		<mx:FormItem>
			<s:Button label="Cancel" click="close_handler()"/>
		mx:FormItem>
	mx:Form>
?
s:TitleWindow>

Repare que o evento close do componente faz uma chamada ao método close_handler(). Na implementação desse método utilizamos a classe Singleton PopUpManager para remover o popup. Entre outras atribuições essa classe gerencia a criação, o posicionamento e a remoção de janelas.

Em seguida vamos implementar nossa application que será responsável por instanciar o componente e abri-lo como um popup.

?
<?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">
?
	<s:layout>
		<s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
	s:layout>
?
	<fx:Script>
		[CDATA[
			import mx.managers.PopUpManager;
?
			protected function add_clickHandler(event:MouseEvent):void
			{
				PopUpManager.createPopUp(this, MyPopup, true);
			}
?
		]]>
	fx:Script>
?
	<s:Button id="add" label="Add TitleWindow Popup" click="add_clickHandler(event)" />
?
s:Application>

Para saber mais sobre classes Singletons veja:
“Dica Flex – Como criar uma classe Singleton com ActionScript 3.0″

Espero que tenham gostado. Até a próxima!

Quando passamos algum tempo modelando aplicações, é fato que vamos nos deparar com um mesmo problema várias e várias vezes. Ao longo do tempo também vamos encontrar maneiras de resolvê-los. A solução para esses problemas recorrentes é a chave para os padrões de projetos. Padrões de projetos não são métodos, frameworks ou componentes, são dicas de como resolver problemas conhecidos de forma eficaz.

Aqui no blog nós já falamos de alguns padrões de projetos como o Singleton, Transfer Object e o Typesafe Enum. Na dica Flex de hoje, vamos mostrar como implementar o padrão de projeto Factory Meythod que, assim como os citados anteriormente, tem papel arquitetural importante nas suas aplicações.

O padrão Factory provê uma abstração ou uma interface e permite que a subclasse ou a classe de implementação decida qual classe ou método deve ser instanciado ou chamado, baseado nas condições ou parâmetros informados.

Algumas de suas características são:

- Esconde as classes concretas do cliente.
- Junta duas ou mais hierarquias de classes separadas porém relacionadas.
- O objeto retornado pode ser tanto um objeto concreto quanto abstrato.
- As subclasses são quem especificam os objetos.

Para ilustrar esses conceitos utilizaremos um exemplo simples, vamos criar uma aplicação que informa a condição do tráfego nas estradas do RJ e SP.

Então mãos a obra.

Crie sua aplicação “FactoryMethodExample”:

Em seguida modifique sua Application conforme o código a seguir:

<?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:controlBarContent>
		<s:Label text="CONDIÇÕES DO TRÁFEGO NAS ESTRADAS"  fontWeight="bold" fontSize="16"/>
		<s:Button id="btTrafegoSP" label="Obtêm condições do tráfego em SP" />
	s:controlBarContent>
?
	<s:TextArea id="report" left="50" right="50" bottom="50" top="50"/>
?
s:Application>

Basicamente, nossa aplicação deverá passar por três passos antes de informar as condições do tráfego ao usuário:

1. Obter as informações do tráfego.
2. Tratar o retorno dessas informações.
3. Retornar as informações formatadas.

Vamos criar um classe abstrata com um método Template Method que irá garantir que os três passos anteriores sejam respeitados.
Diferentemente do C# e do Java, o ActionScript 3.0 não suporta nativamente a criação de classes ou métodos abstratos. A classe abstrata é uma classe que sempre é estendida e nunca pode ser instanciada diretamente. Os métodos abstratos devem ser implementados pela subclasse e, como o ActionScript 3.0 não provê suporte para a palavra-chave “abstract”, vamos garantir esse comportamento lançando uma exceção.

Veja a classe abstrata “AbstractTrafego”:

package
{
	public class AbstractTrafego
	{
		public final function inicializa():String
		{
			obtemInformacoes();
			trataInformacoes();
			return retornaInformacoes();
		}
?
		public function obtemInformacoes():void
		{
			throw new Error("Método Abstrato");
		}
?
		public function trataInformacoes():void
		{
			throw new Error("Método Abstrato");
		}
?
		public function retornaInformacoes():String
		{
			throw new Error("Método Abstrato");
		}
?
	}
}

Agora vamos criar a classe SPTrafego que estende nossa classe abstrata AbstractTrafego. Essa subclasse implementa os métodos chamados pelo Template Method Inicializa:

package
{
	public class SPTrafego extends AbstractTrafego
	{
		private var condicoesTrafego:String = "";
		private var arrCondicoesTrafego:Array = [];
?
		public override function obtemInformacoes():void
		{
			var trafego_1:Object = new Object();
			trafego_1.rodovia = "Marginal Pinheiros";
			trafego_1.condicao = "Congestionada em 6 km";
?
			var trafego_2:Object = new Object();
			trafego_2.rodovia = "Marginal Tietê";
			trafego_2.condicao = "Congestionada em 8 km";
?
			arrCondicoesTrafego.push(trafego_1);
			arrCondicoesTrafego.push(trafego_2);
?
			trace("Obtem as informações do tráfego em SP");
		}
?
		public override function trataInformacoes():void
		{
			condicoesTrafego += "Última atualização: " + new Date() + "n";
			condicoesTrafego += "Condições do Tráfego em SPn";
			for each (var informe:Object in arrCondicoesTrafego)
			{
				condicoesTrafego += informe.rodovia + ": ";
				condicoesTrafego += informe.condicao + "n";
			}
			condicoesTrafego += "r";
?
			trace("Trata as informações do tráfego em SP");
		}
?
		public override function retornaInformacoes():String
		{
			trace("Retorna as informações do tráfego em SP");
?
			return condicoesTrafego;
		}
	}
}

Agora vamos testar nossa implementação. Insira o código a seguir no clique do botão btTrafegoSP:

	<fx:Script>
		[CDATA[
?
			protected function btTrafegoSP_clickHandler(event:MouseEvent):void
			{
				// Cria uma instância de SPTrafego
				var trafego:SPTrafego = new SPTrafego();
				// Chama o Template Method definido na classe abstrata
				report.text += trafego.inicializa();
			}
		]]>
	fx:Script>

Rode o código e veja o resultado.

Nesse momento nossa aplicação está implementando apenas o Template Method. Para entendermos as vantagens de se utilizar o Factory Method, digamos agora que vamos passar também a monitorar o tráfego das estradas do RJ e para isso vamos precisar nos conectar a uma fonte de dados diferente daquela usada para obter as informações de SP. Como teremos agora diferentes fontes de dados, vamos refatorar nosso código. O método ObtemInformacao não retorna nada atualmente, então vamos modificá-lo para que ele passe a retornar um objeto que represente as condições do tráfego.

Crie uma interface chamada ICondicao, que deverá ser implementada por todos esses objetos.

package
{
	public interface ICondicao
	{
		function obtemDados():void;
	}
}

Agora vamos criar as classes que implementam a interface ICondicao:

package
{
	public class SPCondicao implements ICondicao
	{
		public function obtemDados():Array
		{
			trace("Obtem dados do tráfego em SP");
?
			var trafego_1:Object = new Object();
			trafego_1.rodovia = "Marginal Pinheiros";
			trafego_1.condicao = "Congestionada em 6 km";
?
			var trafego_2:Object = new Object();
			trafego_2.rodovia = "Marginal Tietê";
			trafego_2.condicao = "Congestionada em 8 km";
?
			var arrCondicoesTrafego:Array = [];
?
			arrCondicoesTrafego.push(trafego_1);
			arrCondicoesTrafego.push(trafego_2);
?
			return arrCondicoesTrafego;
		}
	}
}

Agora a classe que obtem os dados das estradas do RJ. Repare que as informações estão num formato diferente.

package
{
	public class RJCondicao implements ICondicao
	{
		public function obtemDados():Array
		{
			trace("Obtem dados do tráfego no RJ");
?
			arrCondicoesTrafego.push("Avenida Brasil: Congestionada em 5 km");
			arrCondicoesTrafego.push("Ponte Rio-Niterói: Congestionada em 2 km");
?
			return arrCondicoesTrafego;
		}
	}
}

Em seguida refatore a classe abstrata AbstractTrafego. Perceba que agora o método obtemInformacoes retorna um objeto do tipo ICondicao, que pode ser tanto um objeto relacionado às condições das estradas do RJ quanto de SP ou de qualquer outra cidade que venha a ser adicionada posteriormente:

package
{
	public class AbstractTrafego
	{
		public final function inicializa():String
		{
			var condicao:ICondicao = obtemInformacoes();
			trataInformacoes(condicao.obtemDados());
			return retornaInformacoes();
		}
?
		// Método Factory
		public function obtemInformacoes():ICondicao
		{
			throw new Error("Método Abstrato");
		}
?
		public function trataInformacoes(arrCondicoesTrafego:Array):void
		{
			throw new Error("Método Abstrato");
		}
?
		public function retornaInformacoes():String
		{
			throw new Error("Método Abstrato");
		}
?
	}
}

Refatore agora a implementação da classe abstrata SPTrafego:

package
{
	public class SPTrafego extends AbstractTrafego
	{
		private var condicoesTrafego:String = "";
?
		public override function obtemInformacoes():ICondicao
		{
			return new SPCondicao();
		}
?
		public override function trataInformacoes(arrCondicoesTrafego:Array):void
		{
			condicoesTrafego += "Última atualização: " + new Date() + "n";
			condicoesTrafego += "Condições do Tráfego em SPn";
			for each (var informe:Object in arrCondicoesTrafego)
			{
				condicoesTrafego += informe.rodovia + ": ";
				condicoesTrafego += informe.condicao + "n";
			}
			condicoesTrafego += "r";
?
			trace("Trata as informações do tráfego em SP");
		}
?
		public override function retornaInformacoes():String
		{
			trace("Retorna as informações do tráfego em SP");
?
			return condicoesTrafego;
		}
	}
}

E crie a classe RJTrafego:

package
{
	public class RJTrafego extends AbstractTrafego
	{
		private var condicoesTrafego:String = "";
?
		public override function obtemInformacoes():ICondicao
		{
			return new RJCondicao();
		}
?
		public override function trataInformacoes(arrCondicoesTrafego:Array):void
		{
			condicoesTrafego += "Última atualização: " + new Date() + "n";
			condicoesTrafego += "Condições do Tráfego no RJn";
			for each (var informe:String in arrCondicoesTrafego)
			{
				condicoesTrafego += informe + "n";
			}
			condicoesTrafego += "r";
?
			trace("Trata as informações do tráfego no RJ");
		}
?
		public override function retornaInformacoes():String
		{
			trace("Retorna as informações do tráfego no RJ");
?
			return condicoesTrafego;
		}
	}
}

E por último mas não menos importante, vamos refatorar nossa Application:

<?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[
?
			protected function btTrafegoSP_clickHandler(event:MouseEvent):void
			{
				// Cria uma instância de SPTrafego
				var trafego:SPTrafego = new SPTrafego();
				// Chama o Template Method definido na classe abstrata
				adicionaInforme( trafego );
			}
?
			protected function btTrafegoRJ_clickHandler(event:MouseEvent):void
			{
				// Cria uma instância de SPTrafego
				var trafego:RJTrafego = new RJTrafego();
				// Chama o Template Method definido na classe abstrata
				adicionaInforme( trafego );
			}
?
			private function adicionaInforme(trafego:AbstractTrafego):void
			{
				report.text += trafego.inicializa();
?
			}
?
		]]>
	fx:Script>
?
	<s:controlBarContent>
		<s:Label text="CONDIÇÕES DO TRÁFEGO NAS ESTRADAS"  fontWeight="bold" fontSize="16"/>
		<s:Button id="btTrafegoSP" label="Obtêm condições do tráfego em SP"
				  click="btTrafegoSP_clickHandler(event)" />
?
		<s:Button id="btTrafegoRJ" label="Obtêm condições do tráfego no RJ"
				  click="btTrafegoRJ_clickHandler(event)" />
	s:controlBarContent>
?
	<s:TextArea id="report" left="50" right="50" bottom="50" top="50"/>
?
s:Application>

Espero que tenham gostado. Baixe aqui o projeto de exemplo.

Até a próxima!

A dica Flex de hoje demonstra a implementação de um padrão de projeto muito utilizado chamado Singleton. A sua utilização se justifica quando existe a necessidade de limitar o número de instâncias de uma classe a apenas uma e quando queremos prover acesso global à essa instância. Considere que estamos modelando uma aplicação que precisa saber o tempo todo a posição do cursor do mouse. Para obter, tratar e retornar essa informação podemos então criar uma classe de gerenciamento que implementa o padrão Singleton, uma vez que existe apenas um cursor do mouse.

(mais…)

O Adobe Flex é um framework feito para criação de aplicativos RIA com a Flash Platform e que pela sua facilidade vem se tornando muito popular nos ultimos anos. Há classe chamada ObjectUtil, uma classe estática com uma serie de métodos para ajudar e agilizar no desenvolvimento de suas aplicações. Vou mostrar alguns exemplos dos métodos que mais utilizo.

numericCompare é um método usado para comparar dois números, retorna 0 se os dois são nulos ou iguais, 1 se o primeiro parametro for maior que o segundo e -1 se o segundo parametro for maior que o primeiro. Veja um exemplo:

compare é um método usado para comparar dois objetos. Ele usa um algoritimo para ir o mais profundo possivel no objeto e suas propriedades. Veja um exemplo:

dateCompare Trabalhar com datas sempre gera um pouco de trabalho, pois você sempre tem que fazer uma serie de verificações, modificar formatos etc. Temos um método para comparação de datas que pode ser muito util e agilizar seu trabalho. Segue o mesmo esquema dos demais, retorna 0 se datas iguais, 1 se a primeira é maior que a segunda e -1 se a segunda é maior que a primeira. Veja um exemplo:

stringCompare é usado para comparar duas strings, um detalhe é que existe um terceiro parametro boolean para dizer se a comparação sera feita diferenciando letras maiusculas de minusculas ou não. Veja um exemplo:

toString funciona mais ou menos como o print_r do PHP, torna legivel um objeto e toda sua estrutura hierarquica. Veja um exemplo:

copy é usado para fazer uma cópia de um objeto usando um algoritimo de serialização nativa do Flash. Player. Muito útil para se trabalhar com objetos customizados e coleções.

DOWNLOAD SOURCE

Veja outros métodos:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/utils/ObjectUtil.html
ActionScript 3.0 Reference for the Adobe Flash Platform

Por vezes, quando estamos sobre pressão, ou menos atentos, esquecemos-nos, ou temos dificuldade em nos lembrarmos das coisas mais básicas.

No caso deste post, venho falar sobre o que representam certos atributos das variáveis que utilizamos no Flex 4 / ActionScript 3.0. Isto é um tema muito importante e temos de ter estes atributos sempre em conta se queremos ter as nossas variáveis acessíveis a classes dentro dos nossos packages ou se queremos restringir as mesmas a só poderem ser acedidas num determinado scope.

Sendo assim, aqui vai uma pequena descrição dos tipos de “accessors” que temos à nossa disposição  no Flex 4.

public - Este tipo de atributo faz com que a nossa variável possa ser acedida por qualquer outra classe desde que faça referência à classe que a declara.

Exemplo – Se tivermos uma classe que queira fazer referência a uma variável estática que existe em outra classe, podemos utilizar:

var myString : String = MyEnumClass.MY_VARIABLE;

No caso de querermos aceder a uma variável dentro da classe que pode ir mudando ao longo do tempo (normalmente utilizado quando temos componentes criados por nós no Flex 4):

var mySecondString : String = myClass.myVariable;

private - Este atributo da variável diz-nos que a mesma só pode ser acedida dentro da mesma classe.

Exemplo – Definimos uma variável como private na nossa classe e acedemos à mesma.

private var myVariable : String = “MyVar”;

trace (myVariable);

protected - Este atributo diz-nos que a nossa variável só pode ser acedida pela mesma classe que a cria, por todas as que fazem extends dela.

Exemplo – Definimos uma variável protected numa classse que servirá de base e depois usamo-la na nossa classe que faz extends:

Classe 1 (BaseClass):

protected var myString : String = “myString”;

Classe 2:

Classe2 extends BaseClass

trace(myString);

internal - Este tipo de atributo define a nossa variável como podendo ser acedida pela própria classe que a criar e também por qualquer das classes que se encontram dentro do mesmo package.

Se tentarmos representar as diferentes possibilidades dos atributos das variáveis, cruzando-as com o sítio onde as declaramos, podemos ter uma representação gráfica de mais fácil compreensão.

Podem ver a implementação destes accessors nesta tabela:

Conclusão:

Como podemos ver, se quisermos ter o nosso código muito bem estruturado e os nossos componentes muito bem definidos, temos sempre de ter em conta os atributos que damos às nossas variáveis. Isto porque, a simples definição de uma variável, pode fazer com que estraguem a nossa implementação da classe que pensamos que já estaria bem implementada. Convém sempre perder um certo tempo a pensar, definir, e estruturar todas as variáveis dentro do nosso código! Valem sempre a pena

Esta tabela e mais informação sobre o assunto podem ser encontradas no site da FLEX{er}.

Podem também ler sobre todos os tipos de variáveis no ActionScript 3.0, aqui , na documentação da Adobe.