Está procurando alguns tutoriais de Adobe Flex? O blog Design Your Way separou 45 tutoriais muito bacanas para Adobe Flex, eu separei os que eu achei mais interessantes e relevantes.

Aproveite e bons estudos!

01º Flex MP3 Player

02º XML Básico com Flex 3

03º Criando uma galeria 3D do Flickr com Flex e Awaya3D

04º Usando a classe TextRange

05º Construindo um ItemRenderer para TileList

06º Rotacionando a ViewStack em forma de Cubo

07º Drag Drop simples no Flex

08º Cursor customizado no Flex

09º Como fazer gráficos no Flex

10º Visualizador de imagens em miniaturas no Flex

11º Jogo da Velha em Flex com Degrafa

12º Formulários no Flex

13º Sistema de Login em Flex com PHP

14º Pegando informações de músicas do WebService da Amazon com o Adobe Flex

15º Instalando e usando o Google Maps no Flex

16º Galeria de imagens com o componente Accordion e XML no Flex

17º Interação entre Flex e Javascript

18º Múltiplos uploads com JQuery e Flex ou Flash

19º Desenvolvendo janelas em Flex ou Flash para o Adobe Photoshop

20º Criando um cliente Digg em Flex

21º Introdução ao Data Binding

22º Data Grid com XML

23º Usando Flex, PHP e Json para modificar dados no MySQL

24º Trabalhando com o Debugger no Adobe Flex Builder

25º Criando um relógio de contagem regressiva em Flex

26º Transmitindo dados entre Flex e PHP usando Json

27º Criando um leitor de Feeds (RSS) em Flex

28º Como criar um gráfico de Bolhas em Flex

29º Usando Item Renderes

30º Criando um formulário de email em Flex com PHP

31º Criando grandes listas dinâmicas em Flex

32º Encodificador assincrono de JPEG

33º Criando seu jogo de aventura no Adobe Flex

34º Mudando o identificador de seleção de uma Lista no Flex

35º Criando um player customizado do You Tube em Adobe Flex

36º Criando uma lista de contatos usando Flex e XML

37º Criando um album de fotos do Facebook em Flex

38º Modificando o estilo da linha selecionada na Data Grid

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)

INTRODUÇÃO

Boa noite Galera!

Hoje gostaria de compartilhar com vocês, uma postagem com as principais características, das mais comentadas tecnologias de desenvolvimento de aplicações RIA(Rich Internet Applications) do mercado, o Microsoft Silverlight e o Adobe Flex.
São ao todo 20 características destacadas, sendo que elas foram aplicadas nas últimas versões das plataformas destacadas.
Gostaria da opinião de vocês, meus amigos leitores e desenvolvedores, até mesmo para que possam avaliar o conteúdo, caso eu tenha descrito algo errado. Lembrando que a intenção desta postagem, não é denegrir nenhuma tecnologia, mas sim, apresentar suas características!

Abaixo, segue a tabela:

Obrigado pessoal!

Abs.

Robson Fernandes

Para finalizar o CRUD criado ao logo da semana, iremos implementar o delete de registros.

• Parte 1 – Preparando o ambiente, criando os projetos Flex e PHP, testando a conexão
• Parte 2 – Inserindo dados com ZendAmf e Flex
• Parte 3 – Exibindo os dados no DataGrid
• Parte 4 – Alterando dados

Para deletar um registro, precisamos inicialmente criar um botão que tem o mesmo comportamento do botão editar, ou seja, ele fica disponível somente se uma linha do DataGrid estiver selecionada. Isso é feito com o seguinte código:

<s:Button label="Apagar" top="10" left="150"
	  enabled="{dg.selectedIndex!=-1}">
<s:click>
	<![CDATA[
	RemotePessoas.Delete(dg.selectedItem.id);
	]]>
</s:click>
</s:Button>

Veja que agora chamamos o método Delete do PHP, que está implementado a seguir:

function Delete($idPessoa)
{
	$this->db->delete("pessoas", "id = {$idPessoa}");
	return true;
}

Para finalizar, precisamos atualizar o DataGrid assim que o registro for deletado. Isso é feito da seguinte forma:

<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:method name="Delete"
		   result="OnDelete(event)"/>

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

..............
protected function OnDelete(event:ResultEvent):void
	{
		GetAll();
	}

Com isso conseguimos deletar os registros que criamos.

Você pode baixar o código fonte completo aqui.

Conclusões

O desenvolvimento de sistemas, seja ele em flex ou não, sempre está passível de erros. Este crud apresentado possui
diversas melhorias que podem ser feitas e fica como “dever de casa” para você. Fique a vontade em criticar o código,
é assim que se aprende (e não copiando/colando)…

Esta série de artigos marcou minha despedida das férias, que tirei exclusivamente para trabalhar em casa. Foi muito
proveitoso, muito bom. Quero mais !! To pensando em virar freela !! Tem algum trabalho ae??

Nesta 4a parte iremos aprender a editar os dados que foram inseridos.

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
• Parte 3 – Exibindo os dados no DataGrid

Agora vamos editar um registro que está no grid. Inicialmente temos que criar um botão “editar” , conforme o código a seguir:

<s:Button label="Editar" top="10"
       left="300"
       enabled="{dg.selectedIndex!=-1}">
  <s:click>
	<![CDATA[
	var p:PessoaForm = new PessoaForm();
	p.idPessoa = dg.selectedItem.id;
	PopUpManager.addPopUp(p,this,true);
	PopUpManager.centerPopUp(p);
	]]>
  </s:click>
</s:Button>

Neste botão, usamos a propriedade enabled ligada ao DataGrid, para que o botão esteja ativado somente se uma linha do DataGrid estiver selecionada. No click do botão, criamos a o popup e passamos o id da pessoa para ele. Quando o formulário terminar de carregar, ele irá se encarregar de pegar os dados.

Porque não passar diretamente nome e email para o formulário? Porque geralmente o formulário contém mais campos do que as colunas do DataGrid. Neste caso não seria possivel passar estes campos. O ideal sempre é passar o ID e pegar os dados novamente, mesmo porque os dados podem até ter sido alterados por outra pessoa.

O formulário PessoaForm.mxml conterá modificações para aceitar a edição de dados. As alterações estão em negrito

<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
	   xmlns:s="library://ns.adobe.com/flex/spark"
	   xmlns:mx="library://ns.adobe.com/flex/mx"
	   width="300" height="150"
	   title="Pessoa"
	   close="{PopUpManager.removePopUp(this)}"
	   >
<s:layout>
<s:VerticalLayout/>
</s:layout>

<s:creationComplete>
<![CDATA[

	if (idPessoa != null)
		pessoaRemote.GetById(idPessoa);

]]>
</s:creationComplete>

<fx:Declarations>

<mx:RemoteObject id="pessoaRemote"
				 destination="zend"
				 source="Pessoas"
				 showBusyCursor="true"
				 >

	<mx:method name="Inserir"
			   result="OnInserir(event)"
			   fault="OnFault(event)"
			   />

	<mx:method name="GetById"
			   result="OnGetById(event)"
			   fault="OnFault(event)"
			   />

	<mx:method name="Alterar"
			   result="OnAlterar(event)"
			   fault="OnFault(event)"
			   />

</mx:RemoteObject>

</fx:Declarations>

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

	import spark.components.PopUpAnchor;

	public var idPessoa:String;

	protected function OnInserir(event:ResultEvent):void
	{
		PopUpManager.removePopUp(this);
	}

	protected function OnFault(event:FaultEvent):void
	{
		Alert.show(event.message.toString(), "ERROR");
	}

	protected function OnGetById(event:ResultEvent):void
	{
		nome.text = event.result.nome;
		email.text = event.result.email;
	}

	protected function OnAlterar(event:ResultEvent):void
	{
		PopUpManager.removePopUp(this);
	}

]]>
</fx:Script>

<mx:Form width="100%" height="100%">
<mx:FormItem label="Nome:" width="100%">
	<s:TextInput id="nome" width="100%"/>
</mx:FormItem>
<mx:FormItem label="Email:" width="100%">
	<s:TextInput id="email" width="100%"/>
</mx:FormItem>
</mx:Form>

<s:controlBarContent>
<s:HGroup horizontalAlign="right" width="100%">
	<s:Button id="btnOk" label="OK">
		<s:click>
			<![CDATA[

			if (idPessoa != null)
				pessoaRemote.Alterar(idPessoa,nome.text,email.text);
			else
				pessoaRemote.Inserir(nome.text,email.text);
			]]>
		</s:click>
	</s:Button>
	<s:Button id="btnCancelar"
			  label="Cancelar"
			  click="{PopUpManager.removePopUp(this)}"/>
</s:HGroup>
</s:controlBarContent>

</s:TitleWindow>

Para preparar o formulário para edição, é preciso criar uma variável de controle, que aqui chamamos de idPessoa. Através desta variável sabemos se estamos inserindo ou alterando um registro

A classe Pessoas no php também sobre modificações, conforme o código 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 Alterar($idPessoa,$nome,$email)
{
	$data = array("nome"=>$nome,"email"=>$email);
	$this->db->update("pessoas",$data,"id={$idPessoa}");
	return true;
}

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

function GetById($idPessoa)
{
	return $this->db->fetchRow("select * from pessoas where id = {$idPessoa}");
}

}

Agora só falta deletar o registro, que será feito no próximo artigo da série.

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>

Se você ainda não leu CRUD com Flex e Zend_AMF – Parte 1, leia agora

Agora que nossa conexão foi estabelecida, podemos começar a adicionar registros. Esta é a nossa primeira tarefa, e para isso precisamos criar um formulário de entrada de dados. Geralmente os formulários de entrada de dados são feitos em uma popup, e vamos seguir esta regra, ok?

Crie um novo MXML Component, chamado: PessoaForm.mxml, conforme a imagem a seguir:

O código inicial deste componente está a seguir:

<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
		   xmlns:s="library://ns.adobe.com/flex/spark"
		   xmlns:mx="library://ns.adobe.com/flex/mx"
		   width="300" height="150"
		   title="Pessoa"
		   close="{PopUpManager.removePopUp(this)}"
		   >
<s:layout>
	<s:VerticalLayout/>
</s:layout>

<fx:Declarations>
	<!-- Place non-visual elements
	(e.g., services, value objects) here -->
</fx:Declarations>

<fx:Script>
	<![CDATA[
		import mx.managers.PopUpManager;

		import spark.components.PopUpAnchor;
	]]>
</fx:Script>

<mx:Form width="100%" height="100%">
	<mx:FormItem label="Nome:" width="100%">
		<s:TextInput id="nome" width="100%"/>
	</mx:FormItem>
	<mx:FormItem label="Email:" width="100%">
		<s:TextInput id="email" width="100%"/>
	</mx:FormItem>
</mx:Form>

<s:controlBarContent>
	<s:HGroup horizontalAlign="right" width="100%">
		<s:Button id="btnOk" label="OK"/>
		<s:Button id="btnCancelar"
				  label="Cancelar"
				  click="{PopUpManager.removePopUp(this)}"/>
	</s:HGroup>
</s:controlBarContent>

</s:TitleWindow>

Neste código criamos um form com dois campos, mais os botões ok e cancelar. Até aqui nada de mais. O botão cancelar remove o popup, pois este TitleWindow será um popup.

Voltando à aplicação principal, temos que criar o botão que irá abrir este TitleWindow. Alterando o código da aplicação (Parte 1), temos:

<?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>
<mx:RemoteObject id="RemotePessoas"
				 destination="zend"
				 source="Pessoas">

	<mx:method name="TesteConexao"
			   result="OnTestConexaoOk(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());
	}
	]]>
</fx:Script>	

<s:Button label="Adicionar Pessoa" top="10" left="10">
<s:click>
	<![CDATA[
		var p:PessoaForm = new PessoaForm();
		PopUpManager.addPopUp(p,this,true);
		PopUpManager.centerPopUp(p);
	]]>
</s:click>
</s:Button>

</s:Application>

O botão “Adicionar Pessoa” da aplicação principal abre uma popup, exibindo o formulário abaixo:

Agora podemos voltar ao código do formulário e adicionar a funcionalidade de “adicionar pessoa”. Para isso usamos o RemoteObject. O código do arquivo PessoaForm.mxml fica assim:

...
<fx:Declarations>

 <mx:RemoteObject id="pessoaRemote"
		 destination="zend"
		 source="Pessoas"
		 showBusyCursor="true"
		 >

	<mx:method name="Inserir"
	   result="OnInserir(event)"
	   fault="OnFault(event)"
	   />

  </mx:RemoteObject>

</fx:Declarations>

...

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

import spark.components.PopUpAnchor;

protected function OnInserir(event:ResultEvent):void
{
	PopUpManager.removePopUp(this);
}

protected function OnFault(event:FaultEvent):void
{
	Alert.show(event.message.toString(), "ERROR");
}

]]>
</fx:Script>

....

<s:Button id="btnOk" label="OK">
	<s:click>
	<![CDATA[
		pessoaRemote.Inserir(nome.text,email.text);
	]]<
	</s:click>
</s:Button>

As mudanças no código são relativas ao RemoteObject, que possui o método inserir, disparado pelo click do botão. O método inserir deve ser criado no arquivo pessoas.php, conforme o código a seguir:

<?php
class Pessoas
{
	var $db;

	function __construct()
	{
		$this->db = new Zend_Db_Adapter_Pdo_Mysql(array(
		'host'     => '127.0.0.1',
		'username' => 'root',
		'password' => '',
		'dbname'   => 'flexcrud'
		));
	}

	function TesteConexao()
	{
		return "OK";
	}

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

}

Neste momento já podemos testar a aplicação. Caso dê algum erro, verifique o log de erros em c:wamplogsapache_error.log. Mas olhando o código do arquivo pessoas.php, podemos notar que ele tem um problema. Os parâmetros de conexão estão dentro da classe pessoas. Fiz isso de propósito, para mostrar que temos que ter uma visão crítica do nosso código, sempre que possível. Já imaginou termos 10 classes e cada uma delas tem as configurações do banco de dados? E se estas configurações mudarem?? Precisaremos alterar as 10 classes.. (eu acho que isso da justa causa hehe).

Para resolver o problema, podemos usar um pouco de orientação a objetos. Vamos criar uma classe chamada “Base”, que contém essa configuração, e fazer a classe Pessoas herdar de Base. Veja:

base.php:

<?php
class Base
{
	var $db;

	function __construct()
	{
		$this->db = new Zend_Db_Adapter_Pdo_Mysql(array(
		'host'     => '127.0.0.1',
		'username' => 'root',
		'password' => '',
		'dbname'   => 'flexcrud'
		));
	}
}

Agora a classe Pessoas fica assim:

<?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();
	}

}

Desta forma, conseguimos usar a variável $this->db em qualquer classe que herde da classe Base. No próximo artigo da série, iremos criar um datagrid para ver os dados que estão sendo inseridos. Aguardem!!

Funcionalidade muito utilizada em sites, a qual é o armazenamento de dados no cookie do browser, esta função é muito utilizada para salvar as preferências de usuários como: login, email, ultimo acesso entre outras informações.
No Flex isso também é possível podendo ser até mais poderoso do que as formas atuais, para fazer isso você deve utilizar o SharedObject.

A função do Shared Objects (ShO) é armazenar dados localmente, funcionando como um cookies do browser. Assim você pode armazenar dados e chamá-los durante a sessão atual ou em outra futura sessão. Contudo estes dados não podem ser acessados por outra aplicação Flex mais sim apenas pela aplicação criadora.

Shared Objects vs Cookies

É comum desenvolvedores confundirem ShO com cookies.
Os cookies que aderem ao padrão RFC 2109 geralmente têm as seguintes características:

• Eles podem expirar, e geralmente é feito isso no final da sessão por default.
• Podem ser desabilitados pelos clientes.
• Há um limite de 300 cookies sendo no Maximo 20 por site.
• Um cookie tem o espaço de armazenamento de 4 kb.
• Há a possibilidade de serem considerados como arquivos maliciosos.
• Há uma comunicação entre cliente e servidor para armazenamento dos dados.

Shared Object tem as seguintes características:

• Eles não expiram por default.
• Por padrão o seu limite de armazenamento é de 100 kb.
• Eles podem armazenar dados simples como: String, Date, Array ….
• A aplicação pode indicar locais específicos para o armazenamento dos dados.
• Não há transmissão e comunicação entre o cliente e o servidor para a busca e armazenamento dos dados.

Com a classe SharedObject é possível realizar qualquer manipulação dos dados que ficarão armazenados no cliente. Esta possui os seguintes métodos:

• clear() – Limpa permanentemente todos os dados contidos no Shared Object.
• flush() – Grava os dados do ShO no cliente.
• getLocal() – Retorna uma instancia do ShO no cliente, caso não exista o mesmo cria uma.
• getSize() – Retorna o tamanho em Bytes do ShO no cliente. Uma observação o tamanho default é de 100kb, contudo isto pode ser alterado para mais.

Na prática:
Criando uma lista de contatos.

Criar uma classe chamada ShareObjectHelper a qual irá realizar a manipulação dos dados do Shared Object, tais como: incluir, remover e listar.
Esta é uma classe bem simples no qual será usado um ArrayCollection para armazenar todos os dados que armazenarão dos contatos que o usuário incluiu.

package {
	import mx.collections.ArrayCollection;
	import flash.net.SharedObject;
 
	public class SharedObjectHelper {
 
		private var _sharedObject:SharedObject;
		private var _dpSharedObject:ArrayCollection;
		private var _nomeArquivoSharedObject:String;
 
		/**
		 * Construtor
		 */
		public function SharedObjectHelper(valor:String) {
			inicializaHelper(valor);
		}
 
		/**
		 * @private
		 * Responsavel por recuperar a instancia do SharedObject baseado no
		 * parametro.
		 *
		 */
		private function inicializaHelper(valor:String):void {
			_dpSharedObject = new ArrayCollection();
			_nomeArquivoSharedObject = valor;
			_sharedObject = SharedObject.getLocal(_nomeArquivoSharedObject);
 
			if (getObjects()) {
				_dpSharedObject = getObjects();
			}
		}
 
		/**
		 * Retorna todos um array de dados que está armazendo no SharedObject
		 * @return ArrayCollection
		 */
		public function getObjects():ArrayCollection {
			return _sharedObject.data[_nomeArquivoSharedObject];
		}
 
		/**
		 * Adiciona um dado ao array de dados.
		 * @param Object
		 */
		public function addObject(o:Object):void {
			_dpSharedObject.addItem(o);
			updateSharedObjects();
		}
 
		/**
		 * @private
		 * Vincula o array de dados a um SharedObject.
		 */
		private function updateSharedObjects():void {
			_sharedObject.data[_nomeArquivoSharedObject] = _dpSharedObject;
			_sharedObject.flush();
		}
	}
 
}

<?xml version="1.0"?>
<mx:Application xmlns:local="*" xmlns:mx="http://www.adobe.com/2006/mxml"
				creationComplete="init()" backgroundColor="#ffffff"
				layout="vertical" 
				backgroundGradientAlphas="[1.0, 1.0]" 
				backgroundGradientColors="[#D3D3D3, #E7E7E7]" viewSourceURL="srcview/index.html">
	<mx:Script>
		<![CDATA[
			import mx.events.ValidationResultEvent;
			import mx.validators.ValidationResult;
			import mx.collections.ArrayCollection;
			import mx.utils.ObjectUtil;
			import flash.net.SharedObject;
 
			[Bindable]
			public var dpContatos:ArrayCollection = new ArrayCollection();
 
			public var shoHelper:SharedObjectHelper;
 
			/**
			 * @private
			 * Inicializa a classe SharedObjectHelper e ja cria/recupera
			 * instancia de um objeto SharedObject.
			 */
 
 
			private function init():void {
				shoHelper = new SharedObjectHelper("contatos");
 
				if (shoHelper.getObjects()) {
					dpContatos = shoHelper.getObjects();
				}
 
			}
 
			/**
			 * @private
			 * Adiciona um contato na lista de contatos e executa o addObject da classe
			 * sharedObjectHelper.
			 */
			private function addContato():void {
				if(valNome.validate().type == ValidationResultEvent.VALID){
					/* Cria um objeto dinamico com os atributos dos fomularios */
					var objInsert:Object = {nome: txtNome.text, apelido: txtApelido.text};
					shoHelper.addObject(objInsert);
 
					dpContatos = shoHelper.getObjects();
 
					/* Limpa os campos do formularios */
					txtNome.text = '';
					txtApelido.text = '';
				}
			}
 
			/**
			 * @private
			 * Remove um contato do DataGrid e da lista de contatos do SharedObejct
			 */
			public function removeContato():void {
				if (dgContatos.selectedIndex > -1) {
					dpContatos.removeItemAt(dgContatos.selectedIndex);
				}
			}
 
		]]>
	</mx:Script>
	<mx:StringValidator id="valNome" source="{txtNome}" property="text" 
		required="true" requiredFieldError="Campo Obrigatório"
		triggerEvent="''"/>
 
	<mx:Panel title="Contatos" layout="vertical" horizontalAlign="center" width="400">
 
 
		<mx:Form width="100%">
			<mx:FormItem label="Nome" width="100%">
				<mx:TextInput id="txtNome" width="100%"/>
			</mx:FormItem>
			<mx:FormItem label="Apelido" width="100%">
				<mx:TextInput id="txtApelido" width="100%"/>
			</mx:FormItem>
			<mx:Button id="b2" label="Salvar" click="addContato()"/>
		</mx:Form>
 
		<mx:DataGrid id="dgContatos" dataProvider="{dpContatos}" width="100%">
			<mx:columns>
				<mx:DataGridColumn headerText="Nome" dataField="nome"/>
				<mx:DataGridColumn headerText="Apelido" dataField="apelido"/>
				<mx:DataGridColumn headerText="Opções" width="80" textAlign="center">
					<mx:itemRenderer>
						<mx:Component>
							<mx:Button label="Excluir" width="8" click="outerDocument.removeContato()"/>
						</mx:Component>
					</mx:itemRenderer>
				</mx:DataGridColumn>
			</mx:columns>
		</mx:DataGrid>
	</mx:Panel>
 
</mx:Application>