post) em um projeto, deve ter caído em problemas de conversão de tipo, como mostrado pela imagem abaixo:

Esse erro acontece por que estamos tentando fazer 2 operações:

• 1. Atribuir o valor de user.id (Number) a proriedade text (String)
• 2. Atribuir o valor de text (String) a proriedade user.id (Number)

A primeira operação funciona muito bem, pois a classe Number tem o método toString() que é chamado toda vez que fazemos esse tipo atribuição. Nosso problema está com o item 2, onde estamos tentando atribuir uma String a uma propriedade Number.

Para resolver essa situação eu criei a classe NumberInput que extende a classe TextInput do spark, e funciona com um wrapper para a propriedade text do TextInput, o source do novo componente é simples e fica assim:

Quando aplicamos o novo componente, o erro some do projeto e conseguimos compilar:

Abaixo segue o exemplo funcional:

Para fazer o download da biblioteca que contém o NumberInput, clique aqui.

In the last days I’ve received a lot of questions about how to automatically close a popup window after a certain period of time. In order to demonstrate it let’s implementing a Flex alert that will be self-closed after 5 seconds. Check the code after the jump:

<?xml version="1.0" encoding="utf-8"?>
<s:Application
	xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
	xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
	[CDATA[
	import mx.controls.Alert;
	import mx.managers.PopUpManager;
?
	private var notificatorTimer:Timer;
	private var myAlert:Alert;
?
	[Bindable]
	public var timeDestroy:Number = 5000;
?
?
	private function startTimer(event:MouseEvent):void
	{
		notificatorTimer = new Timer(timeDestroy, 1);
		notificatorTimer.addEventListener(
			TimerEvent.TIMER_COMPLETE,
			remove_handler);
		notificatorTimer.start();
		myAlert = Alert.show(
			"Wait, I'm gonna be closed after 5 sec ...",
			"MyAlert");
	}
?
?
	private function remove_handler(event:TimerEvent):void
	{
		PopUpManager.removePopUp(myAlert);
	}
?
	]]>
fx:Script>
?
<s:Button label="Abrir Alert"
		  click="startTimer(event)" />
?
s:Application>

Hope you enjoy it!

Today the Flex tip will talk about the usage of the local SharedObject object and how to implement it to store simple data objects.
When you create a SharedObject obejct the Flash Player also creates an empty *.sol file that stores the SharedObject data limited up to 100 KB per domain. If you try to saving bigger data the user must to authorize this process through a Local Storage dialog box. The supported types are: Number, String, Boolean, XML, Date, Array and Objects. You can also store typed ActionScript instances by callling the flash.net.registerClassAlias() function in order to preserve the class type of an object when the object is encoded in AMF.

Use the SharedObject.getLocal() method for create a SharedObject object:

SharedObject.getLocal("chooseSomeName"): SharedObject

For instance:

var sharedObject:SharedObject;
sharedObject = SharedObject.getLocal("MyTextInformation");

You can also create multiple SharedObjects for the same Flex application:

sharedObject1 = SharedObject.getLocal("UserInformation");
sharedObject2 = SharedObject.getLocal("TravelInformation");
sharedObject3 = SharedObject.getLocal("AgreementInformation");

The code above will create 3 files in the Flex folder:

UserInformation.sol
TravelInformation.sol
AgreementInformation.sol

In order to store these information into a SharedObject you must use the property data:

sharedObject.data.information = "the information goes here";

The method flush() causes Flash Player to write the information in the respective data file. In case you don’t call it directly, the data will be persisted once you close the browser. Therefore, it’s a good practice to call it.

sharedObject.flush();

The clear() method clears the file and removes it from the local disk.

sharedObject.clear();

Check the complete example out:

<?xml version="1.0" encoding="utf-8"?>
<s:Application
	xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
	xmlns:mx="library://ns.adobe.com/flex/mx"
	creationComplete="creationCompleteHandler(event)">
?
<fx:Script>
	[CDATA[
	import mx.events.FlexEvent;
?
	private var sharedObject:SharedObject;
?
	protected function creationCompleteHandler(event:FlexEvent):void
	{
		sharedObject = SharedObject.getLocal("MyTextInformation");
		if(sharedObject.size > 0)
		{
			information.text = sharedObject.data.information;
			currentDate.text = "Eu gravei essa data no objeto: " +
				sharedObject.data.currentDate;
		}
	}
?
	protected function saveClickHandler(event:MouseEvent):void
	{
		sharedObject.data.information = information.text;
		sharedObject.data.currentDate = new Date();
		sharedObject.flush();
	}
?
?
	protected function clearClickHandler(event:MouseEvent):void
	{
		sharedObject.clear();
	}
?
	]]>
fx:Script>
?
<s:layout>
	<s:VerticalLayout
		verticalAlign="middle"
		horizontalAlign="center"/>
s:layout>
?
<s:Label id="currentDate" />
<s:TextArea id="information" />
<s:HGroup>
	<s:Button label="Salvar informação"
			  click="saveClickHandler(event)" />
	<s:Button label="Apagar informação"
			  click="clearClickHandler(event)" />
s:HGroup>
?
s:Application>

References:
http://livedocs.adobe.com/flex/3/html/help.html?content=lsos_5.html

Hope you enjoy it!

A dica Flex de hoje mostra como utilizar SharedObjects locais para armazenar tipos de dados simples. Quando você cria um SharedObject, o Flash Player cria um arquivo vazio *.sol para armazenar a informação desejada, e por padrão você pode armazenar até 100k de informação. Caso você tente salvar uma quantidade maior de dados o usuário precisará autorizar esse processo através de uma caixa de diálogo. Os tipos de dados suportados são: Number, String, Boolean, XML, Date, Array, e Object.

Para criar um SharedObject use o método getLocal():

SharedObject.getLocal("chooseSomeName"): SharedObject

Por exemplo:

var sharedObject:SharedObject;
sharedObject = SharedObject.getLocal("MyTextInformation");

Você ainda pode criar vários SharedObjects para a mesma aplicação Flex:

sharedObject1 = SharedObject.getLocal("UserInformation");
sharedObject2 = SharedObject.getLocal("TravelInformation");
sharedObject3 = SharedObject.getLocal("AgreementInformation");

Isso irá criar 3 arquivos no diretório do Flex:

UserInformation.sol
TravelInformation.sol
AgreementInformation.sol

Para armazenar suas informações num SharedObject você utiliza a propriedade data:

sharedObject.data.information = "the information goes here";

O método flush() faz com que o Flash Player salve os dados no arquivo correspondente. Caso vcê não chame o método, ele irá salvar de qualquer forma no momento que você fechar a aplicação, porém sua chamada é considerada uma boa prática.

sharedObject.flush();

O método clear() é utilizado para apagar a informação e remover o arquivo do disco local:

sharedObject.clear();

Veja aqui um exemplo completo:

<?xml version="1.0" encoding="utf-8"?>
<s:Application
	xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
	xmlns:mx="library://ns.adobe.com/flex/mx"
	creationComplete="creationCompleteHandler(event)">
?
<fx:Script>
	[CDATA[
	import mx.events.FlexEvent;
?
	private var sharedObject:SharedObject;
?
	protected function creationCompleteHandler(event:FlexEvent):void
	{
		sharedObject = SharedObject.getLocal("MyTextInformation");
		if(sharedObject.size > 0)
		{
			information.text = sharedObject.data.information;
			currentDate.text = "Eu gravei essa data no objeto: " +
				sharedObject.data.currentDate;
		}
	}
?
	protected function saveClickHandler(event:MouseEvent):void
	{
		sharedObject.data.information = information.text;
		sharedObject.data.currentDate = new Date();
		sharedObject.flush();
	}
?
?
	protected function clearClickHandler(event:MouseEvent):void
	{
		sharedObject.clear();
	}
?
	]]>
fx:Script>
?
<s:layout>
	<s:VerticalLayout
		verticalAlign="middle"
		horizontalAlign="center"/>
s:layout>
?
<s:Label id="currentDate" />
<s:TextArea id="information" />
<s:HGroup>
	<s:Button label="Salvar informação"
			  click="saveClickHandler(event)" />
	<s:Button label="Apagar informação"
			  click="clearClickHandler(event)" />
s:HGroup>
?
s:Application>

Mais exemplos:
http://livedocs.adobe.com/flex/3/html/help.html?content=lsos_5.html

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

A dica Flex de hoje é para aqueles que nos últimos dias me perguntaram sobre como fechar automaticamente uma janela depois de um certo período de tempo. Para esse exemplo criamos um Alert que será fechado após 5 segundos. Veja o código a seguir:

<?xml version="1.0" encoding="utf-8"?>
<s:Application
	xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
	xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
	[CDATA[
	import mx.controls.Alert;
	import mx.managers.PopUpManager;
?
	private var notificatorTimer:Timer;
	private var myAlert:Alert;
?
	[Bindable]
	public var timeDestroy:Number = 5000;
?
?
	private function startTimer(event:MouseEvent):void
	{
		notificatorTimer = new Timer(timeDestroy, 1);
		notificatorTimer.addEventListener(
			TimerEvent.TIMER_COMPLETE,
			remove_handler);
		notificatorTimer.start();
		myAlert = Alert.show(
			"Aguarde, serei fechado em 5seg ...",
			"MyAlert");
	}
?
?
	private function remove_handler(event:TimerEvent):void
	{
		PopUpManager.removePopUp(myAlert);
	}
?
	]]>
fx:Script>
?
<s:Button label="Abrir Alert"
		  click="startTimer(event)" />
?
s:Application>

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

As vezes nos deparamos no Flash Builder com alguns erros que parecem não dizer muita coisa a respeito do problema. A dica Flex de hoje mostra como resolver um desses erros, que eu inclusive eu acabei de solucionar:

“1047: Parameter initializer unknown or is not a compile-time constant.”

O compilador apontou o erro descrito acima para linha onde eu tinha a definição do método abaixo:

public function show(message:String, type:String=NotifyMe.WARNING, timer:Number=4000):void

O Problema

Primeiramente vamos entender a mensagem de erro. O que ele está querendo dizer com Parameter, initializer e compile-time constant?

Parameter: O parâmetro que estamos recebendo na assinatura do método.
Initializer: O valor default que estamos atribuindo a um determinado parâmetro.
Compile-time constant: A constante que estou passando como valor default para o parâmetro.

O problema aqui está no fato do compilador ainda não ter compilado minha classe NotifyMe quando tentou compilar a classe que possui a declaração do meu método.

A Solução

Alterei temporariamente a assinatura do método para:

public function show(message:String, type:String=”warning”, timer:Number=4000):void

Em seguida compilei meu projeto novamente. Depois de compilar voltei a assinatura original do método:

public function show(message:String, type:String=NotifyMe.WARNING, timer:Number=4000):void

Espero que essa dica tenha ajudado vocês. Até a próxima!

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

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

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

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

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

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

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

DOWNLOAD SOURCE

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

Uma dúvida de quem parte para o Flex ( foi minha dúvida tempos atrás ) é os relacionamentos N para N. Por isso por meio desse post vou fazer um exemplo de Entrada, EntradaItens, e Produto. Depois do e-mail do Rener Dias resolvi criar esse post, espero que seja isso que ele queria, qualquer coisa estamos ae.

Vamos começar pelas classes do Flex.

Entrada.as

package br.com.fborella.beans
{
	import mx.collections.ArrayCollection;
	[RemoteClass(alias="br.com.fborella.beans.Entrada")]
?
	[Bindable]
	public class Entrada
	{
		public var idEntrada:Number;
		public var numeroNota:String;
		public var dataEmissao:Date;
		public var dataChegada:Date;
		public var itensEntrada:ArrayCollection;
?
		public function Entrada()
		{
                     this.idEntrada=0;
		}
?
	}
}

EntradaItem.as

package br.com.fborella.beans
{
	import mx.collections.ArrayCollection;
	[RemoteClass(alias="br.com.fborella.beans.EntradaItem")]
?
	[Bindable]
	public class EntradaItem
	{
		public var idEntradaItem:Number;
		public var quantidadeEntrada:Number;
		public var quantidadeReal:Number;
		public var valor:Number;
		public var produto:Produto;
		public var entrada:Entrada;
?
		public function EntradaItem()
		{
                  this.idEntradaItem=0;
		}
	}
}

Produto.as

package br.com.fborella.beans
{
	import mx.collections.ArrayCollection;
	[RemoteClass(alias="br.com.fborella.beans.Produto")]
?
	[Bindable]
	public class Produto
	{
		public var idProduto:Number;
		public var codigoInterno:String;
		public var descricao:String;
		public var unidadeEntrada:String;
		public var estoqueAlmoxarifado:Number;
		public var estoqueProducao:Number;
?
		public function Produto()
		{
			this.idProduto=0;
		}
	}
}

Agora faremos as do java

Entrada.java

package br.com.fborella.beans;
?
import java.io.Serializable;
?
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.SequenceGenerator;
import javax.persistence.Table;
?
@Entity
@Table(name="ENTRADA")
public class Entrada implements Serializable{
?
	private static final long serialVersionUID = 1L;
	@Id
    @SequenceGenerator(name="SEQ", sequenceName="GEN_ENTRADA_ID",allocationSize=1)
    @GeneratedValue(strategy=GenerationType.IDENTITY, generator="SEQ")
    private Long idEntrada;
	private String numeroNota;
	private Date dataEmissao;
	private Date dataChegada;
	@OneToMany(mappedBy = "entrada",cascade=javax.persistence.CascadeType.ALL,fetch=FetchType.LAZY)
	@Cascade({ org.hibernate.annotations.CascadeType.SAVE_UPDATE,
              org.hibernate.annotations.CascadeType.DELETE_ORPHAN})
	private List<EntradaItem> itensEntrada;
	/*get and set*/
}

EntradaItem.java

package br.com.fborella.beans;
?
import java.io.Serializable;
?
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.SequenceGenerator;
import javax.persistence.Table;
?
@Entity
@Table(name="ENTRADAITEM")
public class EntradaItem implements Serializable{
?
	private static final long serialVersionUID = 1L;
	@Id
    @SequenceGenerator(name="SEQ", sequenceName="GEN_ENTRADAITEM_ID",allocationSize=1)
    @GeneratedValue(strategy=GenerationType.IDENTITY, generator="SEQ")
    private Long idEntradaItem;
	private Double quantidadeEntrada;
	private Double quantidadeReal;
	private Double valor;
	@ManyToOne(fetch = FetchType.LAZY)
	private Produto produto;
	@ManyToOne(fetch = FetchType.LAZY)
	private Entrada entrada;
	/*get and set*/
}

Produto.java

package br.com.fborella.beans;
?
import java.io.Serializable;
?
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.SequenceGenerator;
import javax.persistence.Table;
?
@Entity
@Table(name="PRODUTO")
public class Produto implements Serializable{
?
	private static final long serialVersionUID = 1L;
	@Id
    @SequenceGenerator(name="SEQ", sequenceName="GEN_PRODUTO_ID",allocationSize=1)
    @GeneratedValue(strategy=GenerationType.IDENTITY, generator="SEQ")
    private Long idProduto;
	private String numeroNota;
	private String codigoInterno;
	private String descricao;
	private String unidadeEntrada;
	private Double estoqueAlmoxarifado;
	private Double estoqueProducao;
	/*get and set*/
}

Para gravar tudo isso usando Aactions Scprit ( obviamente mandano para o java fazer a persistencia ), é mais ou menos assim, supondo que vc ja preencheu o objeto entrada.
O código abaixo é para o botao de salvar do item e vai agregar ele a entrada onde temos um atributo itensEntrada, depois é só mandar persistir e entrada.

private function confirmItem():void
{
	item.quantidadeEntrada=1;
	item.quantidadeReal=2;
	item.valor=250;
	item.produto=cbxProd.selectedItem as Produto;
	item.entrada=entrada; //objeto entrada que vc deve ter para dados de entrada
?
	//faça algum metodo para controlar se ele ta inserindo um item ou alterando
	if(model.acaoItem =='alterar'){
		entrada.itensEntrada.removeItemAt(itemIndex);
		entrada.itensEntrada.addItem(item);
	}else{
		entrada.itensEntrada.addItem(item);
	}
}

Espero que seja útil.

Felipe o/

Twitter!

Vimos que Scala na verdade é uma linguagem puramente orientada a objetos, com conceitos de classe, instância, heirarquia e polimorfismo como Java por exemplo. Mas Scala traz também alguns conceitos próprios muito interessantes, que é o caso de Case Classes.

Case Classes são um caso de classes com regras pré-definidas em tempo de compilação, de maneira que se permita executar algumas outras operações sobre tais classes facilitando algumas modelagens, e ajudando na aplicação de algumas boas práticas. Vamos estudar mais a fundo o conceito de Case Classes nesse post. Usei como referência o Scala By Example do Martin Odresky, o qual citei em posts anteriores.

Para acompanhar o post, é muito recomendado alguma IDE de desenvolvimento de scala. Estou usando o scala-ide plugin para o Eclipse, que pode ser encontrado em http://www.scala-ide.org/.

Motivação para Case Classes

Eu gostei bastante do exemplo disponível no livro, por isso vou seguir a mesma idéia nesse post só que com as minhas palavras do que eu consegui aprender sobre assunto pesquisando um pouco mais na internet, e citando também as dificuldades que enfrentei.

Imagine que queremos modelar um interpretador de expressões matemáticas que são descritas em objetos do nosso domínio. Por exemplo, queremos interpretar o resultado de 1 + (3 + 7), e representando em nosso modelo, queremos obter algo como:

Uma maneira orientada a objetos de se implemetar tal domínio poderia ser algo como:

A implementação é bastante limpa e nosso interpretador seria mais simples ainda:

Se você assistiu o screencast sobre integração com Java, e JUnit rodando testes de Scala, você pode fazer um teste para verificar que nosso interpretador está funcionando corretamente:

Para essa modelagem, quando quisermos adicionar uma nova operação que pode ser interpretada, basta criar uma nova classe que extends Expr e pronto! Nada mais precisa ser alterado em nosso código, e nosso interpretador continuará funcionando.
Agora imagine que antes de executar a expressão, queremos imprimir no console de um jeito amigável a expressão matemática que está sendo executada. Nesse caso, de acordo com nossa modelagem, teríamos que definir em nosso Expr uma função print, para que todas as suas implementações definam o comportamento de tal função. Para isso temos que alterar o código em todas as classes que já existem, o que pode ser ruim dependendo do nosso sistema.

Aplicando Case Classes

Em Scala existe a definição de Case Class. Para criar uma Case Class basta adicionar o modificador case antes da definição da classe. Em nosso exemplo faça as seguintes mudanças:

Case classes seguem as seguintes regras:

1 – Possuem um construtor definido exatamente com o mesmo nome definido na classe. Em nosso exemplo:

Dessa forma é possível escrever nossa expressão 1 + (3 + 7) da seguinte forma:

Substitua no teste para ter certeza do funcionamento.

2 – Os métodos toString, equals e hashCode já estão implementados seguindo a definição da classe com seus atributos. Para nosso exemplo com Number, esses métodos já levam em consideração o atributo n, deixando de comparar os objetos por endereço de memória. Os operadores == e != também já estão definidos em função do equals.

3 – Todos os atributos passados no construtor possuem os métodos de acesso público já definidos. Em nosso exemplo, Number e Sum já possuem os seguintes métodos:

Fato importante é que tais classes se tornam imutáveis, ou seja, não existe um método para alterar o valor dos atributos, e nem é possível definí-los.

4 – Case Classes podem ser usadas para pattern matching, que é uma operação disponível em Scala e que veremos agora.

Match, não Switch

Vimos que a classe base do Scala é o Any, e que todos objetos podem ser tratados como tal. Any define uma função que permite verificar o tipo de classe que está sendo tratado e tomar a atitude correspondente. Vamos ao exemplo que explica melhor o comportamento. Em nosso object Inter, mude a função inter para o seguinte:

Rode nosso teste novamente e verifique que está tudo correto.
Para entender o que está acontecendo: estamos dizendo que um dos casos esperados é o caso em que e é do tipo Number, que recebe um parâmetro que chamamos de n. Note que não precisamos definir o tipo de n, pois o compilador consegue inferir baseado na definição do construtor de Number. Feito isso, n está disponível no contexto do case atual. Para nosso caso com Number, precisamos apenas devolver o valor de n.
No segundo caso, estamos esperando uma Expr do tipo Sum, que recebe dois parâmetros e que baseado no construtor definido na classe, sabemos que é do tipo Expr. Nesse caso devolvemos o inter de a somado ao inter de b.
Simples não?

Nessa nossa nova modelagem fica fácil adicionar uma nova funcionalidade ao comportamento das expressões, como por exemplo imprimir de maneira legível. Basta adicionar mais um método ao nosso interpretador. Claro que agora temos o problema adicionar um novo caso quando criarmos uma nova operação, mas a quantidade de código a ser implementada é consideravelmente menor.

Match é definida como uma função como qualquer outra em Scala, portanto pode ser atribuída a variáveis, ser devolvida como resultado e ser passada como parâmetro para outras funções. Pode-se também criar um bloco como o seguinte:

e usá-lo como uma função anônima. Dessa forma será criado uma função match para tratar com seus casos definidos no bloco.

Exceptions

Veremos Exceptions mais para frente, mas perceba como funciona o bloco try/catch em Scala, e veja se há alguma semelhança com o que acamos de ver:

Pois bem, catch possui o mesmo comportamento de match para execeções.

Exercício

Vou me basear no exercício disponível no livro do Martin.

Considere que queremos implementar uma árvore binária ordenada de inteiros. E tome a seguinte implementação como base:

Agora complete a seguinte implementação dentro de IntTree:

Lembre-se que Node é imutável, e que é obrigatório usar Case Classes. Boa sorte !

A reposta está no screencast a seguir, junto com a explicação:

Vídeo em alta resolução.

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103

<?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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

<?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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

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:

• [Flex & AIR] Swiz Framework – meus primeiros passos
• Java Magazine 68 : Artigo sobre Adobe Flex e AIR
• s:TextArea – recuperando um texto selecionado
• [Flex & AIR] Swiz Framework + Presentation Model : Exemplo de Projeto
• FlexMania 2010 – Adobe Flex + Oracle WebLogic 10.x