as3 - redeRIA | Agregador de noticias, artigos, tutoriais Flex, Flash, JavaFX, AJAX e Rich internet applications em geral!

Dez 30

Retrospectiva 2010

Escrito por Fabio da Silva em 1, 2.0, 4, 6, action, Actionscript, ActionScript 3, Adobe, Adobe Flex, Air, AIR 2.0, Animações, AR, as3, BI, blog, Blogs, consultoria, control, cs4, Desenvolvedor, Desenvolvimento, e-genial, egenial, empresas, Engnatv, eval, Feevale, flash, Flex, Flex 3, Flex 4, for, framework, Google, Hibernate, html, IE, int, Java, jogo, Jogos, JPA, mg, mysql, O, on, online, Outros, PHP, produtividade, produto, prototipação, pt, rest, RIA, Ria’s Geral, site, Software, Swiz Framework, Tecnologia, Treinamento, treinamentos, tv, UI, UX, Ved, web @ 12 30th, 2010 | via http://fabiophx.blogspot.com | Sem comentários

Além dos treinamentos de AS3 com Flash e Adobe Flex (3 e 4) na Alfamídia e Adobe Flex (3 e 4) na TargetTrust este ano de 2010 trouxe inúmeras oportunidades e desafios profissionais.

Alguns treinamentos in company:

Animações com ActionScript 3 no Flash CS4 para professores e alunos do projeto Engnatv na faculdade Feevale. Mais detalhes aqui.
Flex 3 e 4 na Azul Tecnologia em Fortaleza – CE. Mais detalhes aqui.
Flex 4 para a Braskem na Alfamídia.
Flex 4 na BSInfo em Bento Gonçalves – RS.
Convite do Igor Costa para um treinamento de Flex 4 em Florianópolis – SC como instrutor substituto da RIACycle.

Também fiz alguns treinamentos:

AIR 2.0 Essencial pela RIACycle ministrado pelo Igor Costa.
Planejamento, Prototipação e Execução de um projeto Flex/Swiz Framework e PHP/MySQL online pela e-Genial ministrado pelo Fábio Vedovelli.
PHP 5 e Produtividade em Java com JPA e Hibernate na TargetTrust.

Entre outros:

Lançamento do Flex 4 e o seu uso na Sadig na nova geração de produtos.
Convite da Gabriela para substituí-la em algumas cadeiras de AS3 para jogos que ela ministra na faculdade Feevale.

E neste mês de dezembro aceitei um novo desafio, o de prestar consultoria e desenvolvimento (PHP e Flex) na Ouro Moderno, empresa desenvolvedora de treinamentos interativos e também de software para empresas de treinamento para controlar alunos e treinamentos realizados.

A todos os envolvidos meus sinceros agradecimentos.

E deixo também aqui o meu desejo de um Feliz e Próspero 2011 para todos.

Que venha novos desafios.

Dez 28

Criação dinâmica de objetos com RSL

Escrito por Fabio da Silva em 1, 2009, 4, 6, Adobe, AR, as3, BI, blog, Blogs, bug, class, classe, classes, components, control, Controls, demo, err, erro, flash, Flex, Flex 3, Flex 4, for, framework, function, Google, html, IE, if, int, library, mg, O, on, RIA, Ria’s Geral, runtime, SDK, skins, spark, swf, team, UI, uint, utils @ 12 28th, 2010 | via http://fabiophx.blogspot.com | Sem comentários

No meu post Criação dinâmica de objetos mostrei os passos para este tipo de criação.

Naquele post digo que é necessário o registro das classes dos objetos a serem criados dinamicamente para o compilador “saber” quais classes compilar. Isto é válido quando a opção Project > Properties > Flex Build Path > Library Path > Framework Linkage está marcado como Merged into code.

Quando a opção Framework Linkage está marcada como Runtime shared library (RSL) o registro não é necessário porque todo o framework estará junto (normalmente) com o swf da aplicação. Com isso podemos criar objetos dinamicamente da seguinte forma:

Flex 3
import mx.core.UIComponent;
import flash.utils.getDefinitionByName;

private function createButton():void {
var clazz:Class = getDefinitionByName(“mx.controls.Button”) as Class;
var instance:UIComponent = new clazz() as UIComponent;
addChild(instance);
}

Flex 4
import mx.core.UIComponent;
import spark.skins.spark.ButtonSkin;
import flash.utils.getDefinitionByName;

private function createButton():void {
var clazz:Class = getDefinitionByName(“spark.components.Button”) as Class;
var instance:UIComponent = new clazz() as UIComponent;
instance.setStyle(“skinClass”, spark.skins.spark.ButtonSkin);
addElement(instance);
}

A diferença entre o Flex 3 e 4 é que no 4 se não for definido o skinClass dará um erro no addElement informando que não foi possível encontrar o skin, o que vejo como um bug o qual reportei aqui (mais votos mais fácil o Flex Team dar uma olhada).

Dez 6

Como salvar “ SnapShots” de componentes do Flex na máquina do usuário.

Escrito por DClick Team em 1, 4, 6, action, Actionscript, ActionScript 3, api, Aplicativos, AR, arte, as3, back, BI, bitmap, blog, class, Componente, Componentes, Curso, Cursos, dados, desempenho, encode, encoder, event, exemplo, flash, Flash Player, Flex, for, function, game, git, handle, ide, IE, if, image, int, label, library, map, mg, Motivação, NaN, News, O, Office, on, Outros, padrão, Partilha, player, processo, pt, reference, referencia, RIA, Ria’s Geral, Sem categoria, servidor, TAT, Tutorial, Twitter, UI @ 12 6th, 2010 | via http://blog.dclick.com.br/pt/ | Sem comentários

https://github.com/mikechambers/as3corelib .

Implementação

Então vamos ao que interessa. Esta pequena função abaixo é que faz toda a mágica, é ela que gera a imagem a partir do componente AgonNewsSnapShot e o salva na maquina do usuário:

PLAIN TEXT

ACTIONSCRIPT:

protected function saveSnapshot_clickHandler(event:MouseEvent):void
{
var imageBitmapData:BitmapData = ImageSnapshot.captureBitmapData(birthDaySnapshot);
var imgByteData:ByteArray = PNGEncoder.encode(imageBitmapData);
var file:FileReference = new FileReference();
file.save(imgByteData,“nomeDoArquivo.png”);
}

O componente AgonNewsSnapShot nada mais é do que um Group no qual todos os seus filhos (Labels, Background, Images, etc.) serão desenhados na imagem a ser salva, veja abaixo o exemplo de uma instância deste componente:

Vamos dividir em partes:

Primeiro é capturada a imagem Bitmap do componente AgonNewsSnapShot, que no nosso caso é o componente que será salvo como imagem no computador do usuário:

PLAIN TEXT

ACTIONSCRIPT:

var imageBitmapData:BitmapData = ImageSnapshot.captureBitmapData(agonNewsSnapshot);

Usamos o PNGEncoder para converter a imagem e retornar o ByteArray da mesma:

PLAIN TEXT

ACTIONSCRIPT:

var imgByteData:ByteArray = PNGEncoder.encode(imageBitmapData);

É chamado o system dialog padrão do S.O, para salvar o ByteArray na maquina do usuário no diretório selecionado por ele.

PLAIN TEXT

ACTIONSCRIPT:

var file:FileReference = new FileReference();
file.save(imgByteData,“nomeDoArquivo.png”);

Pronto! Seu componente acaba de ser desenhado numa imagem e salvo no computador do usuário.

Bom galera esse é meu primeiro post, espero que tenham gostado, e virão mais por aí.

Abraços.

Referencias:

http://www.switchonthecode.com/tutorials/flex-tutorial-an-asynchronous-jpeg-encoder

http://ask.amoeba.co.in/save-images-from-flash-actionsctipt-3-filereference-save-jpgencoder/

Nov 19

Novos desafios para minha carreira!

Escrito por Lucas Marçal em 1, 3d, AR, arte, as3, blog, Carreira, Curso, Destaque, Dica, err, Experiências, flash, for, free, if, int, Mercado, O, Office, on, Pessoal, portugal, problema, problemas, Projetos, publicidade, RIA, Ria’s Geral, site, tag, Twitter, UI, XP, zend @ 11 19th, 2010 | via http://www.lucasmarcal.com.br/blog/ | Sem comentários

Novos desafios para minha carreira!

Salve pessoal

Os que me seguem pelo Twitter já sabem, mas aos que não sabem gostaria de informar que estou novamente no mercado de publicidade, mas especificamente na Alta Comunicazione.

Quem me conhece pessoalmente sabe que eu venho falando há muito tempo que o melhor formato de trabalho é o “Home Office” então porque aceitei essa mudança?

Eu acredito na evolução constante do homem, acredito que só fica estagnado quem tem preguiça ou medo do novo, a última agência que trabalhei foi a OWINTERACTIVE, lá eu tive varias experiências que me fizeram evoluir muito como profissional, meu primeiro projeto em AS3 foi o site da Virazom e nesse período aprendi bastante coisa, fiz novos amigos e evolui como profissional.

Passado esse período tive alguns problemas pessoais e decidi que me dedicaria exclusivamente aos “freelas”, foram 2 anos vivendo dessa maneira, nesses 2 anos ganhei muito e perdi muito porém o mais importante foi a experiência de ter que me virar em todas as áreas, gerenciar projetos e equipes e ter experiências de trabalhos internacionais.

Em 2010 eu trabalhei para uma empresa de Portugal com uma equipe de amigos “freelas”. Foi bem legal e difícil gerenciar toda essa quantidade de trabalho e relacionamentos, mas no final tudo aconteceu bem, ainda temos algumas coisas por resolver, mas o saldo da evolução é bom e me deixa satisfeito.

Novos desafios

Agora estou na Alta Comunicazione, novos desafios me esperam, na Alta Comunicazione minha função não é apenas de “Flash Coder” estou fazendo também a parte de direção de criação, atividade essa que desenvolvi também durante o ano de 2010.

A equipe é bem legal, destaque para a galera do 3D que vão com certeza me ajudar a ter um portfólio bem melhor durante o ano de 2011.

Desafios para 2011

Todo homem tem que ter metas as minhas para 2011 são

Evoluir mais como programador AS3
Lançar o meu curso de AS3
Conseguir finalmente colocar meu site no ar (em casa de ferreiro espeto é de pau)
Ganhar um FWA
Aprender 3D Max
Aprender Affter Effects
Voltar a escrever nesse blog
Ficar rico fazendo o que eu faço rsrs

Bom pessoal é isso, post meio “institucional” mas em breve volto a escrever coisas úteis!

Nov 3

[ Adobe Flex ] Mudando o estilo visual dos Charts

Escrito por Erko Bridee em 1, 2009, 4, 6, action, Actionscript, Actionscript3, Adobe, Adobe Air, Adobe Flex, Air, api, app, AR, Artigo, as3, AUG, auto, back, bar, BI, Bindable, blog, browser, case, class, classe, classes, código, collection, Componente, Componentes, control, Controls, DataProvider, efeito, Estilo, exemplo, filter, Flex, Flex 3, Flexmania, for, framework, function, Google, Gráfico, html, ide, IE, if, image, int, Java, Java Magazine, Javascript, label, layout, live, MEF, mg, MXML, Number, O, on, Oracle, padrão, pt, Ria’s Geral, string, Stroke, Swiz Framework, TAT, try, UI, uint, Ved, web, XML, XMLList, XP @ 11 3rd, 2010 | via http://blog.erkobridee.com | Sem comentários

Algo legal no Flex é que eles nos disponibiliza gráficos, porém, sinceramente o estilo padrão dos gráficos com cores sólidas não me agrada muito, ao meu ver cansa os olhos, então resolvi mudar as cores solidas para um padrão em degrade, para suavizar as cores…

Obs.: tendo em mente que os componentes dos gráficos ainda são os mesmos no Flex 3 e 4 os códigos mxml a seguir serão do Flex 3.

Começando pelo gráfico de barras, para ter o seguinte resultado precisei:

Código MXML:

^?View Code ACTIONSCRIPT3

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
        	import code.StyleColumnChart;
 
            import mx.charts.chartClasses.IAxis;
 
            private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String {
                return currencyFormatter.format(item);
            }
 
            private function categoryAxis_labelFunc(item:Object, prevValue:Object, axis:CategoryAxis, categoryItem:Object):String {
                var datNum:Number = Date.parse(item);
                var tempDate:Date = new Date(datNum);
                return dateFormatter.format(tempDate).toUpperCase();
            }
        ]]>
    </mx:Script>
 
    <mx:DateFormatter id="dateFormatter" formatString="DD" />
    <mx:CurrencyFormatter id="currencyFormatter" precision="2" />
 
    <mx:XMLListCollection id="dp">
        <mx:source>
            <mx:XMLList>
                <quote date="8/1/2007" open="40.29" close="39.58" />
                <quote date="8/2/2007" open="39.4" close="39.52" />
                <quote date="8/3/2007" open="39.47" close="38.75" />
                <quote date="8/6/2007" open="38.71" close="39.38" />
                <quote date="8/7/2007" open="39.08" close="39.42" />
                <quote date="8/8/2007" open="39.61" close="40.23" />
                <quote date="8/9/2007" open="39.9" close="40.75" />
                <quote date="8/10/2007" open="41.3" close="41.06" />
                <quote date="8/13/2007" open="41" close="40.83" />
                <quote date="8/14/2007" open="41.01" close="40.41" />
                <quote date="8/15/2007" open="40.22" close="40.18" />
                <quote date="8/16/2007" open="39.83" close="39.96" />
                <quote date="8/17/2007" open="40.18" close="40.32" />
                <quote date="8/20/2007" open="40.55" close="40.74" />
                <quote date="8/21/2007" open="40.41" close="40.13" />
                <quote date="8/22/2007" open="40.4" close="40.77" />
                <quote date="8/23/2007" open="40.82" close="40.6" />
                <quote date="8/24/2007" open="40.5" close="40.41" />
                <quote date="8/27/2007" open="40.38" close="40.81" />
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>
 
    <mx:ColumnChart id="columnChart"
            showDataTips="true"
            dataProvider="{dp}"
            width="100%"
            height="100%">
 
        <!-- vertical axis -->
        <mx:verticalAxis>
            <mx:LinearAxis baseAtZero="false"
                    labelFunction="linearAxis_labelFunc" />
        </mx:verticalAxis>
 
        <!-- horizontal axis -->
        <mx:horizontalAxis>
            <mx:CategoryAxis id="ca"
                    categoryField="@date"
                    title="August 2007"
                    labelFunction="categoryAxis_labelFunc" />
        </mx:horizontalAxis>
 
        <!-- horizontal axis renderer -->
        <mx:horizontalAxisRenderers>
            <mx:AxisRenderer axis="{ca}"
                    canDropLabels="true" />
        </mx:horizontalAxisRenderers>
 
        <!-- series -->
        <mx:series>
            <mx:ColumnSeries
            		displayName="Open"
                    xField="@date"
                    yField="@open"
                    fill="{StyleColumnChart.orangeLinearGradient}"
                    stroke="{StyleColumnChart.orangeStroke}">
            </mx:ColumnSeries>
            <mx:ColumnSeries
            		displayName="Close"
                    xField="@date"
                    yField="@close"
                    fill="{StyleColumnChart.blueLinearGradient}"
                    stroke="{StyleColumnChart.blueStroke}">
            </mx:ColumnSeries>
        </mx:series>
 
        <!-- series filters -->
        <mx:seriesFilters>
            <mx:Array />
        </mx:seriesFilters>
    </mx:ColumnChart>
</mx:Application>

Obs.: esse código acima reaproveitei do respectivo post do blog.flexexamples.com

Código da classe AS3 para gerar o efeito visual:

^?View Code ACTIONSCRIPT3

package code
{
	import mx.graphics.GradientEntry;
	import mx.graphics.LinearGradient;
	import mx.graphics.Stroke;
 
	[Bindable]
	public class StyleColumnChart
	{
		public function StyleColumnChart() {}
 
		//----------------------------------------------------------------------
		// @BEGIN: LinearGradient color
 
		public static function linearGradientColor(colorDark:uint, colorLight:uint):LinearGradient {
			var linearGradient:LinearGradient = new LinearGradient();
			var arr:Array = [];
			arr.push(new GradientEntry(colorDark, 0.0, 0.8));
			arr.push(new GradientEntry(colorLight, 1.0, 0.6));
			linearGradient.entries = arr;
			return linearGradient;
		}
 
		public static function get redLinearGradient():LinearGradient {
			return linearGradientColor(0x990000,0xEE0000);
		}
 
		public static function get greenLinearGradient():LinearGradient {
			return linearGradientColor(0x008B00,0x00FF00);
		}
 
		public static function get blueLinearGradient():LinearGradient {
			return linearGradientColor(0x0066FF,0x00CCFF);
		}
 
		public static function get yellowLinearGradient():LinearGradient {
			return linearGradientColor(0xCAC333, 0xF5F30E);
		}
 
		public static function get orangeLinearGradient():LinearGradient {
			return linearGradientColor(0xFC9C00, 0xFCC048);
		}
 
		// @END: LinearGradient color
		//----------------------------------------------------------------------
		// @BEGIN: stroke color
 
		public static function strokeColor(color:uint):Stroke {
			return new Stroke(color,1);
		}
 
		public static function get redStroke():Stroke {
			return strokeColor(0x990000);
		}
 
		public static function get greenStroke():Stroke {
			return strokeColor(0x008B00);
		}
 
		public static function get blueStroke():Stroke {
			return strokeColor(0x0066FF);
		}
 
		public static function get yellowStroke():Stroke {
			return strokeColor(0xCAC333);
		}
 
		public static function get orangeStroke():Stroke {
			return strokeColor(0xFC9C00);
		}
 
		// @END: stroke color
		//----------------------------------------------------------------------
	}
}

A seguir segue um exemplo para gráfico de pizza:

Código MXML:

^?View Code ACTIONSCRIPT3

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
    <![CDATA[
     import mx.collections.ArrayCollection;
 
     import code.StylePieChart;
 
     [Bindable]
     public var expenses:ArrayCollection = new ArrayCollection([
        {Data:"IN", Value:2000},
        {Data:"OUT", Value:1000}
     ]);
 
    ]]>
  </mx:Script>
 
  <mx:Panel title="Pie Chart">
 
     <mx:PieChart id="myChart"
        dataProvider="{expenses}"
        showDataTips="true">
        <mx:series>
           <mx:PieSeries
                field="Value"
                nameField="Data"
                labelPosition="callout"
                fills="{StylePieChart.inOutFills}"/>
        </mx:series>
     </mx:PieChart>
 
     <mx:Legend dataProvider="{myChart}"/>
 
  </mx:Panel>
 
</mx:Application>

Código da classe AS3 para gerar o efeito visual:

^?View Code ACTIONSCRIPT3

package code
{
	import mx.graphics.GradientEntry;
	import mx.graphics.RadialGradient;
	import mx.graphics.SolidColor;
 
	[Bindable]
	public class StylePieChart
	{
		public function StylePieChart()	{}
 
		//----------------------------------------------------------------------
 
		public static function get inOutFills():Array {
			var gradients:Array = new Array();
 
			var fill:RadialGradient = null;
			var g1:GradientEntry = null;
			var g2:GradientEntry = null;
 
			fill = new RadialGradient();
			g1 = new GradientEntry(0xCC3640);
			g2 = new GradientEntry(0x990000);
			fill.entries = [g1,g2];
			gradients.splice(-1,0,fill);
 
			fill = new RadialGradient();
			g1 = new GradientEntry(0x30BB32);
			g2 = new GradientEntry(0x009900);
			fill.entries = [g1,g2];
			gradients.splice(-1,0,fill);
 
			return gradients;
		}
 
		//----------------------------------------------------------------------
	}
}

Para achar as cores utilizei os itens descritos neste post: [Adobe AIR] Color Browser

Veja também:

Out 22

Giroflex : aplicação multiscreen e multitouch screen

Escrito por Erko Bridee em .NET, 1, 2.0, 4, 6, Access, action, Adobe, Adobe Air, Air, Android, api, aplicacao, app, AR, as3, auto, back, BI, blog, browser, class, cliente, control, custom, dados, Desenvolvimento, err, escritório, event, Evento, Excel, exemplo, explorer, flash, Flex, for, framework, FullScreen, Gráfico, ide, idiomas, IE, if, image, int, interface, Java, Javascript, kit, layout, lite, mg, multitouch, NaN, Negócios, networking, O, on, PHP, player, Plugin, produto, pt, redeRIA, RIA, Ria’s Geral, screen, site, skins, SmartPhone, SQLite, Sun, swf, Touch, UI, Vídeo, Vídeos, web, XML, XP @ 10 22nd, 2010 | via http://blog.erkobridee.com | Sem comentários

Eis um exemplo interessante de implementação de uma aplicação em Adobe AIR que se adapta a multiplas interfaces e possui um suporte a multi touch screen, resultado em uma aplicação bem legal…

Esta pode ser a melhor aplicação da atualidade multi-screen já vista. É uma aplicação totalmente deslumbrante e a história por trás desta aplicação é muito mais impressionante. Graças a plataforma Flash a empresa que desenvolveu esta aplicação que executa em multiplos dispositivos foi construída em tempo recorde.

A Giroflex é uma empresa líder em manufatura de móveis ergonômicos para escritório em seu país. Eles solicitaram para a Publicis Modem, que criassem uma aplicação para uma feira de negócios chamada de Orgatec na cidade Cologne, na próxima semana (24 a 30 de Outubor de 2010).

A aplicação precisava se adaptar a multiplas resoluções de tela. O que o cliente queria era, um microsite, uma aplicação multitouch para executar no HP TouchSmart 600 e a aplicação também deveria executar no Samsung Tab. Com esta aplicação seus respectivos visitantes no evento poderiam assim “experimentar” a nova cadeira de uma forma dinâmica e moderna, através dos computadores TouchSmart, representando assim o espírito da empresa. Todos os executivos de venda da Giroflex no evento terão em mãos um Galaxy Tab para mostrar a seus clientes seus produtos através da mesma aplicação. A escolha da plataforma Flash foi um tanto óbvia para atender a necessidade deste cliente.

Graças a plataforma Flash o time da Publicis Modem, liderado por Marcel Vogt e Tiago Dias foi capaz de desenvolver esta aplicação que executa um microsite no browser e uma aplicação stand-alone para os computadores TouchSmart e Samsung Galaxy Tab e qualquer outro dispositivo Android. Em apenas 2 semanas e meia eles criaram uma aplicação em Adobe AIR (AS3) a qual é multi-idiomas, rica, de fácil uso e intuitiva com uma base de dados local em SQLite, além de suportar multitouch.

Eles começaram o desenvolvimento da solicitação do seu cliente a partir do microsite, construído utilizando um framework AS3 próprio da empresa. Toda a interface é customizável através de arquivos XML. Eles finalizaram o microsite em apenas 1 semana e meia. Então quando o microsite estava finalizado, eles apenas precisaram adicionar o suporte para multitouch e efetuar uma melhora nos gráficos e no layout da aplicação, para que a mesma se ajustasse a resolução de tela do Samsung Galaxy Tab e dos computadores TouchSmart. Como um adicional eles quiseram ver como é que a aplicação se comportaria em um smartphone HTC Desire. O que consumiu apenas 2 horas para realizar o ajuste.

Para efetuar a publicação da aplicação no Android (Samsung Galaxy Tab e HTC Desire) a empresa contou com a ajuda do Package Assistant application(criado por Serge Jespers) para criar os APKs.

Caso você esteja pensando em desenvolver algo em Adobe AIR e publicar no Android recomendo olhar esta aplicação, creio que irá lhe ajudar.

Este excelente exemplo de aplicação foi construído com a plataforma Flash para criar uma aplicação que executasse e se ajustasse a múltiplas resoluções de tela.

Via: Serge Jespers

A segui vídeos mostrando a aplicação nos dispositivos:

Samsung Galaxy Tab

HP TouchSmart

HTC Desire

Veja também:

Set 16

Adobe AIR Update Framework + ANT Task + Hudson

Escrito por DClick Team em 1, 4, 6, Access, action, Actionscript, Adobe, Adobe Air, Air, apache, api, Aplicativos, app, AR, arte, as3, auto, back, BI, blog, bug, class, classe, cliente, codec, código, configuração, Curso, Debug, demo, Desenvolvedor, Desenvolvimento, developer, Dica, Download, err, erro, error, event, EventListener, exemplo, flash, flash builder, Flex, FlexBuilder, fonte, for, Formação, framework, Frameworks, FullScreen, function, git, handle, html, ide, IE, if, image, int, Java, library, live, mg, MXML, NaN, Number, O, on, Outros, Password, Pessoal, player, Plugin, processo, procura, Projetos, pt, RIA, Ria’s Geral, RoR, screen, Screencast, Sem categoria, Software, swf, tag, TAT, Tema, template, Teste, tool, tv, Twitter, UI, update, Ved, vs, wave, window, XML, XP @ 09 16th, 2010 | via http://blog.dclick.com.br/pt/ | Sem comentários

Twitter!

Umas das coisas que eu acho mais interessante quando estou desenvolvendo para Adobe AIR é a facilidade de realizar as atualizações da aplicação, é muito simples e fácil de implementar uma maneira automatica para as atualizações. Na verdade a implementação já existe, só é preciso saber como utilizar.

Neste post vou falar um pouco sobre o framework de update das aplicações air e como tirar proveito disso com um processo deployment também automatico utilizando ANT para compilar o projeto e Hudson para separar os ambientes e etc.

Air Update Framework – Atualização da aplicação

O framework de update do air trabalha basicamente com 3 coisas:

A classe ApplicationUpdaterUI e os arquivos de configurações update.xml e updateConfig.xml . Independente de como será feito o deployment da sua aplicação, o modo de atualização será sempre baseado nesta classe e nestes arquivos.

Você também pode utilizar esta classe atribuindo manualmente as propriedades que são lidas pelos arquivos de configuração, entretanto, com arquivo é possível alterar os valores depois que o AIR ja tiver sido compilado.

ApplicationUpdaterUI

Esta classe utiliza o arquivo de configuração updateConfig.xml para saber aonde procurar por uma atualização e informar em caso exista uma versão mais recente.

Esta classe precisa basicamente de 3 coisas.

Setar a propriedade configurationFile com o arquivo updateConfig.xml
Inicializar
E verificar se há uma nova versao.

Segue abaixo um trecho de código com a utilização:

1
2
3
4
5
6
7
8
9
10
11

public static function checkNow(updateConfigFile:File):void
{
updater.configurationFile = updateConfigFile;
updater.addEventListener(UpdateEvent.INITIALIZED, updateInitializeHandler);
updater.initialize();
}

private static function updateInitializeHandler(event:UpdateEvent):void
{
updater.checkNow();
}

No projeto que irei disponibilizar no final do post eu estou utilizando a classe VersionManager criada aqui na DClick para facilitar um pouco essa parte de configurar e inicializar o updater

updateConfig.xml

Dentro do arquivo updateConfig.xml está todas as configurações de como a verificação de novas atualizações serão feitas. A classe ApplicationUpdaterUI lê estas informações durante a inicialização.

update.xml

Este arquivo contem a informação de qual é a versão atual do sistema e onde baixa-la. O update framework compara a versão do software que está sendo executada ( token <version> dentro do xml que descreve a aplicação air ) e caso for diferente da que esta no update.xml ele irá tentar fazer atualização para a nova versão.

ANT Task – Compilação através de linha de comando

Agora que agente ja viu como funciona o sistema para atualização de versão dos aplicativos AIR, podemos podemos deixar o processo de distribuição ainda mais rapido. Vamos ver como gerar a nova versão pelo plugin do flex e depois como gerar utilizando um script ANT

O plugin do flex possibilida fazer o export do projeto para o arquivo .air, basta clicar em project/export release build (imagem abaixo).

Entretanto deste modo cabe a você antes de executar o export configurar qual será a nova versão do aplicativo, e para qual ambiente ( producao/teste/cliente/etc ) você esta compilando esta nova versão.

Em um projeto desenvolvido com integração continua com o cliente, onde varias versões são compiladas durante o desenvolvimento, fazer o build da aplicação não é a melhor escolha.

Uma alternativa é criar um script ANT para buildar o projeto, com ele é possível buildar o projeto e a cada build alterar a versão do aplicativo, deste modo sem muito esforço você tem uma maneira mais prática para gerar as versões da aplicação. O esforço fica em criar o script a primeira vez porque dependendo do tamanho do projeto ( dependencia entre outros projetos, etc ) o script pode ficar grande e complexo.

No final do post vou deixar um link para um projeto no github, a ideia é que este projeto funcione como um template básico para quando for desenvolver um app em air, pois ele ja define a estrutura de pastas build/ambiente e também um script ANT padrao para buildar o projeto de acordo com cada ambiente que for necessário. O script esta todo comentado, de modo que é possível enter cada passo que esta sendo feito.

Como funciona o ANT para o Flex/Air?

O script é dividido em targets ( passos ) que são executados numa ordem definida pelo criador.

Por ex: Os passos básicos para gerar o .air são

Compilar o projeto e gerar o swf.
Gerar o instalador .air a partir do swf.

Compilação do SWF:

Para compilar o projeto e gerar o swf o script ANT utiliza um jar chamado flexTasks.jar. Primeiro é necessário incluir este jar dentro do script atráves da tag <taskdef /> do ant ( veja abaixo ):

Depois de incluir o jar como recurso é possível compilar o projeto utilizando a tag ( veja abaixo ):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<default-size height=“768″ width=“1024″ />

<source-path path-element=“${air.src}” />
<source-path path-element=“${locale.path}” />

<source-path path-element=“${FLEX_HOME}/frameworks” />
<library-path dir=“${FLEX_HOME}/frameworks/locale” append=“true”>
<include name=“{locale}” />
</library-path>

<compiler.library-path dir=“${air.libs}” append=“true”>
<include name=“*.swc” />
</compiler.library-path>

</mxmlc>

Este exemplo foi extraido do script ANT que está no projeto template. Para ver mais detalhes sobre como utilizar a tag veja o link da adobe

Gerando o .AIR

Uma vez que você ja compilou o projeto e ja gerou o .swf, para gerar o .air você irá utilizar o jar .adt ( Adobe Developer Tool ). Diferente do flexTask.jar, o adt nós não vamos incluir como recurso no script, vamos executa-lo através da tag

Veja abaixo um exemplo extraido do script que esta no projeto de template:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Com o ADT é possível gerar o .air já autenticado com um certificado ou simplesmente gerar um arquivo .airi sem autenticação e depois em um outro passo autenticar este arquivo intermediario. Para ver mais detalhes dos argumentos que o ADT recebe como passa-los segue o link da adobe

Como alterar a versão da aplicação a cada build?

Apesar de nós já termos visto como é feita a compilação do swf e como é gerado o .air, ainda não vimos como alterar a versão da aplicação a cada build. Muito bem, no script que está no projeto template, isto é feito através da tag Esta tag recebe como parametro um arquivo, e sempre que é executada ela incrementa em um o valor numerico que está dentro do arquivo. Portanto já temos um contador para cada versão. Um dos parametros que o ADT recebe é o ${app.description.final} que na verdade é uma variável que está apontando para xml que descreve esta versão, tudo que temos que fazer é antes de rodar o ADT, alterar o token deste xml.

Veja abaixo a sequencia de como isto é feito no script que esta no projeto template.

1
2
3
4
5
6
7
8
9
10

<!– Atualiza o contador do arquivo que é refenciado pela propriedade ‘build.number.file’ –>
<buildnumber file=“${build.number.file}” /><!– Gera o codigo final da nova versão –>

<!– Gera o código da nova versão. Neste caso estamos concatenando o valor de ‘project.version’ ( default.properties )
com o novo código gerado pelo build.number
Ex. v1.1 ( v1. = project version ) ( 1 = build number )–>
<property value=“${project.version}${build.number}” name=“full.version” />

<!– atualiza o token version do description final –>
<replace value=“${full.version}” file=“${app.description.final}” token=“[version]“ />

Nestes 3 passos nós atualizamos o numero da versão do ambiente que esta sendo compilado, montamos o codigo final da versão ( neste caso V1, V2, V3 ) e em seguida alteramos o node <version /> do xml que descreve a aplicação de <version>[version]</version> para <version>v1</version>.

Na próxima vez que rodar o script o token será alterado novamente de <version>[version]</version> para <version>v2</version>. E assim sussesivamente.

Utilizar o Hudson para buildar o projeto com o script ANT

Apesar de ja estar utilizando o ANT para buildar o projeto e o update framework para verificar atualizações, não é muito interessante que o desenvolvedor tenha que ficar rodando manualmente o script ant, e sendo responsável por compilar o ambiente correto e etc. Para fazer este trabalho nós vamos utilizar o hudson.

Com o hudson você pode configurar um job que irá rodar o script ANT de maneira automatica. Além disso, o hudson pode ser integrado com o repositório de código ( git, subversion, cvs, etc ). Portanto após todos os commits da versão serem feitos, basta executar o job do hudson que ele ira baixar todas as alterações no código e em seguida executar o ANT para gerar a nova versão.

No script ANT o parâmetro que indica para qual ambiente estamos rodando é fornecido pelo Hudson, deste modo, para cada ambiente vamos criar um job no hudson.

Abaixo segue um screencast passo a passo de como criar um novo job no hudson ja integrado com o projeto template que esta no github e disponível para download.

Para aqueles que quiserem ver mais detalhes sobre o Hudson, segue o link oficial.

Segue o url para o pessoal que quiser dar uma olhada nos fontes ou até mesmo baixar o projeto/template com essas configuracões de ANT e etc.

http://github.com/thiagofelix/Air-Atualiza–o-Automatica

Set 14

Como conectar clientes usando RTMFP – Real-Time Media Flow Protocol

Escrito por DanielPedrinha em 1, 2.0, AR, Artigo, Artigos, as3, blog, C#, cliente, Diversos, english, exemplo, Exemplos, Flex, for, Geral, IE, Messaging, O, on, Red5, Ria’s Geral, RTM, RTMP, S+S, servidor, streaming, Tutorial, update, Vídeo @ 09 14th, 2010 | via http://www.flexbrasilia.com.br/ | Sem comentários

Translate to english. Update 07-10-2010: O nome do servidor Stratus foi atualizado para Cirrus, por isso os nomes foram alterados neste artigo. Em diversos artigos anteriores eu falei sobre o RTMP (Real-time Messaging Protocol) usando Red5 como servidor de Streaming de áudio e vídeo. Neste artigo vou falar do RTMFP (Ream-time Media Flow Protocol) da [...]

(Read more…)

Set 12

Trabalhando com Data usando Flex, AMFPHP e MySQL

Escrito por DanielPedrinha em 1, 2.0, AMF, amfphp, AR, Artigo, as3, blog, C#, Componente, Componentes, english, Exemplos, Flex, Flex AMFPHP, for, if, map, mysql, O, on, PHP, problema, programação, RIA, Ria’s Geral @ 09 12th, 2010 | via http://www.flexbrasilia.com.br/ | Sem comentários

Translate to English. Um problema comum é trabalhar com datas entre diferentes linguagens de programação, pois cada uma trata seu objeto do tipo Date de forma diferente. Neste artigo vou mostrar como faço quando trabalho com Flex, AMFPHP e MySQL. No artigo anterior Serializando objetos entre Flex e PHP usando AMFPHP onde mostrei como mapear [...]

(Read more…)

Set 12

Serializando Objetos entre Flex e PHP utilizando AMFPHP ( mapeando VOs / DTOs )

Escrito por DanielPedrinha em 1, 2.0, 6, AMF, amfphp, AR, Artigo, as3, blog, C#, english, exemplo, Exemplos, Flex, Geral, IE, map, O, padrão, PHP, processo, RIA, Ria’s Geral, S+S, Tutorial, UI, zendAMF @ 09 12th, 2010 | via http://www.flexbrasilia.com.br/ | Sem comentários

Translate to english Atendendo ? pedidos, segue outro artigo sobre como serializar objetos (mapear VOs ou DTOs) entre Flex e PHP usando AMFPHP. O processo é muito simples, o AMFPHP já faz tudo sozinho, mas há detalhes importantes no processo. Crie o diretório ‘vo’ dentro da pasta ‘services’ do teu AMFPHP. Por padrão, o AMFPHP [...]

Implementação

Veja também:

Veja também:

ACERCA

GOOGLE

Votação

AUTORES

PUBLICIDADE