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