Silva Developer

Hoje em dia com o aumento contínuo do uso e popularidade do Excel, é muito comum todas as empresas utilizarem constantemente gráficos para tomadas de decisões entre outras finalidades.

Para suprir esta necessidade, no flex também você encontra componentes que geram gráficos.Um modelo comum de componente gráfico do flex, é o <mx:BarChart>, que insere gráfico no formato de barras.

As principais propriedades do componente BarChart, são:

1) VerticalAxis:

<mx:verticalAxis>
<mx:CategoryAxis categoryField="name"/>
</mx:verticalAxis>

2) Series

<mx:series>
<mx:BarSeries id="barSeries"
yField="name"
xField="obp"
displayName="obp"
showDataEffect="{showDataEffectComboBox.selectedItem.data}" />
</mx:series>

Na propriedade series você pode definir ainda efeitos sobre o gráfico, no evento showDataEffect:

<mx:SeriesInterpolate id="seriesInterpolate" duration="1000" />
<mx:SeriesSlide id="seriesSlide" duration="1000" direction="right" />
<mx:SeriesZoom id="seriesZoom" duration="1000" />

Para melhor e mais completo entendimento, veja abaixo exemplo de código completo do gráfico BarChart com efeitos:

<?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[
            private function updateDP():void {
                var str:String = categoryFieldComboBox.selectedItem.data;
                barSeries.xField = str;
                barSeries.displayName = str;
            }
        ]]>
    </mx:Script>

    <mx:SeriesInterpolate id="seriesInterpolate" duration="1000" />
    <mx:SeriesSlide id="seriesSlide" duration="1000" direction="right" />
    <mx:SeriesZoom id="seriesZoom" duration="1000" />

    <mx:Array id="dataEffects">
        <mx:Object label="seriesInterpolate" data="{seriesInterpolate}" />
        <mx:Object label="seriesSlide" data="{seriesSlide}" />
        <mx:Object label="seriesZoom" data="{seriesZoom}" />
    </mx:Array>

    <mx:Array id="categoryFields">
        <mx:Object data="obp" label="OBP" />
        <mx:Object data="slg" label="SLG" />
        <mx:Object data="avg" label="AVG" />
    </mx:Array>

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object name="R Winn" obp=".353" slg=".445" avg=".300" />
                <mx:Object name="P Feliz" obp=".290" slg=".418" avg=".253" />
                <mx:Object name="O Vizquel" obp=".305" slg=".316" avg=".246" />
                <mx:Object name="B Molina" obp=".298" slg=".433" avg=".276" />
                <mx:Object name="R Durham" obp=".295" slg=".343" avg=".218" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:Form>
            <mx:FormItem label="categoryField:">
                <mx:ComboBox id="categoryFieldComboBox"
                    dataProvider="{categoryFields}"
                        change="updateDP();" />
            </mx:FormItem>
            <mx:FormItem label="showDataEffect:">
                <mx:ComboBox id="showDataEffectComboBox"
                        dataProvider="{dataEffects}"
                        change="updateDP();" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

     <mx:BarChart id="barChart"
             showDataTips="true"
             dataProvider="{arrColl}"
             width="100%"
             height="100%">
        <mx:verticalAxis>
            <mx:CategoryAxis categoryField="name"/>
        </mx:verticalAxis>
        <mx:series>
            <mx:BarSeries id="barSeries"
                    yField="name"
                    xField="obp"
                    displayName="obp"
                    showDataEffect="{showDataEffectComboBox.selectedItem.data}" />
        </mx:series>
    </mx:BarChart>

</mx:Application>

Espero mais uma vez ter ajudado. Qualquer dúvida, é só entrar em contato.

Abraço,

Silva Developer

Extraído originalmente em inglês deste post aqui, do blog Flex Examples.

Aos meus amigos desenvolvedores, mais uma contribuição para a comunidade, criei uma série reunindo tudo o que você precisa saber sobre Flex, Ruby, Rails e Flex on Rails. Tudo de maneira resumida, simples e específica, dividida em 3 posts:

Flex on Rails: Aprenda

Flex on Rails: Inicie

Flex on Rails: Envolva-se

Espero que gostem e que possa ajudar e contribuir no seu dia-a-dia ou nos seus estudos.

Abraço a todos,

Silva Developer

Interessado em aprender Ruby on Rails, Flex e Flex on Rails?. Delicie-se então com estas super dicas com as melhores opções disponíveis em livros e cursos.

Aprenda Ruby on Rails:

Livro: The Rails Way, by Obie Fernandez. Clique aqui para comprar ou saber + informações.

Curso: Curso on-line sobre a plataforma TreinaTOM, da e-Genial, veja aqui + informações sobre o curso de Ruby on Rails do básico ao avançado da e-Genial.

Aprenda Flex:

Livro: Adobe Flex 3.0 for Dummies, by Doug McCune. Clique aqui para comprar ou saber + informações.

Curso: Curso on-line sobre a plataforma TreinaTOM, da e-Genial, veja aqui + informações sobre o curso Flex 3 do básico ao avançado da e-Genial.

Aprenda Flex on Rails:

Livro: Flexible Rails, by Peter Armstrong. Clique aqui para comprar ou saber + informações.

Curso: Curso on-line sobre a plataforma TreinaTOM, da e-Genial, veja aqui + informações sobre o curso de Flex + Ruby on Rails da e-Genial.

Tudo o que você precisa saber sobre como se envolver ainda mais com as tecnologias Flex e Ruby on Rails esta aqui, de forma clara, simples e objetiva, em um único post:

Envolva-se com Ruby:

Documentação: Consulte aqui.
Fórum: Ruby-Fórum.
Grupos: Ruby-talk-google.
e-Books: Aprenda a programar Ruby.

Envolva-se com Rails:

Documentação: Consulte aqui.

Foruns: Rails Brasil, Ruby on Br, Ruby-Fórum Rails.

Grupos: rails-br e Ruby on Rails:Talk

Tutorial: Rolling with Rails 2.0 by Fabio Akita: Parte 1 e Parte 2.

Podcasts: Rails Podcast Brasil

Screencasts: PeepCode (pago) e Railscasts (grátis)

Melhores blogs: Fabio Akita, Carlos Brando e Carlos Eduardo e-Genial.

Envolva-se com Flex:

Documentação: Consulte aqui.

Foruns: Fórum FlexBrasil e Fórum Informe Flex-Brasil

Grupos: Flex-Brasil Google, Flex-Brasil Yahoo, e Flexdev.

Tutorial: Seleção de 10 tutoriais sobre flex e flex on rails.

Podcasts: The flex show podcasts.

Screencasts: Adobe Flex Media Screencast.

Melhores blogs: The flex show, Fabio Terracini, Carlos Eduardo e-Genial.

Extras: Portal Flex, Flex Showcases.

Kit essencial para desenvolvimento Flex on Rails

Como uma forma de tentar evitar que meus caros amigos desenvolvedores iniciantes em ruby on rails e Flex percam seus preciosos tempos e queimem neurônios, criei este tutorial passo-a-passo, onde mostro quais softwares e versões que você precisa ter instalado em sua máquina para desenvolvedor aplicações RIA, flex on rails.

Composição do kit:

Basicamente o kit de softwares necessários para você desenvolver aplicações Flex on Rails, é o seguinte:

1) Mysql;

Versão recomendada: 5.0
Observação: Recomendo posteriormente a instalação da ferramenta Mysql-front para visualização mais rápida e dinâmica.
Clique aqui para baixar.

2) Ruby;

Versão recomenda: 1.8.6 última estável
Observação:
Clique aqui para baixar.

3) Rails;

Versão recomendada: 2.0.2 última estável
Observação: Deve ser instalado obrigatoriamente depois do ruby.
Link para download: abrir o cmd e digitar o seguinte comando: gem install rails –include-dependencies

4) Java Runtime;

Versão: 6 atualização 5
Observação: Utilizado pelo Flex 3 Builder e do Aptana RadRails, todos os 2 são derivados do eclipse.
Clique aqui para baixar.

5) Aptana Studio RadRails;

Versão: Aptana Studio 1.1 e do plugin RadRails 1.0.1
Observação: Primeiramente você deve baixar o Aptana Studio 1.1 e depois, do próprio software instale o plugin RadRails versão 1.0.1.
Clique aqui para baixar.

6) Adobe Flex 3 Builder;

Versão: 3.0
Observação: Este software é pago, porém no site do fabricante, Adobe, você poderá realizar um cadastro para obter versão trial por 90 dias.
Clique aqui para baixar.

Cronograma e Ordem da instalação:

1) Mysql, instale primeiramente o mysql 5.0 server na sua máquina, pois, durante a instalação dos softwares server-sides, como rails, ele buscará pelo mysql instalado para incluir o caminho (path) em sua biblioteca interna;

2) Ruby, todos sabemos que o rails é um framework da linguagem ruby, portanto para que o rails funcione você deve instalar primeiramente sua base, que é
o ruby.

3) Rails, depois de instalado o ruby, instale o rails que é muito simples e a instalação não poderia ser menos dinâmica que o framework, para instalá-lo basta abrir o cmd e digitar o seguinte comando:

gem install rails –include-dependencies

4) Java Runtime, como iremos trabalhar com IDE Aptana RadRails, cuja qual iremos instalar no próximo passo, como todos sabemos, todo aplicativo baseado no eclipse, usa a plataforma java, por isso, caso ainda não tenha, instale-a previamente antes do Aptana RadRails.

5) Aptana RadRails, como sabemos no mundo de hoje tempo é dinheiro, por isso, existem diversas editores que automatizam ainda mais as funções do rails, dentre elas está o Aptana Studio RadRails, que para mim, é a melhor ferramenta.

6) Adobe Flex 3 Builder, depois de tudo pronto agora só falta a parte charmosa e visual do seu kit, instale o flex 3 builder, que será a camada de visualização de sua aplicação feita em rails. Como todos sabemos, todas as apps rails utilizam a estrutura MVC, que significa, Model, View, Controller. Quando juntamos as tecnologias client-side Flex e server-side Rails, o flex incorpora a função das views da aplicação rails, que é no meu entender, o grande charme e transformação visual das aplicações, o que difere sua app das comuns estáticas que se vê por aí.

Bom por agora é só, espero que tenham gostado de mais esta contribuição. Abraço a todos!.

Bom, como todos sabemos, tanto o flex quanto o rails, utilizam o sistema de data americano. E para podermos utilizar o nosso temos que fazer os seguintes procedimentos:
Formatando data no flex:

1) Primeiramente devemos incluir o componente não visual chamado DateFormatter, para isso você deverá inserir o seguinte código no seu arquivo mxml:

 <mx:DateFormatter id="_dfFormatador" formatString="DD/MM/YYYY"  />

Note que definimos o novo formato através da propriedade formatString, do componente DateFormatter.

2) Feito isso, agora devemos criar uma pequena função no nosso código actionscript:

 	[Bindable]
 	public var formatador: DateFormatter = new DateFormatter();

    public function formataData(item:Object,column:DataGridColumn):String
    {
         formatador.formatString= "DD/MM/YYYY";
         return formatador.format(item["data"].toString());
    }

Vamos partir do principio que o componente que está mostrando a data que queremos formatar é um datagrid.

3) Criada a função, agora basta invocá-la de nosso componente que está mostrando a data a ser formatada, no nosso caso, iremos chamar a função da nossa datagrid, para isso ela já possui uma propriedade especial chamada labelFunction, já designada para estes fins, veja como fica o código para isso:

<mx:DataGrid id="_dgConsulta" >
<mx:columns>
<mx:DataGridColumn headerText="Usuário" dataField="nomeuser"/>
<mx:DataGridColumn headerText="Id do cliente" dataField="idcli"/>
<mx:DataGridColumn headerText="Nome do cliente" dataField="nomecli"/>
<mx:DataGridColumn headerText="Data da apresentação" dataField="datareuniao" labelFunction="{formataData}" />
<mx:DataGridColumn visible="false" headerText="Id" dataField="id"/>
</mx:columns>
</mx:DataGrid>

Se quisessemos nem precisamos especificar o datafield para a coluna da grid em que invocamos a função formataData através da propriedade labelFunction, pois, repare que na própria função já está sendo especificado entre colchetes qual o campo que será formatado.

Formatando data no rails:

Amigos pelo fato do rails ser ainda mais dinamico que o flex, por ter incorporado em suas bibliotecas internas diversas funções que automatizam e facilitam a vida do programador, veja como é muito mais simples:

Basta adicionar o seguinte código:

Time.now.strftime("%Y-%m-%d")

Vamos partir do princípio de que queremos converter a data de nossa action de consulta de reunião, que irá retornar dados para o flex, preenchendo posteriormente nossa datagrid acima criada e codificada para receber estes dados, veja este código como fica dentro da action:

def verificareuniao
@atendimentos = Atendimento.find(:all, :conditions =>
["datareuniao like ? and status like ?",
Time.now.strftime("%Y-%m-%d"), "nao realizada"])

if (@atendimentos.size > 0)
render  ml => @atendimentos.to_xml
else
render :text => "registro_nao_encontrado"
end

end

Segue abaixo dicas para você seguir e evitar o acontecimento de falhas na comunicação da sua aplicação flex com sua aplicação rails:

1) Inserir seu projeto flex dentro da pasta PUBLIC do seu projeto rails;
2) Importe novamente seu projeto flex do novo local e altere o Build Path (botão direito do mouse em cima do projeto), do seu projeto flex para o novo local, atentando-se para o número da porta de saida do servidor rails, exemplo: http://localhost:3000/nomedapastadoseuprojetoflex/bin-debug;
3) Para ficar mais claro e garantir maior controle seu na comunicação com o rails via HTTPService, primeiro certifique-se que esteja usando o componente HTTPService mxml, pois caso não saiba, no flex possui 2 tipos de componentes e sempre devemos usar o mxml, veja sua biblioteca que deve importar: import mx.rpc.http.mxml.HTTPService.
Tendo conferido que a classe que você esta usando é a mxml, crie seu componente HTTPService dinamicamente, direto no seu código actionscript, como no exemplo abaixo, veja como é simples:

Esta funcão envia pro rails um objeto chamado obj, que é montado pela função montaobjeto():

[Bindable]
private var httpRails:HTTPService = new HTTPService();

private function cadastra():void{
     httpRails = new HTTPService();
     httpRails.url = “/atendimentos/cadastro”;
     httpRails.method = “POST”;
     httpRails.useProxy = false;
     httpRails.showBusyCursor = true;
     httpRails.resultFormat = “e4x”;
     httpRails.addEventListener(ResultEvent.RESULT, msgResult);
     httpRails.addEventListener(FaultEvent.FAULT, msgFault);
     montaobjeto();
     httpRails.send(obj);
}

private var obj:Object = new Object();
private function montaobjeto():void{
obj = new Object();
try
{
if(_dgConsulta.selectedItem != null){
obj["id"] = _dgConsulta.selectedItem.id;
}
}catch (e:Error){
}

     obj["pacote[idcli]“] = _tIdcli.text;
     obj["pacote[nomecli]“] = _tNomecli.text;
     obj["pacote[nomeuser]“] = ModelLocator.usuario;
     obj["pacote[agendaapres]“] = _cbagendaApres.selectedItem.data;
     obj["pacote[dataapres]“] = _dfdataApres.text;
     obj["pacote[status]“] = _cbStatus.selectedItem.data;
     obj["pacote[historico]“] = _tHistorico.text;
}

Na parte do flex é só isso que precisa se certificar, posteriormente basta colocar no resultevent do seu componente httpservice, aqui neste exemplo chamado de msgResult para a sua datagrid receber a resposta do rails, veja como é simples:

private function msgResult(obj:ResultEvent):void{
_minhadataGrid.dataProvider = obj.result.atendimentos.atendimento;
}

4) Na parte do rails é mais simples ainda, sua action deverá receber os parametros enviados como acima demonstrado, ele deve ficar assim:

def cadastro
     @clientes = Cliente.create(params[:pacote])

     if (@clientes.save)
        render :text => “ok”
     elsif
        render  ml => @clientes.errors.to_xml_full
     end

end

As várias declarações de associações especificam o que se precisa para relacionamento entre tabelas. Elas acrescentam cada uma, uma série de métodos para o model, que ajudam a navegar entre objetos ligados. Vamos analisar estes em mais detalhe, no âmbito dos três tipos diferentes de intertable ligação.

O Active Record do rails suporta três tipos de relações entre as tabelas:

Um-para-um, um-para-muitos, e muitos para muitos. Você indicar estes relacionamentos adicionanado os seguintes métodos aos seus models:

has_one,
has_many;
belongs_to;
has_and_belongs_to_many;

1) Relacionamento um-para-um

Este relacionamento poderá existir entre encomendas e faturas, por exemplo: para cada
encomenda há, no máximo, uma fatura. Nós declaramos por dizer isto em Rails:

class Order < ActiveRecord::Base
     has_one :invoice

class Invoice < ActiveRecord::Base

     belongs_to  rder

Dica: belongs_to sempre fica na chave estrangeira.

2) Relacionamento um-para-muitos
Encomendas e linhas de itens têm um relacionamento um-para-muitos: pode haver qualquer um-para-muitos número de linhas de itens associados a uma encomenda particular. No Rails, para isso, temos o seguinte código:

class Order < ActiveRecord::Base
     has_many :line_items

class LineItem < ActiveRecord::Base
     belongs_to  rder

Dica: has_many sempre fica no plural.

3) Relacionamentos muitos-para-muitos

Podemos classificar os nossos produtos. Um produto pode pertencer a várias categorias,
e cada categoria pode conter vários produtos. Este é um exemplo de relacionamento de muitos-para-muitos, expresso no Rails da seguinte forma:

class Product < ActiveRecord::Base
     has_and_belongs_to_many :categories

class Category < ActiveRecord::Base
     has_and_belongs_to_many :products

Finalizando os relacionamentos: Inserir campo de ligação nas tabelas “filhas”:

Não podemos nos esquecer que para finalizar e fechar o relacionamentos definidos nos models, devemos inserir nas tabelas “filhas”, um campo de referencia de acordo com a convenção do rails para que ele entenda que aquele campo é o campo de ligação.Por convenção este campo deve ter o nome do model seguido do sufixo _id, ou seja por exemplo, para um model Product, o campo de ligação teria que se chamar product_id. Basta apenas fazer isso, o resto deixe por conta de nosso querido rails.

Lembrete: Isto também pode ser feito na migration, através do código t.reference.