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