Olá pessoal, vamos dar proceguimento a nossa enquete com Flex + PHP + MySQL, abram o projeto anteriormente criado – Criando uma enquete com Flex + PHP + MySQL – Parte I.

Vamos criar os HTTPs que serão responsáveis pela manutenção da nossa enquete, para isso abram o arquivo enquete.mxml e logo abaixo do código:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”absolute”
currentState=”enquete”
backgroundColor=”#FFFFFF”
horizontalScrollPolicy=”off” verticalScrollPolicy=”off”>

Incluam o seguinte código:

<mx:HTTPService id=”pegaDados”
useProxy=”false”
resultFormat=”e4x”
url=”enq_pegaDados.php”
method=”POST”
contentType=”application/x-www-form-urlencoded”
showBusyCursor=”true”
result=”handleDsPegaDadosResult(event)”/><mx:XMLListCollection id=”pegaDadosXML”/>

<mx:HTTPService id=”vota” url=”vota.php” result=”{atualizaDados();}”>
<mx:request xmlns=”">
<votou>{rgEnquete.selectedValue}</votou>
</mx:request>
</mx:HTTPService>

nesse código, logo após o HTTPService, com o ID pegaDados, ser executado e pegar as informações, que serão retornadas no formato XML, do nosso script PHP, executará a função handleDsPegaDadosResult(event) que será criada logo mais na seção ActionScript. esse HTTPService será o responsável em ver se o usuário já votou e de atualizar as barras de progresso da nossa enquete. O formato que eu usei foi o XML e4x (falarei do formato XML e4x num outro post). Criamos também um XMLListCollection que será usado no nosso AS

Temos também o HTTPService com o ID vota, que será responsável por fazer a votação, adicionando a mesma na tabela respostas. Ao terminar de fazer a votação, ele executará a função atualizaDados();.
Dentro desse HTTPService vamos passar o valor do nosso radioButton selecionado pelo usuário, esse parâmetro é passado pela tag mx:request, lá no arquivo PHP pegamos esse valor e colocamos na variável $voto – $votou = $_GET[votou];

Agora vamos criar nosso script AS, que dará as funcionalidades necessárias as nossas enquetes, abaixo do código anterior (HTTPServices) vamos adicionar nosso AS, conforme script abaixo:

<mx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
import mx.controls.*
import mx.events.*;[Bindable]
private var meuXML:XML;

[Bindable]
private var temp:XMLList;

[Bindable]
private var checaIP:String;

public function handleDsPegaDadosResult( ev:ResultEvent ):void {

meuXML = XML(ev.result.toString());
meuXML = meuXML.normalize();

temp = meuXML.enquete.respostas;

pegaDadosXML.removeAll();
pegaDadosXML.source = temp;

chegaVoto();
}

private function habilitaBotaoVotar():void{
if ((rb0.selected == false) && (rb1.selected == false) && (rb2.selected == false) && (rb3.selected == false)){
btnVotar.enabled = false;
}else{
btnVotar.enabled = true;
}

}

private function chegaVoto():void{
checaIP = String(pegaDadosXML.getItemAt(5).cookie.acesso);
if (checaIP==”NEGADO”){
btnVotar.enabled = false;
rgEnquete.enabled = false;
}else{
rgEnquete.enabled = true;
}
}

private function atualizaDados():void{
pegaDados.send();
ver();
}

private function votando():void{
vota.send();
}

private function ver():void{
currentState=”resultado”;
gauge();
}

private function gauge():void{
bar0.setProgress(pegaDadosXML.getItemAt(0).voto,100);
bar1.setProgress(pegaDadosXML.getItemAt(1).voto,100);
bar2.setProgress(pegaDadosXML.getItemAt(2).voto,100);
bar3.setProgress(pegaDadosXML.getItemAt(3).voto,100);
}

]]>
</mx:Script>

Vamos a explicação do nosso código acima, as 3 primeiras linhas do nosso código

import mx.rpc.events.ResultEvent;
import mx.controls.*
import mx.events.*

é pra importar todos as classes necessárias para que nossa enquete funcione. Em seguida eu crio 3 variável que será usada na função handleDsPegaDadosResult, essa função será executada logo após o HTTPService pegar os dados do PHP, ela tratará o XML e colocará dentro da XMLListCollection. Logo depois eu executo a função chegaVoto();, onde eu testo se o usuário pode ou não votar.

A função chamada – chegaVoto() – serve para checar se o usuário já votou ou não, se ele votou, então nosso código PHP retornará um XML com a opção NEGADO e assim, não será liberado o botão Votar e nem os radioButtons – rgEnquete. Se o usuário ainda não votou, então tanto o botão Votar como os radioButtons, serão liberados para votação.

A função – habilitaBotaoVotar() – serve pra que o usuário não consiga votar sem antes clicar em uma das opções, enquanto o usuário não selecionar uma opção, o botão Votar (btnVotar) ficará setado como false, ficando disponível somente depois de selecianada uma das opções.

A função gauge( ) do nosso código, é que pega os dados do XML que foi retornado pelo HTTPService pegaDados e atualizará as barras de progresso da nossa enquete com a contagem dos votos.

private function gauge():void{
bar0.setProgress(pegaDadosXML.getItemAt(0).voto,100);
bar1.setProgress(pegaDadosXML.getItemAt(1).voto,100);
bar2.setProgress(pegaDadosXML.getItemAt(2).voto,100);
bar3.setProgress(pegaDadosXML.getItemAt(3).voto,100);
}

Agora vamos mudar algumas propriedades na nossa enquete, na viewState enquete na tag <mx:text mudem a propriedade text=”" para:
text=”{pegaDadosXML.getItemAt(4).pergunta.perg} ficando toda a linha da seguinte forma:

<mx:Text x=”10″ y=”6″ text=”{pegaDadosXML.getItemAt(4).pergunta.perg}” width=”130″ height=”72″ textAlign=”center” fontWeight=”bold” color=”#ff8040″/>

Logo abaixo, temos a tag <mx:RadioButtonGroup> mude essa linha acrescentando a propriedade itemClick=”" assim:

<mx:RadioButtonGroup itemClick=”habilitaBotaoVotar();” id=”rgEnquete”/>

Aqui, ao clicar em qualquer das 4 opções, executará a função habilitaBotaoVotar();.
Em seguida nós tempos as 4 tags, uma pra cada radioButton, vamos mudá-las, para que fiquem da seguinte forma:

<mx:RadioButton id=”rb0″ value=”{pegaDadosXML.getItemAt(0).unico}” label=”{pegaDadosXML.getItemAt(0).resp}” groupName=”rgEnquete” textAlign=”left”/>
<mx:RadioButton id=”rb1″ value=”{pegaDadosXML.getItemAt(1).unico}” label=”{pegaDadosXML.getItemAt(1).resp}” groupName=”rgEnquete” textAlign=”left”/>
<mx:RadioButton id=”rb2″ value=”{pegaDadosXML.getItemAt(2).unico}” label=”{pegaDadosXML.getItemAt(2).resp}” groupName=”rgEnquete” textAlign=”left”/>
<mx:RadioButton id=”rb3″ value=”{pegaDadosXML.getItemAt(3).unico}” label=”{pegaDadosXML.getItemAt(3).resp}” groupName=”rgEnquete” textAlign=”left”/>

Aqui cada radioButton recebe sua respectiva resposta com seu respectivo ID, trazidos pelo XML que o arquivo enq_pegaDados.php gerou.

Agora, abaixo tempo dois componentes buttons, um “Votar” e outro “Ver”, no botão Votar acrescente a função votando( ) no evento Click do mesmo, faça o mesmo com o botão “Ver”, acrescentando no click do mesmo, a função ver( ). veja código abaixo:

<mx:Button id=”btnVotar” x=”9″ y=”209″ label=”Votar” click=”{votando();}” enabled=”false”/>
<mx:Button x=”75″ y=”209″ label=”Ver” click=”{ver();}”/>

Agora mudem para a viewState resultado e mudem as linhas do progress bar para que fiquem da seguinte forma:

<mx:ProgressBar id=”bar0″ label=”{pegaDadosXML.getItemAt(0).resp}->{pegaDadosXML.getItemAt(0).voto}%” width=”130″ minimum=”0″ maximum=”100″ direction=”right” mode=”manual” themeColor=”#00CC00″/>
<mx:ProgressBar id=”bar1″ label=”{pegaDadosXML.getItemAt(1).resp}->{pegaDadosXML.getItemAt(1).voto}%” width=”130″ minimum=”0″ maximum=”100″ direction=”right” mode=”manual” themeColor=”#0066CC”/>
<mx:ProgressBar id=”bar2″ label=”{pegaDadosXML.getItemAt(2).resp}->{pegaDadosXML.getItemAt(2).voto}%” width=”130″ minimum=”0″ maximum=”100″ direction=”right” mode=”manual” themeColor=”#FFCC00″/>
<mx:ProgressBar id=”bar3″ label=”{pegaDadosXML.getItemAt(3).resp}->{pegaDadosXML.getItemAt(3).voto}%” width=”130″ minimum=”0″ maximum=”100″ direction=”right” mode=”manual” themeColor=”#FF0000″/>

Agora no botão voltar, incluam a seguinte ação no click do botão: click=”currentState=’enquete’” ficando a linha da seguinte forma:

<mx:Button label=”Voltar” horizontalCenter=”0″ bottom=”10″ click=”currentState=’enquete’” width=”100″/>

Caso tenha alguma dúvida utilize o fórum.
Abraços, Luis Carlos Quinhone – quinhone@mxstudio.com.br

Bom pessoal, esse é o meu primeiro artigo aqui no MX Studio, espero poder suprir as expectativas do Fábio e do Renan, que me convidaram a colocar os artigos e traduções que eu vinha postando no meu blog, aqui na casa.

Pra começar, vou mostrar como construir uma enquete utilizando o Flex + PHP.

Vamos começar com o banco de dados, abram seu adminitrador de banco de dados favorito e crie as seguintes tabelas:

Tabela Pergunta:

CREATE TABLE `perguntas` (
`id` mediumint(9) NOT NULL auto_increment,
`pergunta` varchar(100) default NULL,
`status` char(1) default NULL,
`data` datetime default NULL,
UNIQUE KEY `id` (`id`)
) TYPE=MyISAM AUTO_INCREMENT=1 ;

INSERT INTO `perguntas` VALUES (1, ‘O que você acha desse artigo?’, ‘S’, ’2007-05-17 00:00:00′);

Tabela Respostas:

CREATE TABLE `respostas` (
`unico` mediumint(9) NOT NULL auto_increment,
`id` mediumint(9) default NULL,
`resposta` varchar(30) default NULL,
`data` datetime default NULL,
`voto` mediumint(4) default ’0′,
UNIQUE KEY `unico` (`unico`)
) TYPE=MyISAM AUTO_INCREMENT=1 ;

INSERT INTO `respostas` VALUES (1, 1, ‘Regular’, ’2007-05-17 00:00:00′, 0);
INSERT INTO `respostas` VALUES (2, 1, ‘Bom’, ’2007-05-17 00:00:00′, 0);
INSERT INTO `respostas` VALUES (3, 1, ‘Ótimo’, ’2007-05-17 00:00:00′, 0);
INSERT INTO `respostas` VALUES (4, 1, ‘Ruim’, ’2007-05-17 00:00:00′, 0);

Vamos criar agora nossos arquivos PHP que será responsável em fazer todos os trâmites legais para o bom funcionamento da nossa enquete. Abram o seu editor PHP favorito e digitem o seguinte código:

Arquivo: config.php

<?
//**********************************************//
// Nome do Arquivo: Config.php
// Versão: 1.0
// Data de Criação: 01/02/2006
// Data de Atualização: 15/12/2005
// Autor: Luis Carlos Quinhone
// Email: quinhone@direciona.com.br
//
//
//**********************************************//
// Constantes de Banco de Dados:
// Não esqueça de mudar esses dados ao publicar no servidor
//**********************************************//
DEFINE(‘NOMESERV’,'localhost’);
DEFINE(‘NOMEUSU’,'root’);
DEFINE(‘SENHADB’,”);
DEFINE(‘NOMEDB’,'enquete’);
DEFINE(‘TBPERG’, ‘perguntas’);
DEFINE(‘TBRESP’, ‘respostas’);

//**********************************************//
// Database Query:
//**********************************************//
$con = mysql_connect(NOMESERV,NOMEUSU,SENHADB) OR DIE(“Impossível Conectar ao Banco de Dados”);
@mysql_select_db(NOMEDB) or die( “ACESSO BLOQUEADO!! Não foi possível selecionar o Banco de Dados $query.” . NOMEDB);
?>

Arquivo: vota.php

<?php
require (‘config.php’);

header(“Expires: Mon, 26 Jul 1997 05:00:00 GMT”);
header(“Last-Modified: ” . gmdate(“D, d M Y H:i:s”) . ” GMT”);
header(“Cache-Control: no-store, no-cache, must-revalidate”);
header(“Cache-Control: post-check=0, pre-check=0″, false);
header(“Pragma: no-cache”);

$IP = $_SERVER[REMOTE_ADDR];
//Pega o IP da máquina cliente para que o mesmo não possa votar novamente num período de 2 dias

$votou = $_GET[votou];
//pega o id da resposta que vem do Flex

if ($votou!=”") //Se a variável $votou não for nula, atualiza o voto.
{
$atualizaVoto = “UPDATE respostas SET voto=voto+1 WHERE unico=$votou”;
$result = mysql_query($atualizaVoto);
setcookie(“IP”, “$IP”, time()+172800); //Fixa a expiração do cookie em 48 horas
}

mysql_free_result( $result );

?>

Arquivo: enq_pegaDados.php

<?php
require (‘config.php’);

header(“Expires: Mon, 26 Jul 1997 05:00:00 GMT”);
header(“Last-Modified: ” . gmdate(“D, d M Y H:i:s”) . ” GMT”);
header(“Cache-Control: no-store, no-cache, must-revalidate”);
header(“Cache-Control: post-check=0, pre-check=0″, false);
header(“Pragma: no-cache”);

//Se o IP estiver no cookie, nega o acesso a votação.
if(IsSet($_COOKIE["IP"])){
$acesso = “<acesso>NEGADO</acesso>”;
}else{
$acesso = “<acesso>OK</acesso>”;
}

$return =”";

if ($con) {

$selperg = (“SELECT * from perguntas where status = ‘S’” );
$qryperg = mysql_query($selperg);
$rowperg = mysql_num_rows($qryperg);
if ($rowperg > 0){
$linhaperg = mysql_fetch_object($qryperg);
}

$ID = $linhaperg->id;
$PERG = $linhaperg->pergunta;

$selvotos = (“SELECT SUM(voto) as total from respostas where id=$ID” );
$qryvotos = mysql_query($selvotos);
($row = mysql_fetch_array($qryvotos,MYSQL_BOTH));

$totalvotos = $row[total];

$selresp = (“SELECT unico, id, resposta, voto from respostas where id=$ID order by unico” );
$qryresp = mysql_query($selresp);
$rowresp = mysql_num_rows($qryresp);
if ($rowresp > 0){

$return = ‘<?xml version=”1.0″ encoding=”iso-8859-1″?>’;
$return .= ‘<resultado>’;
$return .= ‘<enquete>’;

while ( $resp = mysql_fetch_object( $qryresp ) )
{

$votosUnicos = $resp->voto;
$percVotos = $votosUnicos*100/$totalvotos;

$return .= ‘<respostas>’;
$return .= “<unico>”.$resp->unico.”</unico>”;
$return .= “<idresp>”.$resp->id.”</idresp>”;
$return .= “<resp>”.$resp->resposta.”</resp>”;
$return .= “<voto>”.round($percVotos, 1).”</voto>”;
$return .= “</respostas>”;
}

}
}

$return .= ‘<respostas>’;
$return .= ‘<pergunta>’;
$return .= ‘<perg>’.$PERG.’</perg>’;
$return .= “</pergunta>”;
$return .= ‘</respostas>’;

$return .= ‘<respostas>’;
$return .= “<cookie>”;
$return .= $acesso;
$return .= “</cookie>”;
$return .= ‘</respostas>’;

$return .= “</enquete>”;
$return .= ‘</resultado>’;

mysql_free_result( $qryresp );

print ($return)
?>

Bom pessoal, na parte do PHP é isso, notem que no arquivo enq_pegaDados.php tudo que eu retorno, retorno em XML, ele é o responsável em montar a enquete (a pergunta e as respostas). Não vou me extender no código PHP, porque o nosso artigo é voltado para o Flex e não para o PHP, o código não é muito complicado só prestem atenção nessa parte: while ( $resp = mysql_fetch_object( $qryresp ) ), o Flex recebe os dados como objeto, portanto devemos usar o mysql_fetch_object.

Agora vamos entrar na parte que nos interessa, vamos ao Flex, aqui no meu post eu estarei sempre me referindo ao Flex Builder 2.01, mas isso não impede que você utilize um editor a sua escolha.

Abra o Flex e Crie um projeto novo:

Na próxima tela deixe a primeira opção marcada:

Escolha um nome para o projeto, no nosso caso coloque: Enquete

Click agora em finish e o Flex criará o projeto, ele criará o arquivo Enquete.mxml com o seguinte conteúdo:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”></mx:Application>

Crie dois viewStates, um com o nome enquete e outro com o nome resultado

Click no botão circulado de vermelho, abrirá a seguinte tela:

Em nome coloque enquete, em Based on (Baseado em), deixe <Base state> e check a caixa Set as start state(Fixe como state inicial).
Isso fará com que o state enquete seja carregado primeiro. Bom, agora sua aba State deve estar desse jeito:

Selecione <Base state> e repita os passos novamente para criar outro viewState, mas agora não marque a caixa Set as start state e coloque o nome como resultado.
Nossas stateViews já estão criadas, a primeira servirá para mostrar a enquete e a segunda servirá para mostrar o resultado.
Nosso código agora estará da seguinte forma:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”
currentState=”enquete”
horizontalScrollPolicy=”off” verticalScrollPolicy=”off”>

<mx:states>
<mx:State name=”enquete”/>
<mx:State name=”resultado”/>
</mx:states>

</mx:Application>

Notem que logo abaixo de currentState=”enquete” eu acrescentei a seguinte linha:
horizontalScrollPolicy=”off” verticalScrollPolicy=”off”
ela serve para que não seja criado scrolls na horizontal e vertical da nossa aplicação. Se ainda não estiver, selecione na Aba State a viewState enquete para que a mesma fique ativa, arraste agora um Panel da paleta Layout para a nossa aplicação e modifique as suas propriedades para as seguintes:

<mx:Panel headerHeight=”10″ width=”150″ height=”260″ layout=”absolute” horizontalCenter=”0″ top=”0″ cornerRadius=”5″ horizontalScrollPolicy=”off” verticalScrollPolicy=”off”></mx:Panel>

Arraste agora um vBox, que fica na paleta Layout, para dentro do Panel e mude suas propriedades para as seguintes:

<mx:VBox id=”vBoxEnquete” left=”5″ top=”5″ bottom=”5″ verticalAlign=”bottom” verticalGap=”10″ horizontalScrollPolicy=”off” verticalScrollPolicy=”off” right=”5″></mx:VBox>

Nosso código agora deverá parecer com isso:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”absolute”
currentState=”enquete”
backgroundColor=”#FFFFFF”
horizontalScrollPolicy=”off” verticalScrollPolicy=”off”><mx:states>
<mx:State name=”enquete”>
<mx:AddChild position=”lastChild”>
<mx:Panel headerHeight=”10″ width=”150″ height=”260″ layout=”absolute” horizontalCenter=”0″ top=”0″ cornerRadius=”5″ horizontalScrollPolicy=”off” verticalScrollPolicy=”off”>
<mx:VBox id=”vBoxEnquete” left=”5″ top=”5″ bottom=”5″ verticalAlign=”bottom” verticalGap=”10″ horizontalScrollPolicy=”off” verticalScrollPolicy=”off” right=”5″>
</mx:VBox>
</mx:Panel>
</mx:AddChild>
</mx:State>
<mx:State name=”resultado”/>
</mx:states>

</mx:Application>

Vamos incluir agora, um <mx:Text>, 4 <mx:RadioButton> 1 <mx:HBox> e 2 <mx:Button>, isso tudo dentro do VBox “vBoxEnquete” criado anteriormente, depois de criados, mude suas propriedades para as seguintes:

<mx:Text x=”10″ y=”6″ width=”120″ height=”72″ textAlign=”center” fontWeight=”bold” color=”#ff8040″ text=”Nossa pergunta irá aparecer aqui”/>
<mx:RadioButtonGroup itemClick=”" id=”rgEnquete”/>
<mx:RadioButton id=”rb0″ value=”" label=”Resposta1″ groupName=”rgEnquete” textAlign=”left”/>
<mx:RadioButton id=”rb1″ value=”" label=”Resposta2″ groupName=”rgEnquete” textAlign=”left”/>
<mx:RadioButton id=”rb2″ value=”" label=”Resposta3″ groupName=”rgEnquete” textAlign=”left”/>
<mx:RadioButton id=”rb3″ value=”" label=”Resposta4″ groupName=”rgEnquete” textAlign=”left”/>
<mx:HBox verticalAlign=”middle” horizontalAlign=”center” height=”30″ width=”120″ horizontalGap=”10″>
<mx:Button id=”btnVotar” x=”9″ y=”209″ label=”Votar” click=”" enabled=”false”/>
<mx:Button x=”75″ y=”209″ label=”Ver” click=”"/>
</mx:HBox>

Bom, agora nossa enquete deve estar com essa cara:

Vamos fazer a tela que mostrará os resultados, para isso vá até a paleta State e selecione a viewState resultado, o código do resultado é parecido com o da enquete, só que no lugar do radioButton vamos colocar o progressBar, veja o código abaixo:
Obs.: Evitem copiar e colar os código, para uma boa prática, é importante digitar os código, ou então montar o layout utilizando dos componentes do Flex, assim vocês pegarão mais prática e vão se familiarizando com os componentes.

<mx:State name=”resultado”>
<mx:AddChild position=”lastChild”>
<mx:Panel headerHeight=”10″ width=”150″ height=”260″ layout=”absolute” horizontalCenter=”0″ top=”0″ cornerRadius=”5″ horizontalScrollPolicy=”off” verticalScrollPolicy=”off”>
<mx:VBox id=”vBoxResultado” left=”5″ top=”5″ bottom=”5″ verticalAlign=”bottom” verticalGap=”10″ horizontalScrollPolicy=”off” verticalScrollPolicy=”off” right=”5″>
<mx:Text text=”Resultado Parcial da Votação” left=”5″ right=”5″ top=”5″ height=”32″ textAlign=”center” fontWeight=”bold” color=”#FF0000″ width=”120″/>
<mx:ProgressBar id=”bar0″ label=”00.0%” width=”120″ minimum=”0″ maximum=”100″ direction=”right” mode=”manual” themeColor=”#00CC00″/>
<mx:ProgressBar id=”bar1″ label=”00.0%” width=”120″ minimum=”0″ maximum=”100″ direction=”right” mode=”manual” themeColor=”#0066CC”/>
<mx:ProgressBar id=”bar2″ label=”00.0%” width=”120″ minimum=”0″ maximum=”100″ direction=”right” mode=”manual” themeColor=”#FFCC00″/>
<mx:ProgressBar id=”bar3″ label=”00.0%” width=”120″ minimum=”0″ maximum=”100″ direction=”right” mode=”manual” themeColor=”#FF0000″/>
<mx:HBox width=”120″ horizontalCenter=”0″ height=”35″ verticalAlign=”middle” horizontalAlign=”center”>
<mx:Button label=”Voltar” horizontalCenter=”0″ bottom=”10″ click=”currentState=’enquete’” width=”100″/>
</mx:HBox>
</mx:VBox>
</mx:Panel>
</mx:AddChild>
</mx:State>

A tela resultado deve parecer com isso:

Pessoal, por enquanto é isso, sei que vocês gostariam de tudo de uma vez, mas o artigo iria ficar muito grande, então resolvi dividir em duas apartes, no próximo artigo, vamos colocar a enquete pra funcionar. Até a próxima.

“A ansiedade é um obstáculo entre o homem e a felicidade” – FRC

Caso tenha alguma dúvida utilize o fórum.
Abraços, Luis Carlos Quinhone – quinhone@mxstudio.com.br

Para controlar a exibição de um componente de lista, você escreve um renderer de item ou editor de item personalizado. Seus rendereres de item e editores de item personalizados ainda usam a funcionalidade subjacente do controle de lista, mas permite você controlar a exibição e edição dos dados. Os rendereres de item e editores de artigo personalizados fornecem a você com várias vantagens:

• Você pode criar uma interface de usuário mais compelativa substituindo a exibição de texto com uma aparência mais intuitivo.

• Você pode combinar elementos múltiplos em um item de lista única, como label e uma imagem.

• Você pode programaticamente controlar a exibição dos dados.

O controle de Lista seguinte é uma modificação do controle de Lista na retribuição de item padrão de seção e edição de célula. Neste exemplo, você usa um renderer de item personalizado para exibir o nome do estado, capital, e um URL para o site da web oficial do estado em cada artigo de lista:

<?xml version=”1.0″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” xmlns:local=”*” height=”700″ width=”700″>
<mx:List id=”myList” itemRenderer=”RendererState” rowHeight=”75″ height=”200″ width=”250″>
<mx:dataProvider>
<mx:Object label=”Alaska” data=”Juneau” webPage=”http://www.state.ak.us/”/>
<mx:Object label=”Alabama” data=”Montgomery” webPage=”http://www.alabama.gov/”/>
<mx:Object label=”Arkansas” data=”Little Rock” webPage=”http://www.state.ar.us/”/>
</mx:dataProvider>
</mx:List>
</mx:Application>

<?xml version=”1.0″?>
<mx:VBox xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:Script>
<![CDATA[
// Import Event and URLRequest classes.
import flash.events.Event;
import flash.net.URLRequest;
public var u:URLRequest;
// Event listener to open URL using the navigateToURL() method.
private function handleClick(eventObj:Event):void {
u = new URLRequest(data.webPage);
navigateToURL(u);
}
]]>
</mx:Script>
<mx:HBox>
<!– Use Label controls to display state and capital names. –>
<mx:Label id=”State” text=”State: {data.label}”/>
<mx:Label id=”Statecapital” text=”Capital: {data.data}”/>
</mx:HBox>
<!– Define the LinkButton control to open a URL. –>
<mx:LinkButton id=”webPage” label=”Official {data.label} Web page” click=”handleClick(event);” color=”blue”/>
</mx:VBox>

Na próxima imagem, você usa um renderer de item padrão para a primeira e terceiras colunas do DataGrid. Você usa um renderer de item personalizado para a segunda coluna para exibir o álbum junto com o título do álbum no DataGrid.

<?xml version=”1.0″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” xmlns:local=”*”>
<mx:Script>
<![CDATA[
// Data includes URL to album cover.
[Bindable]
public var initDG:Array = [
{Artist:'Pavement', Album:'Slanted and Enchanted',
Price:11.99, Cover: 'http://myComp.com/albums/brighten.jpg'},
{Artist:'Pavement', Album:'Brighten the Corners',
Price:11.99, Cover: 'http://myComp.com/albums/brighten.jpg'}
];
]]>
</mx:Script>
<mx:DataGrid id=”myGrid” dataProvider=”{initDG}” variableRowHeight=”true”>
<mx:columns>
<mx:DataGridColumn dataField=”Artist”/>
<mx:DataGridColumn dataField=”Album”>
<mx:itemRenderer>
<mx:Component>
<mx:VBox>
<mx:Text id=”albumName” selectable=”false” width=”100%” text=”{data.Album}”/>
<mx:Image id=”albumImage” height=”45″ source=”{data.Cover}”/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField=”Price”/>
</mx:columns>
</mx:DataGrid>
</mx:Application>

<mx:DataGridColumn dataField=”Cover”>
<mx:itemRenderer>
<mx:Component>
<mx:VBox horizontalAlign=”center”>
<mx:Image height=”45″ source=”{data.Cover}”/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>

Da mesma maneira que você pode definir um renderer de item personalizado para controlar a exibição de uma célula, você pode usar um editor de item personalizado para editar o conteúdo da célula. Por exemplo, se o renderer de item personalizado exibe uma imagem, você podia definir um editor de item personalizado que usa um ComboBox que permite ao usuários selecionarem uma imagem de uma lista de imagens disponíveis. Ou, você podia usar um CheckBox para permitir o usuário fixar um valor verdadeiro ou falso para uma célula, como o exemplo seguinte mostra:

Usando um renderer de item não implica que o controle também tem um editor de item. Freqüentemente, você não permite seus controles serem editados; Isto é, eles são para somente exibem.

Você também pode usar um editor de item sem um renderer de item correspondente. Por exemplo, você podia exibir informações como um masculino/feminino ou true/false como texto usando o renderer de item padrão. Mas, você podia então usar um editor de item personalizado com um ComboBox que fornece o usuário só um conjunto limitado de opções para entrar na célula quando modificando o valor.

NOTA: Este artigo é uma tradução do original inglês “Using custom item renderers and item editors” da documentação do Flex Builder 2.01,

Caso tenha alguma dúvida utilize o fórum.
Abraços, Luis Carlos Quinhone – quinhone@mxstudio.com.br