Usando efeitos e animação no Flex 4

Um video mostrando como será os efeitos e animação do Flex 4.



Exemplos para download:
http://www.adobe.com/devnet/flex/articles/flex4_effects_pt1.html
http://www.adobe.com/devnet/flex/articles/flex4_effects_pt2.html

Exemplo do Efeito 3D


Fonte : http://labs.adobe.com/technologies/flash/videos/flashcamp/haase/

Flex Style Explorer

Flex Style Explorer fornece uma maneira visual para você ver como alterar as configurações de estilo de Flex, componentes de interface de usuário vai afetar a visualização de sua aplicação. Esta aplicação específica é dividido em três seções: Style Controls, Sandbox, e CSS. Essas seções permitem, respectivamente, teste, ver e aprender as configurações de estilo que são necessários para conseguir o "look" que você tem em mente. O Flex Style Explorer permite definir estilos para aplicações, elementos de formulário, grids de dados, e muito mais.

Link para Aplicação : http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html

Fonte da Aplicação : http://www.maclema.com/content/sek/srcview/index.html

Fonte : http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html

Axiis - Gráficos Elegantes

Axiis é uma fonte aberta quadro de visualização de dados projetado para desenvolvedores iniciantes e experientes.
Se você está construindo gráficos elegantes para reuniões de informação executiva ou a explorar as fronteiras da investigação avançadas de visualização de dados, Axiis tem algo para você.
Axiis fornece tanto componentes pré-visualização, bem como os padrões de layout e renderização de classes abstratas que permitem a você criar suas próprias visualizações únicas.
Axiis é construído sobre o quadro Degrafa gráficos e Adobe Flex 3.

Veja os Exemplos :

http://www.axiis.org/examples.html





Fonte :
http://www.axiis.org/index.html
http://tourdeflex.blogspot.com/2009/06/axiis-data-visualization-samples-added.html

Tour de Flex

Tour de Flex é uma aplicação para explorar as capacidades Flex e recursos, incluindo os componentes do núcleo Flex, Adobe AIR, integração de dados, e uma variedade de componentes de terceiros, os efeitos, skins e muito mais.

O Tour de Flex inclui mais de 200 amostras de execução, cada um com código-fonte, links para documentação, e outros detalhes. Os tópicos incluem os principais componentes do Flex, Flex acesso a dados, recursos de desktop AIR, nuvem APIs, visualização de dados, mapeamento e uma crescente coleção de componentes personalizados, efeitos e skins.

Veja a aplicação online : http://www.adobe.com/devnet/flex/tourdeflex/web/

Fonte : http://www.adobe.com/devnet/flex/tourdeflex/

Criando um Custom Panel - Minimizar - Maximizar - Fechar

O Fabiel Prestes fez um exemplo da utilização do Minimizar, Maximizar e Fechar janelas no Flex.

Link para tutorial : http://www.fabielprestes.com.br/?p=160

Download do Projeto : http://www.fabielprestes.com.br/arquivos/customPanel/CustomPanel.rar

Fonte : http://www.fabielprestes.com.br/?p=160

Integrando Flex com Java

Para aquele que gostam do JAVA o Fabio Prestes fez um tutorial bem simples desta integração.

Lnk para tutorial : http://www.fabielprestes.com.br/?p=67

Requisitos para a realização da Integração:

• Tomcat 6
• Java 6
• BlazeDs 3.x
• Sdk Flex 3.x
• Eclipse, FelxBuilder ou NetBeans.

Fonte: http://www.fabielprestes.com.br/

Arrastar e Soltar usando Imagem (Drag e Drop)

Abaixo um exemplo de arrastar e soltar usando imagens.


Exemplo.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
backgroundGradientAlphas="[1.0, 1.0]"
backgroundGradientColors="[#FFFFFF, #FFFFFF]" viewSourceURL="srcview/index.html">

<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.core.DragSource;
import mx.managers.DragManager;
import mx.events.DragEvent;

[Bindable]
private var quantity : int = 0;

private function initiateDrag(event:MouseEvent):void {

var dragInitiator:Image = event.currentTarget as Image;

var source:DragSource = new DragSource();
source.addData(dragInitiator,"gift");

var proxy:Image = new Image();
proxy.source = dragInitiator.source;
proxy.width = 50;
proxy.height = 50;

DragManager.doDrag(dragInitiator, source, event, proxy);
}

private function dragEnterHandler(event:DragEvent):void {
if (event.dragSource.hasFormat("gift")){
DragManager.acceptDragDrop(event.currentTarget as Image);
}
}

private function dragDropHandler(event:DragEvent):void{
quantity ++;
Alert.show("Gift added to your cart");
}

]]>
</mx:Script>

<mx:Label text="Add drag and drop support manually" color="#990000"
fontSize="20" fontWeight="bold" fontStyle="italic"/>

<mx:Canvas width="800" height="366">
<mx:Label fontSize="14"
color="#000000" width="66" x="600" y="311"
fontWeight="bold" textAlign="center"
text="{quantity.toString()}"/>
<mx:Image source="assets/gift.png" x="40" y="120"
mouseDown="initiateDrag(event)" />
<mx:Image source="@Embed('assets/cart.jpg')" x="480" y="100"
dragEnter="dragEnterHandler(event)"
dragDrop="dragDropHandler(event)" />
</mx:Canvas>

</mx:Application>

Exemplo Funcionando : http://files.riacodes.com/flex_drag-drop-gift-cart/demo/

Código Fonte : http://files.riacodes.com/flex_drag-drop-gift-cart/demo/srcview/index.html

Fonte : http://www.riacodes.com/flex/add-drag-and-drop-support-manually/

Ferramenta “FREE” para desenvolvimento em FLEX

Flash Develop é uma ferramenta “FREE” que tem suporte para desenvolvimento de aplicações FLEX. O Anderson Macente está utilizando á algum tempo e gostou muito. Ela não tem a parte de interface (clicar e arrastar) do Flex Builder, porém ela ajuda muito completando códigos e compilando o projeto de maneira simples.

"A falta da parte de interface não é nenhuma desvantagem, em minha opinião, o que realmente faz falta pra mim é uma ferramenta de versionamento do código fonte".
Anderson Macente

O site oficial é esse.

Link para download.

Fonte : http://andersonmacente.blogspot.com/2009/09/ferramenta-free-para-desenvolvimento-em.html

ScreenToaster - Ferramenta para ScrenCast

Pessoal, uma ferramenta feita em FLEX muito util para aqueles que fazem Screencasts, tutoriais, demonstrações, treinamentos, palestras e muito mais.

É bem simples de utilizar, é Free e não precisa instalar nenhum programa para utiliza-lo.
Compatível com Windows, Mac OS X, Linux.

Você pode adicionar áudio e uma webcam enquanto estiver gravando. Quando terminar, adicionar legendas, escolha a sua miniatura, descrever e codificar seus vídeos para outros usuários podem encontrar facilmente o seu screencasts.

Você pode fazer o download do video (.mov ou .swf) ou ainda publicar na internet conforme link abaixo.

Exemplo de um video :

Screencasts and videos online

Fonte : http://www.screentoaster.com/

De MonsterDebugguer

De MonsterDebugger é um depurador de código aberto para o Adobe Flash, Flex e AIR. De MonsterDebugger é feito em Flex e AIR pelo estúdio de design De Monstros.

Como funciona:

Existem alguns passos simples que você tem que tomar a fim de começar a usar De MonsterDebugger com seus próprios aplicativos.

- Primeiro você precisa ter o Adobe AIR instalado.
- Depois que você precisa para instalar De MonsterDebugger. Basta abrir o download e AIR fará o resto.
- Depois De MonsterDebugger está instalado e funcionando, você ainda precisará importar a classe do cliente para estabelecer a conexão com De MonsterDebugger. A classe cliente é incorporado em De MonsterDebugger e podem ser salvos em qualquer local, selecionando Arquivo> Exportar Client Class. Salve a pasta na pasta raiz do seu aplicativo.
- Agora tudo que você precisa fazer é importar a classe em seu projeto. Flash e Flex exemplos são mostrados abaixo.

Exemplo em Flex

<?xml version = "1.0" encoding = "UTF-8"?> 
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init()"> 
   <mx:Script> 
    <![CDATA[
     import mx.controls.Alert;     
    import nl.demonsters.debugger.MonsterDebugger; 
  
     
    private var debugger : MonsterDebugger; 
  
    private function init(): void 
    {  
   debugger = new MonsterDebugger(this);
   MonsterDebugger.trace(this, "Hello World!");
    } 
    ]]>
   </mx:Script> 
   <mx:Button x="176" y="257" label="Button" click="MonsterDebugger.trace(this, 'teste');"/>
 </mx:Application> 

Download : http://monsterdebugger.googlecode.com/files/MonsterDebuggerV2_04.air


Fiz um video simples de como usar o De Monster Debugger

Screencasts and videos online

Fonte : http://demonsterdebugger.com/

Gerar Excel, Html e Word de um Datagrid

Pessoal fiz um exemplo que gera um documento do Excel, HTML ou Word dos dados de um DataGrid. É bem simples e utiliza o FileReference para salvar os arquivos.

Atenção: fique atento a codificação de caracteres que você utiliza no Flex e a que você utiliza na hora de gerar os documentos, pois pode ter problemas com acentuação das palavras.

Observação : para compilar esse projeto você precisa alterar a versão do flash player para 10, para isso clique com o botão direito no projeto, acesse a opção "Flex Compiler" e altere o campo "Require Flash Player version" para 10.0.0.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 <mx:TitleWindow x="154" y="59" styleName="opaquePanel">
  <mx:DataGrid id="dtgLista" width="400" height="174" dataProvider="{dtpLista}">
   <mx:columns>
    <mx:DataGridColumn headerText="Codigo" dataField="codigo"/>
    <mx:DataGridColumn headerText="Nome" dataField="nome"/>
    <mx:DataGridColumn headerText="Idade" dataField="idade"/>
   </mx:columns>
  </mx:DataGrid>
  <mx:ControlBar horizontalAlign="right">
   <mx:Box direction="horizontal">
    <mx:RadioButtonGroup id="rdgTipo"/>
    <mx:RadioButton value="xls" label="XLS" groupName="rdgTipo" selected="true"/>
    <mx:RadioButton value="html" y="45" label="HTML" groupName="rdgTipo"/>
    <mx:RadioButton value="doc" label="DOC" groupName="rdgTipo"/> 
   </mx:Box>
   <mx:Button label="Salvar Documento" click="gerar(dtgLista)"/>
  </mx:ControlBar>
 </mx:TitleWindow>

 <mx:Script>
  <![CDATA[
   import mx.controls.Alert;
   import mx.controls.DataGrid;

   [Bindable] private var dtpLista : Object = 
    [
    {codigo : '1',nome : 'Luiz',idade : 23},
    {codigo : '2',nome : 'Maria',idade : 20},
    {codigo : '3',nome : 'Carlos',idade : 2},
    {codigo : '4',nome : 'Da Silva',idade : 15},
    {codigo : '5',nome : 'Marcela',idade : 28},
    {codigo : '6',nome : 'André',idade : 24},
    {codigo : '7',nome : 'José',idade : 23},
    {codigo : '8',nome : 'Silva',idade : 21},
    {codigo : '9',nome : '',idade : 5},
    ];

   private function gerar(dtg : DataGrid):void
   {
    var i   : int;
    var j   : int;
    var html  : String = "";

    html+="<html><body>";
    html+="<head>";
    html+="<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>";
    html+="</head>";
    html+="<table border=1>";

    //TITULOS DAS COLUNAS
    html+="<tr>";     
    for(i=0;i<dtg.columns.length;i++)
    {
     html+="<td><b>"+dtg.columns[i].headerText+"</b></td>";
    }    
    html+="</tr>";     

    //DADOS DO GRID
    for(j=0;j<dtg.dataProvider.length;j++)
    {
     html+="<tr>";
     for(i=0;i<dtg.columns.length;i++)
     {      
      if(dtg.dataProvider[j][dtg.columns[i].dataField]){       
       html+="<td>"+(dtg.dataProvider[j][dtg.columns[i].dataField].toString() ? dtg.dataProvider[j][dtg.columns[i].dataField].toString() : " ")+"</td>";
      }else{
       html+="<td> </td>";
      }
     }
     html+="</tr>";
    }

    html+="</table>";

    html+="</body></html>";

    new FileReference().save(html,"arquivo." + rdgTipo.selectedValue);
   }
  ]]>
 </mx:Script> 

</mx:Application>

LineChart - Gráfico

Abaixo um exemplo de utilização do LineChart

LineChart.mxml

<?xml version="1.0"?>
<!-- Simple example to demonstrate the LineChart and AreaChart controls. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

 <mx:Script>
  <![CDATA[

   import mx.collections.ArrayCollection;

   [Bindable]
   private var expensesAC:ArrayCollection = new ArrayCollection( [
    { Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
    { Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
    { Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 },
    { Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },
    { Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);
  ]]>
 </mx:Script>

 <!-- Define custom colors for use as fills in the AreaChart control. -->
 <mx:SolidColor id="sc1" color="blue" alpha=".3"/>
 <mx:SolidColor id="sc2" color="red" alpha=".3"/>
 <mx:SolidColor id="sc3" color="green" alpha=".3"/>

 <!-- Define custom Strokes. -->
 <mx:Stroke id = "s1" color="blue" weight="2"/>
 <mx:Stroke id = "s2" color="red" weight="2"/>
 <mx:Stroke id = "s3" color="green" weight="2"/>

 <mx:Panel title="LineChart and AreaChart Controls Example"
     height="100%" width="100%" layout="horizontal">

  <mx:LineChart id="linechart" height="100%" width="45%"
       paddingLeft="5" paddingRight="5"
       showDataTips="true" dataProvider="{expensesAC}">

   <mx:horizontalAxis>
    <mx:CategoryAxis categoryField="Month"/>
   </mx:horizontalAxis>

   <mx:series>
    <mx:LineSeries yField="Profit" form="curve" displayName="Profit" lineStroke="{s1}"/>
    <mx:LineSeries yField="Expenses" form="curve" displayName="Expenses" lineStroke="{s2}"/>
    <mx:LineSeries yField="Amount" form="curve" displayName="Amount" lineStroke="{s3}"/>
   </mx:series>
  </mx:LineChart>

  <mx:Legend dataProvider="{linechart}"/>

  <mx:AreaChart id="Areachart" height="100%" width="45%"
       paddingLeft="5" paddingRight="5"
       showDataTips="true" dataProvider="{expensesAC}">

   <mx:horizontalAxis>
    <mx:CategoryAxis categoryField="Month"/>
   </mx:horizontalAxis>

   <mx:series>
    <mx:AreaSeries yField="Profit" form="curve" displayName="Profit" areaStroke="{s1}" areaFill="{sc1}"/>
    <mx:AreaSeries yField="Expenses" form="curve" displayName="Expenses" areaStroke="{s2}" areaFill="{sc2}"/>
    <mx:AreaSeries yField="Amount" form="curve" displayName="Amount" areaStroke="{s3}" areaFill="{sc3}"/>
   </mx:series>
  </mx:AreaChart>

  <mx:Legend dataProvider="{Areachart}"/>

 </mx:Panel>
</mx:Application>

Fonte : http://livedocs.adobe.com/flex/3/langref/mx/charts/LineChart.html

10 plug-ins para Flex Builder

O Flex Builder é sem dúvida a primeira IDE que um desenvolvedor terá contato quando iniciar no mundo Flex. Porém quem já trabalha com outras IDEs, vai sentir falta de alguns recursos existentes. Veja abaixo uma lista completa de plug-ins para melhorar seu Flex Builder e conseqüentemente aumentar sua produtividade com a ferramenta.
Igor Costa

1- RegExp Painel: O RegExp é para quem trabalha gosta de usar expressões regulares em Actionscript e quer testar na própria ferramenta, sem ter que usar outras ferramentas para tal. Baixe aqui.

2 - Enterprise IDE:Um baita plug-in, pena que ainda não há definições sobre comercialização, suporte, preços. Porém traz uma gama de recursos interessantes, desde leitor de RSS à geradores de classes. Baixe aqui.

Cairngorm Plugin: Desenvolvido pelo próprio pessoal da Adobe, esse plug-in fornece de forma fácil a geração de novas classes para quem usa o Cairngorm Framework. Baixe aqui.

3 - Blueprint: Pintou aquela dúvida no meio do desenvolvimento e quer ver como um método, classe, componente funciona? Não precisa mais ficar esperando o Google responder para você, com o BluePrint você faz tudo isso sem sai da IDE. O Blueprint foi desenvolvido por uma empresa na Romênia que fora comprada pela Adobe. Baixe aqui.

Flex Formatter: Se seu código está meio bagunçado no aspecto de identação. O Flex Formatter é feito para você, como o próprio nome diz, ele ajeita o código para você e lhe ajuda a manter um código legível e organizado. Baixe aqui.

Eclipse Monkey: Sabe o famoso Grease monkey do Firefox?Pois é alguém teve a idéia de usar a mesma idéia do grease monkey dentro do Eclipse, com ele é possível fazer de tudo, prota tanto que você pode por exemplo gerar automaticamente getter e setters. Baixe aqui.

Aptana: Quer que seu Flex Builder tenha um editor de XHTML, CSS, Javascript excelente sem ter que usar outra IDE? O Aptana é feito para isso, além disso com ele você pode gerar novos projetos AIR usando apenas Javascript, coisa que no Flex Builder só é possível usando Flex. Baixe Aqui.

PDT Plug-in:Se você é desenvolvedor PHP e quer incorporar em seu Flex Builder a edição de código PHP sem usar a IDE da Zend. Você pode usar o PDT dentro do seu Flex Builder e ter suporte a edição de código PHP. Baixe aqui.

CFEclipse: Você desenvolvedor ColdFusion, já conhece o CFEclipse, o bom é que você pode instalar o plug-in do CFEclipse direto no seu Flex Builder e assim editar cfcs, cfml sem precisar de outra IDE. Baixe aqui.

Flex Builder em Full Screen: O Plug-in Eclipse Fullscreen, ajuda você que está de saco cheio dos paineis Flex Navigator, Flex Components e Outline, que ficam ali ao lado ocupando espaço. Você só quer um desejo ter o editor 100% livre de qualquer coisa que lhe chame a atenção. Baixe aqui.

Fonte : http://www.igorcosta.com/blog/?p=851

Varios Exemplos de Gráficos

Link interessante de vários Gráficos




http://demo.quietlyscheming.com/ChartSampler/app.html

Código Fonte : http://demo.quietlyscheming.com/ChartSampler/srcview/index.html

Usando o Degrafa

O degrafa é uma ferramenta que ajuda em muito no desenvolvimento de Skins nas aplicações Flex. Hoje eu utilizo ele em vários projetos, principalmente para backgroung. As aplicações abaixo foram retiradas do próprio site da degrafa em http://code.google.com/p/degrafa/source/.

Veja os exemplos : http://blog.mxml.com.br/usando-o-degrafa


Fonte : Eduardo Kraus - http://blog.mxml.com.br/usando-o-degrafa

Tutoriais, Componentes e Temas interessantes para o Adobe Flex

Lista de Tutoriais,componentes interessantes para Adobe Flex.

http://www.noupe.com/adobe/flex-developers-toolbox-free-components-themes-and-tutorials.html

Adobe Flex A Partir Do Zero

Para os iniciantes em flex links para 5 Apostilas.

Adobe_Flex_a_partir_do_zero_1.pdf

Adobe_Flex_a_partir_do_zero_2.pdf

Adobe_Flex_a_partir_do_zero_3.pdf

Adobe_Flex_a_partir_do_zero_4.pdf

Adobe_Flex_a_partir_do_zero_5.pdf


Retirado de : http://msdevstudio.com/blog/2008/01/05/adobe-flex-a-partir-do-zero/

Utilize Menu o botão direito do mouse

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

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    applicationComplete="onAppCreated()" width="495" height="342" viewSourceURL="srcview/index.html">
    
    
     <!-- Define the menu data. This is an official example from livedoc -->
    <mx:XML format="e4x" id="myMenuData">
        <root>
            <menuitem label="MenuItem A">
                <menuitem label="SubMenuItem A-1" enabled="false"/>
                <menuitem label="SubMenuItem A-2"/>
            </menuitem>
            <menuitem label="MenuItem B" type="check" toggled="true"/>
            <menuitem label="MenuItem C" type="check" toggled="false"/>
            <menuitem type="separator"/>     
            <menuitem label="MenuItem D">
                <menuitem label="SubMenuItem D-1" type="radio" groupName="one" />
                <menuitem label="SubMenuItem D-2" type="radio" groupName="one" toggled="true"/>
                <menuitem label="SubMenuItem D-3" type="radio" groupName="one" />
            </menuitem>
            <menuitem type="separator"/>  
            <menuitem label="Custom View Source"/>
        </root>
    </mx:XML>

    
    
    <mx:Script>
        <![CDATA[
            import flash.net.navigateToURL;
            import mx.events.MenuEvent;
            import mx.controls.Menu;
            import mx.controls.Alert;
            
            //my Menu Instance
            private var myMenu:Menu;
            
            //In the application created event, we initialize a callback for
            //ExternalInterface using a same name "rightClick" used on the javascript code.
            private function onAppCreated():void{
                ExternalInterface.addCallback("rightClick",onMouseRightButtonClicked);
            }
            
            //the magic method, called by javascript through ExternalInterface.
            private function onMouseRightButtonClicked():void{
                //if exists an before Menu, simpply hide it.
                if (myMenu != null) myMenu.hide();
                
                //creating a Menu
                myMenu = Menu.createMenu(null, myMenuData,false);
                myMenu.labelField="@label";
                
                //add a eventListener
                myMenu.addEventListener(MenuEvent.ITEM_CLICK,myMenuItemClicked);
                
                //show the Menu where the mouse pointer is located.
                myMenu.show(stage.mouseX, stage.mouseY);
                
            }
            
            //This method is invoked when a menu item was clicked.
            private function myMenuItemClicked(e:MenuEvent):void {
                
                //if "customViewSource" alias was clicked...
                if (e.label=="Custom View Source") {
                    //... then, show the view source page. 
                    navigateToURL(new URLRequest("srcview/index.html"));
                }
            }
            
        ]]>
    </mx:Script>
    <mx:Label x="18.5" y="10" text="Clique com o botão direito do Mouse sobre a área da aplicação" fontWeight="bold" fontSize="13"/>
    <mx:Label x="49.5" y="310" text="Click the right mouse button over the application area" fontWeight="bold" fontSize="13"/>
    
</mx:Application>

Link para Código fonte : http://www.mariojunior.com/labs/rightClickAS3/srcview/index.html


Fonte : http://blog.mariojunior.com/?p=17

Adobe dá Flex Builder 3 para programadores desempregados

"É 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."

Igor Musardo



Fonte : http://www.igormusardo.com.br/page/2/

ColumnChart - Gráfico

Abaixo um exemplo de utilização do ColumnChart

ColumnChart.mxml

<?xml version="1.0"?>
<!-- Simple exemplo to demonstrate the ColumnChart and BarChart controls. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[          
        import mx.collections.ArrayCollection;

        [Bindable]
        private var medalsAC:ArrayCollection = new ArrayCollection( [
            { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
            { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
            { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);
        ]]>
    </mx:Script>

    <!-- Define custom colors for use as fills. -->
    <mx:SolidColor id="sc1" color="yellow" alpha=".8"/>
    <mx:SolidColor id="sc2" color="0xCCCCCC" alpha=".6"/>
    <mx:SolidColor id="sc3" color="0xFFCC66" alpha=".6"/>

    <!-- Define custom Strokes for the columns. -->
    <mx:Stroke id="s1" color="yellow" weight="2"/>
    <mx:Stroke id="s2" color="0xCCCCCC" weight="2"/>
    <mx:Stroke id="s3" color="0xFFCC66" weight="2"/>

    <mx:Panel title="ColumnChart and BarChart Controls Example" 
        height="100%" width="100%" layout="horizontal">
        <mx:ColumnChart id="column" 
            height="100%" 
            width="45%" 
            paddingLeft="5" 
            paddingRight="5" 
            showDataTips="true" 
            dataProvider="{medalsAC}"
        >                
            <mx:horizontalAxis>
                <mx:CategoryAxis categoryField="Country"/>
            </mx:horizontalAxis>
                
            <mx:series>
                <mx:ColumnSeries 
                    xField="Country" 
                    yField="Gold" 
                    displayName="Gold"
                    fill="{sc1}"
                    stroke="{s1}"
                />
                <mx:ColumnSeries 
                    xField="Country" 
                    yField="Silver" 
                    displayName="Silver"
                    fill="{sc2}"
                    stroke="{s2}"
                />
                <mx:ColumnSeries 
                    xField="Country" 
                    yField="Bronze" 
                    displayName="Bronze"
                    fill="{sc3}"
                    stroke="{s3}"
                />
            </mx:series>
        </mx:ColumnChart>

        <mx:Legend dataProvider="{column}"/>

         <mx:BarChart id="bar" height="100%" width="45%" 
            paddingLeft="5" paddingRight="5" 
            showDataTips="true" dataProvider="{medalsAC}">
                
            <mx:verticalAxis>
                <mx:CategoryAxis categoryField="Country"/>
            </mx:verticalAxis>
                
            <mx:series>
                <mx:BarSeries 
                    yField="Country" 
                    xField="Gold" 
                    displayName="Gold"
                    fill="{sc1}"
                    stroke="{s1}"
                />
                <mx:BarSeries 
                    yField="Country" 
                    xField="Silver" 
                    displayName="Silver"
                    fill="{sc2}"
                    stroke="{s2}"
                />
                <mx:BarSeries 
                    yField="Country" 
                    xField="Bronze" 
                    displayName="Bronze"
                    fill="{sc3}"
                    stroke="{s3}"
                />
            </mx:series>
        </mx:BarChart>

        <mx:Legend dataProvider="{bar}"/>

    </mx:Panel>
</mx:Application>

Fonte : http://livedocs.adobe.com/flex/3/langref/mx/charts/ColumnChart.html

Como validar CNPJ, CPF e PIS usando Validator

Galera, Abaixo um exemplo de como validar CNPJ, CPF e PIS usando Validator, desenvolvida pelo Anderson Macente

"Neste post irei demonstrar como validar CNPJ, CPF e PIS em FLEX utilizando a classe Validator. Aproveitando o embalo segue também como colocar mascara nos campos. O componente utilizado para máscara foi retirado desse link

Os arquivos ".as" devem ser criados na pasta componentes."
Anderson Macente

CpfValidator.as

package componentes
{
 import mx.validators.ValidationResult;
 import mx.validators.Validator;
 
 public class CpfValidator extends Validator
 {
  public function CpfValidator()
  {
    super();
  }

  override protected function doValidation(value:Object):Array 
  {
          var results:Array = super.doValidation(value.text);
          var digito:Array = new Array(); // array para os dígitos do CPF.
   var aux:Number= 0;          
   var posicao:Number;
   var i:Number;
   var soma:Number;
   var dv:Number;
   var dvInformado:Number;
   var CPF:String = value.text;
   
   // Retira os dígitos formatadores de CPF '.' e '-', caso existam.
   CPF.replace(".", "");
   CPF.replace("-", "");

    //verifica CPFs manjados
    switch (CPF) 
    {   
      case '0':   
      case '00':   
      case '000':   
      case '0000':   
      case '00000':   
      case '000000':   
      case '0000000':   
      case '00000000':   
      case '000000000':   
      case '0000000000':   
      case '00000000000':   
      case '11111111111':   
      case '22222222222':   
      case '33333333333':   
      case '44444444444':   
      case '55555555555':   
      case '66666666666':   
      case '77777777777':   
      case '88888888888':   
      case '99999999999':    
       results.push(new ValidationResult(true, null, "Erro","Número do CPF inválido!"));
       return results;
      break;
    }

    // Início da validação do CPF.
    /* Retira do número informado os dois últimos dígitos */

    dvInformado = parseInt(CPF.substr(9,2));

    /* Desmembra o número do CPF no array digito */ 
    for (i=0; i<= 8; i++)
    {
      digito[i] = CPF.substr(i,1);
    }
    
    /* Calcula o valor do 10o. digito de verificação */
    posicao = 10;
    soma = 0;
    
   for (i=0; i <= 8; i++)   
    {   
     soma = soma + digito[i] * posicao;   
     posicao--;   
   }

    digito[9] = soma % 11;
 
    if (digito[9] < 2)
    {
      digito[9] = 0;
    } else {
      digito[9] = 11 - digito[9];
    }

    /* Calcula o valor do 11o. digito de verificação */
   posicao = 11;
   soma = 0;
    
    for (i=0; i <= 9; i++)
    {
      soma = soma + digito[i] * posicao;
      posicao--;
    }

    digito[10] = soma % 11;
    
    if (digito[10] < 2)
    {
      digito[10] = 0;
    } else {
      digito[10] = 11 - digito[10];
    }
    
    dv = digito[9] * 10 + digito[10];
    
    /* Verifica se o DV calculado é igual ao informado */    
    if(dv != dvInformado)
    {
       results.push(new ValidationResult(true, null, "Erro","Número do CPF inválido!"));
    }
    
         return results;

     }  

     override protected function getValueFromSource():Object
     {

         var value:Object = {};
         value.text = super.getValueFromSource();
         return  value;
     }       

 }
}

CnpjValidator.as

package componentes
{
 import mx.validators.ValidationResult;
 import mx.validators.Validator;

 public class CnpjValidator extends Validator
 {

  public function CnpjValidator()  
  {  
   super();  
  }
  
   override protected function doValidation(value:Object):Array 
   {
       var results:Array = super.doValidation(value.text);
   var a:Array = new Array();
   var b:Number = new Number;
   var i:Number;
   var x:Number;
   var y:Number;
   var c:Array = [6,5,4,3,2,9,8,7,6,5,4,3,2];
   var CNPJ:String = value.text;
   
   // Retira os dígitos formatadores de CNPJ '.' e '-', caso existam.
   CNPJ.replace(".", "");
   CNPJ.replace("-", "");
   CNPJ.replace("/", "");

   //verifica CNPJs manjados

   switch (CNPJ) 
   {   
    case '0':
    case '00':
    case '000':
    case '0000':
    case '00000':
    case '000000':
    case '0000000':
    case '00000000':
    case '000000000':
    case '0000000000':
    case '00000000000':
    case '11111111111':
    case '22222222222':
    case '33333333333':
    case '44444444444':
    case '55555555555':
    case '66666666666':
    case '77777777777':
    case '88888888888':
    case '99999999999':
     results.push(new ValidationResult(true, null, "Erro","Número do CNPJ inválido!"));
     return results;
    break;
   }
   
    for (i=0; i < 12; i++)
    {
      a[i] = CNPJ.charAt(i);
      b += a[i] * c[i+1];
     }
     
    if ((x = b % 11) < 2) { a[12] = 0 } else { a[12] = 11-x }
    
    b = 0;
    
    for (y=0; y < 13; y++) 
    {
      b += (a[y] * c[y]);
    }
    
   if ((x = b % 11) < 2) { a[13] = 0; } else { a[13] = 11-x; }

    if ((CNPJ.charAt(12) != a[12]) || (CNPJ.charAt(13) != a[13]))
   {
    results.push(new ValidationResult(true, null, "Erro","Número do CNPJ inválido!"));
   }
       
       return results;
   }
   
  override protected function getValueFromSource():Object
   {
   var value:Object = {};
   value.text = super.getValueFromSource();
   return  value;
   }
 }
}

PisValidator.as

package componentes
{
 import mx.validators.ValidationResult;
 import mx.validators.Validator;

 public class PisValidator extends Validator
 {
  public function PisValidator()
  {
    super();
  }
  
  // Define the doValidation() method.
   override protected function doValidation(value:Object):Array 
   {
       var results:Array = super.doValidation(value.text);
       if (value.text != "") 
       {
       //Testa se o número do pis é válido ou não
    var PIS:String = value.text;
    var i:Number;
    var digito:Number=0;
    var total:Number=0;
    var resto:Number=0;
    var pesos:Array = new Array;
    var erro:Boolean = false;
    
    // Retira os dígitos formatadores de PIS '.' e '-', caso existam.
    PIS.replace(".", "");
    PIS.replace("-", "");

      //verifica PIS manjados
      switch (PIS) 
      {
     case '0':
     case '00':
     case '000':
     case '0000':
     case '00000':
     case '000000':
     case '0000000':
     case '00000000':
     case '000000000':
     case '0000000000':
     case '00000000000':
     case '11111111111':
     case '22222222222':
     case '33333333333':
     case '44444444444':
     case '55555555555':
     case '66666666666':
     case '77777777777':
     case '88888888888':
     case '99999999999':
      results.push(new ValidationResult(true, null, "Erro","Número do PIS inválido!"));
      return results;
     break; 
    }
    
    pesos[0] = 3;
    pesos[1] = 2;
    pesos[2] = 9;
    pesos[3] = 8;
    pesos[4] = 7;
    pesos[5] = 6;
    pesos[6] = 5;
    pesos[7] = 4;
    pesos[8] = 3;
    pesos[9] = 2;
    
    for (i=0; i<10; i++)
    {
     total = total + pesos[i] * parseInt(PIS.substr(i,1));
    }
   
      resto = total % 11;
      
      if((11-resto)>9)
        digito =0;
       else
        digito = (11 - resto);

      if(digito != parseInt(PIS.substr(10,1)))
    {
        erro = true;
      }else{
        erro = false;
      }
      
      if(erro)
      {
        results.push(new ValidationResult(true, null, "Erro","Número do PIS inválido!"));
       }
    }     
       
       return results;
   }
   
   override protected function getValueFromSource():Object
   {
          var value:Object = {};
          value.text = super.getValueFromSource();
          return  value;
   }
 }

}

main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:componentes="componentes.*" >

<!-- Criando componentes utilizando o MaskedTextInput -->
<mx:Form>
 <mx:FormItem label="CPF">
   <componentes:MaskedTextInput id="txiCPF" inputMask="###.###.###-##" width="200" restrict="0-9"  />
 </mx:FormItem>
 <mx:FormItem label="CNPJ">
   <componentes:MaskedTextInput id="txiCNPJ" width="200" inputMask="##.###.###//####-##" maxChars="10" restrict="0-9"/>
 </mx:FormItem>
 <mx:FormItem label="PIS">
   <componentes:MaskedTextInput id="txiPIS" width="200" inputMask="###.#####.##-#" maxChars="10" restrict="0-9"/>
 </mx:FormItem>
</mx:Form>

 <!-- Validator para CPF -->
 <componentes:CpfValidator required="true"
        source="{txiCPF}"
        property="text"
        requiredFieldError="Campo Obrigatório"/>
 
 <!-- Validator para CNPJ -->
 <componentes:CnpjValidator required="true"
        source="{txiCNPJ}"
        property="text"
        requiredFieldError="Campo Obrigatório"
 />
  
 <!-- Validator para PIS -->
 <componentes:PisValidator required="true"
        source="{txiPIS}"
        property="text"
        requiredFieldError="Campo Obrigatório"
 />

</mx:Application>

Download dos Fontes : http://groups.google.com.br/group/flexdev/web/CNPJ_PIS_CPF_Validator.zip

Blog do Anderson Macente : http://andersonmacente.blogspot.com/2009/08/como-validar-cnpj-cpf-e-pis-em-flex.html