Bindable - redeRIA | Agregador de noticias, artigos, tutoriais Flex, Flash, JavaFX, AJAX e Rich internet applications em geral!

Fev 7

Criando um Alert que fecha sozinho com a classe flash.utils.Timer

Escrito por Pablo Souza em 1, 2009, Adobe, app, AR, auto, BI, Bindable, código, control, Controls, Dica, event, EventListener, exemplo, Flex, function, handle, if, label, library, MXML, Number, O, on, pt, RIA, Ria’s Geral, spark, UI, XML @ 02 7th, 2011 | via http://rectius.com.br/blog | Sem comentários

A dica Flex de hoje é para aqueles que nos últimos dias me perguntaram sobre como fechar automaticamente uma janela depois de um certo período de tempo. Para esse exemplo criamos um Alert que será fechado após 5 segundos. Veja o código a seguir:

<?xml version="1.0" encoding="utf-8"?>
<s:Application
	xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
	xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
	[CDATA[
	import mx.controls.Alert;
	import mx.managers.PopUpManager;
?
	private var notificatorTimer:Timer;
	private var myAlert:Alert;
?
	[Bindable]
	public var timeDestroy:Number = 5000;
?
?
	private function startTimer(event:MouseEvent):void
	{
		notificatorTimer = new Timer(timeDestroy, 1);
		notificatorTimer.addEventListener(
			TimerEvent.TIMER_COMPLETE,
			remove_handler);
		notificatorTimer.start();
		myAlert = Alert.show(
			"Aguarde, serei fechado em 5seg ...",
			"MyAlert");
	}
?
?
	private function remove_handler(event:TimerEvent):void
	{
		PopUpManager.removePopUp(myAlert);
	}
?
	]]>
fx:Script>
?
<s:Button label="Abrir Alert"
		  click="startTimer(event)" />
?
s:Application>

Espero que tenham gostado. Até a próxima!

Jan 26

Flex Drag Drop Component

Escrito por Felipe Borella em 1, 6, Adobe, app, AR, back, BI, Bindable, Botões, collection, Componente, DataProvider, demo, Drag And Drop, filtra, Flex, fonte, geo, ide, IE, if, label, layout, lista, Mate, MXML, O, on, Pessoal, pt, RIA, Ria’s Geral, Tema, tool, UI, XML @ 01 26th, 2011 | via http://www.fborella.com.br/blog/ | Sem comentários

Olá Pessoal!

Depois de algum tempo estou mostrando um componente no qual uso seguidamente trata-se de duas listas para Drag and Drop, porém não posso disponibilizar o fonte ainda ( vou ver se eu posso hehe ) talvez se eu der uma enxugada nele eu poste ai para vcs leitores, mas para verificar como fica o fonte é mais ou menos isso abaixo.

Fonte:

xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	xmlns:fborella="br.com.fborella.*" backgroundColor="white">
	<mx:Script>
		[CDATA[
			import mx.collections.ArrayCollection;
?
			[Bindable]
			public var disciplinas:ArrayCollection=
				new ArrayCollection(
				[{descrdisciplina: "PORTUGUES"},
				 {descrdisciplina: "MATEMATICA"},
				 {descrdisciplina: "CIÊNCIAS"},
				 {descrdisciplina: "HISTÓRIA"},
				 {descrdisciplina: "GEOGRAFIA"},
				 {descrdisciplina: "EDUCAÇÃO FÍSICA"},
				 {descrdisciplina: "ENSINO RELIGIOSO"},
				 {descrdisciplina: "FÍSICA"}]);
?
			[Bindable]
			public var droppedDisciplinas:ArrayCollection=
				new ArrayCollection(
				[{descrdisciplina: "QUÍMICA"},
				{descrdisciplina: "BIOLOGIA"}]);
		]]>
	mx:Script>
	<fborella:FList width="100%" height="100%" id="lista"
			dataProvider="{disciplinas}" tDataProvider="{droppedDisciplinas}"
			labelField="descrdisciplina" tLabelField="descrdisciplina"
			filtrarLabel="Todas Disciplinas" tFiltrarLabel="Disciplinas Associadas">
	fborella:FList>
mx:Application>

Demo:

Arraste, movimente os objetos com os botões etc, observe os tool tips que vai ajudar na navegação.

Até em breve
Comentem.

Felipe Borella

Jan 6

Dica Flex – Construindo um Value Object

Escrito por Pablo Souza em 1, action, Actionscript, AR, auto, back, BI, Bindable, bug, class, classe, classes, código, Componente, Componentes, dados, Data Binding, Debug, Dica, email, flash, Flash Player, Flex, for, function, int, lista, lógica, monitor, O, on, Outros, player, pt, RIA, Ria’s Geral, serviço, string, tag, Tema, UI, UX @ 01 6th, 2011 | via http://rectius.com.br/blog | Sem comentários

A dica Flex de hoje é a respeito de um objeto muito utilizado quando trafegamos dados entre o Flex e o back-end da nossa aplicação. Estamos falando dos Value Objects, também chamados de Data Transfer Objects (DTOs) ou apenas Transfer Objects, que têm como principal função o armazenamento de dados e que, ao contrário de outros componentes, estão livres de qualquer lógica de negócio. Os Value Objects são implementados como classes ActionScript.

Vamos supor que estamos desenvolvendo em nossa aplicação uma tela onde deveremos listar todos os usuários do sistema. Ao chamar um serviço no back-end recebemos a lista de usuários, sendo que cada um dos elementos dessa lista é representada por um Value Object como mostramos abaixo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
package vo

{

    [Bindable]

    public class UsuarioVO

    {

        public var nome:String;

        public var email:String;

        public var senha:String;



        public function UsuarioVO()

        {

        }



    }

}

Repare que no trecho de código acima criamos um package chamado “vo” e dentro deles criamos uma classe ActionScript chamada “UsuarioVO.as”. Repare que a tag “Bindable” é utilizada antes da definição da classe, justamente porque queremos garantir que todos os atributos do nosso Value Object possam utilizar o data binding, ou seja, que suas alterações possam ser monitoradas por componentes do Flex. Lembrando que também poderíamos definir o data binding individualmente para cada atributo dessa classe ao invés de definir para a classe toda.

Uma outra dica interessante é definir o método toString() nas nossas classes, dessa forma toda vez que você utilizar seus Value Objects em lugares que o Flex precisa mostrar uma String, esse método será invocado automaticamente pelo Flash Player. Essa dica pode auxiliar nos traces e debugs da sua aplicação.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
package vo

{

    [Bindable]

    public class UsuarioVO

    {

        public var nome:String;

        public var email:String;

        public var senha:String;



        public function UsuarioVO()

        {

        }



        public function toString():String

        {

            return "Usuário: " + this.nome;

        }



    }

}

Espero que tenham gostado e até a próxima!

Dez 31

Dica Flex – Como embedar assets de um arquivo SWF

Escrito por Pablo Souza em 1, 3d, 4, 6, Adobe, AR, BI, Bindable, Botões, class, classe, código, custom, Dica, exemplo, flash, Flex, for, html, IE, if, label, O, on, Orientação, Orientação a Objetos, Pessoal, pt, RIA, Ria’s Geral, swf, TAT, UI @ 12 31st, 2010 | via http://rectius.com.br/blog | Sem comentários

A dica Flex de hoje é para aqueles que querem embedar assets de arquivos SWF. O Flex permite que façamos esse trabalho de forma simplificada, utilizando apenas a metadata “Embed“, especificando qual o símbolo a ser embedado. Para dar um exemplo prático, digamos que você criou uma série de assets no Flash, como ícones e botões customizados, e agora deseja utilizá-los no seu aplicativo Flex.

Veja o código abaixo:

No exemplo embedamos 2 símbolos de um arquivo SWF chamado “MyAssets.swf” e vamos utilizá-los como ícones dos nossos botões.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<mx:Script>

        <![CDATA[ 



            [Bindable]

            [Embed(&#039;assets/myAssets.swf&#039;, symbol=&#039;btnSalvar&#039;)]

            private static var BUTTON_SALVAR:Class; 



            [Bindable]

            [Embed(&#039;assets/myAssets.swf&#039;, symbol=btnEditar)]

            private static var BUTTON_EDITAR:Class; 



        ]]>

    </mx:Script> 



    <mx:Button id="salvar" label="Salvar" icon="{BUTTON_SALVAR}" />

    <mx:Button id="editar" label="Editar" icon="{BUTTON_EDITAR}" />

O código acima funciona perfeitamente mas não é a forma mais clara de fazer esse trabalho. Utilizando um conceito da orientação a objetos chamado divisão de responsabilidades, vamos refatorar nosso pequeno exemplo, criando uma nova classe que vai encapsular nossos assets, movendo para ela nossas propriedades estáticas. Veja o código da classe a seguir:

1
2
3
4
5
6
7
8
    public class MyAssets

    {

            [Embed(&#039;assets/myAssets.swf&#039;, symbol=&#039;btnSalvar&#039;)]

            private static var BUTTON_SALVAR:Class; 



            [Embed(&#039;assets/myAssets.swf&#039;, symbol=btnEditar)]

            private static var BUTTON_EDITAR:Class;

    }

Para utilizá-la faça:

1
2
    <mx:Button id="salvar" label="Salvar" icon="{MyAssets.BUTTON_SALVAR}" />

    <mx:Button id="editar" label="Editar" icon="{MyAssets.BUTTON_EDITAR}" />

Para saber mais sobre como embedar assets acesse:
http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf60546-7fff.html

Espero que tenham gostado e até a próxima pessoal!

Dez 2

Relacionamento N para N Flex Java

Escrito por Felipe Borella em 1, action, app, AR, arte, BI, Bindable, class, classe, classes, código, collection, control, dados, exemplo, Flex, function, Hibernate, ide, if, int, Java, map, Number, O, on, produto, RIA, Ria’s Geral, string, TAT, Tema, UI, update, XP @ 12 2nd, 2010 | via http://www.fborella.com.br/blog/ | Sem comentários

Uma dúvida de quem parte para o Flex ( foi minha dúvida tempos atrás ) é os relacionamentos N para N. Por isso por meio desse post vou fazer um exemplo de Entrada, EntradaItens, e Produto. Depois do e-mail do Rener Dias resolvi criar esse post, espero que seja isso que ele queria, qualquer coisa estamos ae.

Vamos começar pelas classes do Flex.

Entrada.as

package br.com.fborella.beans
{
	import mx.collections.ArrayCollection;
	[RemoteClass(alias="br.com.fborella.beans.Entrada")]
?
	[Bindable]
	public class Entrada
	{
		public var idEntrada:Number;
		public var numeroNota:String;
		public var dataEmissao:Date;
		public var dataChegada:Date;
		public var itensEntrada:ArrayCollection;
?
		public function Entrada()
		{
                     this.idEntrada=0;
		}
?
	}
}

EntradaItem.as

package br.com.fborella.beans
{
	import mx.collections.ArrayCollection;
	[RemoteClass(alias="br.com.fborella.beans.EntradaItem")]
?
	[Bindable]
	public class EntradaItem
	{
		public var idEntradaItem:Number;
		public var quantidadeEntrada:Number;
		public var quantidadeReal:Number;
		public var valor:Number;
		public var produto:Produto;
		public var entrada:Entrada;
?
		public function EntradaItem()
		{
                  this.idEntradaItem=0;
		}
	}
}

Produto.as

package br.com.fborella.beans
{
	import mx.collections.ArrayCollection;
	[RemoteClass(alias="br.com.fborella.beans.Produto")]
?
	[Bindable]
	public class Produto
	{
		public var idProduto:Number;
		public var codigoInterno:String;
		public var descricao:String;
		public var unidadeEntrada:String;
		public var estoqueAlmoxarifado:Number;
		public var estoqueProducao:Number;
?
		public function Produto()
		{
			this.idProduto=0;
		}
	}
}

Agora faremos as do java

Entrada.java

package br.com.fborella.beans;
?
import java.io.Serializable;
?
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.SequenceGenerator;
import javax.persistence.Table;
?
@Entity
@Table(name="ENTRADA")
public class Entrada implements Serializable{
?
	private static final long serialVersionUID = 1L;
	@Id
    @SequenceGenerator(name="SEQ", sequenceName="GEN_ENTRADA_ID",allocationSize=1)
    @GeneratedValue(strategy=GenerationType.IDENTITY, generator="SEQ")
    private Long idEntrada;
	private String numeroNota;
	private Date dataEmissao;
	private Date dataChegada;
	@OneToMany(mappedBy = "entrada",cascade=javax.persistence.CascadeType.ALL,fetch=FetchType.LAZY)
	@Cascade({ org.hibernate.annotations.CascadeType.SAVE_UPDATE,
              org.hibernate.annotations.CascadeType.DELETE_ORPHAN})
	private List<EntradaItem> itensEntrada;
	/*get and set*/
}

EntradaItem.java

package br.com.fborella.beans;
?
import java.io.Serializable;
?
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.SequenceGenerator;
import javax.persistence.Table;
?
@Entity
@Table(name="ENTRADAITEM")
public class EntradaItem implements Serializable{
?
	private static final long serialVersionUID = 1L;
	@Id
    @SequenceGenerator(name="SEQ", sequenceName="GEN_ENTRADAITEM_ID",allocationSize=1)
    @GeneratedValue(strategy=GenerationType.IDENTITY, generator="SEQ")
    private Long idEntradaItem;
	private Double quantidadeEntrada;
	private Double quantidadeReal;
	private Double valor;
	@ManyToOne(fetch = FetchType.LAZY)
	private Produto produto;
	@ManyToOne(fetch = FetchType.LAZY)
	private Entrada entrada;
	/*get and set*/
}

Produto.java

package br.com.fborella.beans;
?
import java.io.Serializable;
?
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.SequenceGenerator;
import javax.persistence.Table;
?
@Entity
@Table(name="PRODUTO")
public class Produto implements Serializable{
?
	private static final long serialVersionUID = 1L;
	@Id
    @SequenceGenerator(name="SEQ", sequenceName="GEN_PRODUTO_ID",allocationSize=1)
    @GeneratedValue(strategy=GenerationType.IDENTITY, generator="SEQ")
    private Long idProduto;
	private String numeroNota;
	private String codigoInterno;
	private String descricao;
	private String unidadeEntrada;
	private Double estoqueAlmoxarifado;
	private Double estoqueProducao;
	/*get and set*/
}

Para gravar tudo isso usando Aactions Scprit ( obviamente mandano para o java fazer a persistencia ), é mais ou menos assim, supondo que vc ja preencheu o objeto entrada.
O código abaixo é para o botao de salvar do item e vai agregar ele a entrada onde temos um atributo itensEntrada, depois é só mandar persistir e entrada.

private function confirmItem():void
{
	item.quantidadeEntrada=1;
	item.quantidadeReal=2;
	item.valor=250;
	item.produto=cbxProd.selectedItem as Produto;
	item.entrada=entrada; //objeto entrada que vc deve ter para dados de entrada
?
	//faça algum metodo para controlar se ele ta inserindo um item ou alterando
	if(model.acaoItem =='alterar'){
		entrada.itensEntrada.removeItemAt(itemIndex);
		entrada.itensEntrada.addItem(item);
	}else{
		entrada.itensEntrada.addItem(item);
	}
}

Espero que seja útil.

Felipe o/

Nov 3

[ Adobe Flex ] Mudando o estilo visual dos Charts

Escrito por Erko Bridee em 1, 2009, 4, 6, action, Actionscript, Actionscript3, Adobe, Adobe Air, Adobe Flex, Air, api, app, AR, Artigo, as3, AUG, auto, back, bar, BI, Bindable, blog, browser, case, class, classe, classes, código, collection, Componente, Componentes, control, Controls, DataProvider, efeito, Estilo, exemplo, filter, Flex, Flex 3, Flexmania, for, framework, function, Google, Gráfico, html, ide, IE, if, image, int, Java, Java Magazine, Javascript, label, layout, live, MEF, mg, MXML, Number, O, on, Oracle, padrão, pt, Ria’s Geral, string, Stroke, Swiz Framework, TAT, try, UI, uint, Ved, web, XML, XMLList, XP @ 11 3rd, 2010 | via http://blog.erkobridee.com | Sem comentários

Algo legal no Flex é que eles nos disponibiliza gráficos, porém, sinceramente o estilo padrão dos gráficos com cores sólidas não me agrada muito, ao meu ver cansa os olhos, então resolvi mudar as cores solidas para um padrão em degrade, para suavizar as cores…

Obs.: tendo em mente que os componentes dos gráficos ainda são os mesmos no Flex 3 e 4 os códigos mxml a seguir serão do Flex 3.

Começando pelo gráfico de barras, para ter o seguinte resultado precisei:

Código MXML:

^?View Code ACTIONSCRIPT3

<?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[
        	import code.StyleColumnChart;
 
            import mx.charts.chartClasses.IAxis;
 
            private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String {
                return currencyFormatter.format(item);
            }
 
            private function categoryAxis_labelFunc(item:Object, prevValue:Object, axis:CategoryAxis, categoryItem:Object):String {
                var datNum:Number = Date.parse(item);
                var tempDate:Date = new Date(datNum);
                return dateFormatter.format(tempDate).toUpperCase();
            }
        ]]>
    </mx:Script>
 
    <mx:DateFormatter id="dateFormatter" formatString="DD" />
    <mx:CurrencyFormatter id="currencyFormatter" precision="2" />
 
    <mx:XMLListCollection id="dp">
        <mx:source>
            <mx:XMLList>
                <quote date="8/1/2007" open="40.29" close="39.58" />
                <quote date="8/2/2007" open="39.4" close="39.52" />
                <quote date="8/3/2007" open="39.47" close="38.75" />
                <quote date="8/6/2007" open="38.71" close="39.38" />
                <quote date="8/7/2007" open="39.08" close="39.42" />
                <quote date="8/8/2007" open="39.61" close="40.23" />
                <quote date="8/9/2007" open="39.9" close="40.75" />
                <quote date="8/10/2007" open="41.3" close="41.06" />
                <quote date="8/13/2007" open="41" close="40.83" />
                <quote date="8/14/2007" open="41.01" close="40.41" />
                <quote date="8/15/2007" open="40.22" close="40.18" />
                <quote date="8/16/2007" open="39.83" close="39.96" />
                <quote date="8/17/2007" open="40.18" close="40.32" />
                <quote date="8/20/2007" open="40.55" close="40.74" />
                <quote date="8/21/2007" open="40.41" close="40.13" />
                <quote date="8/22/2007" open="40.4" close="40.77" />
                <quote date="8/23/2007" open="40.82" close="40.6" />
                <quote date="8/24/2007" open="40.5" close="40.41" />
                <quote date="8/27/2007" open="40.38" close="40.81" />
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>
 
    <mx:ColumnChart id="columnChart"
            showDataTips="true"
            dataProvider="{dp}"
            width="100%"
            height="100%">
 
        <!-- vertical axis -->
        <mx:verticalAxis>
            <mx:LinearAxis baseAtZero="false"
                    labelFunction="linearAxis_labelFunc" />
        </mx:verticalAxis>
 
        <!-- horizontal axis -->
        <mx:horizontalAxis>
            <mx:CategoryAxis id="ca"
                    categoryField="@date"
                    title="August 2007"
                    labelFunction="categoryAxis_labelFunc" />
        </mx:horizontalAxis>
 
        <!-- horizontal axis renderer -->
        <mx:horizontalAxisRenderers>
            <mx:AxisRenderer axis="{ca}"
                    canDropLabels="true" />
        </mx:horizontalAxisRenderers>
 
        <!-- series -->
        <mx:series>
            <mx:ColumnSeries
            		displayName="Open"
                    xField="@date"
                    yField="@open"
                    fill="{StyleColumnChart.orangeLinearGradient}"
                    stroke="{StyleColumnChart.orangeStroke}">
            </mx:ColumnSeries>
            <mx:ColumnSeries
            		displayName="Close"
                    xField="@date"
                    yField="@close"
                    fill="{StyleColumnChart.blueLinearGradient}"
                    stroke="{StyleColumnChart.blueStroke}">
            </mx:ColumnSeries>
        </mx:series>
 
        <!-- series filters -->
        <mx:seriesFilters>
            <mx:Array />
        </mx:seriesFilters>
    </mx:ColumnChart>
</mx:Application>

Obs.: esse código acima reaproveitei do respectivo post do blog.flexexamples.com

Código da classe AS3 para gerar o efeito visual:

^?View Code ACTIONSCRIPT3

package code
{
	import mx.graphics.GradientEntry;
	import mx.graphics.LinearGradient;
	import mx.graphics.Stroke;
 
	[Bindable]
	public class StyleColumnChart
	{
		public function StyleColumnChart() {}
 
		//----------------------------------------------------------------------
		// @BEGIN: LinearGradient color
 
		public static function linearGradientColor(colorDark:uint, colorLight:uint):LinearGradient {
			var linearGradient:LinearGradient = new LinearGradient();
			var arr:Array = [];
			arr.push(new GradientEntry(colorDark, 0.0, 0.8));
			arr.push(new GradientEntry(colorLight, 1.0, 0.6));
			linearGradient.entries = arr;
			return linearGradient;
		}
 
		public static function get redLinearGradient():LinearGradient {
			return linearGradientColor(0x990000,0xEE0000);
		}
 
		public static function get greenLinearGradient():LinearGradient {
			return linearGradientColor(0x008B00,0x00FF00);
		}
 
		public static function get blueLinearGradient():LinearGradient {
			return linearGradientColor(0x0066FF,0x00CCFF);
		}
 
		public static function get yellowLinearGradient():LinearGradient {
			return linearGradientColor(0xCAC333, 0xF5F30E);
		}
 
		public static function get orangeLinearGradient():LinearGradient {
			return linearGradientColor(0xFC9C00, 0xFCC048);
		}
 
		// @END: LinearGradient color
		//----------------------------------------------------------------------
		// @BEGIN: stroke color
 
		public static function strokeColor(color:uint):Stroke {
			return new Stroke(color,1);
		}
 
		public static function get redStroke():Stroke {
			return strokeColor(0x990000);
		}
 
		public static function get greenStroke():Stroke {
			return strokeColor(0x008B00);
		}
 
		public static function get blueStroke():Stroke {
			return strokeColor(0x0066FF);
		}
 
		public static function get yellowStroke():Stroke {
			return strokeColor(0xCAC333);
		}
 
		public static function get orangeStroke():Stroke {
			return strokeColor(0xFC9C00);
		}
 
		// @END: stroke color
		//----------------------------------------------------------------------
	}
}

A seguir segue um exemplo para gráfico de pizza:

Código MXML:

^?View Code ACTIONSCRIPT3

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
    <![CDATA[
     import mx.collections.ArrayCollection;
 
     import code.StylePieChart;
 
     [Bindable]
     public var expenses:ArrayCollection = new ArrayCollection([
        {Data:"IN", Value:2000},
        {Data:"OUT", Value:1000}
     ]);
 
    ]]>
  </mx:Script>
 
  <mx:Panel title="Pie Chart">
 
     <mx:PieChart id="myChart"
        dataProvider="{expenses}"
        showDataTips="true">
        <mx:series>
           <mx:PieSeries
                field="Value"
                nameField="Data"
                labelPosition="callout"
                fills="{StylePieChart.inOutFills}"/>
        </mx:series>
     </mx:PieChart>
 
     <mx:Legend dataProvider="{myChart}"/>
 
  </mx:Panel>
 
</mx:Application>

Código da classe AS3 para gerar o efeito visual:

^?View Code ACTIONSCRIPT3

package code
{
	import mx.graphics.GradientEntry;
	import mx.graphics.RadialGradient;
	import mx.graphics.SolidColor;
 
	[Bindable]
	public class StylePieChart
	{
		public function StylePieChart()	{}
 
		//----------------------------------------------------------------------
 
		public static function get inOutFills():Array {
			var gradients:Array = new Array();
 
			var fill:RadialGradient = null;
			var g1:GradientEntry = null;
			var g2:GradientEntry = null;
 
			fill = new RadialGradient();
			g1 = new GradientEntry(0xCC3640);
			g2 = new GradientEntry(0x990000);
			fill.entries = [g1,g2];
			gradients.splice(-1,0,fill);
 
			fill = new RadialGradient();
			g1 = new GradientEntry(0x30BB32);
			g2 = new GradientEntry(0x009900);
			fill.entries = [g1,g2];
			gradients.splice(-1,0,fill);
 
			return gradients;
		}
 
		//----------------------------------------------------------------------
	}
}

Para achar as cores utilizei os itens descritos neste post: [Adobe AIR] Color Browser

Veja também:

Out 18

Upload de arquivos com Adobe Flex e Zend AMF

Escrito por Leonardo França em .NET, 1, 2009, 4, 6, action, Actionscript, ActionScript 3, Actionscript 3.0, Actionscript3, Adobe, Adobe Flex, AMF, apache, api, app, AR, arte, Artigo, back, bar, BI, Bindable, boolean, carregar, catch, class, classe, comunicação, control, Controls, custom, Download, err, erro, error, event, EventListener, events, filter, flash, Flex, for, framework, function, Google, handle, html, ide, IE, if, image, int, Java, Javascript, label, library, lite, live, map, mg, MXML, O, on, PHP, procura, progress, pt, reference, Remoting, Ria’s Geral, RoR, server, spark, string, Tema, Teste, TextInput, try, UI, utils, Ved, Widget, Widgets, Wordpress, XML, XP, zend, Zend Amf, zendAMF, zendFramework @ 10 18th, 2010 | via http://www.leonardofranca.com.br | Sem comentários

O Zend AMF é uma implementação feita em PHP [bb] para se trabalhar com o protocolo de comunicação binário AMF(Action Message Format) fazendo parte do ZendFramework. Precisei implementar um sistema de upload de arquivos que fosse um pouco diferente do que normalmente é usado no Adobe Flash, sendo que essa funcionalidade precisava ser integrada no Zend AMF.

Pesquisando um pouco na net, achei a solução que foi mais simples do que eu imaginava baseada nesse artigo com algumas poucas adaptações.

Começaremos pelo nosso gateway que será usado como endpoint no Adobe Flex.

PLAIN TEXT

PHP:

<?php
require_once ‘Zend/Amf/Server.php’;
require_once ‘Zend/Amf/Exception.php’;
require_once ‘br/com/leonardofranca/vo/FileVO.php’;
require_once ‘br/com/leonardofranca/UploadZendAMF.php’;
 
$server = new Zend_Amf_Server();
$server->setProduction(false);
 
$server->setClass(‘UploadZendAMF’);
 
$server->setClassMap(‘FileVO’,"br.com.leonardofranca.vo.FileVO");
 
echo($server->handle());
?>

Agora o nosso VO com propriedades com nome do arquivo e os binarios.

PLAIN TEXT

PHP:

<?php
class FileVO
{
    public $_explicitType = ‘br.com.leonardofranca.vo.FileVO’;
    public $fileName;
    public $fileData;
    
    function __construct ()
    {}
    
    public function getFileName() 
    {
        return $this->fileName;
    }
 
    public function setFileName($fileName) 
    {
        $this->fileName = $fileName;
    }
 
    public function getFileData() 
    {
        return $this->fileData;
    }
 
    public function setFileData($fileData) 
    {
        $this->fileData = $fileData;
    }
}
?>

Agora nossa classe PHP que ser responsavél por efetudar o upload.

PLAIN TEXT

PHP:

<?php
class UploadZendAMF  
{
    public function __construct()
    {
      
    }
    
    public function upload(FileVO $data)
    {
        try 
        {
            $fileData = $data->getFileData();
            file_put_contents( ‘C:\apache\htdocs\images\’ . $data->getFileName(), $fileData);
            return true;    
        } 
        catch (Exception $e) 
        {
            throw new Exception($e->getMessage());
        }
    }
}
?>

Agora vamos a camada de visão usando o Adobe Flex, começamos com nosso VO.

PLAIN TEXT

ACTIONSCRIPT3:

package br.com.leonardofranca.vo
{
    import flash.utils.ByteArray;
 
    [Bindable]
    [RemoteClass(alias="br.com.leonardofranca.vo.FileVO")]
    public class FileVO
    {
        private var _fileName:String;
        private var _fileData:ByteArray;
        
        public function FileVO()
        {
        }
 
        public function get fileName():String
        {
            return _fileName;
        }
 
        public function set fileName(value:String):void
        {
            _fileName = value;
        }
 
        public function get fileData():ByteArray
        {
            return _fileData;
        }
 
        public function set fileData(value:ByteArray):void
        {
            _fileData = value;
        }
 
    }
}

Agora nosso mxml que carregará os bytes do arquivo para enviar para o Zend AMF.

PLAIN TEXT

MXML:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)">
    <fx:Declarations>
        <!– Place non-visual elements (e.g., services, value objects) here –>
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import br.com.leonardofranca.vo.FileVO;
            
            import mx.controls.Alert;
            import mx.events.FlexEvent;
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;
            import mx.rpc.remoting.mxml.RemoteObject;
            import mx.utils.ObjectUtil;
            
            private var ro:RemoteObject;
            private var fileRef:FileReference;
            private var fileTypes:FileFilter = new FileFilter("Images (*.jpg, *.jpeg)", "*.jpg; *.jpeg");
            private var allTypes:Array = new Array(fileTypes);
 
            
            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {
                ro = new RemoteObject();
                ro.destination = "nao faz diferença nenhuma usando com Zend AMF";
                ro.endpoint = "http://localhost:81/ZendAmf/teste_upload.php";
                ro.source = "br.com.leonardofranca.UploadZendAMF";
                ro.addEventListener(ResultEvent.RESULT, handlerResult);
                ro.addEventListener(FaultEvent.FAULT, handlerFault);
                
                btnProcurar.addEventListener(MouseEvent.CLICK, handlerUpload);
                btnSend.addEventListener(MouseEvent.CLICK, uploadVideos);
            }
            
            protected function handlerUpload(evt:MouseEvent=null):void
            {
                fileRef = new FileReference();
                fileRef.addEventListener(Event.SELECT,selectHandler);
                //          fileRef.addEventListener(Event.COMPLETE,completeHandler);
                //          fileRef.addEventListener(ProgressEvent.PROGRESS,progressHandler);
                fileRef.browse(allTypes);
            }
            
            protected function selectHandler(evt:Event):void
            {
                txtFile.text = fileRef.name;
                fileRef.load();
            }
            
            protected function uploadVideos(evt:MouseEvent=null):void
            {
                var data:ByteArray = new ByteArray();
                fileRef.data.readBytes(data,0,fileRef.data.length);
                
                var vo:FileVO = new FileVO();
                vo.fileName = fileRef.name;
                vo.fileData = data;
                
                ro.upload(vo);
            }
            
            protected function handlerResult(re:ResultEvent):void
            {
                trace(ObjectUtil.toString(re.message.body));
                if(Boolean(re.message.body))
                {
                    Alert.show("Arquivo enviado com sucesso!","Sucesso!");
                }
                else
                {
                    Alert.show("Não foi possivel enviar o arquivo!","Error!");
                }
            }
            
            protected function handlerFault(fault:FaultEvent):void
            {
                Alert.show(fault.fault.faultString,"Error!");
            }
            
        ]]>
    </fx:Script>
    <mx:Form>
        <mx:FormItem label="Envio de arquivos" direction="horizontal">
            <s:TextInput id="txtFile"/>
            <s:Button id="btnProcurar" label="Procurar"/>
            <s:Button id="btnSend" label="Enviar"/>
        </mx:FormItem>
    </mx:Form>
</s:Application>

DOWNLOAD SOURCE

Set 2

Capturando imagem da webcam no Flex

Escrito por Gabriel Versallini em 1, 4, 6, Action Script, Adobe, app, AR, as3, auto, BI, Bindable, codec, collection, Componente, control, Controls, demo, Dica, encode, encoder, event, events, flash, Flex, function, html, ide, IE, if, image, Java, label, layout, MXML, NaN, O, on, pt, relatório, Relatórios, RIA, Ria’s Geral, string, web, WebCam, XML @ 09 2nd, 2010 | via http://www.versallini.com.br | Sem comentários

Fala, galera #soudev.

Estou preparando um post ensinando como criar relatórios no iReport e exibi-los no Flex através do componente xViewer ou Java (estou avaliando ainda), mas enquanto isso, segue uma dica de como capturar imagem da webcam.

[as3]

layout="absolute"
creationComplete="initCam()"
width="358" height="212">

import flash.media.Camera;

import mx.collections.*;
import mx.controls.*;
import mx.events.*;
import mx.graphics.ImageSnapshot;
import mx.graphics.codec.JPEGEncoder;
import mx.rpc.events.ResultEvent;

[Bindable]
private var imagemBase64:String;

[Bindable]
private var imagemWebcam:ImageSnapshot;

private function initCam():void {
var camera:Camera = Camera.getCamera();
Webcam.attachCamera( camera );
}

private function Capture():void {
imagemWebcam =ImageSnapshot.captureImage( Webcam, 0, new JPEGEncoder( 100 ));
imagemBase64=ImageSnapshot.encodeImageAsBase64( imagemWebcam );
foto.source = imagemWebcam.data;
foto.graphics.clear();
}

private function Limpar():void {
foto.unloadAndStop(false);
}

]]>

[/as3]

Veja a aplicação funcionando:

</p> <p>Seu navegador não suporta iframe, lamento!</p> <p>

Divirta-se.
Até a próxima!

Ago 13

Agrupando dados com AdvancedDataGrid + dica importante

Escrito por Daniel Schmitz em 1, 4, 6, Adobe, Air, app, AR, arte, Artigo, Banco de Dados, bar, BI, Bindable, código, collection, control, dados, DataGrid, DataProvider, demo, Dica, DRE, err, exemplo, Exemplos, Flex, for, gc, ide, IE, if, image, Java, layout, Mate, mg, MXML, O, on, PHP, pt, refresh, RIA, Ria’s Geral, servidor, tag, UI, usabilidade, XML, Zend Framework @ 08 13th, 2010 | via http://flex.etc.br | Sem comentários

Este artigo surgiu da dúvida do leitor Henrique Felipe, que desejava usar o AdvancedDataGrid para agrupar dados entre o relacionamento Pessoas e Telefones.

Para facilitar, vou abstrair a parte da conexão com o PHP e do banco de dados, e vamos supor que ele retorne um array de dados conforme o código a seguir:

<fx:Script>
<![CDATA[

protected var dados:Object;

]]>
</fx:Script>

<s:creationComplete>
<![CDATA[
this.dados = Object([{nome:'fulano1',
	  telefones:[{numero:'001'},{numero:'002'},{numero:'003'}]},

	{nome:'fulano2',
	  telefones:[{numero:'004'},{numero:'005'},{numero:'006'}]},

	{nome:'fulano3',
	  telefones:[{numero:'007'},{numero:'008'},{numero:'009'}]}]);
]]>
</s:creationComplete>

Agora que criamos um Array de dados, podemos criar o AdvancedDataGrid e agrupá-lo por nome, veja:

<mx:AdvancedDataGrid x="38" y="37" id="adg1">
	<mx:dataProvider>
		<mx:HierarchicalData source="{dados}"
			childrenField="telefones"/>
	</mx:dataProvider>
	<mx:columns>
		<mx:AdvancedDataGridColumn
			headerText="Nome"
			dataField="nome"/>

		<mx:AdvancedDataGridColumn
			headerText="Telefone"
			dataField="numero"/>
	</mx:columns>
</mx:AdvancedDataGrid>

E o resultado é exibido na imagem a seguir:

Ok, até ai tudo bem. Agora vem a grande dica! O AdvancedDataGrid possui uma particularidade em sua forma de agrupar dados que está relacionado em como os dados estão organizados. No exemplo anterior, tinhamos um Array de pessoas e a propriedade telefones era um outro array, de telefones. Ou seja, os dados já estavam agrupados e por isso não existe a necessidade de agrupá-los novamente. Por isso não criamos o mx:Grouping conforme é visto na maioria dos exemplos. Ao invés do grouping, usamos mx:HierarchicalData para representar os dados, pois eles já estão agrupados. É necessário apenas informar qual será a propriedade que conterá o grupo, no nosso caso telefones.

Quando os dados não estão agrupados, então temos que usar o grouping, conforme o exemplo a seguir (retirado da adobe):

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>
<![CDATA[
	import mx.collections.ArrayCollection;

	[Bindable]
private var dpFlat:ArrayCollection = new ArrayCollection([
{Region:"Southwest", Territory:"Arizona",
	Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
{Region:"Southwest", Territory:"Arizona",
	Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},
{Region:"Southwest", Territory:"Central California",
	Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},
{Region:"Southwest", Territory:"Nevada",
	Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},
{Region:"Southwest", Territory:"Northern California",
	Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
{Region:"Southwest", Territory:"Northern California",
	Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000},
{Region:"Southwest", Territory:"Southern California",
	Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
{Region:"Southwest", Territory:"Southern California",
	Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}
	]);
]]>
</mx:Script>

<mx:Panel title="AdvancedDataGrid Control Example"
	  height="75%" width="75%" layout="horizontal"
	  paddingTop="10" paddingBottom="10"
          paddingLeft="10" paddingRight="10">

<mx:AdvancedDataGrid id="myADG"
					 width="100%" height="100%"
					 initialize="gc.refresh();">
	<mx:dataProvider>
		<mx:GroupingCollection id="gc" source="{dpFlat}">
	 	 <mx:grouping>
		 	<mx:Grouping>
		 	  <mx:GroupingField name="Region"/>
			  <mx:GroupingField name="Territory"/>
			</mx:Grouping>
		  </mx:grouping>
		</mx:GroupingCollection>
	</mx:dataProvider>        

	<mx:columns>
	 <mx:AdvancedDataGridColumn dataField="Region"/>
	 <mx:AdvancedDataGridColumn dataField="Territory"/>
	 <mx:AdvancedDataGridColumn dataField="Territory_Rep"
					   headerText="Territory Rep"/>
	 <mx:AdvancedDataGridColumn dataField="Actual"/>
	 <mx:AdvancedDataGridColumn dataField="Estimate"/>
	</mx:columns>
</mx:AdvancedDataGrid>
</mx:Panel>

</mx:Application>

Neste exemplo, os dados não estão agrupos, e por isso usamos:

<mx:dataProvider>
		<mx:GroupingCollection id="gc" source="{dpFlat}">
	 	 <mx:grouping>
		 	<mx:Grouping>
		 	  <mx:GroupingField name="Region"/>
			  <mx:GroupingField name="Territory"/>
			</mx:Grouping>
		  </mx:grouping>
		</mx:GroupingCollection>
	</mx:dataProvider>

Então fica a dica: antes de preencher os dados do AdovancedDataGrid, veja qual será a forma ideal de preenchimento de dados, para
agrupar corretamente os mesmos.

E qual a melhor forma? Trazer os dados agrupados ou deixar o AdvancedDataGrid agrupá-los? Depende! Ao trazer os dados agrupados,
você ganha em performance, principalmente se forem muitos dados. Ao agrupar os dados dinamicamente, você ganha em usabilidade, pois pode
reagrupar os dados de formas diferentes, sem a necessidade de refazer uma conexão no servidor.

Jun 30

Modelo Generico Flex

Escrito por Felipe Borella em 1, 6, Adobe, app, AR, bar, BI, Bindable, boolean, class, código, collection, control, DataProvider, exemplo, Flex, for, Formação, function, ide, IE, int, label, layout, lista, MXML, novidade, Novidades, O, on, pt, RIA, Ria’s Geral, string, TAT, TextInput, UI, window, XML @ 06 30th, 2010 | via http://www.fborella.com.br/blog/ | Sem comentários

Bom Dia!

Agora que acabou o semestre da faculdade ( rumo a formação agora ultimo graças a Deus, mas novidades virão, porque não outra faculdade, sim eu tenho força de vontade e vou atras dos meus objetivos ). Resolvi criar um exemplo de Model que sempre utilizo nas minhas telas… vou postar o código e você ai que copiar fique a vontade para utilizar sua mente e poder fazer a sua necessiodade

Model:

package br.com.fborella.generic
{
	import mx.collections.ArrayCollection;
	import mx.containers.TitleWindow;
	import mx.managers.PopUpManager;
?
	[Bindable]
	public class Model
	{
		public function Model():void
		{
?
		}
		public var lista:ArrayCollection=new ArrayCollection();
		public var editando:Boolean;
		public var filtro:String;
		public var opcoesOrdem:ArrayCollection=new ArrayCollection();
		public var ordemSelecionada:int;
		public var tituloTela:String;
		public var msg:String;
	}
}

Ordem:

package br.com.fborella.generic
{
	[Bindable]
	public class Ordem
	{
		public var atributo:String;
		public var rotulo:String;
?
		public function Ordem(atrib:String, rotul:String)
		{
			this.atributo=atrib;
			this.rotulo=rotul;
		}
	}
}

Funcionamento na view:

xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="350"
	height="250" creationComplete="init()" title="{model.tituloTela}">
	<mx:Script>
		[CDATA[
			import br.com.fborella.generic.Ordem;
			import br.com.fborella.generic.Model;
?
			[Bindable]
			private var model:Model;
			private function init():void
			{
				model=new Model;
				model.tituloTela="Exemplo de Modelo";
				model.opcoesOrdem.addItem(new Ordem('id', 'Código'));
				model.opcoesOrdem.addItem(new Ordem('nome', 'Nome'));
				model.ordemSelecionada=1;
				model.editando=false;
			}
?
			private function incluir():void
			{
				model.editando=true;
				focusManager.setFocus(txtNome);
			}
?
			private function cancelar():void
			{
				model.editando=false;
			}
		]]>
	mx:Script>
	<mx:Form width="100%" height="100%">
		<mx:FormItem label="Id">
			<mx:TextInput id="txtId" width="50" editable="false" enabled="false"/>
		mx:FormItem>
		<mx:FormItem label="Nome" required="true">
			<mx:TextInput id="txtNome" enabled="{model.editando}" width="250"/>
		mx:FormItem>
		<mx:FormItem label="Data" required="true">
			<mx:DateField id="txtData" enabled="{model.editando}" width="120"/>
		mx:FormItem>
		<mx:Spacer height="100%"/>
		<mx:ApplicationControlBar width="100%">
			<mx:Button label="Incluir" width="80" click="incluir()"/>
			<mx:Button label="Cancelar" width="80" click="cancelar()"/>
			<mx:ComboBox dataProvider="{model.opcoesOrdem}" labelField="rotulo"/>
		mx:ApplicationControlBar>
	mx:Form>
mx:TitleWindow>

Qualuqer duvida entre em contato…

Felipe

« Entradas anteriores | Entradas recentes »

Veja também:

ACERCA

GOOGLE

Votação

AUTORES

PUBLICIDADE