Bom pessoal, dando continuidade a série de dicas que estou passando sobre o Flex aqui no blog hoje quero mostrar a vocês como é simples criar um gráfico de barras no Flex 3.

Para isso vou utilizar dois componentes, sendo eles um arrayCollection para o armazenamento dos dados e um BarChart que é o gráfico, ‘linkando’ assim os dados do array ao gráfico.

Confira o código abaixo:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” width=”366″ height=”281″>
<mx:Script>
<![CDATA[
//Aqui começa o código action Script

//importando o componente arrayCollection
import mx.collections.ArrayCollection

//criando e populando o arrayCollection
public var dados:ArrayCollection = new ArrayCollection([
{time:'São Paulo', torcida: 25 },
{time:'Palmeiras', torcida: 15 },
{time:'Santos', torcida: 10 },
{time:'Corinthians', torcida: 50 }
]);
]]>
</mx:Script>

<!–Criando o gráfico, e setando o dataProvider–>
<mx:ColumnChart id=”grafico” showDataTips=”true” dataProvider=”{dados}” x=”93″ y=”5″ width=”268″ height=”267″>
<!–Definição de linhas e colunas atenção ao yField e ao xField –>
<mx:series>
<mx:ColumnSeries displayName=”Time (%)” yField=”torcida” xField=”time” />
</mx:series>
<mx:horizontalAxis>
<mx:CategoryAxis categoryField=”time”/>
</mx:horizontalAxis>
</mx:ColumnChart>
<!–Setando a legenda–>
<mx:Legend dataProvider=”{grafico}” y=”5″ x=”3″/>
</mx:Application>

E veja o exemplo em funcionamento!

Nos últimos tempos tenho trabalhado com o Flex praticamente em tempo integral e com isso tenho pesquisado bastante a tecnologia e ferramentas que possam me auxiliar a tornar desenvolvimento Flex mais rápido e prático, e desta forma descobri o Blueprint.

Para quem está iniciando em uma linguagem como o Flex que é relativamente nova, é muito comum gastar algum tempo “Googlando” atrás de soluções para tarefas do dia a dia, e é aí que entra o Blueprint.

O Blueprint é um plug-in para ser instalado ao Flex Builder (em breve Flash Builder), que trás para o desenvolvedor uma caixa de busca de exemplos de código dentro da IDE de desenvolvimento, ou seja você nem precisa ir ao browser e sair persquisando e filtrando os resultados, os exemplos de código aparecem alí mesmo na ide, genial.

Para baixar o plugin acesse http://labs.adobe.com/technologies/blueprint/ a instalação é simples mas você deve seguir o passo a passo que está aqui: http://labs.adobe.com/wiki/index.php/Blueprint:Installation_Instructions

É isso, até a próxima

Vamos ao primeiro exemplo:

Objetivo: Mover um objeto de uma lado ao outro da animação ao clicar no botão.

Como fazer: Para executar esta ação basta você criar um componente de animação no mxml e apontar o mesmo para o objeto que deseja animar, após isso configuramos a ação no ActionScript e pronto!

Confira o código comentado:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” width=”385″ height=”228″>
<!– Criando os objetos utilizados na animação –>
<mx:Button x=”310″ y=”10″ label=”Mover” click=”animar()” />
<mx:Canvas id=”objetoAnimado” x=”10″ y=”159″ width=”66″ height=”59″ backgroundColor=”#FF0000″>
</mx:Canvas>

<!– criando o objeto de animação–>
<mx:Move id=”animacao” target=”{objetoAnimado}” />

<!–Iniciando o Action Script –>
<mx:Script>
<![CDATA[
//função que será chamado ao clicar no botão
public function animar() {
//definindo o ponto de origem
animacao.xFrom = 10;

//definindo o ponto de chegada
animacao.xTo = 310;

//definindo a duração da animação
animacao.duration = 500;

//rodando a animação
animacao.play();
}
]]>
</mx:Script>
</mx:Application>

E agora veja o exemplo em funcionamento:

É isso, simples assim, em breve novas dicas de Flex3 aqui!

Ultimamente tenho desenvolvido quase 100% do meu tempo no flex, e uma das necessidades que surgiram durante o desenvolvimento foi a possibilidade de receber parâmetros via url dentro do Flex.

E a solução é simples como deveria ser. Basta importar os pacotes BrowserManager e IBrowserManager e receber os dados:

Confira o código:

<?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.managers.IBrowserManager;

import mx.managers.BrowserManager;

import mx.controls.Alert;

public function init(){

var bm:IBrowserManager = BrowserManager.getInstance();

bm.init();

Alert.show(bm.url);

}

]]>

</mx:Script>

</mx:Application>

Simples e rápido! Tem dúvidas? Deixe seu comentário!

O objetivo deste post é tentar explicar um pouco mais do que se trata a tecnologia Air da Adobe, e quais as oportunidades que ela traz as empresas e aos usuários.

O Air começou a ser desenvolvido em 2007, ainda sobre o codinome Apollo tendo seu lançamento oficial em fevereiro de 2008, ou seja, a pouco mais de um ano.

Basicamente o Air possibilita que aplicações nativamente desenvolvidas para a Web, possas ser portadas para o desktop, possibilitando uma gama maior de possibilidades sem as restrições do browser.

Dentre as vantagens da plataforma cito como mais importante:

É multi-plataforma, ou seja não importa se seu cliente usa Windows, Mac ou Linux, a aplicação vai funcionar.

Pode funcionar Off-line, e com isso você pode criar aplicações como um leitor de email que sincroniza quando se conecta a web

É integrado ao Dreamweaver ao Flash e ao Flex, ou seja com algumas poucas alterações, aquela aplicação web vira uma aplicação desktop.

Você não precisa se preocupar com a compatibilidade de browsers, liberando a criatividade dos designers para criação de interfaces geniais.

É atualizável, ou seja a cada nova versão de sua aplicação, os usuários serão avisados e podem atualizar a APP.

Estas, são algumas das vantagens, para desenvolvedores e clientes, algumas boas aplicações já foram feitas como:

Ebay Desktop

TwitterDeck

Aol Top 100

Você pode baixar boas apps no Adobe MarketPlace

Mas, no Brasil ainda estamos em um ritmo lendo para adoção da tecnologia, pretendo aqui no blog incentivar o uso da tecnologia divulgando links, apps e tutoriais!

Seja Air você também!

Como já era esperado foram lançadas hoje as novas versões dos softwares de produção da Adobe, estes que são os carros-chefe da produção web mundial.

Dentre os lançamentos está o novo Update do Photoshop que chega a versão CS4, com novas ferramentas efeitos e uma nova forma de processamento de imagens.

Também foram disponibilizadas as novas versões do Photoshop Extended, InDesign, Illustrator, Flash Professional, Dreamweaver, After Effects e o Premiere. 

Os preços como sempre são bem salgados e vão de US$999 a US$1.799 aqui você pode conferir a tabela completa, de quanto vai ter que gastar para conseguir o serial do Dreamweaver cs4.

O que mais me interressa pelo menos neste início é o Dreamweaver CS4, o qual vou testar e posto ainda esta semana meus comentários sobre ele.

Pra quem quiser Baixar o Dreamweaver CS4 ou baixar o Photoshop CS4 além de todos os softwares que a Adobe atualizou clique aqui!

E você testou? O que achou? 

Aqui abaixo você pode ver um vídeo com algumas das novas funcionalidades do Dreamweaver CS4

Bom, quem acompanha o blog percebeu que eu fiquei um tempinho sem publicar nada por aqui, coisa que não costumo fazer, mas o motivo foi nobre, fiz uma imersão nas tecnologias Flex/Air e me comprometi a entregar um projeto em um prazo… digamos curto… após isso tirei 5 dias de mini-férias, por que não sou de ferro né.

Bom mas vamos ao motivo do post, o Flex é baseado nas linguagens MXML e Action Script 3, a primeira é muito similar ao xml e marca os ítens de layout do projeto. Já o AS3 é responsável pela lógica do projeto, sendo uma linguagem fortemente tipada e totalmente orientada a objetos.

Nessa minha empreitada, encontrei alguns links que me ajudaram muito a resolver o pepipo, abaixo listo os principais:

http://www.adobe.com/devnet/flex/videotraining/

Lições da Adobe desde o beaba do Flex até implementações mais avançadas.

http://examples.adobe.com/flex3/componentexplorer/explorer.html

Todos os componentes do flex em exemplos práticos de uso

http://www.vedovelli.com.br/?s=Screencast

Screencasts muito bons com muitas dicas sobre o flex.

Bom esses são alguns dos caminhos que me ajudaram neste projeto, futuramente pretendo postar algumas dicas aqui também sobre o flex. 

O resultado deste trabalho você pode conferir a no gestor financeiro da Investnews que esta no link: http://www.br.inter.net/investnews

Comente abaixo o que você achou do resultado! um abraço a todos!

Tenho que adminitir que já estava a um bom tempo longe do Pinguim, aliás desde o início do ano quando em uma das minhas trocas de maquina aqui na empresa, abandonei o Kubuntu para voltar ao Windows que ja vinha embarcado no desktop da Dell novinho.

Eu já estava a alguns dias pensando em voltar para o mundo livre, e o meu windows me “premiou” com uma daquelas travadas sem concerto na segunda feira, aí aproveitando o encejo estou utilizando o Ubuntu 8.04, alias muito rápido e estável.

Desde que descobri o Twitter não consigo ficar sem um programaniha client para postar, seja no mac com o twitterrific, no windows com um que é uma porcaria, ou no linux agora com o  Twhirl.

O Twhirl é leve e rápido e vale a pena testar, o download pode ser feito no site oficial do programa http://www.twhirl.org

E você como acessa o twitter?  Comente! Não sabe o que é twitter, leia aqui.

___________________________________________________________________________

Update

O Cadu levantou o fato do Linux não rodar Adobe Air, porém existe uma versão Alpha do Air para Linux no link http://labs.adobe.com/downloads/air_linux.html, instalando ele ai é possivel utilizar.

Desde ontem estou utilizando o Snackr, um ótimo leitor RSS desenvolvido com a tecnologia Adobe Air.

A grande novidade deste programa é que seus feeds são exibidos de forma rotativa em uma interface elegante, algo muito interressante para quem gosta de um visual moderno no desktop e quer ficar ligado em seus feeds.

A falha fica na não possibilidade de manter o programa sempre no topo o que seria muito interressante, mas com certeza istop estara disponível em futuras versões.

Para conhecer o programa acesse o site oficial.

E para baixar o Adobe Air que é necessário para utilizá-lo clique aqui!

Até a próxima!

Nos últimos dias tenho estudado a fundo a tecnologia Air lançada no início deste ano pela Adobe líder de mercado no nicho de ferramentas para desenvolvimento e detentora da tecnologia Flash, presente em 98% dos computadores de todo o mundo.

O que é o Adobe Air?

Pelo que pode concluír o Adobe Air, se aproxima do conceito da máquina virtual do Java, que uma vez instalada em seu computador permite que você utilize aplicativos desenvolvidos em java.

Instalando o Adobe Air em seu computador, você pode começar a utilizar os mais diversos programas desenvolvidos nesta tecnologia.

Como instalar o Adobe Air?

Você pode baixar o programa no site da Adobe, porém para facilitar basta clicar aqui.

Aonde encontrar programas em Adobe Air?

Você vai começar a encontrar nos próximos meses estes programas nos mais diversos sites, inclusive aqui, porém a Adobe criou um diretório de aplicativos chamado “Air MarktPlace” que vale a pena vasculhar, é como um Superdownloads só com programas em Air.

Para que você começe a conhecer todo o potêncial do Air, recomento instalar o “Aol Top 100″, programa que disponibiliza centenas de clípes musicais e que foi desenvolvido em Air, para baixar o programa clique aqui.

É isso, um abraço a todos!

E você tem dúvidas? Sugestões? testou o Air? Deixe seu comentário!