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.

quinta-feira, 19 de novembro de 2009

What Does Marsellus Wallace Look Like?

Não deu pra não postar, muito bom o vídeo!



O original...


domingo, 15 de novembro de 2009

Logomarca NetRP




Criação da logomarca, padronização de cores e conceito. Job freelance.

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.

sexta-feira, 23 de outubro de 2009

FlashCamp Brasil - 15 e 16 de Janeiro / 2010 em Maceió - AL - Brasil



Na alta temporada do nordeste brasileiro, ocorrerá um evento que muitos (se não todos) os desenvolvedores de plataformas Flash estavam esperando.

O primeiro FlashCamp Brasil, nos dias 15 e 16 de Janeiro de 2010, em Maceió, Alagoas. Com palestras confirmadas de Sam Rivello (Adobe Flash Platform Consultant) e Lee Brimelow (Adobe Platform Evangelist).

Vejam mais no site: http://www.flashcampbrasil.com.br/

Vejo vocês lá!

terça-feira, 29 de setembro de 2009

Micro RP Informática - Login de Usuário no Wi-Fi



Esse foi do tipo "fast-freela", em menos de 4 horas foi concebido o layout!

segunda-feira, 21 de setembro de 2009

TwitterFeed

Olá pessoal, estou testando um novo aplicativo para o Twitter, é o TwitterFeed.



E sobre novos posts e tutoriais... Estou analisando alguns bons assuntos. Em breve terão novidades...
Se tiverem idéias, enviem para idemax@gmail.com.

terça-feira, 18 de agosto de 2009

Bortolot Sistemas Elétricos



Participação: Criação do conceito e layout inicial (duas propostas).
Agência: CiaClique.

segunda-feira, 3 de agosto de 2009

Seguindo o Mouse com Trigonometria

Olá, esse poste de hoje foi baseado na dúvida do leitor Jefferson A. Pereira. Espero que gostem...

Se não leu meu post sobre Trigonometria em Actionscript, leia-o antes clicando aqui.

Vou ensinar hoje como usar a trigonometria em actionscript para fazer o olhos seguirem o ponteiro do mouse. Assim...


No método construtor, vamos adicionar o listener MouseEvent.MOUSE_MOVE no STAGE:

public function Main() 
{
stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMoveHandler);
}

No método listener, vamos limpar os riscos antigos dos triângulos que usamos para testar e executar a função que rotaciona o olho. Também forço o updateAfterEvent para que fique mais suave.

private function onMouseMoveHandler($event:MouseEvent):void 
{
graphics.clear();

rotateEye(eye1);
rotateEye(eye2);

$event.updateAfterEvent();
}

No método rotateEye é onde faço os cálculos para que o olho seja rotacionado de forma que "siga" o mouse do usuário. Primeiro eu encontro os catetos adjacente e oposto para que possa encontrar a hipotenusa:

var catAdj:Number = mouseX - $eye.x;
var catOp:Number = mouseY - $eye.y;
var hipot:Number = Math.sqrt((catAdj * catAdj) + (catOp * catOp));

Com isso posso calcular o ângulo de abertura do triângulo em radianos:

var radians:Number = Math.asin(catOp / hipot);

E transformar em graus:

var degree:Number = radians * (180 / Math.PI);

Ok, até essa parte tudo bem. Mas como o actionscript trabalha com graus de forma diferente, temos que verificar se o mouse está a direita ou esquerda do nosso olho. Fazemos isso comparando se o cateto adjacente está positivo ou negativo:

if (catAdj >= 0)
{
$eye.rotation = degree;
}
else
{
$eye.rotation = 180 - degree;
}

Se for negativo, subtraimos o valor de 180º. Por exemplo: 180º - (-90º) = 180º + 90º = 270º. Ou seja, está apontando na direção norte.

E depois adicionamos as linhas de teste e o log:

log.text = 'catAdj: ' + catAdj;
log.appendText('\ncatOp: ' + catOp);
log.appendText('\nhipot: ' + hipot);
log.appendText('\nradians: ' + radians);
log.appendText('\ndegree: ' + degree);

graphics.lineStyle(1, 0xff0000);
graphics.moveTo($eye.x, $eye.y);
graphics.lineTo(mouseX, mouseY);
graphics.lineStyle(1, 0xcccccc);
graphics.lineTo(mouseX, $eye.y);
graphics.lineTo($eye.x, $eye.y);

O método rotateEye ficou assim:

private function rotateEye($eye:MovieClip):void
{
var catAdj:Number = mouseX - $eye.x;
var catOp:Number = mouseY - $eye.y;
var hipot:Number = Math.sqrt((catAdj * catAdj) + (catOp * catOp));

var radians:Number = Math.asin(catOp / hipot);
var degree:Number = radians * (180 / Math.PI);

if (catAdj >= 0)
{
$eye.rotation = degree;
}
else
{
$eye.rotation = 180 - degree;
}

log.text = 'catAdj: ' + catAdj;
log.appendText('\ncatOp: ' + catOp);
log.appendText('\nhipot: ' + hipot);
log.appendText('\nradians: ' + radians);
log.appendText('\ndegree: ' + degree);

graphics.lineStyle(1, 0xff0000);
graphics.moveTo($eye.x, $eye.y);
graphics.lineTo(mouseX, mouseY);
graphics.lineStyle(1, 0xcccccc);
graphics.lineTo(mouseX, $eye.y);
graphics.lineTo($eye.x, $eye.y);
}

Pronto!!!

Abaixo a classe Main inteira:

package  
{
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.text.TextField;

/**
* ...
* @author www.idemax.net
*/
public class Main extends MovieClip
{
public var eye1:MovieClip;
public var eye2:MovieClip;
public var log:TextField;

public function Main()
{
stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMoveHandler);
}

private function onMouseMoveHandler($event:MouseEvent):void
{
graphics.clear();

rotateEye(eye1);
rotateEye(eye2);

$event.updateAfterEvent();
}

private function rotateEye($eye:MovieClip):void
{
var catAdj:Number = mouseX - $eye.x;
var catOp:Number = mouseY - $eye.y;
var hipot:Number = Math.sqrt((catAdj * catAdj) + (catOp * catOp));

var radians:Number = Math.asin(catOp / hipot);
var degree:Number = radians * (180 / Math.PI);

if (catAdj >= 0)
{
$eye.rotation = degree;
}
else
{
$eye.rotation = 180 - degree;
}

log.text = 'catAdj: ' + catAdj;
log.appendText('\ncatOp: ' + catOp);
log.appendText('\nhipot: ' + hipot);
log.appendText('\nradians: ' + radians);
log.appendText('\ndegree: ' + degree);

graphics.lineStyle(1, 0xff0000);
graphics.moveTo($eye.x, $eye.y);
graphics.lineTo(mouseX, mouseY);
graphics.lineStyle(1, 0xcccccc);
graphics.lineTo(mouseX, $eye.y);
graphics.lineTo($eye.x, $eye.y);
}

}

}

Clique abaixo para fazer o download dos arquivos:

sábado, 18 de julho de 2009

Você conhece QR-Code?

Você é capaz de entender o que está escrito na imagem acima?!

quinta-feira, 16 de julho de 2009

Twitter do Alessandro Maraca



Arte para o background do Twitter. Como ele é vereador pelo PSDB, fiz uma analogia com as aves.

http://twitter.com/alessandromarac

quarta-feira, 15 de julho de 2009

Rotação 3D no Flash Player 10

Olá, quem me segue no Twitter, está lendo ultimamente que estou fazendo um Coverflow usando a rotação 3D nativa do Flash Player 10. Então resolvi fazer um post antes de dormir para mostrar como é fácil usar essa nova classe.

Abaixo é o teste simples que fiz no Flash:


Obs.: Caso não funcione, instale o Flash Player 10 clicando aqui.

E a classe Main:

package  
{
import fl.controls.Slider;
import fl.events.SliderEvent;
import flash.display.MovieClip;

/**
* ...
* @author www.idemax.net
*/
public class Main extends MovieClip
{
public var avatar:MovieClip;
public var xAxis:Slider;
public var yAxis:Slider;
public var zAxis:Slider;

public function Main()
{
xAxis.addEventListener(SliderEvent.CHANGE, onSliderChange);
yAxis.addEventListener(SliderEvent.CHANGE, onSliderChange);
zAxis.addEventListener(SliderEvent.CHANGE, onSliderChange);
}

private function onSliderChange(event:SliderEvent):void
{
var slider:Slider = event.target as Slider;

switch(slider)
{
case xAxis:
avatar.rotationX = slider.value;
break;
case yAxis:
avatar.rotationY = slider.value;
break;
case zAxis:
avatar.rotationZ = slider.value;
break;
}
}

}

}

Clique abaixo para fazer o download dos arquivos: