Mostrando postagens com marcador bindable. Mostrar todas as postagens
Mostrando postagens com marcador bindable. Mostrar todas as postagens

domingo, 22 de novembro de 2009

Enviando e Recuperando Dados por HTTPService usando PHP

Hoje vou mostrar exatamente o que o título diz, vamos enviar alguns dados para uma página PHP via HTTPService e recuperá-los no evento ResultEvent.RESULT.

Infelizmente não conseguir fazer o PHP realmente enviar porque o lixo do meu servidor de hospedagem não habilita o método mail(), tendo que fazer envio por SMTP. Mas não achei uma classe que funcionasse significativamente bem. Então estou deixando sua imaginação fluir...

Bom, vamos ao que interessa. No exemplo, eu fiz um formulário simples em que o usuário insere o nome, e-mail, assunto por combobox e a mensagem, e travei os campos usando os Validators do próprio Flex. Também fiz um bom uso do Declarations, para deixar as coisas mais explícitas.



Segue abaixo o código do FlexContactForm.mxml.

<?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/halo"
width="400"
height="400"
applicationComplete="applicationCompleteHandler()"
viewSourceURL="srcview/index.html">
<fx:Script>
<![CDATA[
import mx.managers.PopUpManager;
import mx.rpc.events.ResultEvent;
import mx.validators.Validator;

private var _validadores:Array;

private function applicationCompleteHandler():void
{
_validadores = [ campoNomeValidator, campoEmailValidator, comboAssuntoValidator, campoMensagemValidator ];

campoNome.setFocus();
}

private function btnEnviar_clickHandler():void
{
if( Validator.validateAll( _validadores ).length )
return;

PopUpManager.addPopUp( progressEnviando, this, true );
PopUpManager.centerPopUp( progressEnviando );

httpServiceSendMail.send();
}

private function btnLimpar_clickHandler():void
{
campoNome.text = campoEmail.text = campoMensagem.text = '';
comboAssunto.selectedIndex = -1;

campoNome.setFocus();
}

private function httpServiceSendMail_resultHandler( $event:ResultEvent ):void
{
PopUpManager.removePopUp( progressEnviando );

PopUpManager.addPopUp( titleRetornoPhp, this, true );

textRetorno.htmlText = $event.result as String;

PopUpManager.centerPopUp( titleRetornoPhp );
}

private function titleRetornoPhp_closeHandler():void
{
PopUpManager.removePopUp( titleRetornoPhp );
}
]]>
</fx:Script>
<fx:Declarations>
<mx:TitleWindow id="titleRetornoPhp"
title="Retorno do PHP"
showCloseButton="true"
close="titleRetornoPhp_closeHandler()"
minWidth="200">
<mx:Text id="textRetorno" />
</mx:TitleWindow>
<mx:ProgressBar id="progressEnviando"
indeterminate="true"
label="enviando mensagem..." />
<s:HTTPService id="httpServiceSendMail"
method="POST"
resultFormat="text"
result="httpServiceSendMail_resultHandler(event)"
url="php/enviaEmail.php">
<s:request>
<nome>
{campoNome.text}
</nome>
<email>
{campoEmail.text}
</email>
<assunto>
{comboAssunto.selectedItem.@label}
</assunto>
<mensagem>
{campoMensagem.text}
</mensagem>
</s:request>
</s:HTTPService>
<fx:XMLList id="xmlAssuntos">
<assunto label="Informação" />
<assunto label="Reclamação" />
<assunto label="Crítica" />
<assunto label="Dúvida" />
<assunto label="Outro" />
</fx:XMLList>
<mx:StringValidator id="campoNomeValidator"
source="{campoNome}"
property="text"
tooShortError="Digite seu nome!"
tooLongError="Digite somente seu primeiro nome!"
minLength="4"
maxLength="20" />
<mx:EmailValidator id="campoEmailValidator"
source="{campoEmail}"
property="text" />
<mx:NumberValidator id="comboAssuntoValidator"
source="{comboAssunto}"
lowerThanMinError="Selecione um assunto!"
property="selectedIndex"
minValue="0"
thousandsSeparator="."
decimalSeparator=","
trigger="{comboAssunto}"
triggerEvent="{Event.CHANGE}" />
<mx:StringValidator id="campoMensagemValidator"
source="{campoMensagem}"
property="text"
tooShortError="Digite uma mensagem relevante!"
tooLongError="Vá direto ao assunto!"
minLength="10"
maxLength="255" />
</fx:Declarations>
<s:Rect width="100%"
height="100%">
<s:fill>
<s:RadialGradient>
<s:GradientEntry color="#ffffff" />
<s:GradientEntry color="#cccccc" />
</s:RadialGradient>
</s:fill>
</s:Rect>
<s:Panel title="Formulário de Contato"
horizontalCenter="0"
verticalCenter="0">
<mx:Form horizontalCenter="0"
verticalCenter="0">
<mx:FormHeading label="Preencha o formulário abaixo." />
<mx:FormItem label="Nome:"
required="true"
width="100%">
<s:TextInput id="campoNome"
width="100%" />
</mx:FormItem>
<mx:FormItem label="E-Mail:"
required="true"
width="100%">
<s:TextInput id="campoEmail"
width="100%" />
</mx:FormItem>
<mx:FormItem label="Assunto:"
required="true"
width="100%">
<mx:ComboBox id="comboAssunto"
prompt="Selecione um assunto..."
selectedIndex="-1"
width="100%"
dataProvider="{xmlAssuntos}"
labelField="@label" />
</mx:FormItem>
<mx:FormItem label="Mensagem:"
required="true">
<s:TextArea id="campoMensagem" />
</mx:FormItem>
<mx:FormItem direction="horizontal"
width="100%">
<s:Button id="btnEnviar"
label="enviar"
click="btnEnviar_clickHandler()" />
<mx:Spacer width="100%" />
<s:Button id="btnLimpar"
label="limpar"
click="btnLimpar_clickHandler()" />
</mx:FormItem>
</mx:Form>
</s:Panel>
</s:Application>

O PHP está bem simples, o foco é mostrar como vem e vão os valores.

<?
echo '<b>Nome: </b>'.$_POST['nome'].'<br />'.
'<b>E-Mail: </b><a href="mailto:'.$_POST['email'].'">'.$_POST['email'].'</a><br />'.
'<b>Assunto: </b>'.$_POST['assunto'].'<br />'.
'<b>Mensagem: </b>'.$_POST['mensagem'];
?>

É simplesmente um echo nos Posts, veja que a chave é a mesma do nó no request que é passado no HTTPService.

Como eu setei resultFormat="text" no HTTPService, é só pergar no evento a propriedade result como String e escrever onde quiser.

O ver / baixar o projeto / código-fonte, clique com o botão direito na aplicação ou clique aqui.

sábado, 31 de outubro de 2009

Usando Path no Flex 4

Olá, hoje vou mostrar como usar um novo componente primitivo do Flex SDK 4, o Path:

"The Path class is a filled graphic element that draws a series of path segments. In vector graphics, a path is a series of points connected by straight or curved line segments. Together the lines form an image. In Flex, you use the Path class to define a complex vector shape constructed from a set of line segments."

Não vou arriscar uma tradução, mas basicamente fala que o Path é um elemento gráfico de preenchimento que desenha uma série de formas. Em vetores gráficos, o Path é uma série de pontos conectados por linhas retas e curvas. Juntas formando uma imagem. No Flex, você pode usar a classe Path para definir a construção de um vetor complexo a partir de um conjunto de linhas.

Bom, pelo menos viram que o curso de inglês está rendendo alguma coisa!

Continuado, fiz um exemplo bem simples usando o máximo que o framework possível, para mostrar também algumas outras facilidades que o novo SDK tráz:



No exemplo, eu fiz um Path com o data contendo váriaveis Bindable, e o preenchimento, borda e filtro, todos por MXML.
A animação, eu usei o framework TweenMax, vale a pena estudá-lo. É parecido com a Tweener do Zeh Fernando, mas com várias funcionalidades que fazem diferença.
Não usei nenhuma fórmula para o Path parecer elástico, o foco é como ficou fácil desenhar e animar vetores complexos.

Path.mxml
<?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/halo"
width="400"
height="400"
applicationComplete="applicationCompleteHandler()"
viewSourceURL="srcview/index.html">
<fx:Script>
<![CDATA[
import com.greensock.TimelineMax;
import com.greensock.TweenMax;
import com.greensock.easing.Bounce;
import com.greensock.easing.Elastic;

[Bindable]
private var _timelineMax:TimelineMax;

[Bindable]
public var pathY:Number = 10;

[Bindable]
public var pathWidth:Number = 200;

[Bindable]
public var pathHeight:Number = pathWidth + pathY;

private function applicationCompleteHandler():void
{
_timelineMax = new TimelineMax();

_timelineMax.addChild( new TweenMax( this, 12, { pathY:height - myPath.height, ease:Elastic.easeOut } ) );
_timelineMax.addChild( new TweenMax( this, 2, { pathHeight:height, ease:Bounce.easeOut } ) );

_timelineMax.pause();
}

private function playClickHandler():void
{
_timelineMax.play();
}

protected function stopClickHandler():void
{
_timelineMax.currentTime = 0;
_timelineMax.stop();
}

protected function labelClickHandler():void
{
navigateToURL( new URLRequest( 'http://www.idemax.net/' ), '_blank' );
}
]]>
</fx:Script>
<s:Rect width="100%"
height="100%">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="#ffffff" />
<s:GradientEntry color="#cccccc" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<mx:Image horizontalCenter="0"
verticalCenter="0"
source="@Embed('/assets/images/idemax.jpg')">
<mx:filters>
<mx:BlurFilter quality="3" />
</mx:filters>
</mx:Image>
<s:VGroup top="10"
left="10">
<s:Button label="play"
click="playClickHandler()" />
<s:Button label="stop"
click="stopClickHandler()" />
</s:VGroup>
<s:Path id="myPath"
data="m 0 {pathY}
q {pathWidth/2} {-((pathHeight-pathY)-pathWidth)} {pathWidth} 0
Q {pathWidth+((pathHeight-pathY)-pathWidth)} {(pathHeight-(pathWidth/2))-((pathHeight-pathY)-pathWidth)} {pathWidth} {pathHeight}
h {-pathWidth}
Q {-((pathHeight-pathY)-pathWidth)} {(pathHeight-(pathWidth/2))-((pathHeight-pathY)-pathWidth)} 0 {pathY}
z"
horizontalCenter="0">
<s:stroke>
<s:SolidColorStroke color="#333333"
weight="1" />
</s:stroke>
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="#a8d848" />
<s:GradientEntry color="#63802a"
alpha=".5" />
</s:LinearGradient>
</s:fill>
<s:filters>
<s:DropShadowFilter angle="90"
distance="20"
quality="3"
blurX="20"
blurY="20" />
</s:filters>
</s:Path>
<s:Label right="10"
bottom="10"
text="www.idemax.net"
fontWeight="bold"
alpha=".25"
click="labelClickHandler()"
buttonMode="true" />
</s:Application>

O ver ou baixar o projeto / código-fonte, clique com o botão direito na aplicação e depois em "View Source", ou clique aqui.

Qualquer dúvida, enviem para idemax@gmail.com.

terça-feira, 10 de fevereiro de 2009

Binding no Flash e no Flex

Olá, vou mostrar algumas diferenças do Flash para Flex.
Como primeiro exemplo, vou ligar dois TextFields, o que você digita no de cima, é copiado para o de baixo em tempo real.

No Flash:
package
{
import fl.controls.Label;
import fl.controls.TextInput;
import flash.display.Sprite;
import flash.events.Event;

public class Flash extends Sprite
{
private var textInput1:TextInput;
private var textInput2:TextInput;
private var labell:Label;
private var label2:Label;

public function Flash()
{
criaLabels();
criarTextInputs();
criaBindable();
}

private function criarTextInputs():void
{
textInput1 = new TextInput();
textInput2 = new TextInput();
textInput1.move(70, 10);
textInput2.move(70, 40);
addChild(textInput1);
addChild(textInput2);
}

private function criaLabels():void
{
labell = new Label();
label2 = new Label();
labell.move(10, 10);
label2.move(10, 40);
labell.text = "Campo 1:";
label2.text = "Campo 2:";
addChild(labell);
addChild(label2);
}

private function criaBindable():void
{
textInput1.addEventListener(Event.CHANGE, binding);
}

private function binding(e:Event):void
{
textInput2.text = textInput1.text;
}

}

}
No Flash tive que criar uma classe para meu SWF, usei o Sprite pois no Flex também não existe "timeline". Importei as classes necessárias para eu trabalhar com TextFields e Labels. Criei, configurei e adicionei no palco os componentes que queria usar.
Depois tive que fazer o "binding", criei um "listener" para ouvir quando o valor do campo de cima fosse alterado e um "callBack" para pegar o valor do campo de cima e atribuir ao de baixo.
Pronto, só isso... UFA!

Agora vamos ao Flex:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:TextInput id="campo1" x="79" y="10"/>
<mx:TextInput x="79" y="40" text="{campo1.text}"/>
<mx:Label x="10" y="12" text="Campo 1:"/>
<mx:Label x="10" y="42" text="Campo 2:"/>
</mx:Application>
Fiz tudo denovo, com excessão dos "imports" e que no Flash eu tive que arrastar os componetes na mão para a biblioteca. No Flex, por se tratar de um framework, ele já entende o que você está fazendo e importa os componentes e classes que serão necessários.
O "binding" são os "{" e "}", isso diz ao framework que quando o valor do "campo1" for atualizado, o valor do "campo2" será atualizado também.

Outra forma de fazer é programar actionscript 3 direto Flex, mas isso é assunto para outro post...

Download do arquivos: