Igor Musardo » Adobe Flex

Editor de Imagens em Adobe Flex

Igor Musardo — Sun, 01 May 2011 02:05:15 +0000

Recentemente Mirko Bordjoski postou em seu blog um editor de efeito de cores de imagens feito para Adobe Flex 4.5 utilizando o CMVC, segundo Mirko, uma customização do PureMVC.

Veja o editor de imagens.

Baixe o código fonte completo pra seus estudos.

Bons estudos…

Os 45 tutoriais de Adobe Flex mais procurados

Igor Musardo — Mon, 30 Aug 2010 12:30:19 +0000

Está procurando alguns tutoriais de Adobe Flex? O blog Design Your Way separou 45 tutoriais muito bacanas para Adobe Flex, eu separei os que eu achei mais interessantes e relevantes.

Aproveite e bons estudos!

01º Flex MP3 Player

02º XML Básico com Flex 3

03º Criando uma galeria 3D do Flickr com Flex e Awaya3D

04º Usando a classe TextRange

05º Construindo um ItemRenderer para TileList

06º Rotacionando a ViewStack em forma de Cubo

07º Drag Drop simples no Flex

08º Cursor customizado no Flex

09º Como fazer gráficos no Flex

10º Visualizador de imagens em miniaturas no Flex

11º Jogo da Velha em Flex com Degrafa

12º Formulários no Flex

13º Sistema de Login em Flex com PHP

14º Pegando informações de músicas do WebService da Amazon com o Adobe Flex

15º Instalando e usando o Google Maps no Flex

16º Galeria de imagens com o componente Accordion e XML no Flex

17º Interação entre Flex e Javascript

18º Múltiplos uploads com JQuery e Flex ou Flash

19º Desenvolvendo janelas em Flex ou Flash para o Adobe Photoshop

20º Criando um cliente Digg em Flex

21º Introdução ao Data Binding

22º Data Grid com XML

23º Usando Flex, PHP e Json para modificar dados no MySQL

24º Trabalhando com o Debugger no Adobe Flex Builder

25º Criando um relógio de contagem regressiva em Flex

26º Transmitindo dados entre Flex e PHP usando Json

27º Criando um leitor de Feeds (RSS) em Flex

28º Como criar um gráfico de Bolhas em Flex

29º Usando Item Renderes

30º Criando um formulário de email em Flex com PHP

31º Criando grandes listas dinâmicas em Flex

32º Encodificador assincrono de JPEG

33º Criando seu jogo de aventura no Adobe Flex

34º Mudando o identificador de seleção de uma Lista no Flex

35º Criando um player customizado do You Tube em Adobe Flex

36º Criando uma lista de contatos usando Flex e XML

37º Criando um album de fotos do Facebook em Flex

38º Modificando o estilo da linha selecionada na Data Grid

Decisões corretas através de dashboards dinâmicos em Flex e ASP.NET MVC

Igor Musardo — Tue, 03 Aug 2010 12:20:34 +0000

Este foi o título da palestra que ministrei no Flex Mania 2010 no dia 8 de Julho de 2010 à convite do meu chará Igor Costa.

Abordei esse tema pois o mesmo esta em destaque em grandes corporações e sei que vários desenvolvedores possuem dúvidas em como construir Dashboard, bem quais os tipos de Dashboard existentes. E como Flex é a grande vedete na construções de Dashboard, devido sua dinamicidade e beleza intrínseca, nada melhor do que mostrar na prática como construir um Dashboard em Flex integrado com ASP.NET MVC.

Mais de 250 pessoas estiveram online na palestra, o que gerou um bate-papo muito interessante ao final da palestra no momento de perguntas e respostas.

Se você não pode comparecer, veja agora a gravação da palestra que o Igor Costa disponibilizou no site do Flex Mania 2010.

Disponibilizei os slides da palestra no Slideshare.

Decisões corretas através de dashboards dinâmicos em flex e asp.net

View more presentations from Igor Musardo.

E os arquivos fontes que demonstrei durante a palestra estão disponíveis para download aqui.

Baixe e fique a vontade para estudar, perguntar, elogiar e/ou criticar!

Palestras presenciais

Igor Musardo — Tue, 20 Jul 2010 03:14:22 +0000

Salve, salve developers, andei bem sumido aqui do Blog, pois tenho concentrado minhas contribuições com a comunidade através do Twitter.

UTFPR – VII Semana Acadêmica de Informática

Bem, nesse período tive a oportunidade de palestrar em duas faculdades aqui em Curitiba, UTFPR, no dia 4 de maio de 2010 na VII Semana Acadêmica de Informática da UTFPR,

e Faculdades OPET, no dia 19 de maio de 2010 na Semana Acadêmica de Informática da OPET.

Nas duas oportunidades apresentei a plataforma de desenvolvimento de RIA da Adobe, inclundo algumas novidades do Flex 4 e Flash Builder 4. Ao final da palestra mostrei como é fácil a integração entre o Flex e o PHP, você não leu errado, eu mostrei mesmo a integração entre o Flex e PHP :-D.

Essa palestra é altamente recomendada para quem está chegando hoje ao mundo RIA e quer conhecer um pouco mais sobre as Rich Internet Application e ao novo Adobe Flex 4 e o Adobe Flash builder 4.

Os slides que utilizei nas palestras:

Desenvolvimento de Rich Internet Application com Flex 4 e Flash Builder 4

View more presentations from Igor Musardo.

A palestra na OPET, a minha esposa, Fernanda Musardo conseguiu filmar.

Maratona de treinamento On-Line sobre Adobe Flex

Igor Musardo — Thu, 04 Feb 2010 23:45:16 +0000

Olha só, 10 palestras sobre Adobe Flex com conteúdo excepcional e extremamente prático:

Corra, pois a maratona é agora dia 06/fev/2010.

Fazendo sua inscrição você, além de ajudar o Cotolengo, pois essa maratona é beneficiente, você concorrerá ao final do evento à um Magic Mouse da Apple (oferencimento do Fábio Vedovelli) e à um Adobe Flex Builder Pro (oferecimento do meu chará Igor Costa).

A inscrição tem um valor simbólico de R$ 30,00.

Além disso, todas as palestras serão gravadas e estarão disponíveis 15 dias após o evento para todas as pessoas que fizerem sua doação. Por isso, mesmo que você não possa estar on-line agora dia 06/fev/2010, não deixe de fazer sua doação, pois você fará o download de TODAS as palestras e poderá assistí-las quantas vezes quiser.

+ de 320 pessoas já se inscreveram nesta maratona, faça parte você também.

Confira abaixo quais os conteúdos que serão abordados na maratona.

Desenvolvimento Multi-touch com AIR 2.0

Nesta palestra o participante irá conhecer a API Multi-touch introduzida na versão 2.0 do Adobe Integrated Runtime, que traz grande facilidade para o desenvolvimento de aplicações explorando este recurso.

Público Alvo: Desenvolvedores, gerentes de projeto e entusiastas no desenvolvimento de soluções utilizando o AIR 2.0

Duração: 30 minutos.

Construa painéis administrativos em Flex integrados com ASP.NET MVC.

Você verá na prática como integrar o Flex com a nova abordagem MVC do ASP.NET, indo além do CRUD.

Público Alvo: Desenvolvedores Flex que utilizem ou querem utilizar o ASP.NET MVC como Back-End.

Duração: 50 minutos.

Swiz Framework: MVC Simples e Poderoso para projetos Flex/AIR

Essa palestra visa mostrar a brutal diferença entre seus “concorrentes” e entender melhor a “conceptual constraint” que levou os autores do Swiz Framework a desenvolverem uma solução simples e flexível para projetos Flex/AIR, em relação aos demais frameworks conhecidos. (Cainrgorm, PureMVC, Mate, etc). Pré requisito: Conhecer “Dependency Injection” (DI) e “Inverse of Control” (IoC).

Público Alvo: Desenvolvedores Flex.

Duração: 50 minutos.

Flex e VOIP: Adicione essa tecnologia em suas aplicações

Essa palestra tem por objetivo demonstrar a desenvolvedores Flex como implementar em suas aplicações funcionalidades de um discador VOIP, usando soluções open source.

Público Alvo: Desenvolvedores Flex.

Duração: 50 minutos.

Desktop com HTML, Javascript e Adobe AIR

Conheça um novo mundo de possibilidades e tecnologias com Javascript e HTML para desktop e descubra como Adobe Air se integra a este ambiente, utilizando como case o PomoDo.

Público Alvo: Desenvolvedores de qualquer linguagem.

Duração: 50 minutos.

Estudo de caso: User Experience em um RIA

Será debatido um estudo de caso onde implementamos um mecanismo de busca semântica através do design (!) A interface apenas pode ser viabilizada pela alta capacidade de componentização do Flex e porque entendemos o que o usuário precisava fazer com a interface.

Público Alvo: Desenvolvedores Flex e designers de todos os credos e cores.

Duração: 30 minutos.

Desmistificando o Cairngorm

O Cairngorm é considerado por muitos como um framework com uma curva de aprendizado elevada. A finalidade desta palestra é desvendar o Cairngorm utilizando uma abordagem diferenciada, com o objetivo de facilitar o aprendizado do mesmo.

Público Alvo: Desenvolvedores Flex.

Duração: 50 minutos.

Introdução ao Mate: a importância de um framework MVC para Flex

Muitos ainda não se convenceram da necessidade da utilização de um dos frameworks MVC (Model – View – Controller) presentes no mercado e esta palestra tem como objetivo mostrar a sua importância e indicar o framework escolhido pela RIA Labs.

Público Alvo: Desenvolvedores Flex.

Duração: 50 minutos.

Coloque uma interface Flex em seus projetos JEE

Entenda como funciona a integração Adobe Flex com todos os serializadores disponíveis no mercado (BlazeDs, LivecycleDs,WebOrb for java,Pimento,Red5) para integração com seu back-end Java e crie novas ferramentas com recursos ímpar para seu negócio.

Público Alvo: Desenvolvedores Java.

Duração: 50 minutos.

O Quarteto Fantástico: Flash 10.1, Flex 4, Flash Catalyst e Flash Builder

Como as principais novidades da Plataforma Flash poderão impactar o desenvolvimento de Rich Internet Applications.

Público Alvo: Pessoas interessadas no desenvolvimento de Rich Internet Applications.

Duração: 50 minutos.

Manifesto Flex For Kids

Igor Musardo — Fri, 15 Jan 2010 11:30:29 +0000

Desenho criado por uma criança da Cotolengo

Durante anos estivemos dedicados ao desenvolvimento de Aplicações Ricas. Durante anos estivemos dedicados a tecnologias como o Adobe Flex, BlazeDS, LiveCycle Data Services, Zend AMF, AMF PHP, Adobe Flash Professional, Flash Media Server, etc. Mas, principalmente, durante anos estivemos dedicados a compartilhar o nosso conhecimento com a comunidade. Na Flex Brasil , na FlexDev e em nossos blogs é provável que você já tenha encontrado algo que procura. E nunca pedimos nada em troca.

O que nos move não é nada material, mas sim a paixão pelo que fazemos e a convicção de que ao nos doar um pouco para a comunidade estamos ajudando e evoluindo conseqüentemente. Por estes mesmos motivos, estaremos todos reunidos dia 06 de fevereiro de 2010.

Temos muitas coisas que amamos para compartilhar com vocês. Porém, desta vez, queremos algo em troca. Algo que com certeza não lhe fará falta, mas que fará a diferença na vida das crianças do Cotolengo . Ganham vocês. Ganhamos nós. E, principalmente, ganham as crianças do Cololengo .

Assinam o Manifesto:
Beck Novaes , Carlos Eduardo, Daniel Lopes, Ebertom Consolim, Eric Cavalcanti, Fabio Vedovelli, Gabriela Perry, Igor Costa, Igor Musardo, Mario Junior e Vicente Maciel Junior.

Registre-se agora no Flex for Kids e ajude as crianças do Cotolengo . Porque alguém, já ajudou você um dia (e de quebra assista palestras que estão sendo preparadas com a mesma paixão de sempre).

Aprenda mais sobre Adobe Flex e ajude a quem precisa

Igor Musardo — Wed, 13 Jan 2010 15:50:31 +0000

O Flex for Kids é uma maratona de palestras on-line que será realizado no dia 06/02/2010 e contará com grandes nomes da comunidade Adobe Flex brasileira além deste que vos escreve.

Serão 10 palestras on-line ao vivo durante o dia inteiro, usando um ambiente de eventos multimídia onde os palestrantes ministrarão seus temas através de recursos de áudio, vídeo, slides e chat disponibilizado pela E-Genial.

Qualquer pessoa, empresa ou faculdade poderá participar do Flex for Kids, para isto basta fazer uma doação de um valor simbólico de R$ 30,00 para ter acesso as 10 palestras on-line e suas gravações que serão disponibilizadas 15 dias após o evento. Por isso não há desculpas para você não participar.

Todo dinheiro arrecadado será doado ao Cotolengo de Mato Grosso do Sul.

Garanta logo sua vaga e ajude a divulgar o evento para sua rede de contatos, assim como a Info Online fez.

Acesse o site do evento para maiores informações e inscrição: http://flexforkids.com

Flex Erro #1034: Não é possível converter DragManagerImpl em IDragManager

Igor Musardo — Tue, 05 Jan 2010 11:00:22 +0000

Dias atrás me deparei com o erro abaixo:

Esse erro ocorria sempre ao acessar dois módulos que tivessem DataGrid com eventos de clique. Acessando o primeiro módulo, tudo funcionava perfeitamente, porém ao acessar o segundo módulo e clicar em qualquer parte da DataGrid, o erro surgia.

Após várias pesquisas acabei encontrando duas soluções.

1ª Solução:

Mude o modo de linkagem do framework para Runtime Shared Library (RSL), disponível em:

Project Properties | Flex Build Path | Library Path | Framework linkage

Conforme na imagem abaixo:

2ª solução:

Mude o Application Domain do ModuleLoader para currentDomain.

var Mod:ModuleLoader = new ModuleLoader();
Mod.applicationDomain = ApplicationDomain.currentDomain;

Pronto, utilizando qualquer uma das soluções seu projeto agora funcionará perfeitamente.

Divirta-se.

Gráfico Cascata (Waterfall Chart aka Flying Bricks Chart) no Flex

Igor Musardo — Wed, 06 May 2009 04:15:26 +0000

Após um longo período sem artigos, volto a ativa com um bem interessante e bastante usual para quem desenvolve sistemas de apoio a decisão e sistemas de business intelligence.

O gráfico de cascata (waterfall, também conhecido como, flying bricks chart em inglês) é uma ferramenta que facilita a demonstração de parcelas de um valor. Ele é muito utilizado na apresentação da divisão da receita e exibição do que resta de lucro em DRE, da entrada de caixa ao saldo final em demonstrativos de Fluxo de Caixa, mas pode-se utilizá-lo em qualquer situação em que seja necessário mostrar a “quebra” de um número.

Neste artigo vou demonstrar como desenvolver um gráfico de cascata em Adobe Flex estendendo um ColumnChart de forma simples obtendo como resultado o exemplo abaixo.

Primeiro precisamos entender qual a estrutura do gráfico de cascata. Ele é um gráfico de colunas do tipo empilhado (stacked) com 6 séries conforme demonstrado na figura abaixo:

1 – Base, que será invisível;
2 – Vermelho Positivo, série da cor vermelha que será exibida acima do zero, ex. (-) Custos no gráfico acima;
3 – Verde Positivo, série da cor verde que será exibida acima do zero, ex. Resultado não Op.;
4 – Vermelho Negativo, série da cor vermelha que será exibida abaixo do zero, ex. (-) Despesas;
5 – Verde Negativo, série da cor verde que será exibida abaixo do zero, ex. Resultado não Op.;
6 – Saldo, série da cor azul, ex. Lajir.

No componente que criaremos apenas será necessário passar um DataProvider com as colunas: eixo, valor e isSaldo. Com base nos dados deste DataProvider o Gráfico Cascata criará todas as 6 séries necessárias, já com os valores calculados.

Veja como o componente é implementado abaixo.

package br.com.igormusardo.component.chart
{
	import mx.charts.*;
	import mx.charts.chartClasses.IAxis;
	import mx.charts.series.ColumnSeries;
	import mx.charts.series.ColumnSet;
	import mx.charts.series.items.*;
	import mx.collections.ArrayCollection;
	import mx.effects.easing.*;
	import mx.formatters.NumberFormatter;
	import mx.graphics.GradientEntry;
	import mx.graphics.LinearGradient;
	import mx.graphics.SolidColor;
	import mx.graphics.Stroke;
	import mx.utils.ObjectUtil;
 
	public class WaterfallChart extends ColumnChart
	{
		[Bindable]
		private var _calculateRange:Boolean;
 
		[Bindable]
		private var _backgroundColor:uint;
 
		[Bindable]
		private var _best:Number;
 
		[Bindable]
		private var _precision:Number;
 
		[Bindable]
		private var _decimalSeparator:String;
 
		[Bindable]
		private var _thousandsSeparator:String;
 
		private var dataProviderOriginal:ArrayCollection = new ArrayCollection();
		private var format:NumberFormatter = new NumberFormatter;		
		private var	columnBase:ColumnSeries = new ColumnSeries();
		private var	columnSaldo:ColumnSeries = new ColumnSeries();
		private var	columnVermelhoPositivo:ColumnSeries = new ColumnSeries();
		private var	columnVerdePositivo:ColumnSeries = new ColumnSeries();
		private var	columnVermelhoNegativo:ColumnSeries = new ColumnSeries();
		private var	columnVerdeNegativo:ColumnSeries = new ColumnSeries();
 
		public function WaterfallChart()
		{
			super();	
			calculateRange = true;
			backgroundColor = 0xFFFFFF;
			best = 1;
			precision = 0;
			decimalSeparator = ',';
			thousandsSeparator = '.';			
			createChart();
		}
 
		override protected function initializationComplete():void
		{
			changeStyles();
			super.initializationComplete()
		}
 
 
		//Propriedades 
		////////////////////////////////////////////////////////////////////////////////////////
		//calculateRange, quando Verdadeiro o componente calcula a diferença entre as séries, exibindo somente os valores que somaram ou reduziram de uma série para a outra.
		public function set calculateRange(value:Boolean):void
		{
			_calculateRange = value;
			changeDataProvider();	
		}
 
		public function get calculateRange():Boolean
		{
			return _calculateRange;	
		}
 
		public function set backgroundColor(value:uint):void
		{
			_backgroundColor = value;	
			changeStyles();	
		}
 
		public function get backgroundColor():uint
		{
			return _backgroundColor;	
		}
 
		//best, define qual é o melhor (1 melhor para cima, verde quando aumenta e vermelho quando diminui, 2 melhor para baixo, verde quando diminiui e vermelho quando aumente)
		public function set best(value:Number):void
		{
			_best = value;	
			changeDataProvider();	
		}
 
		public function get best():Number
		{
			return _best;	
		}
 
		//precision, define o número de casas decimais.
		public function set precision(value:Number):void
		{
			_precision = value;
			format.precision=_precision;
		    invalidateProperties();
		    invalidateDisplayList();   		
		}
 
		public function get precision():Number
		{
			return _precision;	
		}	
 
		//decimalSeparator, define qual o separador de decimal, padrão ,
		public function set decimalSeparator(value:String):void
		{
			_decimalSeparator = value;	
    		format.decimalSeparatorTo=_decimalSeparator;
		    invalidateProperties();
		    invalidateDisplayList();   		
		}
 
		public function get decimalSeparator():String
		{
			return _decimalSeparator;	
		}	
 
		//thousandsSeparator, define qual o separador de milhar, padrão .
		public function set thousandsSeparator(value:String):void
		{
			_thousandsSeparator = value;	
    		format.thousandsSeparatorTo=_thousandsSeparator;
		    invalidateProperties();
		    invalidateDisplayList();   		
		}
 
		public function get thousandsSeparator():String
		{
			return _thousandsSeparator;	
		}	
 
		private function createChart():void		
		{
			seriesFilters=[];
			dataTipMode="single";
			dataTipFunction=chartTipFunction;			
			maxLabelWidth=100;
 
			var columnSet:ColumnSet = new ColumnSet();
			var hAxis:CategoryAxis = new CategoryAxis()
			var vAxis:LinearAxis = new LinearAxis()
			var columnSerie:ColumnSeries = new ColumnSeries();
			var stroke:Stroke;
			var linearGradient:LinearGradient;
			var solidColor:SolidColor;
			var gradientEntry:GradientEntry;
			var gradArray:Array;
 
			vAxis.labelFunction = alteraLabelVertical;	
			verticalAxis = vAxis;
 
			hAxis.dataProvider = this.dataProvider;
			hAxis.categoryField = "eixo";
			hAxis.labelFunction = alteraLabelHorizontal;		
			horizontalAxis = hAxis;
 
			//Define o columnSet do gráfico
			columnSet.type = "stacked";
			columnSet.allowNegativeForStacked = true;
 
			/////////////////////////////////////////////////////////////////////////////////
			//Início da configuração da série vlrSaldo
			//Define a configuração da linha
			stroke = new Stroke();
			stroke.alpha = 0;
			stroke.weight = 0;
 
			//Início configuração Degradê de cores para a série vlrSaldo			
			linearGradient = new LinearGradient();
			linearGradient.angle = 0;
 
			gradientEntry = new GradientEntry()
			gradientEntry.color = 0x003ea5;
			gradientEntry.ratio = 0;
			gradientEntry.alpha = 1;
 
			gradArray = new Array();		
			gradArray.push(gradientEntry);
 
			gradientEntry = new GradientEntry()
			gradientEntry.color = 0x0060ff;
			gradientEntry.ratio = .5;
			gradientEntry.alpha = 1;
			gradArray.push(gradientEntry);
 
			gradientEntry = new GradientEntry()
			gradientEntry.color = 0x003ea5;
			gradientEntry.ratio = 1;
			gradientEntry.alpha = 1;						
			gradArray.push(gradientEntry);
 
			linearGradient.entries = gradArray;
			//Fim configuração Degradê de cores para a série vlrSaldo
 
			columnSaldo.yField = "vlrSaldo";
			columnSaldo.labelField = "vlrSaldo";
			columnSaldo.setStyle("stroke",stroke);
			columnSaldo.setStyle("fill",linearGradient);
			//Fim configuração da série vlrSaldo
 
			//Inclui a série vlrSaldo às séries do ColumnSet
			columnSet.series.push(columnSaldo);
			/////////////////////////////////////////////////////////////////////////////////
 
			/////////////////////////////////////////////////////////////////////////////////
			//Início da configuração da série vlrBase
 
			columnBase.yField = "vlrBase";
			columnBase.setStyle("stroke",stroke);
			//Fim configuração da série vlrSaldo
 
			//Inclui a série vlrBase às séries do ColumnSet
			columnSet.series.push(columnBase);
			/////////////////////////////////////////////////////////////////////////////////
 
			/////////////////////////////////////////////////////////////////////////////////
			//Início da configuração da série vlrVermelhoPositivo
			//Define a configuração da linha
			stroke = new Stroke();
			stroke.alpha = 0;
			stroke.weight = 0;
 
			//Início configuração Degradê de cores para a série vlrVermelhoPositivo			
			linearGradient = new LinearGradient();
			linearGradient.angle = 0;
 
			gradientEntry = new GradientEntry()
			gradientEntry.color = 0xa50000;
			gradientEntry.ratio = 0;
			gradientEntry.alpha = 1;
 
			gradArray = new Array();		
			gradArray.push(gradientEntry);
 
			gradientEntry = new GradientEntry()
			gradientEntry.color = 0xff0000;
			gradientEntry.ratio = .5;
			gradientEntry.alpha = 1;
			gradArray.push(gradientEntry);
 
			gradientEntry = new GradientEntry()
			gradientEntry.color = 0xa50000;
			gradientEntry.ratio = 1;
			gradientEntry.alpha = 1;						
			gradArray.push(gradientEntry);
 
			linearGradient.entries = gradArray;
			//Fim configuração Degradê de cores para a série vlrVermelhoPositivo
 
			columnVermelhoPositivo.yField = "vlrVermelhoPositivo";
			columnVermelhoPositivo.labelField = "vlrVermelhoPositivo";
			columnVermelhoPositivo.setStyle("stroke",stroke);
			columnVermelhoPositivo.setStyle("fill",linearGradient);
			//Fim configuração da série vlrSaldo
 
			//Inclui a série vlrVermelhoPositivo às séries do ColumnSet
			columnSet.series.push(columnVermelhoPositivo);
			/////////////////////////////////////////////////////////////////////////////////
 
			/////////////////////////////////////////////////////////////////////////////////
			//Início da configuração da série vlrVerdePositivo
			//Define a configuração da linha
			stroke = new Stroke();
			stroke.alpha = 0;
			stroke.weight = 0;
 
			//Início configuração Degradê de cores para a série vlrVerdePositivo			
			linearGradient = new LinearGradient();
			linearGradient.angle = 0;
 
			gradientEntry = new GradientEntry()
			gradientEntry.color = 0x00a500;
			gradientEntry.ratio = 0;
			gradientEntry.alpha = 1;
 
			gradArray = new Array();		
			gradArray.push(gradientEntry);
 
			gradientEntry = new GradientEntry()
			gradientEntry.color = 0x60ff00;
			gradientEntry.ratio = .5;
			gradientEntry.alpha = 1;
			gradArray.push(gradientEntry);
 
			gradientEntry = new GradientEntry()
			gradientEntry.color = 0x00a500;
			gradientEntry.ratio = 1;
			gradientEntry.alpha = 1;						
			gradArray.push(gradientEntry);
 
			linearGradient.entries = gradArray;
			//Fim configuração Degradê de cores para a série vlrVerdePositivo
 
			columnVerdePositivo.yField = "vlrVerdePositivo";
			columnVerdePositivo.labelField = "vlrVerdePositivo";
			columnVerdePositivo.setStyle("stroke",stroke);
			columnVerdePositivo.setStyle("fill",linearGradient);
			//Fim configuração da série vlrVerdePositivo
 
			//Inclui a série vlrVerdePositivo às séries do ColumnSet
			columnSet.series.push(columnVerdePositivo);
			/////////////////////////////////////////////////////////////////////////////////
 
			/////////////////////////////////////////////////////////////////////////////////
			//Início da configuração da série vlrVermelhoNegativo
			//Define a configuração da linha
			stroke = new Stroke();
			stroke.alpha = 0;
			stroke.weight = 0;
 
			//Início configuração Degradê de cores para a série vlrVermelhoNegativo			
			linearGradient = new LinearGradient();
			linearGradient.angle = 0;
 
			gradientEntry = new GradientEntry()
			gradientEntry.color = 0xa50000;
			gradientEntry.ratio = 0;
			gradientEntry.alpha = 1;
 
			gradArray = new Array();		
			gradArray.push(gradientEntry);
 
			gradientEntry = new GradientEntry()
			gradientEntry.color = 0xff0000;
			gradientEntry.ratio = .5;
			gradientEntry.alpha = 1;
			gradArray.push(gradientEntry);
 
			gradientEntry = new GradientEntry()
			gradientEntry.color = 0xa50000;
			gradientEntry.ratio = 1;
			gradientEntry.alpha = 1;						
			gradArray.push(gradientEntry);
 
			linearGradient.entries = gradArray;
			//Fim configuração Degradê de cores para a série vlrVermelhoNegativo
 
			columnVermelhoNegativo.yField = "vlrVermelhoNegativo";
			columnVermelhoNegativo.labelField = "vlrVermelhoNegativo";
			columnVermelhoNegativo.setStyle("stroke",stroke);
			columnVermelhoNegativo.setStyle("fill",linearGradient);
			//Fim configuração da série vlrVermelhoNegativo
 
			//Inclui a série vlrVermelhoNegativo às séries do ColumnSet
			columnSet.series.push(columnVermelhoNegativo);
			/////////////////////////////////////////////////////////////////////////////////
 
			/////////////////////////////////////////////////////////////////////////////////
			//Início da configuração da série vlrVerdeNegativo
			//Define a configuração da linha
			stroke = new Stroke();
			stroke.alpha = 0;
			stroke.weight = 0;
 
			//Início configuração Degradê de cores para a série vlrVerdeNegativo			
			linearGradient = new LinearGradient();
			linearGradient.angle = 0;
 
			gradientEntry = new GradientEntry()
			gradientEntry.color = 0x00a500;
			gradientEntry.ratio = 0;
			gradientEntry.alpha = 1;
 
			gradArray = new Array();		
			gradArray.push(gradientEntry);
 
			gradientEntry = new GradientEntry()
			gradientEntry.color = 0x60ff00;
			gradientEntry.ratio = .5;
			gradientEntry.alpha = 1;
			gradArray.push(gradientEntry);
 
			gradientEntry = new GradientEntry()
			gradientEntry.color = 0x00a500;
			gradientEntry.ratio = 1;
			gradientEntry.alpha = 1;						
			gradArray.push(gradientEntry);
 
			linearGradient.entries = gradArray;
			//Fim configuração Degradê de cores para a série vlrVerdeNegativo
 
			columnVerdeNegativo.yField = "vlrVerdeNegativo";
			columnVerdeNegativo.labelField = "vlrVerdeNegativo";
			columnVerdeNegativo.setStyle("stroke",stroke);
			columnVerdeNegativo.setStyle("fill",linearGradient);
			//Fim configuração da série vlrVerdeNegativo
 
			//Inclui a série vlrVerdeNegativo às séries do ColumnSet
			columnSet.series.push(columnVerdeNegativo);
 
			/////////////////////////////////////////////////////////////////////////////////
			setStyle("columnWidthRatio",0.9);
 
			series = [columnSet];
		}
 
		//Métodos formatação do gráfico
		////////////////////////////////////////////////////////////////////////////////////////
		//chartTipFunction, exibe o popup com os valores ao posicionar o mouse sobre a série.
		private function chartTipFunction(hitData:HitData):String
		{		
			return format.format(hitData.item.vlrValor);
		}
 
		private function alteraLabelHorizontal(item:Object, prevValue:Object, axis:CategoryAxis, categoryItem:Object):String
		{
			var retorno:String="";
			var tamanho:int=String(item).length;
 
			retorno=String(item)
 
			return retorno;
		}
 
		private function alteraLabelVertical(item:Object, prevValue:Object, axis:IAxis):String
		{				
			return format.format(item);
		}
 
		private function changeStyles():void
		{
			//Início configuração da cor de fundo do gráfico
			var bgi:GridLines = new GridLines();
			bgi.setStyle("horizontalStroke", new Stroke(_backgroundColor, 1));
			bgi.setStyle("horizontalFill", new SolidColor(_backgroundColor, 100));
			bgi.setStyle("horizontalAlternateFill", new SolidColor(_backgroundColor, 100));
			backgroundElements = [bgi]
			//Fim configuração da cor de fundo do gráfico	
 
			//Início configuração da cor da série Base
			var solidColor:SolidColor = new SolidColor();
			solidColor.alpha = 1;
			solidColor.color = _backgroundColor;
			columnBase.setStyle("fill",solidColor);
			//Fim configuração da cor da série Base
 
		    invalidateProperties();
		    invalidateDisplayList();
		}
 
 
		//Série base (invisível) do gráfico
		private function calculaSerieBase(vlrSaldoAnterior:Number,vlrValorCorrente:Number):Number
		{
			var retorno:Number;
			var vlrSaldoAtual:Number=vlrSaldoAnterior+vlrValorCorrente;
 
			if ((vlrSaldoAnterior>0 && vlrSaldoAtual<0)||(vlrSaldoAnterior<0 && vlrSaldoAtual>0))
			{
				retorno=0;
			}
			else
			{
				if (vlrSaldoAnterior>0 && vlrSaldoAtual>0)
				{
					retorno=vlrSaldoAnterior-calculaSerieDebitoPositivo(vlrSaldoAnterior,vlrValorCorrente);
				}
				else
				{
					if (vlrSaldoAnterior<0 && vlrSaldoAtual<0)
					{
						retorno=vlrSaldoAnterior+calculaSerieCreditoNegativo(vlrSaldoAnterior,vlrValorCorrente);
					}
					else
					{
						retorno=0;
					}		
				}
			}
 
			return retorno;
		}
 
		//Série verde valor positivo
		private function calculaSerieCreditoPositivo(vlrSaldoAnterior:Number, vlrValorCorrente:Number):Number
		{
			var retorno:Number;
 
			if (vlrValorCorrente<=0)
			{
				retorno=0;
			}
			else 
			{
				if (vlrSaldoAnterior<0)
				{
					if (vlrValorCorrente>-vlrSaldoAnterior)
					{
						retorno=vlrValorCorrente+vlrSaldoAnterior;
					}
					else
					{
						retorno=0;
					}
				}
				else
				{
					retorno=vlrValorCorrente;
				}
			}
			return retorno;
		}	
 
 
		//Série verde valor negativo
		private function calculaSerieCreditoNegativo(vlrSaldoAnterior:Number, vlrValorCorrente:Number):Number
		{
			var retorno:Number;
 
			if (vlrValorCorrente<=0)
			{
				retorno=0;
			}
			else 
			{
				if (vlrSaldoAnterior>=0)
				{
					retorno=0;
				}
				else
				{
					if (vlrValorCorrente>-vlrSaldoAnterior)
					{
						retorno=vlrSaldoAnterior;
					}
					else
					{
						retorno=-vlrValorCorrente;
					}
				}
			}
			return retorno;
		}	
 
		//Série vermelho valor positivo
		private function calculaSerieDebitoPositivo(vlrSaldoAnterior:Number, vlrValorCorrente:Number):Number
		{
			var retorno:Number;
 
			if (vlrValorCorrente>=0)
			{
				retorno=0;
			}
			else 
			{
				if (vlrSaldoAnterior<=0)
				{
					retorno=0;
				}
				else
				{
					if(vlrSaldoAnterior<=Math.abs(vlrValorCorrente))
					{
						retorno=vlrSaldoAnterior;
					}
					else
					{
						retorno=-vlrValorCorrente;
					}
				}
			}
			return retorno;
		}
 
 
		//Série vermelho valor negativo
		private function calculaSerieDebitoNegativo(vlrSaldoAnterior:Number, vlrValorCorrente:Number):Number
		{
			var retorno:Number;
 
			if (vlrValorCorrente>=0)
			{
				retorno=0;
			}
			else 
			{
				if (vlrSaldoAnterior>0)
				{
					if(Math.abs(vlrValorCorrente)<=vlrSaldoAnterior)
					{
						retorno=0;
					}
					else
					{
						retorno=vlrSaldoAnterior+vlrValorCorrente;
					}
				}
				else
				{
					retorno=vlrValorCorrente;
				}
			}
 
			return retorno;
		}				
 
		//Métodos Geração das séries
		////////////////////////////////////////////////////////////////////////////////////////
		override public function set dataProvider(value:Object):void
    	{
			if(value is ArrayCollection)
				dataProviderOriginal = value as ArrayCollection;
			else
				dataProviderOriginal = new ArrayCollection(value as Array);
			changeDataProvider();
     	}
 
     	private function changeDataProvider():void
     	{    		
     		if(dataProviderOriginal.length == 0)
     			return;
 
     		var value:Object = ObjectUtil.copy(dataProviderOriginal);
    		var dataProviderOriginalDP:Array = new Array;
    		var vlrValorCorrente:Number;
    		var vlrSaldoAnterior:Number;
 
    		//Verifica se o array é válido
    		if(value[0].eixo==null || value[0].valor==null || value[0].isSaldo==null)
    		{
    			throw new Error('Array inválido, deve possuir os campos: eixo:String, valor:Number e isSaldo:Boolean');
    			return;
    		}
 
    		format.useNegativeSign='-';
    		format.useThousandsSeparator=true;
    		format.rounding="nearest";	
 
			if(calculateRange && value != null)
			{
				for(var index:int = value.length-1; index >= 0; index--)
				{
					if(value[index].isSaldo != true)			
						if(index > 0)
							value[index].valor = value[index].valor - value[index-1].valor;
					if(index==value.length-1 && value[index].isSaldo == true)
					{
						value.addItem(ObjectUtil.copy(value[index]));
						value[index].isSaldo = false;
					}					
				}
			}
 
    		//Percorre o array de dataProviderOriginal, montando as séries do gráfico
			for each (var Obj:Object in value)
			{
				if (Obj.isSaldo==true)
					vlrSaldoAnterior=0;
 
				vlrValorCorrente=Obj.valor;
 
				dataProviderOriginalDP.push({
							eixo:Obj.eixo,
							vlrSaldo:(Obj.isSaldo==true?vlrValorCorrente:0), //Se for saldo PLOTA esta série
							vlrBase:(Obj.isSaldo==true?0: //Se for saldo NÃO plota esta série
														calculaSerieBase(vlrSaldoAnterior,vlrValorCorrente)),
							vlrVermelhoPositivo:(Obj.isSaldo==true?0 //Se for saldo NÃO plota esta série
																	:(_best==2? //Se for melhor pra baixo inverte a cor do melhor pra cima
																				calculaSerieCreditoPositivo(vlrSaldoAnterior,vlrValorCorrente)
																				:calculaSerieDebitoPositivo(vlrSaldoAnterior,vlrValorCorrente))),
							vlrVerdePositivo:(Obj.isSaldo==true?0 //Se for saldo NÃO plota esta série
																	:(_best==2? //Se for melhor pra baixo inverte a cor do melhor pra cima
																				calculaSerieDebitoPositivo(vlrSaldoAnterior,vlrValorCorrente)
																				:calculaSerieCreditoPositivo(vlrSaldoAnterior,vlrValorCorrente))),
							vlrVermelhoNegativo:(Obj.isSaldo==true?0 //Se for saldo NÃO plota esta série
																	:(_best==2? //Se for melhor pra baixo inverte a cor do melhor pra cima
																				calculaSerieCreditoNegativo(vlrSaldoAnterior,vlrValorCorrente)
																				:calculaSerieDebitoNegativo(vlrSaldoAnterior,vlrValorCorrente))),
							vlrVerdeNegativo:(Obj.isSaldo==true?0 //Se for saldo NÃO plota esta série
																:(_best==2? //Se for melhor pra baixo inverte a cor do melhor pra cima
																			calculaSerieDebitoNegativo(vlrSaldoAnterior,vlrValorCorrente)
																			:calculaSerieCreditoNegativo(vlrSaldoAnterior,vlrValorCorrente))),
							vlrValor:vlrValorCorrente
						});
 
				vlrSaldoAnterior+=vlrValorCorrente;
			}
 
    		super.dataProvider = dataProviderOriginalDP;
		    invalidateProperties();
		    invalidateDisplayList();
     	}
 
	}
}

Para utilizar o novo componente, utilize o código:

"1.0" encoding="utf-8"?>
 xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="br.com.igormusardo.component.chart.*" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]">
	"wfc" top="10" left="10" right="10" bottom="10" showDataTips="true" calculateRange="false" best="1">
		>
			>
				 eixo="ROB" valor="12850" isSaldo="true"/>
				 eixo="(-) Deduções" valor="-1500" isSaldo="false"/>
				 eixo="ROL" valor="11350" isSaldo="true"/>
				 eixo="(-) Custos" valor="-8200" isSaldo="false"/>
				 eixo="Lucro Bruto" valor="3150" isSaldo="true"/>
				 eixo="(-) Desp. Op." valor="-3150" isSaldo="false"/>
				 eixo="(-) Desp. Fi." valor="-1200" isSaldo="false"/>
				 eixo="Res. Não Op. " valor="3500" isSaldo="false"/>
				 eixo="Lajir" valor="2300" isSaldo="true"/>
			>
		>
	>
>

O resultado obtido é o demonstrado abaixo.

Se quiser fazer teste com o comportamento do gráfico teste-o logo abaixo…

Se preferir, faça o download do gráfico cascata já compilado em SWC. Download Gráfico Cascata.

Divirta-se…

Posters dos diagramas de classes ActionScript 3 e Adobe Flex Framework

Igor Musardo — Tue, 07 Apr 2009 10:15:52 +0000

Faça o download dos posters completos do Adobe ActionScript 3, Adobe Flex Framework 3 Classes de Núlceo, Classes Adicionais e Classes Avançadas.

Tudo isso em um único PDF.

Download

Adobe dá Flex Builder 3 para programadores desempregados

Igor Musardo — Sat, 04 Apr 2009 21:16:27 +0000

É isso mesmo. Se você é um programador Flex e está desempregado atualmente, faça o seu cadastro no site https://freeriatools.adobe.com/learnflex/ e em no máximo duas semanas a Adobe te enviará a resposta por email sobre sua elegibilidade no programa junto com o número de série caso você esteja qualificado.

No mesmo embalo a Safari Books Online está oferecendo 60 dias de acesso a coleção de livros de Adobe Flex 3 e técnicas de desenvolvimento RIA, faça o seu cadastro em https://ssl.safaribooksonline.com/tryitfree.

Esta coleção inclui títulos oficiais da Adobe: Adobe Developer Library e Adobe Press.

Não perca esta oportunidade.

Está pensando em tirar certificação Adobe Flex / Air?

Igor Musardo — Fri, 27 Mar 2009 13:08:40 +0000

Então não perca tempo, faça o download do Attest 1.5. Software desenvolvido em AIR cujo o objetivo é auxiliar os desenvolvedores Flex / Air que estão estudando para a prova de certificação.

O Attest 1.5 emula a prova de certificação focando nos tópicos relevantes do exame. Os testes possuem 50 questões com 60 minutos para responder. Quando você conclui o teste, o Attest mostra os % de acerto em cada área, sendo possível salvar os resultados para consultar novamente depois ou até mesmo fazer o acompanhamento da evolução do estudo.

Quem deu essa dica originalmente foi Eberton Consolim em seu blog.

Bons estudos.

Utilize o botão direito do mouse em suas aplicações Adobe Flex

Igor Musardo — Wed, 18 Mar 2009 14:48:08 +0000

O Mario Junior, desenvolveu uma aplicação exemplo de como utilizar o botão direito em suas aplicações Adobe Flex, acesse o exemplo.

Upload utilizando Adobe Flex e ASP.NET

Igor Musardo — Fri, 20 Feb 2009 13:56:14 +0000

Em algumas aplicações que construímos é essencial permitir ao usuário fazer o UPLOAD de arquivos.

Neste artigo vou demonstrar como construir um componente Button com a funcionalidade de fazer o upload no Adobe Flex e como preparar o ASP.NET para salvar o arquivo no servidor.

Primeiro criaremos o componente uploadButton estendendo a classe Button, conforme o código abaixo.

package br.com.igormusardo.component
{
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.events.ProgressEvent;
	import flash.net.FileReference;
	import flash.net.URLRequest;
	import flash.net.URLRequestMethod;
 
	import mx.containers.TitleWindow;
	import mx.controls.Button;
	import mx.controls.ProgressBar;
	import mx.core.Application;
	import mx.managers.PopUpManager;
 
	public class uploadButton extends Button
	{
		/**
		* Define qual o arquivo .NET será chamado para realizar o upload físico do arquivo
		*/
		private const UPLOAD_URL:String = "uploadFile.ashx";
 
		private var fr:FileReference;
		private var pb:ProgressBar = new ProgressBar();
		private var tw:TitleWindow;
 
		/**
		* Inicializa o FileReference e adiciona os EventListeners 
		*/
		public function uploadButton():void {
		    fr = new FileReference();
		    fr.addEventListener(Event.SELECT, selectHandler);
		    fr.addEventListener(Event.OPEN, openHandler);
		    fr.addEventListener(ProgressEvent.PROGRESS, progressHandler);
		    fr.addEventListener(Event.COMPLETE, completeHandler);
		}
 
		/**
		* Prepara o label da barra de progressão para informar o % de envio do arquivo
		*/
		private function openHandler(event:Event):void {
		    pb.label = "Uploading %3%%";
		}
 
		/**
		* Atualiza o percentual concluído.
		*/
		private function progressHandler(event:ProgressEvent):void {
		    pb.setProgress(event.bytesLoaded, event.bytesTotal);
		}
 
		/**
		 * Após o upload completo, é alterado o label da barra de progressão, informando ao usuário o fim da operação 
		 */
		private function completeHandler(event:Event):void {
		    pb.label = "Upload Complete";
		    PopUpManager.removePopUp(tw);
		}
 
		/**
		 * Após o arquivo selecionado o upload é executado. 
		 */
		private function selectHandler(event:Event):void {
		    var request:URLRequest = new URLRequest();
		    request.url = UPLOAD_URL;
		    request.method = URLRequestMethod.POST;
		    openWindow()
		    fr.upload(request);
		}
 
		/**
		 * Abre popUp com a progressBar. 
		 */
		private function openWindow():void{
			tw = new TitleWindow();
			tw.title = "Uploading File";
			tw.width= 250;
			tw.height= 80;
			pb.percentHeight = 100;
			pb.percentWidth = 100;
			tw.addChild(pb); 
			PopUpManager.addPopUp(tw, this, true);
			tw.x = (Application.application.width - tw.width) / 2; 
			tw.y = (Application.application.height - tw.height) / 2;
		}		
 
		/**
		* Abre a janela para escolher o arquivo a ser feito o upload.
		*/					
		override protected function clickHandler(event:MouseEvent):void {
			fr.browse();
        }
	}
}

O componente funciona da seguinte forma: Ao clicar sobre o botão, abrirá a janela para escolher qual arquivo será carregado para o servidor. Após escolhido o arquivo e clicado em Abrir, o Adobe Flex enviará o arquivo via POST para o ASP.NET, e o mesmo gravará o arquivo no disco do servidor.

Ainda no Adobe Flex, é preciso colocar o botão na tela, para tanto utilize o código abaixo:

"1.0" encoding="utf-8"?>
 xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:im="br.com.igormusardo.component.*">
	 x="10" y="10" id="btUp" label="Upload Arquivo"/>
>

Agora que encerramos a programação no Adobe Flex, precisamos ir para o .NET. Com Visual Studio aberto crie um novo Website, neste Website crie um arquivo do tipo Manipulador Genérico chamado de uploadFile.ashx, como na figura.

No arquivo uploadFile.ashx copie o código abaixo.

<%@ WebHandler Language="C#" Class="uploadFile" %>
 
using System.IO;
using System.Web;
using System.Web.Configuration;
 
public class uploadFile : IHttpHandler
{
    public void ProcessRequest(HttpContext _context)
    {
        string uploadDir = HttpContext.Current.Server.MapPath("~/upload/");
 
        if (_context.Request.Files.Count == 0)
        {
            _context.Response.Write("ErrorNo files selected");
            return;
        }
 
        foreach (string fileKey in _context.Request.Files)
        {
            HttpPostedFile file = _context.Request.Files[fileKey];
            file.SaveAs(Path.Combine(uploadDir, file.FileName));
        }
 
        _context.Response.Write("SuccessUpload completed");
 
    }
 
    public bool IsReusable
    {
        get { return true; }
    }
}

Crie a pasta upload, onde os arquivos serão salvos pelo ASP.NET, dentro do Website e conceda permissões de leitura e escrita para o usuário IUSR_<>.

Compile sua aplicação do Adobe Flex e copie os arquivos compilados para a pasta do Website ASP.NET.

Pronto!

Execute o Website e abra a página FlexUpload.html e faça o upload dos arquivos quiser.

Faça o download do código-fonte.

Divirta-se!

Blist: banco de dados online, gratuito e feito em Adobe Flex

Igor Musardo — Tue, 17 Feb 2009 09:24:08 +0000

Atualizado em 13/01/2010

Infelizmente o projeto Blist foi retirado do ar, mas manterei o post no ar para servir de inspiração para outros desenvolvedores.

Blist é um banco de dados online e gratuito desenvolvido com o Adobe Flex que permite que você crie Blists – abreviação de “web lists” – bancos de dados simples que podem armazenar desde cadastro de clientes a uma coleção de discos.

A visualização básica do aplicativo lembra uma tabela do Microsoft Access, sendo possível o usuário criar uma Blist com base na importação de um arquivo do Microsoft Excel.

O que deixa o programa ainda mais interessante é a sua capacidade de rede social: você pode incorporar o Blist a um blog ou página do Facebook.

Eu particularmente achei fantástica a ferramenta.

Divirta-se.

Vários exemplos de gráficos em Flex

Igor Musardo — Sat, 14 Feb 2009 02:11:30 +0000

Através da lista do Flex-Brasil tomei conhecimento de um link muito interessante com vários exemplos de gráficos em Adobe Flex.

Confira aqui os gráficos!

Divirta-se!

Construindo aplicações ricas de internet com Adobe Flex 3 e ASP.NET

Igor Musardo — Mon, 26 Jan 2009 08:41:13 +0000

Utilizarei o Visual Studio 2008 com o SQL Server 2005 e o banco de dados Northwind, porém os mesmos passos podem ser seguidos no Visual Studio 2005 com o SQL Server 2000.

Crie um novo projeto Web no Visual Studio, logo em seguida clique com o botão direito sobre a solução e escolha Add / New Item.

Na janela que se abrirá, selecione o Item DataSet e atribua o nome DsTerritorio.

Com o DataSet criado, clique com o botão direito dentro da janela do DataSet, escolha Add / TableAdapter, abrirá uma janela solicitando qual conexão com o banco de dados será utilizado para a construção do TableAdapter, crie a conexão com o SQL Server e salve com o nome NorthwindConn e clique em Next.

Na próxima janela selecione como o TableAdapter acessará o banco de dados, as opções possíveis são: SQL statements, criar nova Stored Procedure ou utilizar uma Stored Procedure já existente no banco de dados.

Deixe a opção Use SQL statements marcada e clique em Next.

A próxima janela é onde se insere o código SQL para o retorno dos dados, porém você pode utilizar o Query Builder, que é a ferramenta visual para construção de instruções SQL, portanto clique no botão Query Builder.

Após clicar no botão Query Builder, aparecerão duas janelas, a janela do próprio Query Builder e a janela de Add Table, a segunda janela já com as tabelas existentes no banco de dados.

Procure e selecione a tabela Region, em seguida, clique em Add. A tabela Region aparecerá no Query Builder.

Clique em Close, em seguida, selecione as duas colunas da tabela Region (RegionID e RegionDescription). Agora clique em Execute Query.

Se o resultado do Execute Query for igual à figura acima, clique em Ok. A próxima janela solicitará nomes para os métodos de Fill e Return que por padrão são Fill e GetData respectivamente.

Para a tabela Region, deixe os nomes sugeridos e clique em Next. A próxima janela exibirá o sumário da criação do TableAdapter. Clique em Finish.

Agora já é possível visualizar o TableAdapter dentro do DataSet dsTerritorio.

Ainda dentro do DataSet dsTerritorio, crie outro TableAdapter. Novamente, clique com o botão direito dentro do DataSet, escolha Add / TableAdapter, escolha a conexão com a base de dados, também escolha Use SQL statements.

Na janela do Query Builder, adicione a tabela Territories, selecione todas as colunas. Na linha RegionID, insira o parâmetro @RegionID na coluna Filter. O parâmetro será responsável por aplicar o filtro de qual região o SQL retornará os territórios.

Na janela de definições dos métodos, acrescente a expressão ByRegionID, após Fill e GetData. Dessa maneira apenas pelo nome do método é possível saber que um parâmetro chamado RegionID é esperado.

Agora que concluiu a criação do DataSet dsTerritorio, crie o DataSet dsVendedor, e dentro dele crie um TableAdapter com o SQL abaixo.

SELECT 	EmployeeTerritories.EmployeeID,
	Employees.FirstName + ' ' + Employees.LastName AS FullName,
	EmployeeTerritories.TerritoryID
FROM Employees INNER JOIN EmployeeTerritories
	ON Employees.EmployeeID = EmployeeTerritories.EmployeeID
WHERE (EmployeeTerritories.TerritoryID = @TerritoryID)

Acrescente ByTerritoryID na definição dos métodos Fill e GetData.

Após clicar em Finish, o TableAdapter criado estará com os nomes DataTable1 e DataTable1TableAdapter, altere-os para Employee e EmployeeTableAdapter.

Crie um novo DataSet chamado dsCliente, e também crie um novo TableAdapter com o código abaixo.

SELECT  Customers.CustomerID, Customers.CompanyName, CustomerEmployee.EmployeeID
FROM (SELECT CustomerID, EmployeeID
	FROM Orders
	GROUP BY CustomerID, EmployeeID) AS CustomerEmployee INNER JOIN
	Customers ON CustomerEmployee.CustomerID = Customers.CustomerID
WHERE (CustomerEmployee.EmployeeID = @EmployeeID)

Para os nomes dos métodos Fill e GetDate, não esqueça de adicionar ByEmployeeID em ambos.

Como no TableAdapter de vendedores, os nomes deste TableAdapter também não estão corretos, altere-os para Customers e CustomersTableAdapter respectivamente.

Para concluir a construção dos DataSets, crie mais um chamado dsPedido e também crie um novo TableAdapter com o código abaixo.

SELECT OrderID, CustomerIR, EmployeeID, OrderDate, ShippedDate,
	ShipName, ShipAddress, ShipCity, Shipcountry
FROM Orders
WHERE (CustormerID = @CustomerID) AND
	(EmployeeID = @EmployeeID)

Acrescente ByCustomerIDEmployeeID aos métodos Fill e GetData e clique em Finalizar.

Agora crie o último TableAdapter chamado OrderDetails conforme a figura abaixo.

Após a criação de todos os DataSets (Território, Vendedor, Cliente e Pedido) o projeto deve estar conforme a figura abaixo.

Copie os seguintes arquivos do diretório de instalação do WebOrb (por padrão em c:\inetpub\wwwroot\weborb30) para o diretório do projeto .NET.

/weborb.config
/bin/weborb.dll
/WEB-INF

Adicione o código XML abaixo ao web.config do projeto .NET.

>
 >
   >
      verb="*" path="weborb.aspx" type="Weborb.ORBHttpHandler"/>
      verb="*" path="codegen.aspx" type= "Weborb.Management.CodeGen.CodegeneratorHttpHandler"/>
   >
 >
>

É preciso referenciar o weborb.dll ao projeto, para isso no Solution Explorer do Visual Studio, clique duas vezes sobre a opção My Project, em seguida clique em References e depois em Add / References…

Clique na aba Browse, localize o diretório Bin do projeto, selecione o arquivo weborb.dll e clique em OK, salve o projeto e feche a janela My Project.

Clique com o botão direito sobre a solução e escolha Add / New Item, porém escolha Class e dê o nome de csFlex.vb.

Nesta classe serão criados os métodos de chamada e retorno dos DataSets e TableAdapters criados anteriormente, através desses métodos é que a comunicação entre o .NET e o Flex ocorrerá.

Insira o código abaixo ao arquivo csFlex.vb

Imports Weborb.Service
 
Public Class csFlex
 
    Public Function getRegion() As DataTable
        Return New dsTerritorioTableAdapters.RegionTableAdapter().GetData()
    End Function
 
    Public Function getTerritories(ByVal RegionID As String) As DataTable
        Return New dsTerritorioTableAdapters.TerritoriesTableAdapter().GetDataByRegionID(RegionID)
    End Function
 
    Public Function getEmployee(ByVal TerritoryID As String) As DataTable
        Return New dsVendedorTableAdapters.EmployeeTableAdapter().GetDataByTerritoryID(TerritoryID
    End Function
 
    Public Function getCustomers(ByVal EmployeeID As String) As DataTable
        Return New dsClienteTableAdapters.CustomersTableAdapter().GetDataByEmployeeID(EmployeeID)
    End Function
 
    Public Function getOrders(ByVal CustomerID As String, ByVal EmployeeID As String) As DataTable
        Return New dsPedidoTableAdapters.OrdersTableAdapter().GetDataByCustomerIDEmployeeID(CustomerID, EmployeeID)
    End Function
 
    Public Function getOrderDetails(ByVal OrderID As String) As DataTable
        Return New dsPedidoTableAdapters.OrderDetailsTableAdapter().GetDataByOrderID(OrderID)
    End Function
 
End Class

Salve e feche o arquivo csFlex, agora compile o projeto. Caso o Visual Studio sinalize algum erro, volte e execute os passos novamente.

Antes de criar a interface no Adobe Flex, crie a aplicação Web no Internet Information Services (IIS) com o nome do projeto, verifique se ao acessar o endereço através do navegador uma página em branco é exibida.

Agora já com a aplicação web configurada no IIS, abra o Adobe Flex Builder 3, adicione um novo projeto (File / New / Flex Project).

Agora defina o nome do Projeto, se a opção Use default location estiver marcada, desmarque-a e localize o endereço do projeto .NET e dentro da pasta do projeto crie uma nova pasta chamada FlexSrc. O Project location do Flex deve ficar como a figura abaixo. A opção de Application type deixe marcado Web Application, e em Server technology selecione ASP.NET. Clique em Next.

Na próxima janela, na opção Server selecione Use Internet Information Services (IIS), em Web application root informe o diretório raiz da aplicação web definida no IIS e no campo Web application URL informe o endereço da aplicação no IIS. Após clicar no botão Validate Configuration, na parte superior da janela o Flex Builder deve ser informar: “The web application root and URL are valid”, caso apareça outra mensagem, os endereços informados não estão corretos, corrija antes de prosseguir.

Na mesma janela, um pouco abaixo está definida a pasta bin-debug como local a serem salvos os arquivos Flex compilados, deixe o nome que o Builder sugeriu e clique Next.

Na última janela de configuração do projeto Flex, é possível definir qual a pasta onde o Flex Builder salvará os arquivos fontes, bem como qual o nome do primeiro arquivo do projeto a ser criado.

Deixe os campos preenchidos como o Builder sugeriu e clique em Finish. Após alguns segundos o Adobe Flex Builder 3 exibirá o arquivo ArtigoFlex.mxml pronto para o início da construção da interface da aplicação.

Porém antes começar a codificar é necessário incluir um argumento de compilação ao projeto, pois sem esse argumento o Flex não conseguirá acessar os métodos construídos na classe csFlex. Para incluir o argumento, clique com o botão direito sobre o nome do projeto no Flex Navigator e em seguida clique em Properties. Com a janela de propriedades aberta, clique sobre a opção Flex Compiler, e insira o argumento após o argumento –locale en_US

-services c:\Inetpub\wwwroot\weborb30\web-inf\flex\services-config.xml

Após inserir o argumento services, clique em OK.

Agora com o projeto corretamente configurado e pronto para comunicar com o .NET é possível iniciar a construção da interface, para tanto crie um painel, entre as tags , com o título Painel de Vendas, esse painel terá um tamanho ajustável conforme as dimensões do navegador do cliente, para isso configure as propriedades left, right, top e bottom, todos com o valor 10.

 layout="absolute" left="10" right="10" top="10" bottom="10" title="Painel de Vendas">
>

É possível verificar como o projeto está ficando, bastar clicar no Play.

Dentro do painel, crie um canvas na cor cinza.

 height="42" left="0" top="0" right="0" backgroundColor="#F3F3F3" borderStyle="none" borderThickness="1" borderColor="#C2BEBE">
 
>

Dentro do canvas coloque os labels e comboboxs que serão utilizados para selecionar região, território, vendedor e cliente, coloque também dentro do canvas o botão consultar.

 y="12" text="Região" horizontalCenter="-348"/>
 y="10" id="cbRegion" labelField="RegionDescription" width="89" horizontalCenter="-274">>
 y="12" text="Território" horizontalCenter="-194"/>
 y="10" id="cbTerritory" labelField="TerritoryDescription" width="89" horizontalCenter="-114">>
 y="12" text="Vendedor" horizontalCenter="-32"/>
 y="10" id="cbEmployee" labelField="FullName" width="89" horizontalCenter="49">>
 y="12" text="Cliente" horizontalCenter="124"/>
 y="10" id="cbCustomer" labelField="CompanyName" width="89" horizontalCenter="198">>
 y="10" label="Consultar" width="119" horizontalCenter="310" id="btConsultar"/>

A propriedade horizontalCenter define qual a distância em pixel que um objeto está do centro da página, valores negativos representam objetos a esquerda do centro da tela e valores positivos representam objetos a direita, os valores definidos garantem que os objetos estarão sempre centralizados.

labelField é a propriedade que define qual o campo que será exibido como label do combobox. O Adobe Flex trabalha de maneira diferente do .NET quando o assunto é combobox ou dropdownlist, pois no .NET é possível definir apenas dois valores ao dropdownlist, o datatextfield e o datavalueFfeld, já no Adobe Flex só se define qual será o valor de exibição do combobox, labelField, pois cada linha de opção do combobox é um objeto com propriedades. Essas propriedades são as colunas que retornaram do banco de dados, logo você não tem acesso a somente duas colunas como dropdownlist, você tem acesso a todas as colunas que retornaram do banco de dados.

A propriedade Y define qual a distância que o objeto tem do topo do componente ao qual ele está pertencendo, neste caso, y=”12” diz ao Flex que o label está a 12 pixel do topo do canvas.

Após o canvas inclua um datagrid onde serão exibidos os pedidos resultantes da consulta ao banco de dados.

 id="dgPedido" right="10" left="10" top="55" bottom="10">
>
	 headerText="Detalhes" width="85"/>
	 headerText="Data Pedido" dataField="OrderDate"/>
	 headerText="Data Entrega" dataField="ShippedDate"/>
	 headerText="Entregue para" dataField="ShipName"/>
	 headerText="Endereço" dataField="ShipAdress"/>
	 headerText="Cidade" dataField="ShipCity"/>
	 headerText="País" dataField="ShipCountry"/>
>
>

Para fazer a comunicação entre a interface Flex e a aplicação server-side .NET utilize o componente RemoteObject do Adobe Flex 3.

 id="roNet" destination="GenericDestination"
	source="ArtigoFlex.csFlex" showBusyCursor="true"
	fault="faultHandler(event)" >
 
	 name="getRegion" result="gotRegion(event)" />
	 name="getTerritories" result="gotTerritories(event)" />
	 name="getEmployee" result="gotEmployee(event)" />
	 name="getCustomers" result="gotCustomers(event)" />
	 name="getOrders" result="gotOrders(event)" />
	 name="getOrderDetails" result="gotOrderDetails(event)" />
 
>

A propriedade destination deve sempre ser “GenericDestination” para a comunicação através do weborb, a propriedade source deve ser preenchida com o nome do projeto .NET e a classe que será acessada, então neste caso será “ArtigoFlex.csFlex”.

A propriedade showBusyCursor seta se será exibido ou não o relógio como cursor do mouse enquanto alguma requisição ao .NET estiver sendo feita. E finalmente, fault define qual função será disparada caso algum erro ocorra durante alguma requisição do .NET.

Os métodos (

A propriedade result define qual função será disparada após o retorno da requisição ao .NET.

É necessário agora construir as funções, faultHandler, gotRegion, gotTerritories, gotEmployee, gotCustomers, gotOrders e gotOrderDetails. As funções são escritas na linguagem Action Script 3.0

<mx:Script>
	[CDATA[
		import mx.rpc.events.ResultEvent;
		import mx.controls.Alert;
		import mx.rpc.events.FaultEvent;
	]]>
mx:Script>

Nesta parte do código além do bloco das tags de inicio e fim de script, também estão declaradas as importações das bibliotecas ResultEvent, Alert e FaultEvent que serão utilizadas logo mais.

Agora crie a função faultHandler

private function faultHandler(event:FaultEvent):void
{
	Alert.show(event.fault.faultString, "Erro");
}

A função faultHandler recebe um parâmetro do tipo FaultEvent que será exibido para o usuário através do Alert.show quando algum erro ocorrer durante a requisição ao .NET.

Agora crie os métodos de preenchimento dos valores do combobox região.

private function bindRegion():void
{
	roNet.getRegion();
}
 
private function gotRegion(event:ResultEvent):void
{
	cbRegion.dataProvider = event.result;
	cbRegion.selectedIndex = 0;
	bindTerritories();
}

No código acima foram criadas duas funções, bindRegion e gotRegion. A função bindRegion chama o método getRegion do remote object roNet.

Após o retorno da requisição ao método roNet.getRegion, a função gotRegion é disparada recebendo um parâmetro do tipo ResultEvent que contém o retorno do método getRegion, o retorno é associado como dataProvider do combobox cbRegion, em seguida é selecionado o índice zero dos dados retornados. Após a seleção do índice, a função bindTerritories() é disparada.

private function bindTerritories():void
{
	roNet.getTerritories(cbRegion.selectedItem.RegionID);
}
 
private function gotTerritories(event:ResultEvent):void
{
	cbTerritory.dataProvider = event.result;
	cbTerritory.selectedIndex = 0;
	bindEmployee();
}

Assim como a função bindRegion, bindTerritories chama um método do remote object roNet, porém agora o método chamado é o getTerritories, esse método espera como parâmetro o código da região, por isso o parâmetro informado é o cbRegion.selectedItem.RegionID. RegionID é uma propriedade que o dataProvider do cbRegion passou a ter após a atribuição do event.result. Abaixo estão as demais funções para a preparação dos comboboxs.

private function bindEmployee():void
{
	roNet.getEmployee(cbTerritory.selectedItem.TerritoryID);
}
 
private function gotEmployee(event:ResultEvent):void
{
	cbEmployee.dataProvider = event.result;
	cbEmployee.selectedIndex = 0;
	bindCustomers();
}	
 
private function bindCustomers():void
{
	roNet.getCustomers(cbEmployee.selectedItem.EmployeeID);
}
 
private function gotCustomers(event:ResultEvent):void
{
	cbCustomer.dataProvider = event.result;
	cbCustomer.selectedIndex = 0;
}

Para que quando o usuário acesse a aplicação os comboboxs já sejam preenchidos é necessário definir a propriedade creationComplete na tag mx:Application.

 xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="bindRegion()">

Com essa propriedade definida, depois de criada a aplicação, a função bindRegion será disparada iniciando assim a população de todos os comboboxs, pois eles estão aninhados.

Também é preciso configurar os comboboxs para que depois de alterada a seleção de um dos filtros, os outros sejam alterados também, para isso será utilizada a propriedade change.

 y="10" id="cbRegion" labelField="RegionDescription" width="89" change="bindTerritories()" horizontalCenter="-274">>
 y="10" id="cbTerritory" labelField="TerritoryDescription" width="89" change="bindEmployee()" horizontalCenter="-114">>
 y="10" id="cbEmployee" labelField="FullName" width="89" change="bindCustomers()" horizontalCenter="49">>

Agora faça a população da datagrid,

private function bindOrders():void
{
	roNet.getOrders(cbCustomer.selectedItem.CustomerID,cbEmployee.selectedItem.EmployeeID);
}
 
private function gotOrders(event:ResultEvent):void
{
	dgPedido.dataProvider = event.result;
}

Para que a função bindOrders seja disparada ao clicar o botão Consultar, defina a propriedade click do botão btConsultar.

<mx:Button y="10" label="Consultar" width="119" click="bindOrders()" horizontalCenter="310" id="btConsultar"/>

Para finalizar o projeto, crie a estrutura para exibir os detalhes dos pedidos. Para isso crie uma TitleWindow, em File / New / MXML Component, defina o nome de orderDetails, baseado em TitleWindow

Utilize o código abaixo para a TitleWindow orderDetails.

"1.0" encoding="utf-8"?>
 xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="730" height="420" title="Detalhes do Pedido" showCloseButton="true" close="{PopUpManager.removePopUp(this)}">

	
		import mx.managers.PopUpManager;
		import mx.events.CloseEvent;
	]]>

 left="10" right="10" top="10" bottom="10" id="dgOrderDetails">
>
	 headerText="Cód." dataField="ProductID"/>
	 headerText="Produto" dataField="ProductName"/>
	 headerText="Preço Un." dataField="UnitPrice"/>
	 headerText="Qtde" dataField="Quantity"/>
	 headerText="Desconto" dataField="Discount"/>
	 headerText="Total" dataField="Total"/>
>
>	
>

Crie as funções para a população da TitleWindow orderDetails dentro do script do arquivo ArtigoFlex.mxml

import mx.managers.PopUpManager;
 
public function bindOrderDetails():void
{
	roNet.getOrderDetails(dgPedido.selectedItem.OrderID);
}
 
private function gotOrderDetails(event:ResultEvent):void
{
	var popUp:orderDetails = orderDetails(PopUpManager.createPopUp(this, orderDetails, true));
	PopUpManager.centerPopUp(popUp);
	popUp.dgOrderDetails.dataProvider = event.result;						
}

Altere a primeira coluna da datagrid dgPedido para o código abaixo para inserir o botão para exibir os detalhes do pedido.

 headerText="Detalhes" width="85">
>
>						
	 width="100%" height="100%" horizontalAlign="center">
		 y="10" width="80" label="Detalhes" click="outerDocument.bindOrderDetails()" id="btDetalhes"/>
	>			
>
>				
>

Salve o projeto e execute, o resultado deve ser como o das figuras abaixo.

Baixe o código fonte completo.

Divirta-se.

Concurso Cultural Flex-Brasil: Por que Flex?

Igor Musardo — Tue, 16 Dec 2008 13:14:25 +0000

Como participar? 1,2,3 passos

1 – Grave seu vídeo
2 – Faça o upload no youtube
3 – Tag nas opções do youtube como :porqueflex tudo junto e minúsculo

Pronto você está participando do concurso cultural.

Regras:

As regras do concurso são simples, faça o bom video que os critérios são:

Originalidade
Criatividade
Melhor justificativa

Prêmio:

O melhor vídeo leva para casa como presente de natal.

1 Licença do Adobe Flex 3 Builder Professional

Validade:

Até dia 23/12/2008 (prazo final)

Quem pode participar?

Grupos de usuário Flex-brasil e Flexdev
Grupos de usuário Flex de Portugal.

Visite a Flex-Brasil: http://www.flexbrasil.org

Lista de discussão: http://br.groups.yahoo.com/group/flex-brasil/

Visite Flexdev grupo de discussão: http://groups.google.com/group/flexdev

Eventos online e gratuitos sobre Adobe Flex

Igor Musardo — Mon, 15 Dec 2008 14:00:07 +0000

Vou pegar carona o post do Eberton Consolim e vou ajudar a divulgar dois eventos online e gratuitos que serão realizados pelo grupo de usuários Adobe do Rio Grande do Sul, o AUGRS:

Palestra: Construindo um aplicativo simples com Flex Builder 3
Palestrante: Gabriela Perry
Descrição: Nesse workshop iremos contruir uma aplicação utilizando o Flex Builder. Entre os tópicos abordados estão: criação de componentes, aplicação de estilos (design) e efeitos (animações).
Update: Assista a palestra gravada.

Palestra: O Trabalho do Desenvolvedor Actionscript no Brasil
Palestrante: Zeh Fernando, mais conhecido como Zeh ou Tweener.
URL: http://experts.na3.acrobat.com/augrs_workshop_zeh/
Descrição: Abordagem do tarabalho típico de desenvolvedores Actionscript, com demonstração de cases, cenários de trabalho comuns, discussão sobre os profissionais geralmente envolvidos nos trabalhos, empresas, agências, estúdios e como lidar com eles, e diferenças entre clientes nacionais e internacionais.
Update: Assista a palestra gravada.

WebOrb 3.6 para .NET está disponível

Igor Musardo — Fri, 12 Dec 2008 20:18:55 +0000

No dia 4 de Dezembro a equipe do The Midnight Coders disponibilizou a nova versão do WebOrb para .NET, a versão 3.6.

Nesta versão, temos como novas funcionalidades:

Integração ao Microsoft Silverlight: Permite invocar métodos via Remote Objects de forma tão simples como Webservices;
Suporte a invocações servidor-servidor vai AMF: Permite a integração cross-platform, onde .NET pode invocar Java ou aplicações nativas, usando uma API simples e intuitiva sem toda a complexidade associadade ao processo de integração entre plataformas diferentes;
Template WebOrb para o Visual Studio 2005/2008: Os templates estão disponíveis em C# e em Visual Basic, e em dois modelos, um para criar um website WebOrb-enable e outro para criar uma biblioteca WebOrb-enable. Veja nos dois screencasts a demonstração do funcionamento.
- Usando o template WebOrb no Visual Studio parte 1;
- Usando o template WebOrb no Visual Studio parte 2;
E correções de Bugs.

Ele está disponível para download no site do fabricante.

Eu já instalei e testei os templates do Visual Studio, e posso dizer que facilita bastante a configuração inicial da aplicação .NET para se comunicar com o Adobe Flex. Segue abaixo alguns print-screens.

Criar um novo projeto de Biblioteca com WebOrb.

Criar um novo Website com WebOrb ativo.

Solution Explorer do Visual Studio mostrando os arquivos criados pelo template do WebOrb.

Baixe a sua cópia gratuíta, faça a utilização desta ótima ferramenta e comente aqui.

Divirta-se.

Tutoriais, Componentes e Temas interessantes para o Adobe Flex

Igor Musardo — Fri, 05 Dec 2008 12:44:00 +0000

Encontrei no site Noupe.com uma relação interessantíssima de tutoriais, componentes e temas para o Adobe Flex.

Tutoriais

Tutorial simples de Flex

Tutorial para completos iniciantes em Adobe Flex

Componentes

Tour de Flex;

Tour de Flex é uma aplicação desktop em AIR que explorar os recursos e capacidades do Flex, incluindo os componentes padrões, Adobe Air e integração de dados, também como uma variedade de componentes de terceiros.

AlivePDF

É um gerador de PDF open-source feito em Action Script 3, isso permite que suas aplicações gerem PDF na máquina cliente.
Download
Tutorial

Fisheye

Obtenha resultado semelhante a barra de aplicativos do MacOS.
Download
Demo1
Demo2

FlexBook

Deixe sua aplicação em formato de livro, com a transição entre telas como um virar de páginas.
Demo1
Demo2
Demo3

DisplayShelf

Possui o comportamento similar ao CoverFlow do iTunes v7.
Download
Demo

Adobe AutoComplete

Controle TextInput com autocomplete.
Download
Demo

Adobe Docking ToolBar

O Docking ToolBar ajuda a manipular as toolbars da aplicação.
Download
Demo

Astra: Toolkit ActionScript para Aplicações Ricas

Toolkit desenvolvido pelo Yahoo! com vários componentes interessantes, incluindo: AutoCompleteManager, ColorPlaneAndSliderPicker, ColorSliderPicker, DropDownColorPicker, IPv4AddressInput, TimeInput e TimeStepper.
Download

Degrafa

O Toolkit Degrafa é utilizado para Interfaces Ricas, Visualização de Dados, Mapeamento e edição de Gráficos.
Download
Demo

Flexlib
Flexlib é um esforço da comunidade em criar componentes para o Adobe Flex 2 e 3.
Lista de completa de componentes
Download

Temas

Tema BluePlastic

Download
Demo

Tema Dark Nite

Download
Demo

Adobe Max 2008: Visual Studio, Flex e AMF

Igor Musardo — Tue, 18 Nov 2008 20:01:09 +0000

O Rafael Martinelli da DClick, está participando do Adobe Max 2008 em São Francisco na Califórnia e acabou de blogar sobre algo simplesmente espetacular para os .NET developers.

A Adobe está desenvolvendo um plugin para desenvolver Flex no Visual Studio, inclusive com Debug. Dificil vai ser aguentar a espera para estre plugin entrar no Adobe Labs.

Com isso, a Microsoft vai ter que rebolar ainda mais para conseguir emplacar o Silverlight.

Atualizando….
O Igor Costa, acabou de surpreender com um post sobre o Tofino, que já é um plugin pro Visual Studio 2008, onde é possível desenvolver para o Flex utilizando a IDE do VS 2008.

O plugin já tem as seguintes funcionalidades:
o Create new projects in a solution using the Visual Studio wizard approach.
o Run Flex applications from within Microsoft Visual Studio.
o Set breakpoints at code locations in “.as” or “.mxml” files.
o Step into code while in break mode.
o Inspect local variables while in break mode.
o Build errors are reported in the Visual Studio error list, and are linked to the source location.
o Browse ActionScript types from referenced components (SWCs) in the Visual Studio object browser.
o Navigate types and members in ActionScript files via drop-downs in the ActionScript code window.
o Simple installation; Tofino includes the Adobe Flex SDK.
o Adds links to relevant Adobe LiveDocs and PDFs for Flex to Visual Studio Help.

O download é gratuíto! Vou baixar e testar.

Adobe Flex – Criar colunas dinamicamente na DataGrid

Igor Musardo — Fri, 14 Nov 2008 23:04:00 +0000

O título pode até não ser chamativo, visto que o Adobe Flex cria automaticamente colunas com base em seu dataProvider como no exemplo abaixo.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
	[CDATA[
		[Bindable]
		private var dp:Array = [
			{ symbol: "ADBE", name: "Adobe Systems Inc.", price1: 49.95, price2: 49.95, price3: 49.95, price4: 49.95, price5: 49.95 },
			{ symbol: "MACR", name: "Macromedia Inc.", price1: 49.95, price2: 49.95, price3: 49.95, price4: 49.95, price5: 49.95 },
			{ symbol: "MSFT", name: "Microsoft Corp.", price1: 49.95, price2: 49.95, price3: 49.95, price4: 49.95, price5: 49.95 },
			{ symbol: "IBM", name: "IBM Corp.", price1: 49.95, price2: 49.95, price3: 49.95, price4: 49.95, price5: 49.95 },
			{ symbol: "ADBE", name: "Adobe Systems Inc.", price1: 49.95, price2: 49.95, price3: 49.95, price4: 49.95, price5: 49.95 },
			{ symbol: "MACR", name: "Macromedia Inc.", price1: 49.95, price2: 49.95, price3: 49.95, price4: 49.95, price5: 49.95 }
			];
 
		private function init():void
		{
			dgDado.dataProvider = dp;
		}
	]]>
mx:Script>
<mx:DataGrid id="dgDado" />
mx:Application>

Ou seja, de uma maneira bem simples, temos uma DataGrid com as colunas criadas automaticamente em tempo de execução com o seguinte resultado:

Mas perceba que o resultado obtido não é dos melhores, pois todas as colunas estão com o mesmo tamanho, as células com valores não possuem formatação, em fim, não tem qualquer personalização.

O meu propósito com esse post é compartilhar com você, como criar colunas de uma DataGrid de formata dinâmica com base no DataProvider.

Essa funcionalidade se aplica muito bem em relatórios onde o retorno do Banco de Dados é gerado dinâmicamente através de Stored Procedures, ou seja, as colunas retornadas da base dados são desconhecidas.

Então para isso iremos criar uma função que receberá um objeto, que retornou do banco, e através da função ObjectUtil.getClassInfo serão capturadas as propriedades de objeto. Cada propriedade, será uma coluna da DataGrid.

Após capturar as propriedades, é preciso somentar dar um loop em torno de todas elas e criar uma coluna específica para cada propriedade. Assim, é possível personalizar cada coluna com base em seu nome, como por exemplo:

- A coluna “name” deixaremos com a largura de 200 pixel, as outras colunas ficarão com 80 pixel de largura;
- Caso o nome da coluna comece com “price“, será aplicada a formatação de moeda através do CurrencyFormatter.

Com isso, nosso resultado final será como a figura abaixo:

Um pouco melhor que a configuração padrão do Flex, não acha?

Então mãos a obra.

Crie as funções criaColuna e formataNumero com base no código.

import mx.controls.dataGridClasses.DataGridColumn;
import mx.utils.ObjectUtil;
 
private function criaColuna(objTemp:Object):void
{
    //Cria um vetor de colunas
    var colunas:Array = new Array();
 
    //Retorna as propriedades do objeto objTemp[0] para o Objeto properties
    var properties:Object = ObjectUtil.getClassInfo(objTemp[0]);	
 
    //Da um loop para cada propriedade do objeto properties
    for each (var property:Object in properties.properties)
    {
	//Cria uma nova DataGridColumn						
	var coluna:DataGridColumn  = new DataGridColumn();
 
	coluna.headerText = property.toString();	    		
	coluna.width = (property.toString() == 'name') ? 200 : 80;
	coluna.resizable = false;
	coluna.dataField = property.toString();
	if (property.toString().substr(0,5) == 'price')
		coluna.labelFunction = formataNumero;
	colunas.push(coluna); //Inclui a nova coluna ao vetor de colunas
    }
	dgDado.columns = colunas;
}
 
private function formataNumero(item:Object, column:DataGridColumn):String {	
	return formataMoeda.format(item[column.dataField]);
}

Agora declare o CurrencyFormatter, antes da declaração da DataGrid.

1	id="formataMoeda" precision="2" currencySymbol="R$ " decimalSeparatorTo="," thousandsSeparatorTo="." useNegativeSign="true" useThousandsSeparator="true" alignSymbol="left"/>

E para finalizar, na função init(), chame a função criaColuna passando o vetor dp como parâmetro.

private function init():void
{
	criaColuna(dp);
	dgDado.dataProvider = dp;
}

Pronto, sua DataGrid criará as colunas dinamicamente de forma customizada.

Veja o código completo abaixo.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
	[CDATA[
		import mx.controls.dataGridClasses.DataGridColumn;
		import mx.utils.ObjectUtil;
 
		[Bindable]
		private var dp:Array = [
			{ symbol: "ADBE", name: "Adobe Systems Inc.", price1: 49.95, price2: 49.95, price3: 49.95, price4: 49.95, price5: 49.95 },
			{ symbol: "MACR", name: "Macromedia Inc.", price1: 49.95, price2: 49.95, price3: 49.95, price4: 49.95, price5: 49.95 },
			{ symbol: "MSFT", name: "Microsoft Corp.", price1: 49.95, price2: 49.95, price3: 49.95, price4: 49.95, price5: 49.95 },
			{ symbol: "IBM", name: "IBM Corp.", price1: 49.95, price2: 49.95, price3: 49.95, price4: 49.95, price5: 49.95 },
			{ symbol: "ADBE", name: "Adobe Systems Inc.", price1: 49.95, price2: 49.95, price3: 49.95, price4: 49.95, price5: 49.95 },
			{ symbol: "MACR", name: "Macromedia Inc.", price1: 49.95, price2: 49.95, price3: 49.95, price4: 49.95, price5: 49.95 }
			];
 
		private function init():void
		{
			criaColuna(dp);
			dgDado.dataProvider = dp;
		}
 
		private function criaColuna(objTemp:Object):void
		{
			//Cria um vetor de colunas
			var colunas:Array = new Array();
 
			//Retorna as propriedades do objeto objTemp[0] para o Objeto properties
		    var properties:Object = ObjectUtil.getClassInfo(objTemp[0]);	
 
			//Da um loop para cada propriedade do objeto properties
		    for each (var property:Object in properties.properties)
		    {
				//Cria uma nova DataGridColumn						
				var coluna:DataGridColumn  = new DataGridColumn();
 
	    		coluna.headerText = property.toString();	    		
	    		coluna.width = (property.toString() == 'name') ? 200 : 80;
	    		coluna.resizable = false;
	    		coluna.dataField = property.toString();
	    		if (property.toString().substr(0,5) == 'price')
	    			coluna.labelFunction = formataNumero;
				colunas.push(coluna); //Inclui a nova coluna ao vetor de colunas
		    }
			dgDado.columns = colunas;
		}
 
		private function formataNumero(item:Object, column:DataGridColumn):String {	
			return formataMoeda.format(item[column.dataField]);
		}
 
	]]>
mx:Script>
<mx:CurrencyFormatter id="formataMoeda" precision="2" currencySymbol="R$ " decimalSeparatorTo="," thousandsSeparatorTo="." useNegativeSign="true" useThousandsSeparator="true" alignSymbol="left"/>
<mx:DataGrid id="dgDado" />
mx:Application>

Divirta-se!

Evento On-line: BlazeDS Integrando Java com Flex facilmente

Igor Musardo — Fri, 14 Nov 2008 18:58:27 +0000

Vou pegar uma carona no post do Vedovelli e do FlexDev, e lembrar a todos que amanhã (sábado 15/11), teremos um ótimo evento on-line no Café com o Tom.

Título: BlazeDS : Integrando Java e Flex facilmente.
Descrição: Esta palestra irá abordar temas importantes sobre a integração de Adobe Flex e Java por meio do BlazeDS, onde será compartilhado todo o processo de criação, indo desde a instalação e configuração até chegar no desenvolvimento de um simples CRUD.
Palestrante: Mário Júnior
Data/hora: 15/11/08 15:00

Nos encontraremos lá!

Adobe Flex – Combobox de múltipla de seleção

Igor Musardo — Thu, 30 Oct 2008 12:56:39 +0000

O combobox acima, quando você pressiona a tecla Ctrl, é possível selecionar mais que uma opção.

Para conseguir esse resultado é necessário extender o componente combobox criando um novo componente como mostra o código abaixo:

Arquivo ComboBoxs.as

package br.combobox
{
import flash.events.Event;
import flash.events.KeyboardEvent;
import flash.text.TextLineMetrics;
import mx.controls.ComboBox;
import mx.events.ListEvent;
 
	public class ComboBoxs  extends ComboBox
	{
		private var ctrlKey:Boolean = false;
		private const multiplaSelecao:String = 'Múltipla Seleção'
 
		override public function set initialized(value:Boolean):void
		{
			super.initialized = value;
			if(value)
            			resize();
		}
 
		override protected function keyDownHandler(event:KeyboardEvent):void
		{
			super.keyDownHandler(event);
 
			ctrlKey = event.ctrlKey;
 
			if(ctrlKey)
				dropdown.allowMultipleSelection = true;
		}
 
		override protected function keyUpHandler(event:KeyboardEvent):void
		{
			super.keyUpHandler(event);
			ctrlKey = event.ctrlKey;
			if(!ctrlKey) 
			{
				close(); 
				var changeEvent:ListEvent = new ListEvent(ListEvent.CHANGE)
				dispatchEvent(changeEvent);
			}
		}
 
		override public function close(trigger:Event=null):void
		{
			if(!ctrlKey)
			{
				super.close(trigger);
				if(dropdown.selectedItems.length > 1)
					textInput.text = multiplaSelecao;				
			}
		}
 
		private function resize():void
		{
			var lineMetrics:TextLineMetrics;			
 			lineMetrics = measureText(multiplaSelecao);
 			var newWidth:Number = lineMetrics.width;
 			newWidth += getStyle("arrowButtonWidth") + getStyle("paddingLeft") + getStyle("paddingRight") + 8;
		    this.width = Math.max(this.width, newWidth);
		}
 
		public function set selectedItems(value:Array):void
		{
			if(dropdown)
				dropdown.selectedItems = value;
		}
 
		[Bindable("change")]
		public function get selectedItems():Array
		{
			if(dropdown)
				return dropdown.selectedItems;
			else
				return null;
		}
 
		public function set selectedIndices(value:Array):void
		{
			if(dropdown)
				dropdown.selectedIndices = value;
		}
 
		[Bindable("change")]
		public function get selectedIndices():Array
		{
			if(dropdown)
				return dropdown.selectedIndices;
			else
				return null;
		}
	}
}

No arquivo MXML.

 xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="br.combobox.*" height="128" width="276">

	
 
		public function retornaSelecao(arTemp:Array,campo:String):String
		{
			var retorno:String = '';
			for(var i:int = 0; i
			{	
				if(retorno != '')
					retorno += ',';
				retorno += arTemp[i][campo];
			}
			return retorno;	
		}	
 
 
	]]>

	"10" id="cbMultiplo" labelField="label" prompt="Selecione" change="{lbSelecao.text = 'Valor selecionado: ' + retornaSelecao(cbMultiplo.selectedItems,'valor')}" horizontalCenter="0">
		>
			>
				 label='Valor 1' valor='1'/>
				 label='Valor 2' valor='2'/>
				 label='Valor 3' valor='3'/>
				 label='Valor 4' valor='4'/>
			>
		>
	>	
	 y="40" id="lbSelecao" width="219" horizontalCenter="0" textAlign="center"/>
>

Divirta-se!