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

A dica Flex de hoje mostra como fixar a largura dos botões do componente Spark ButtonBar no Flex 4. Para isso vamos apenas criar um layout customizado horizontal e setar as propriedades columnWidth e variableColumnWidth.

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">
	<s:ButtonBar horizontalCenter="0" verticalCenter="0">
		<s:layout>
			<s:HorizontalLayout columnWidth="80" variableColumnWidth="false" />
		s:layout>
		<s:dataProvider>
			<s:ArrayList source="[Botão 1, Botão Dois, Botão 3, Botão Número 4]" />
		s:dataProvider>
	s:ButtonBar>
?
s:Application>

Lembrando que se a propriedade variableColumnWidth estiver setada como true a propriedade columnWidth não terá efeito.

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

Nossa dica Flex de hoje serve para aqueles que desejam acessar métodos ou propriedades do objeto application ou parent documents de dentro de um item renderer. O Flex nos oferece as seguintes formas de acesso:

mx.core.FlexGlobals.topLevelApplication: Retorna o objeto application principal, que pode ser do tipo spark.components.Application ou mx.core.Application.

mx.core.UIComponent.parentDocument: Retorna o parent document do objeto atual. Usado como alternativa ao exemplo que vamos mostrar em seguida.

mx.core.UIComponent.parentApplication: Retorna o objeto application onde o objeto atual está inserido.

Além das formas acima, uma alternativa mais elegante (e orientada a obejtos) para acessar métodos ou propriedades do parent document ou application é utilizarmos os eventos do Flex.

Imagine que temos uma aplicação que lista todos os seus usuários num datagrid. Em uma de suas colunas temos um item renderer com um botão que exclui esses usuários. Para tal precisaremos acessar um método no parent document, que no nosso exemplo será a própria application. Como vimos anteriormente podemos obter o objeto parent document através da propriedade mx.core.UIComponent.parentDocument e dessa forma chamar nosso método de exclusão. Esse método funciona corretamente, porém gera um grande acoplamento entre os objetos além de quebrar o encapsulamento das classes. Para resolvermos esses problemas vamos fazer com que ao clicar no botão excluir um evento bubble seja disparado e no objeto parent document vamos escutar o evento e então chamar o método de exclusão.

O trecho de código abaixo mostra nossa datagrid com o item renderer que possui o botão de exclusão:

1
2
3
4
5
6
7
8
    <mx:DataGrid id="dataGrid" dataProvider="{model}">

        <mx:columns>

            <mx:DataGridColumn headerText="Nome" dataField="nome" />

            <mx:DataGridColumn

                headerText="Ação" dataField="nome"

                itemRenderer="br.com.rectius.itemRendererExample.ButtonItemRenderer" />

        </mx:columns>

    </mx:DataGrid>

A seguir está o código do nosso item renderer. Repare que ao clicar no botão excluir estamos disparando um evento customizado:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?xml version="1.0" encoding="utf-8"?>

<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"

                          xmlns:s="library://ns.adobe.com/flex/spark"

                          xmlns:mx="library://ns.adobe.com/flex/mx"

                          focusEnabled="true">



    <fx:Metadata>

        [Event(name="ExcluirEvent",type="br.com.rectius.itemRendererExample.ExcluirEvent")]

    </fx:Metadata> 



    <fx:Script>

        <![CDATA[

            import br.com.rectius.itemRendererExample.event.UsersEvent;



            protected function lblData_clickHandler(event:MouseEvent):void

            {

                var excluirEvent:UsersEvent = new UsersEvent(UsersEvent.EXCLUIR_EVENT, dataGridListData.label, true);

                dispatchEvent(excluirEvent);

            }

        ]]>

    </fx:Script>



    <s:Button id="lblData" top="0" left="0" right="0" bottom="0"

              label="Excluir" click="lblData_clickHandler(event)" />



</s:MXDataGridItemRenderer>

A tag Metadata expõe ao parent document o evento customizado do botão excluir:

1
2
3
    <fx:Metadata>

        [Event(name="ExcluirEvent",type="br.com.rectius.itemRendererExample.ExcluirEvent")]

    </fx:Metadata>

Isso nos possibilitou escutar o evento “ExcluirEvent” no parent document:

1
2
3
4
            protected function application1_initializeHandler(event:FlexEvent):void

            {

                dataGrid.addEventListener(UsersEvent.EXCLUIR_EVENT, excluirHandler);

            }

Abaixo você pode ver o evento que criamos para encapsular o usuário a ser excluído. Nesse exemplo estamos setando na propriedade data do nosso evento UsersEvent uma string com o nome do usuário, porém num cenário real poderíamos enviar o ID do usuário, um Value Object que armazenaria todas as propriedades do usuário clicado, ou qualquer outro objeto conveniente para sua situação:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
package br.com.rectius.itemRendererExample.event

{

    import flash.events.DataEvent;



    public class UsersEvent extends DataEvent

    {

        public static var EXCLUIR_EVENT:String = "ExcluirEvent";



        public function UsersEvent(type:String, data:String="", bubbles:Boolean=false, cancelable:Boolean=false)

        {

            super(type, bubbles, cancelable, data);

        }

    }

}

Esperam que tenham gostado. Baixem aqui o projeto de exemplo.

Até a proxima!

Eu já falei na semana passada sobre o Data Binding bidirecional, e hoje volto a falar devido a algumas dúvidas que se tornaram recorrentes em fóruns da comunidade de desenvolvedores Flex. Essa funcionalidade foi uma das coisas que simplificaram as coisas no Flex 4, basicamente permitindo que você utilize uma propriedade tanto como fonte quanto como destino para um determinado valor.

No Flex 3 tinhamos a possibilidade de fazer binding bidirecional usando o método mx.binding.utils.BindingUtils.bindProperty() ou a tag mx:binding. Porém no Flex 4 a nova notação @{property} simplificou a sintaxe. Vale lembrar que o uso do data binding no Flex vem com um alto custo de performance, portanto sempre analise suas necessidades antes de sair utilizando-o por todo lado em sua aplicação.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?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:Declarations>



        <fx:XMLList id="meuMenu">

            <menuitem label="@{txtItemMenu.text}"/>

            <menuitem label="Item 02"/>

        </fx:XMLList> 



    </fx:Declarations>



    <s:layout>

        <s:VerticalLayout horizontalAlign="center" verticalAlign="middle" gap="10"/>

    </s:layout>



    <mx:MenuBar labelField="@label" dataProvider="{meuMenu}" />



    <s:TextInput id="txtItemMenu" text="Item 01" />



</s:Application>

Espero que tenham gostado. Baixe aqui o projeto de exemplo.

Até a próxima!

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103

<?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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

<?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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

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:

• [Flex & AIR] Swiz Framework – meus primeiros passos
• Java Magazine 68 : Artigo sobre Adobe Flex e AIR
• s:TextArea – recuperando um texto selecionado
• [Flex & AIR] Swiz Framework + Presentation Model : Exemplo de Projeto
• FlexMania 2010 – Adobe Flex + Oracle WebLogic 10.x

Seguindo o artigo anterior, iremos agora utilizar o Flex em conjunto com o PHP para salvar as imagens no servidor. A conexão entre o Flex e o PHP será realizada pelo AMFPHP.

Este artigo teve uma grande ajuda do Bruno Santana, que nos mandou o código sobre a gravação do arquivo pela webcam.

Pré requisitos

• Wamp Server instalado
• Biblioteca AMFPHP – http://www.amfphp.org/ 

Passos iniciais

• Cria a pasta c:wampwwwFlexFoto
• Crie o projeto FlexFoto. Atenção na parte de definição do Output Folder:

e

• Copie a pasta amfphp do zip para c:wampwwwFlexFoto
• O esquema de pastas fica como na figura a seguir:

Agora vamos configurar o services-config.xml:

<?xml version="1.0" encoding="UTF-8"?>
<services-config>
    <services>
        <service id="amf-service"
            class="flex.messaging.services.RemotingService"
            messageTypes="flex.messaging.messages.RemotingMessage">
            <destination id="amf">
                <channels>
                    <channel ref="amf-endpoint"/>
                </channels>
                <properties>
                    <source>*</source>
                </properties>
            </destination>
        </service>
    </services>
    <channels>
        <channel-definition id="amf-endpoint"
            class="mx.messaging.channels.AMFChannel">
            <endpoint uri="amfphp/gateway.php"
                class="flex.messaging.endpoints.AMFEndpoint"/>
        </channel-definition>
    </channels>
</services-config>

E configuramos o services-config.xml nas propriedades do projeto Flex:

Agora vamos fazer um teste de conexão. Crie a seguinte classe: HelloWorld.php em www/FlexFoto/amfphp/services

<?php
class HelloWorld
{
  function Say()
  {
    return "Hello World from amfphp";
  }
}

E no Flex, adicione o seguinte código:

<?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">

<fx:Declarations>
	<s:RemoteObject id="HelloWorld"
	                   destination="amf" source="HelloWorld">
		<s:method name="Say" result="OnSayResult(event)"/>
	</s:RemoteObject>
</fx:Declarations>

<fx:Script>
	<![CDATA[
		import mx.controls.Alert;
		import mx.rpc.events.ResultEvent;

		protected function OnSayResult(e:ResultEvent):void
		{
			mx.controls.Alert.show(e.result.toString());
		}
	]]>
</fx:Script>

<s:Button label="Hello World">
	<s:click>
		<![CDATA[
		HelloWorld.Say();
		]]>
	</s:click>
</s:Button>

</s:Application>

Teste a aplicação. Veja inicialmente se a aplicação abre com o endereço "localhost" e não "c:….". Clique no botão e verifique se a mensagem "Hello World from AMFPHP" surgir. Se for algum erro, você precisa investigar o erro através da mensagem de erro padrão do log de erros do wamp (c:wamplogsapache_error.php). Se não achou nada, use o Firefox+Firebug+Flashbug ou então use o Charles Proxy(http://www.charlesproxy.com/)

Configurando a WebCam

Esta parte é tranquila, já que vimos isso no artigo anterior. Apague o “hello world” do teste de conexão e faça:

<?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">

	<fx:Declarations>
		<s:RemoteObject id="Foto"
		               destination="amf" source="Foto">

		</s:RemoteObject>
	</fx:Declarations>

	<mx:VideoDisplay id="webcam"
				 	 width="160" height="120"
					 top="100"
					 left="100"
					 >
		<mx:creationComplete>
			<![CDATA[
				webcam.attachCamera(Camera.getCamera());
			]]>
		</mx:creationComplete>

	</mx:VideoDisplay>

	<s:Button label="Salvar!!" top="50" left="150">

	</s:Button>

</s:Application>

Salvando a imagem no servidor

Até aqui apenas exibimos a câmera e o botão salvar. Vamos agora dar a funcionalidade necessária para enviar a imagem da WebCam para o servidor. Crie o arquivo Foto.php na pasta services, com o seguinte conteúdo:

<?php
class Foto
{
 function __construct()
 {

 }

 function Save($fotoAsString)
 {
	//obtém um id unico para o arquivo
	$nomeArquivo = uniqid();

	//configura o nome do arquivo
	$nomeImagem = "imagem/{$nomeArquivo}.jpg";

	//abre o arquivo. A opção w vai criá-lo, caso nao exista
	$arquivo = fopen($nomeImagem, 'w');

	//escreve no arquivo
	fwrite($arquivo, base64_decode($fotoAsString));

	return "ok";

 }
}

Aqui, criamos no método Save uma rotina para salvar a imagem no disco. Isso é feito graças a transformação da foto em string e na sua volta, pelo método base64_decode.

Exibindo as imagens gravadas no Flex

Assim que a foto é gravada, a reqisição feita pelo Flex volta, com um "ok". Então podemos usar outra rotina para ler todas as imagens e apresentá-las no flex:

<s:List
	id="exibirImagens"
	top="10"
	left="150"
	right="10"
	bottom="10"
	width="530"
	height="400"
	>
	<s:layout>
		<s:TileLayout
			requestedColumnCount="5"
			requestedRowCount="8"
			horizontalGap="2"
			verticalGap="2"/>
	</s:layout>
	<s:itemRenderer>
		<fx:Component>
			<mx:Image source="{data}" />
		</fx:Component>
	</s:itemRenderer>
</s:List>

No código acima, criamos uma lista do tipo tile, cujo o itemrenderer é um componente do tipo image.

Para preencher esta lista, usamos o seguinte código:

protected function OnGetAll(event:ResultEvent):void
{
	exibirImagens.dataProvider = new ArrayList((event.result as Array));
}

Ou seja, sempre que chamamos o método GetAll, o php se encarrega de obter uma lista de imagens e retorná-la para o Flex. Com esta lista preenchemos o dataProvider da lista de imagens que possui o itemRenderer.

Para finalizar, o codigo php do método GetAll():

function GetAll()
{
	//http://snipplr.com/view/742/read-images-of-directory/
	$folder = opendir("imagem");
	$pic_types = array("jpg");
	$index = array();

	while ($file = readdir ($folder)) {
		if(in_array(substr(strtolower($file), strrpos($file,".") + 1),$pic_types))
		{
			array_push($index,"amfphp/services/imagem/$file");
		}
	}
	closedir($folder);	

	return $index;
}

O código php lê o diretório e retorna uma array com o caminho completo da imagem.

O resultado final é visto na tela abaixo:

Código fonte

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.

Muitas vezes necessitamos que nosso sistema possa armazenar dados localmente, sem a necessidade de um banco de dados robusto como um MySQL ou um SQL Server, ou mesmo que os dados possam ser armazenados localmente para uma posterior sincronização com um banco de dados remoto. O Adobe AIR oferece a possibilidade de se trabalhar com banco de dados localmente, seu banco é baseado no banco de dados SQLite, o mais usado para esse tipo de necessidade por ser bem rapido e fácil de se trabalhar. Foi adicionado suporte a transação no Adobe AIR 2.0.
Vamos a um exemplo simples, comecemos com a classe SQLConnection, ela sera responsável pela conexão com nosso banco local, por ela também é que definimos se o banco de dados será usado apenas em memoria ou se será criado um arquivo local(extensão .db).

Nesse caso, estou criando um arquivo local para o banco de dados. dbFile é uma instancia da classe File:

Tendo nosso banco criado, agora criaremos nossa tabela para armazenagem dos dados. Usaremos a classe SQLStatement.

Passaremos a SQL por String para criar a tabela para em seguida ser executada pelo AIR:

Temos nosso banco e tabelas criadas, vamos criar um formulario para inserir alguns dados no banco:

Agora basta criar o método para executará o select

Segue o codigo completo:

Mais:
more:
Quick Start: Working asynchronously with a local SQL database (Flex)
Quick Start: Working asynchronously with a local SQL database (Flash)
Quick Start: Working asynchronously with a local SQL database (HTML)
Quick Start: Working synchronously with a local SQL database (Flex)
Quick Start: Working synchronously with a local SQL database (Flash)
Quick Start: Working synchronously with a local SQL database (HTML)

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

Nesta 3a parte do tutorial iremos exibir os dados que estão sendo gravados no formulário para inserir pessoas.

Outras partes do tutorial:

• Parte 1 – Preparando o ambiente, criando os projetos Flex e PHP, testando a conexão
• Parte 2 – Inserindo dados com ZendAmf e Flex

Agora vamos exibir os dados que foram adicionados na parte 2. Precisamos criar um dataGrid com as colunas nome e email, e fazer a comunicação com o PHP para obter os dados. O Datagrid é feito através do seguinte código:

<mx:DataGrid id="dg" width="400" height="200" top="50" left="10">
 <mx:columns>
	<mx:DataGridColumn dataField="id" visible="false"/>
	<mx:DataGridColumn dataField="nome" headerText="Nome"/>
	<mx:DataGridColumn dataField="email" headerText="Email"/>
 </mx:columns>
 <mx:creationComplete>
	<![CDATA[
	GetAll();
	]]>
 </mx:creationComplete>
</mx:DataGrid>

Veja que chamamos o método GetAll no CreationComplete do DataGrid. Este método está descrito a seguir:

<fx:Declarations>
 <mx:RemoteObject id="RemotePessoas"
				 destination="zend"
				 source="Pessoas">

	<mx:method name="TesteConexao"
			   result="OnTestConexaoOk(event)"/>

	<mx:method name="GetAll"
			   result="OnGetAll(event)"/>

 </mx:RemoteObject>
</fx:Declarations>

<fx:Script>
<![CDATA[
	import forms.PessoaForm;

	import mx.controls.Alert;
	import mx.managers.PopUpManager;
	import mx.rpc.events.ResultEvent;

	public function OnTestConexaoOk(event:ResultEvent):void
	{
		Alert.show(event.result.toString());
	}

	public function GetAll():void
	{
		RemotePessoas.GetAll();
	}

	protected function OnGetAll(event:ResultEvent):void
	{
		dg.dataProvider = event.result;
	}

]]>
</fx:Script>

O método GetAll() irá chamar o método GetAll() do php, que está descrito a seguir:

<?php
include("base.php");

class Pessoas extends Base
{
	function __construct()
	{
		parent::__construct();
	}

	function TesteConexao()
	{
		return "OK";
	}

	function Inserir($nome,$email)
	{
		$data = array('nome'=>$nome,'email'=>$email);
		$this->db->insert('pessoas',$data);
		return $this->db->lastInsertId();
	}

	function GetAll()
	{
		return $this->db->fetchAll("select * from pessoas");
	}

}

O método GetAll() do PHP usa a instância de db para realizar um select, através do método fetchAll. O resultado de fetchAll é retornado pelo php e o método OnGetAll no flex é executado, onde setamos o dataprovider do DataGrid. Para finalizar, precisamos criar um botão que irá atualizar o dataGrid. Isso é facilmente feito pelo código a seguir:

<s:Button label="Atualizar" top="10" left="150">
 <s:click>
  <![CDATA[
  GetAll();
  ]]>
 </s:click>
</s:Button>