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.