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ã.

Flex/ Flex 2 Charts/ Notícias

Registre hoje sua copia de estudante do Adobe Flex Builder 2

Já está no ar o site para registro de cópia de seu Flex Builder 2 para fim de uso nos seus estudos.

Antes que você já preencha o cadastro tenho aqui alguns pontos para explicar para ambos tanto quem é estudante quanto quem é coordenador de cursos na faculdade.

Para Estudantes
Para receber a sua cópia preencha todos os campos (são obrigatórios).
No campo de Student ID, você vai enviar uma imagem scaneada da declaração de sua faculdade que prova que você é um aluno legível, lembre-se de pedir para faculdade não esquecer de colocar seu número de matrícula, CPF e nome completo.(não vale carteira de estudante).
Só serão aceitos alunos legítimos, lembrando que a Adobe Brasil vai ter acesso aos que pediram uma cópia então será verificado se é ou não real.

Depois que passar pelo processo de verificação você vai receber o número de série do seu Adobe Flex Builder 2 em seu e-mail e assim você vai poder fazer o download e inserir o serial em seu Adobe Flex Builder 2 instalado.

Para faculdades

Para que você receba licenças do Adobe Flex Builder 2 e possa instalar em quantas máquenas forem necessários, você precisa da certidão do MEC scaneada ou caso você não tenha acesso a cópia original para scanear, você pode ter uma cópia autenticada, provando que sua faculdade, universidade faz parte do programa de educação nacional e que tem a inscrição no MEC. Isto vale para faculdades estaduais, federais, municipais(autarqueas) e faculdades particulares.

O número máximo de licenças por faculdade é e 30.

Faça seu pedido aqui e bons estudos.

Dicas/ Flex/ Flex 2 Charts/ Flex 2 e Java 5/ Flex 2 Open-source/ Flex para Gerentes/ Negócios/ Notícias

Adobe Flex Builder 2 original e gratuito para estudantes e faculdades

Incrivelmente como pensamentos bons tornam-se em coisas boas, hoje pela manhã em um curso que estou ministrando um dos meus alunos o Petter estava comentando comigo o fato da Adobe ajudar quem é estudante que não tem muita grana e que quer aprender a programar Flex.
Poucas horas depois Fabio Oliveira me envia um link sobre a Adobe tornar isso publicamente visto.

O que de fato é real?

Agora qualquer estudante pode ter licença do Adobe Flex Builder 2 ou qualquer faculdade de Tecnologia pode ter em todas as máquenas o Adobe Flex Builder 2 original.

Por que a Adobe tomou tal decisão?

Não é de agora que vêm-se estudando isso, ano passado a Adobe começou com um projeto piloto no Canadá e de imediato depois de ter lido sobre isso, eu conversei com o pessoal que estava organizando isso pedir para iniciar um projeto desse também aqui no Brasi. Mais sem sucesso, por que precisava esperar dar certo lá para depois vim por aqui.

Eis que graças a Deus e boa vontade do pessoal responsavel pela faculdade de lá, ajudar a adobe a adotar isso e fazer funcionar.

Ontem na palestra no CEFET em SP, eu comentei sobre essa possibilidade porém não falei expressadamente que seria real, mais que a Adobe tinha planos para isso.

Eis que hoje foi o anúncio geral e agora qualquer faculdade de tecnologia aqui no Brasil ou em qualquer lugar do mundo pode fazer os pedidos das licenças do Adobe Flex Builder 2 para serem instalados nas máquenas e também qualquer estudante vinculado à qualquer faculdade seja federal, estadual ou particular pode também pedir sua licença à partir de novembro que é quando o projeto começa.

O que marca isso na história do Brasil e na história da tecnologia Adobe Flex?

Isso sem dúvidas é um marco histórico que a Adobe está fazendo para a tecnologia e principalmente pela primeira vez na história (adobe/macromedia), um estudante ou faculdade não vai mais precisar desenbolsar para usar o Flex.

Na história do Brasil, para os que ainda não sabem nós somos a maior comunidade Flex fora dos Estados Unidos que usa Flex como ninguém. O que fortalecerá mais ainda o uso da tecnologia em classes de base que são sem dúvidas os cursos de Ciências da Computação, Tecnologia da Informação, etc, em fim os cursos tanto técnicos como bacharel que tem-se nas faculdades do País.

Nossa, eu estou até vendo onde isso vai parar, Adobe Flex vai se tornar cada vez mais a #1 opção para construção de aplicações web no Brasil.

Quer ver na íntegra sobre a matéria? visite aqui.