[Atualizado] Ferramentas para Desenvolvimento: Flex ou Java?

Essa semana pelo twitter, o Diego do @mestreandroid postou uma dúvida: Usar AIR Mobile (Flex) ou Java para desenvolver apps para android? E após um comentário meu no fórum do blog, fui convidado a escrever um artigo para um guest post.

LightMVC no GitHub

Hoje, aproveitando a “folga” da faculdade resolvi por algumas coisas em dia. Atualizar as fotos do Picasa, buscar umas novidades na internet (para futuros posts) e versionar alguns códigos… Não fazia idéia da quantidade de projetos e fontes que eu tinha aqui sem backup versionar.

LightMVC v.1

Hoje estou lançando oficialmente a primeira versão do LightMVC, o mais novo framework Actionscript 3.0 baseado na arquitetura MVC. Trata-se basicamente de um conjunto de comandos que fazem seu projeto ser mais escalável, desacoplado e fácil de manter.

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.

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."

(http://help.adobe.com/en_US/FlashPlatform/beta/reference/actionscript/3/spark/primitives/Path.html)

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.