frameworks/ HTML 5/ HTML5 / CSS3/ JQuery/ Mobile/ Phonegap/ Web 2.0

Os mitos do desenvolvimento Front-end com HTML, CSS e Javascript

openweb

Eu já havia comentado em outro post aqui no blog sobre os 10 mitos de que tecnologias web não eram tão boas para fazer sistemas. Hoje me deparei com os slides de uma apresentação do Zeno Rocha que traduz tudo aquilo que eu escrevi em texto em imagens e razões para você acreditar que a semântica web está forte e cheia de recursos, navegue pelos slides e veja a variedade de possibilidades.

Sem mencionar que nos slides faltou só as soluções da empresa Sencha e o SDK da Blackberry para dispositivos móveis o Webworks.

Os sdks e bibliotecas para desenvolvimento Web amadureceram tão rápido em pouco mais de 2 anos que eu nem imagino o que estará por vir daqui a 2 anos à frente.

Flex/ Flex 3 Charts/ Flex 3 Open-Source/ Flex 3 SDK/ Flex Componentes/ frameworks/ Open-source

DVM ou Pacote de gráficos agora é open-source

Parte da estratégia da Adobe em colocar o DVM em categoria open-source é justamente tentar envolver mais ainda a comunidade em ajuda-la a corrigir bugs e manter o SDK ativo para a próxima geração de aplicativos desenvolvidos com o SDK do Flex.

A parte boa dessa história é que antes você teria que desembolsar cerca de $249 para ter acesso ao código fonte do mesmo.

Ano passado ela já havia liberado o acesso ao código fonte do produto, porém não permitia o uso comercial do mesmo, já que você não tinha a licença. Essa sem dúvida em minha opinião foi o melhor movimento do tão requisitado e usado framework de gráficos da plataforma Flex.

Você pode baixar o SDK de gráficos + Olap Datagrid + Advanced Datagrid diretamente do site Open-source da Adobe. Visite

Actionscript Frameworks/ AS 3.0/ Flex/ Flex 3 Charts/ Flex Componentes/ frameworks/ Sexta-Flex Talkshow

Sexta-Flex – Criando visualizações de dados avançados com Axiis

axiis

Na próxima sexta-flex, no mesmo horário vamos ter um encontro com o Michael VanDaniker, ele é co-autor do framework open-source que mudou a maneira como dados são exibidos na plataforma Flex.

Se você fica babando por que vê os tão belos feitos do Flex Data Visualization, (charts). Então você precisa conhecer o Axiis.
Veja os detalhes da palestra e vê se não perde. Claro que agente entende se você não puder assistir ao vivo, depois ela será gravada.

Palestra On-line
Titulo : Advanced Data Visualization with Axiis
Palestrante: Michel VanDaniker
Horário: Sempre no mesmo horário: das 09:00 AM até as 10:00 horário de Brasília.
Endereço para acesso: http://experts.na3.acrobat.com/palestras/
Palestra em inglês.

Actionscript/ AS 3.0/ Flash/ Flex/ Flex 3 how to/ Flex 3 SDK/ Flex Builder 3/ frameworks/ Labs

3D na sua aplicação Flex usando apenas os novos recursos do Flash Player 10

O título é enorme, mais o conteúdo é de se animar. Eu já havia postado aqui sobre a novidade, só não tinha dito como fazer.Trabalhar com efeitos 3D no Flex é fácil, divertido e te tira uma boa parte do seu tempo pela manhã.

Existem algumas(1) bibliotecas(2) gratuitas(3) que faz esse serviço para a versão do Flash Player 9, embora ainda funcionando no Flash Player 10. Mais esse conteúdo é direcionado apenas para quem já tem o Flash Player instalado e quer começar a brincar ou quem sabe aplicar os efeitos de 3D em sua aplicação Flex existente já usando os novos recursos de 3D do Flash Player 10.

Requesitos:

– Ter o Flash Player 10 instalado
– Ter o Adobe Flex Builder 3.0.2+
– Ter tempo disponível de 30 minutos.

Antes de mais nada, para começar você vai precisar alterar algumas coisas do seu Flex Builder 3.0.2, embora ele já venha atualizado, existe uma pequena configuração necessária para rodar. Notadamente essa configuração não terá mais valor para o Flex Builder 4, ou melhor “gumbo”,já que por padrão ela vem feita.

Passos para configurar:

1. Vá até o Flex Builder e crie um novo projeto.
2. Depois do projeto criado, clique com o botão direito do mouse sobre o projeto e escolha a opção do menu “Properties”.
3. Vai abrir a tela de propriedades do projeto. Nela você deve escolher a opção “Flex Build Path”.
3d

4. Clique em Flex 3.2 para expandir e delete a biblioteca playerglobal.swc, essa biblioteca é para o Flash Player 9.
5.Clique no botão Add SWC e procure dentro dos arquevos de instalação de sua máquena onde está o seguinte caminho.

C:Program FilesAdobeFlex Builder 3 Plug-insdks3.2.0frameworkslibsplayer10playerglobal.swc

Esse novo playerglobal.swc vai garantir que as classes do Player padrão que no caso será o 10, terá todas as classes requesitadas.

Após isso, volte no menu lateral e escolha a opção Flex Compiler, e adicione ao compilador o seguinte parâmetro “-target-player=10”. Com isso garantimos que o compilador vai adicionar as classes dependentes para isso.

Feito isso, caso você queira assegurar que o swf gerado seja enxergado e possa refletir as mudanças para o instalador automático, mude a versão do Flash Player que está ai de 9.0.24 para 10.0.0.

Passo final. Clique OK e está salvo as alterações, agora é só contigo.

Entendendo um pouco do 3D do Flash Player 10.

Toda classe do DisplayObject, MovieClip e Sprite, tem novas propriedades cada uma dessas novas propriedades faz a rotação do objeto em um eixo X,Y e Z. As propriedades são: rotationX,rotationY, rotationZ,transformX,transformY,transformZ,scaleX,scaleY,scaleZ, dentre outras classes. Quem trabalha com Flash CS4 pode ver em detalhe como funciona o 3D do Flash Player (em português).

Para quem trabalha com Flash tem-se uma vantagem que é definir o ponto de registro x,y de um objeto quando se está criando, o que você pode fazer com que seu objeto seja rotacionado no eixo existente e assim fazer um efeito conciso.

Já no Flex não temos essa vantagem o que podemos fazer é imitar o Flash IDE nessa parte, colocando qualquer um de nossos componentes como container do componente afetado, complicado né?! Não, por exemplo veja abaixo que apliquei diretamente o efeito de 3D à um painel, observe que ele vai rotacionar no eixo Y de onde os pontos x,y foram registrados.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
	</mx><mx :Script>
		< ![CDATA[
			import caurina.transitions.Tweener;
 
 
			public function rotate():void{
 
				Tweener.addTween(pa,{rotationY:pa.rotationY+180,time:1});
			}
		]]>
	</mx>
 
 
	<mx :Panel  id="pa" x="451" y="141" width="208" height="196" title="Painel Rotativo">
 
	</mx>
	<mx :Button x="20" y="55" label="Rotacionar" click="rotate()"/>

Agora comportando-se como no Flash IDE, adiciono o painel à um container.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
	</mx><mx :Script>
		< ![CDATA[
			import caurina.transitions.Tweener;
 
 
			public function rotate():void{
 
				Tweener.addTween(pa,{rotationY:pa.rotationY+180,time:1});
			}
		]]>
	</mx>
 
	<mx :Container clipContent="false" id="pa" width="300" height="300" x="513.5" y="223">
	</mx><mx :Panel horizontalCenter="0" x="-150" y="-150" width="300" height="300" title="Painel Rotativo">
 
	</mx>
 
	<mx :Button x="20" y="55" label="Rotacionar" click="rotate()"/>

Onde depois você pode ir manipulando de uma só vez as três propriedades definidas. Exemplo abaixo:

3d2

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
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application horizontalScrollPolicy="off" verticalScrollPolicy="off" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="675" height="509">
 
	</mx><mx :Script>
		< ![CDATA[
			import caurina.transitions.Tweener;
 
 
			public function rotate():void{
 
				Tweener.addTween(pa,{rotationX:transformaX.value,rotationY:transformaY.value,rotationZ:transformaZ.value,time:1});
			}
		]]>
	</mx>
 
	<mx :Container clipContent="false" id="pa" width="150" height="150" x="486" y="212">
	</mx><mx :Panel horizontalCenter="0" x="-75" y="-75" width="150" height="150" title="Painel Rotativo">
 
	</mx>
 
	<mx :Button x="29" y="257" label="Rotacionar" click="rotate()"/>
	<mx :Form x="20" y="85">
		</mx><mx :FormItem label="rotationX">
			<mx :HSlider minimum="0" labels="[0,90,180,270,360]" maximum="360" allowTrackClick="true" snapInterval="15" id="transformaX" />
		</mx>
		<mx :FormItem label="rotationY">
			<mx :HSlider minimum="0" labels="[0,90,180,270,360]" maximum="360" allowTrackClick="true" snapInterval="15" id="transformaY"/>
		</mx>
		<mx :FormItem label="rotationZ">
			<mx :HSlider minimum="0" labels="[0,90,180,270,360]" maximum="360" allowTrackClick="true" snapInterval="15" id="transformaZ"/>
		</mx>
Actionscript Frameworks/ AS 3.0/ Flex/ frameworks/ Notícias/ Web 2.0

Boo-Box Actionscript 3.0 API para Flash/Flex

Opa, estamos felizes por ajudar mais uma vez ao mundo open-source e toda comunidade Flash/Flex brasileira.


Alguém aqui conhece o Boo-Box?

Boo-Box, é um serviço de agregação de produtos on-line que geram renda para você blogueiro, dono de site, é um mix de serviços de afiliados em um só lugar. Por exemplo eles oferecem um serviço que é único para acessar produtos de lojas como a submarino, americanas.com,mercado livre, dentre outros sites internacionais como todos as lojas do amazon,e-bay,etc. Tudo no bom estilo web 2.0.

Está ai entre poucos sites que oferecem API tupiniquem para seus serviços, modelo o qual muito portal e serviço web brasileiro deveriam adotar.

Até então a única api existente para o Boo-Box é em REST(xml/JSON). Por que não portar uma API para o lado cliente e mais ainda para o Flex/Flash.

A API do Boo-Box para actionscript 3.0 é completa, tem todos os serviços que a Boo-Box oferece.

Você só precisar ir no http://code.google.com/p/booboxas3api/

No projeto do google você encontra o SWC para integrar dentro de seu projeto Flash ou Flex, exemplos, documentação da API, tudo para facilitar sua vida.

Agora começe a ganhar dinheiro com suas aplicações Flex ou criar uma loja para isso.

AbsolutoBrasil/ Actionscript Frameworks/ AS 3.0/ Flex/ Flex 3/ Flex 3 Documentação/ Flex 3 Open-Source/ Flex Componentes/ frameworks/ Labs/ Open-source

Adicionando um TabManager ao TabNavigator de seu projeto

Em um dos projetos que estamos desenvolvendo chegadou-se a uma certa necessidade de usar um manager para algumas views. Controlar isso via interface é horrível, quanto maior genérico fique sua view melhor.
Gostaria de compartilhar com vocês esta classe que faz justamente isso, organizar e administrar melhor as abas do TabNavigator. Que inclusive estará fazendo parte dos managers do novo AbsolutoBrasil 1.5 que está vindo por ai. Porém como vai demorar um pouquenho para sair segue a classe bem documentada.

Caso de uso:

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
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application applicationComplete="init()" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
 
	</mx><mx :Script>
		< ![CDATA[
			import mx.controls.Alert;
			import mx.containers.Canvas;
			import mx.events.ItemClickEvent;
 
			import br.absolutobrasil.managers.TabManager;
 
			private function init():void {
					TabManager.tabNavigator = minhaTabNav;
			}
			public function switchBotoes(event:ItemClickEvent):void {
					switch(btns.selectedIndex) {
						case 0:
								TabManager.createNewTab(Canvas,"Nova Aba","001");
								break;
						case 1:
								TabManager.removeSelectedTabByIndex(minhaTabNav.selectedIndex);
								break;
						case 2:
								Alert.show(TabManager.getUniqueTab("001").toString());
								break;
					}
			}
		]]>
	</mx>
	<mx :Array id="arr">
			<mx :Object label="Criar Aba"/>
			<mx :Object label="Deletar Aba" />
			<mx :Object label="Pegar Id da Aba"/>
	</mx>
	<mx :TabNavigator id="minhaTabNav" width="695" height="375" x="213" y="67">
		</mx><mx :Canvas label="" width="100%" height="100%">
		</mx>
 
 
	<mx :ButtonBar itemClick="switchBotoes(event)" id="btns" dataProvider="{arr}" x="213" y="20">
	</mx>

Classe para adicionar à sua biblioteca

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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
package br.absolutobrasil.managers
{
    /**
    * 	http://www.mozilla.org/MPL/
        THIS SOURCE CODE IS PROVIDED "AS IS" AND "WITH ALL FAULTS", WITHOUT
        ANY TECHNICAL SUPPORT OR ANY EXPRESSED OR IMPLIED WARRANTIES, INCLUDING,
        BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS
        FOR A PARTICULAR PURPOSE ARE DISCLAIMED.  ALSO, THERE IS NO WARRANTY OF
        NON-INFRINGEMENT, TITLE OR QUIET ENJOYMENT.  IN NO EVENT SHALL MACROMEDIA
        OR ITS SUPPLIERS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
        EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
        PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
        OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
        WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR
        OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOURCE CODE, EVEN IF
        ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
        *
        * Parte original http://coenraets.org/blog/
        * Modificações - http://www.igorcosta.com
 
	*/
	import mx.containers.TabNavigator;
	import mx.core.Container;
	import mx.events.ChildExistenceChangedEvent;
 
	public class TabManager
	{
		/**
		 * @Constructor
		 *
		 */
		public function TabManager()
		{
		}
 
		private static var _tab:TabNavigator;
 
		private static var uniqueTabs:Object = new Object();
 
		/**
		 * Seta o manager ao valor de um TabNavigator existente na aplicacao para iniciar as operacoes
		 * @param tabNavigator
		 *
		 * @example of uses:
		 * <listing version="3.0">
		 *              import br.absolutobrasil.managers.*;
		 * 				var minhaAba:TabNavigator = new TabNavigator();
		 *              private function init():void {
		 *                  TabManager.tabNavigator = minhaAba;
		 *              }
		 * </listing>
		 *
		 */
		public static function set tabNavigator(tabNavigator:TabNavigator):void
		{
			_tab = tabNavigator;
			_tab.addEventListener(ChildExistenceChangedEvent.CHILD_REMOVE,
				function (event:ChildExistenceChangedEvent):void
				{
					for (var uniqueId:String in uniqueTabs)
					{
						if (uniqueTabs[uniqueId] == event.relatedObject)
						{
							uniqueTabs[uniqueId] = null;
							return;
						}
					}
				});
		}
		/**
		 *  Cria uma nova Aba
		 *
		 * @param tabClass - o alvo ou componente que será criado
		 * @param label - Label que aparecerá na aba;
		 * @param uniqueId - Caso você queira definir um id único para a aba
		 * @return uma nova aba criada ao container posicionado como target
		 *
		 */
		public static function createNewTab(tabClass:Class,label:String='', uniqueId:String=null):Container
		{
			if (uniqueId && uniqueTabs[uniqueId])
			{
				_tab.selectedChild = uniqueTabs[uniqueId];
				return uniqueTabs[uniqueId];
			}
 
			var tab:Container = new tabClass();
 
			if (uniqueId)
			{
				uniqueTabs[uniqueId] = tab;
			}
 
			_tab.addChild(tab);
			_tab.label = label;
			_tab.selectedChild = tab;
			return tab;
		}
		/**
		 *Seta um id Unico para a aba desejada, passando obrigatoriamente o id que você deseja setar e o alvo que receberá.
		 * @param uniqueId
		 * @param tab
		 *
		 */
		public static function setUniqueTab(uniqueId:String, tab:Container):void
		{
			uniqueTabs[uniqueId] = tab;
		}
		/**
		 * Remove a aba desejada.
		 * @param tab
		 *
		 */
		public static function removeTab(tab:Container):void
		{
			_tab.removeChild(tab);
		}
		/**
		 *Remove a aba passando a posicao dela necessária, caso não queria controlar isso por id.
		 * @param index
		 *
		 */
		public static function removeSelectedTabByIndex(index:int):void {
			_tab.removeChildAt(index);
		}
		/**
		 * Remove todas as abas existentes no TabNavigator
		 * @param tabNavigatorTarget
		 *
		 */
		public static function removeAllTabs(tabNavigatorTarget:TabNavigator):void {
				_tab = tabNavigatorTarget;
				_tab.removeAllChildren();
		}
		/**
		 *Pega o Id único da aba desejada, não precisa selecionar.
		 * @param uniqueId
		 * @return
		 *
		 */
		public static function getUniqueTab(uniqueId:String):Container
		{
			return uniqueTabs[uniqueId];
		}
	}
}
Actionscript Frameworks/ AS 3.0/ Flash/ Flash CS 3/ Flex/ Flex 3/ Flex 3 Open-Source/ Flex Componentes/ frameworks/ Labs

Componente Google Maps para Flex 3

Eu só tinha anunciado essa notícia no Blog em inglês. E cometi o erro de não publicar aqui também na versão Brasileira.

O Componente mapas do google para o Flex aka(GoogleFlexMaps). Eu até tinha publicado a tão recém e aguardada obra do Google para plataforma Flash Player, tornando assim usar seus serviços tão htmlzados.
Em fim, Vocês pode usar o componente que torna a sintaxe bem mais fácil, bem mais completa ao ponto de vista de desenvolvimento Flex.

1
2
3
4
5
6
7
8
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:google="com.igorcosta.*"  xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
    <google : GoogleFlexMap
      key="sua chave de desenvolvedor"
      width="100%" height="100%"/>
 
</mx>

E quanto aos desenvolvedores Flash? Eu também pensei neles e fiz uma alteração no componente .swc que pode aceitar dentro do Flash. Basta apenas usar uma instancia nova. Porém não garanto 100% perfeição em todos os recursos que o Google Maps funciona, para isso indico o SDK padrão do Flex.

Baixe aqui o .swc para seus projetos tanto em Flex quanto Flash.

Veja aqui a documentação do Componente* ( em ingles)

Caso você seja curioso ou quer o código fonte por simplesmente por gostar de fazer hacks,

Boa sorte em seus uso.

Actionscript Frameworks/ AS 3.0/ Flex/ frameworks/ Google/ Open-source/ Web 2.0

Google Maps Actionscript 3.0 API Finalmente

Finalmente o tão aguardado, flamigerado e esperado por todos que trabalham com a plataforma Flash Player ( Flex/Flash/AIR), esperaram por essa grande notícia no última conferência Where 2.0 em San Francisco,US.

Google finalmente ajudou e muito a comunidade deixando de lado um pouco o aspecto de criar apenas para AJAX ou HTML.

Anterior à isso só existiam 2 produtos o UMap que usa o OpenMaps e Microsoft Map e o do Yahoo!.

O grande problema desses mapas é que para o Brasil fica muito restrito o acesso e não tem tanta riqueza de detalhes como o Google possui.

No próximo post, vocês vão ver como montar o ambiente, ou melhor projeto para começar a criar.

AbsolutoBrasil/ AS 3.0/ Dev. Software/ Dicas/ Flex/ Flex 3/ frameworks/ Labs/ Open-source

AbsolutoBrasil 1.0 update 1, Uma nova atualização baixem.

Em 24 horas depois do lançamento AbsolutoBrasil, fizeram o download para agilizar certas tarefas na hora do desenvolvimento.

E para essas 276 pessoas que baixaram e as próximas que forem baixar, o AbsolutoBrasil sofreu mais uma alteração e para melhor. Mais classes e mais componentes.

Pacotes alterados/Adicionados/Removidos:

1
2
3
4
                  import br.absolutobrasil.eventos
		  import br.absolutobrasil.intelli
		  import br.absolutobrasil.intelli.autofill
		  import br.absolutobrasil.utils

Pacotes de utilidades foram adicionados como todas as tabelas de pesos e medidas de acordo com as regras Brasileiras do INPE. Agora você ja tem embutido conversões para m3 para dm3, cm para km, km para metro, kg para grama, polegada para metros,…,etc. Muita coisa.

E mais, agora todos os municipios do Brasil, que são ao total 5800+ está disponível via API fácil assim, você utilizando pelo lado cliente sem a chateação de esperar respostas do servidor, você pode economizar cerca de 2kb por tráfego.

Como acessar? Veja o exemplo abaixo onde carrego todas as cidades(municipios do estados do Acre e São Paulo.

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
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
	</mx><mx :Script>
		< ![CDATA[
			import br.absolutobrasil.intelli.autofill.MunicipiosSudeste;
			import br.absolutobrasil.intelli.autofill.MunicipiosNorte;
 
				public function carregaMunicipios():void
				{
							var muniacre:MunicipiosNorte = new MunicipiosNorte();
							var munisp:MunicipiosSudeste = new MunicipiosSudeste();
 
							if(cbx.selectedIndex == 0){
										// carrego cidades do Acre
											lista.dataProvider = muniacre.cidadesACRE;
							}else {
									// carrego cidades de SP
											lista.dataProvider = munisp.cidadesSAOPAULO;
							}
 
				}
		]]>
	</mx>
	<mx :List id="lista" x="216" y="45"></mx>
	<mx :ComboBox  prompt="escolha a estado" change="carregaMunicipios()" id="cbx" x="48" y="105">
			</mx><mx :Array>
						</mx><mx :String>Acre</mx>
						<mx :String>São Paulo</mx>

Fácil né?

Ah!, e sem falar que agora você conta com um comoBox para preenchimento de ano, sabe aquiles componentes que geram o ano de nascimento e você escolhe o ano. Ele é bem inteligente, pega o ano corrente da máquena do usuário e gera o resto para você. Ficou com dúvida, veja exemplo abaixo:

1
2
3
4
5
6
7
8
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="br.absolutobrasil.intelli.*">
	</mx><mx :HBox x="78" y="81"  >
		<mx :Label text="Data Nascimento"/>
		<mx :TextInput width="42"/>
		<mx :TextInput width="42"/>
		<ns1 :ComboBoxAno/>
	</mx>

Uma das limitações do Framework do Flex é na hora de passar parâmetros para eventListeners, sejam eles de qualquer tipo, e para contornar esse problema nós também adicionamos uma solução que achamos bacana na hora de fazer isso, e melhor, sem deixar você mudar a maneira de como adicionar listeners ao seus objetos . Como? Veja o exemplo abaixo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application creationComplete="aplicarEventoListener()" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
	</mx><mx :Script>
		< ![CDATA[
			import mx.controls.Alert;
 
						import br.absolutobrasil.eventos.EventListenerParam;
 
						public function aplicarEventoListener():void
						{
									botao.addEventListener(MouseEvent.CLICK,EventListenerParam.executar(novaFuncao,"Exemplo de Passagem"));
						}
						public function novaFuncao(event:MouseEvent,texto:String):void
						{
									mx.controls.Alert.show(texto);
						}
		]]>
	</mx>
 
		<mx :Button label="Executar Comandos" id="botao"/>


Download dos SWC

Para usar o AbsolutoBrasil para Flex 3, baixe esse pacote especialmente feito para o Flex 3.

Para usar o AbsolutoBrasil para o Flex 2, basta usar esse pacote especial feito para o Flex 2.

Download dos Exemplos com códigos fontes disponíveis

* Para Flex 2
* Para Flex 3

Muito mais exemplos foram colocados dentro do projeto tanto na versão do Flex 3 quando para o Flex 2.

Baixem, usem é gratuito. Vai ajudar muito você a economizar tempo. Se você quer participar em alguma idéia ainda não implementada, envie sua sugestão para nós, teremos orgulho e o prazer de colocá-la no framework.

[Update] Alguns códigos exibidos neste post podem não aparecer corretamente, devido a um problema antigo em um plug-in para exibir código fonte. Pedimos desculpas.

Actionscript/ Actionscript Frameworks/ Flex/ Flex 2 Charts/ Flex 2 Open-source/ Flex Componentes/ frameworks/ Open-source

Flex 2 : Brincando e aprendendo com Flex Charts Framework

Exatamente, o titulo já diz tudo, se você quer dá aquile toque especial sem seus gráficos na internet, você precisa usar o Flex Charts Framework que é parte integrante do Flex Builder 2 ou que pode ser comprado separadamente. Quando se usa os gráficos do Flex, os resultados são surpreendentes.
Nas próximas linhas eu espero que você já consiga criar aplicações com gráficos de forma inteligente. Vamos Brincar.

Quais são os gráficos disponíveis no Flex Charts?

São ao total de 11 controles de charts dentre eles (Área,Barra,Bubble,Candlestick,Coluna,HighLowOpenClose,Linha,Pizza, Plot, Multiplas séries, Múltiplos eixos.
Todos são extremamente fáceis de serem implementados em uma aplicação. Para facilitar sua vida, vamos tomar por base o aprendizado por exemplo. O primeiro exemplo é o preenchimento de um datagrid por um XML interno, onde este datagrid vai provê os dados para a construção do gráfico de Coluna.


Exemplo1: Gráfico Básico populado de um datagrid.

Requer o Flash Player

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
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application creationComplete="montarAplicacao()" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="460" height="256">
 
</mx><mx :XML id="ficticios" xmlns="">
	<root>
		<banco>
			<cliente nome="José" saldoMais="300" saldoMenos="100"/>
			<cliente nome="João" saldoMais="400" saldoMenos="150"/>
			<cliente nome="Maria" saldoMais="600" saldoMenos="60"/>
			<cliente nome="Antonio" saldoMais="900" saldoMenos="40"/>
		</banco>
	</root>
</mx>
 
<mx :Script>
	< ![CDATA[
 
		// chamo pela propriedade creationComplete no tag mx:Application
		public function montarAplicacao():void
		{
			// leitura de atributos no XMl é feita pelo prefixo @
			ExemploDG.dataProvider = ficticios.banco.cliente;
			// copio os valores do DataProvider do DataGrid  assim monto meu Gráfico
			// nao esqueca de coloca o yField para desenhar.
			ExemploColuna.dataProvider = ExemploDG.dataProvider;
		}
	]]>
</mx>
 
 
	<mx :HDividedBox x="0" y="0" width="100%" height="100%">
		</mx><mx :ColumnChart id="ExemploColuna" width="50%" height="100%">
			</mx><mx :series>
				<mx :ColumnSeries displayName="Ficticios" yField="@saldoMais"/>
			</mx>
 
		<mx :DataGrid width="50%" height="100%" id="ExemploDG">
			</mx><mx :columns>
				<mx :DataGridColumn headerText="Cliente" dataField="@nome"/>
				<mx :DataGridColumn headerText="Saldo +" dataField="@saldoMais"/>
				<mx :DataGridColumn headerText="Saldo -" dataField="@saldoMenos"/>
			</mx>

Explicando o exemplo.

No exemplo acima foi usado o gráfico de Coluna, quando se trata de gráficos em colunas você deve se prender o detalhe que os gráficos crescem ignorando o valor X no eixo cartesiano, já que é através das posições em Y que o gráfico será desenhado.
Uma das principais propriedades do gráfico de coluna é o yField=”” que vai desenhar todo o gráfico baseado nos dados que foram inseridos.
O valor que o yField está associando ao gráfico é o valor dos atributos @saldoMais.
Foi usado uma função para setar configurações básicas de setamenteo de dataProviders entre bind de componentes e bind de fonte de dados. No caso da comparação de igualdade entre o ExemploDG e o ExemploGrafico, feito pelo dataProvider, significa dizer que tudo que tiver como base de informações existentes no datagrid serão repassados para o gráfico de coluna.

Exemplo 2: Usando gráfico de linhas e múltiplas linhas com DataGrid

Requer o Flash Player

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
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application creationComplete="montarAplicacao()" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="510" height="344">
 
</mx><mx :XML id="ficticios" xmlns="">
	<root>
		<banco>
			<cliente nome="José" saldoMais="300" saldoMenos="100"/>
			<cliente nome="João" saldoMais="400" saldoMenos="150"/>
			<cliente nome="Maria" saldoMais="600" saldoMenos="60"/>
			<cliente nome="Antonio" saldoMais="900" saldoMenos="40"/>
		</banco>
	</root>
</mx>
 
<mx :Script>
	< ![CDATA[
 
		// chamo pela propriedade creationComplete no tag mx:Application
		public function montarAplicacao():void
		{
			// leitura de atributos no XMl é feita pelo prefixo @
			ExemploDG.dataProvider = ficticios.banco.cliente;
			// copio os valores do DataProvider do DataGrid  assim monto meu Gráfico
			// nao esqueca de coloca o yField para desenhar.
			ExemploLinha.dataProvider = ExemploDG.dataProvider;
		}
	]]>
</mx>
 
	<mx :VDividedBox x="0" y="0" width="100%" height="100%">
		</mx><mx :LineChart id="ExemploLinha" width="100%" height="50%">
			</mx><mx :series>
				<mx :LineSeries displayName="Ficticios" yField="@saldoMais"/>
				<mx :LineSeries displayName="Ficticios" yField="@saldoMenos"/>
			</mx>
 
		<mx :DataGrid id="ExemploDG" width="100%" height="50%">
			</mx><mx :columns>
				<mx :DataGridColumn headerText="Column 1" dataField="col1"/>
				<mx :DataGridColumn headerText="Column 2" dataField="col2"/>
				<mx :DataGridColumn headerText="Column 3" dataField="col3"/>
			</mx>

Explicando o exemplo.

Não tem muita diferença entre o primeiro exemplo, neste segundo exemplo foi usado apenas mais uma série que no outro não havia sido usada. O que não impede de você alterar o código fonte do anterior e adicionar mais uma coluna a cada série nova. A série é o que me refiro ao eixo X, já que o Y é o que define os desenhos do gráficos.

Exemplo 3: Exibindo Legendas para os gráficos

Requer o Flash Player

O exemplo acima é o mesmo deste, a única diferença é que neste eu instanciei o tag mx:Legend, assim, agora posso ter uma legenda baseada no que está exibido nos gráficos.

1
2
3
4
5
6
7
8
		<mx :Canvas width="100%" height="50%">
		</mx><mx :LineChart id="ExemploLinha" width="100%" height="100%">
			</mx><mx :series>
				<mx :LineSeries displayName="Ficticios" yField="@saldoMais"/>
				<mx :LineSeries displayName="Ficticios" yField="@saldoMenos"/>
			</mx>
 
			<mx :Legend dataProvider="{ExemploLinha}" x="384" y="19"/>

Parte 2 por vim. bateu ligeiramente o sono da manhã.