logo
  • Home
  • Acerca
  • Autores
  • Faq
  • Rede
  Twitter   Feed-me! RSS!
Jan 3

SharedObject com Flash Media Server

Escrito por Leonardo França em .NET, 1, 2.0, 4, 6, action, Actionscript, ActionScript 3, Actionscript 3.0, Actionscript3, Adobe, Air, Aplicativos, app, AR, BI, botão, browser, C#, class, cliente, código, Cookie, Curso, dados, demo, Download, err, event, EventListener, events, exemplo, Ferramenta, filter, flash, flash media, Flash Media Server, Flash Player, Flex, FMS, function, Geral, git, Google, handle, html, ide, IE, if, image, instalação, int, live, mg, O, on, Outros, Partilha, player, pt, referencia, RIA, Ria’s Geral, RTM, RTMP, S+S, server, servidor, swf, TAT, UI, uint, update, Ved, web, window @ 01 3rd, 2012 | via http://www.leonardofranca.com.br | Sem comentários
Leonardo França
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

SharedObject é um recurso que dar ao Flash Player a capacidade de salvar dados localmente para poder ser usado posteriormente em sua aplicação, a grosso modo é como um cookie. Com o Flash Media Server, foi introduzido a possibilidade de usar o SharedObject Remote, no qual os dados são salvos no servidor Flash Media Server e compartilhados para todas as instâncias de uma conexão entre o Flash Player e o Flash Media Server. Isso possibilita a criação de aplicativos em real time como Dashboards, chats e o que mais a imaginação permitir.

O uso do SharedObject Remote pode ser usado de duas maneiras em conjunto com o Adobe Flash Media Server.

  • Somente pelo lado cliente, através do Flash Player/AIR
  • Em conjunto com ActionScript Communication, linguagem de servidor do Flash Media Server

Vejamos o primeiro caso:

Através do lado cliente, através do Flash Player/AIR

Caso você não tenha conhecimento para usar a linguagem Server-side do Flash Media Server, é possível utilizar o SharedObject Remote somente pelo ActionScript 3.0. Vamos a um exemplo clássico sharedBall, onde o objetivo é compartilhar as posições da bolinha a atualizar nos outros clientes conectados a mesma instância.

  • Vá até o diretório de instalação do Flash Media Server e procure pela pasta “applications”, lá crie um diretório chamado “sharedBall”, dentro dele um arquivo chamado “main.asc”
  • Abra o main.asc no seu editor de textos de preferencia ou pelo próprio Flash e digite: trace(“sharedBall…”);
  • Vamos testar esse arquivo, abra o console do Flash Media Server, geralmente fica localizado no diretorio de instalação/webrrot/swfs. Você pode abrir pelo browser ou o swf diretamente.
  • Clique no botão “View Applications” e em seguida procure o nome “sharedBall” no combobox logo no canto inferior esquerdo onde está escrito “New Instance…”
  • Selecione “sharedBall” e deveremos ter na aba Live Log algo como na imagem abaixo:

  • No Flash, criei uma bola com as ferramentas de desenho e converti para MovieClip dando o nome de “mc_ball”.
  • Estamos prontos para começar a integração entre o Flash e o Flash Media Server. Crie um layer para o ActionScript e abra o editor apertando F9 ou “Window->Actions”
  • Nosso código começa com a conexão com o servidor Flash Media Server
PLAIN TEXT
ACTIONSCRIPT3:

  1. import flash.net.NetConnection;
  2. import flash.events.NetStatusEvent;
  3. var nc:NetConnection;
  4. function init():void
  5. nc = new NetConnection();
  6. nc.addEventListener(NetStatusEvent.NET_STATUS, handlerNetStatus);
  7. nc.connect(“rtmp://localhost/sharedBall”);
  8. function handlerNetStatus(evt:NetStatusEvent):void
  9. trace(evt.info.code);
  10. init();

Feito isso, podemos testar o swf apertando Ctrl+Enter, se tudo correr bem, deveremos ter a seguinte mensagem no output do Flash:

NetConnection.Connect.Success

Com a conexão feita, podemos instanciar o nosso SharedObject Remote para compartilhar as posições de x e y da bolinha.

PLAIN TEXT
ACTIONSCRIPT3:

  1. if(evt.info.code == “NetConnection.Connect.Success”)
  2. so = SharedObject.getRemote(“so”,nc.uri,false);
  3. so.addEventListener(NetStatusEvent.NET_STATUS, handlerNetStatus);
  4. so.addEventListener(SyncEvent.SYNC, handlerSync);
  5. so.connect(nc);

O handlerSync é responsável por atualizar os dados de x e y pegaremos do SharedObject Remote:

PLAIN TEXT
ACTIONSCRIPT3:

  1. function handlerSync(evt:SyncEvent):void
  2. mc_ball.x = so.data.x;
  3. mc_ball.y = so.data.y;

Daremos a opção de ao clicar na bolinha, que ela possa ser arrastável, em seguida atualizaremos as posições de x e y no SharedObject Remote:

PLAIN TEXT
ACTIONSCRIPT3:

  1. mc_ball.addEventListener(MouseEvent.MOUSE_DOWN, handlerSharedBall);
  2. mc_ball.addEventListener(MouseEvent.MOUSE_UP, handlerSharedBallOut);
  3. function handlerSharedBall(evt:MouseEvent):void
  4. this.addEventListener(Event.ENTER_FRAME, update);
  5. mc_ball.startDrag();
  6. function handlerSharedBallOut(evt:MouseEvent):void
  7. mc_ball.stopDrag();
  8. function update(evt:Event=null):void
  9. so.setProperty(“x”,mc_ball.x);
  10. so.setProperty(“y”,mc_ball.y);

Segue o código completo:

PLAIN TEXT
ACTIONSCRIPT3:

  1. import flash.net.NetConnection;
  2. import flash.events.NetStatusEvent;
  3. import flash.net.SharedObject;
  4. import flash.events.SyncEvent;
  5. import flash.events.MouseEvent;
  6. import flash.events.Event;
  7. var nc:NetConnection;
  8. var so:SharedObject;
  9. function init():void
  10. nc = new NetConnection();
  11. nc.addEventListener(NetStatusEvent.NET_STATUS, handlerNetStatus);
  12. nc.connect(“rtmp://localhost/sharedBall”);
  13. function handlerNetStatus(evt:NetStatusEvent):void
  14. {
  15. trace(evt.info.code);
  16. if(evt.info.code == “NetConnection.Connect.Success”)
  17. so = SharedObject.getRemote(“so”,nc.uri,false);
  18. so.addEventListener(NetStatusEvent.NET_STATUS, handlerNetStatus);
  19. so.addEventListener(SyncEvent.SYNC, handlerSync);
  20. so.connect(nc);
  21. }
  22. function handlerSync(evt:SyncEvent):void
  23. mc_ball.x = so.data.x;
  24. mc_ball.y = so.data.y;
  25. mc_ball.addEventListener(MouseEvent.MOUSE_DOWN, handlerSharedBall);
  26. mc_ball.addEventListener(MouseEvent.MOUSE_UP, handlerSharedBallOut);
  27. function handlerSharedBall(evt:MouseEvent):void
  28. this.addEventListener(Event.ENTER_FRAME, update);
  29. mc_ball.startDrag();
  30. function handlerSharedBallOut(evt:MouseEvent):void
  31. mc_ball.stopDrag();
  32. function update(evt:Event=null):void
  33. so.setProperty(“x”,mc_ball.x);
  34. so.setProperty(“y”,mc_ball.y);
  35. init();

Veja uma demostração em funcionamento:

Download sharedBall

Ago 18

Usando a API de atualização do Adobe AIR

Escrito por Leonardo França em .NET, 1, 2.0, 2009, 4, 6, action, Actionscript, Actionscript3, Adobe, Adobe Air, Air, api, Aplicativos, app, AR, auto, BI, botão, C#, chrome, class, classe, configuração, demo, Desenvolvedor, Download, err, erro, error, event, EventListener, events, exemplo, firefox, flash, flash builder, Flex, for, Formação, framework, function, Google, handle, html, IE, if, image, int, library, mg, MXML, novidade, Novidades, Number, O, on, Outros, PHP, platform, pt, quick, reference, referencia, RIA, Ria’s Geral, RoR, S+S, site, Software, spark, swf, TAT, Tema, Teste, UI, uint, update, Ved, web, window, XML @ 08 18th, 2011 | via http://www.leonardofranca.com.br | Sem comentários
Leonardo França
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »



Uma das funcionalidade que mais me foi útil no Adobe AIR, foi a adição de uma API mais bem elaborada para fazer atualização automatica de meus aplicativos. Isso pode ser muito importante porque nem todos os usuários tem tempo(ou vontade) de voltar no site do aplicativo para baixar a última versão.
Isso já é rotina para sistemas operacionais e softwares que usamos no dia-a-dia como o Mozilla Firefox e o Google Chrome(que nem pede permissão para atualizar né senhor Google).

A partir do Adobe AIR 1.5, temos a classe ApplicationUpdater e ApplicationUpdaterUI que tem como objetivo, definir o básico de funcionalidade de atualização para os aplicativos feitos com Adobe AIR

Gerenciar as atualizações pode ser complicado e o AIR update framework possui as API’s necessarias para que você faça isso de maneira prática e funcional. O desenvolvedor pode por exemplo:

  • Verificar atualizações por intervalo de tempo ou por requisição do usuário.
  • Baixar os arquivos de atualização da web
  • Avisar o usuário na primeira execução do software recém-instalado
  • Confirmar se o usuário deseja verificar se há atualizações
  • Exibir informações sobre a nova versão de atualização para o usuário
  • Exibir o status do download ou informação de erro para o usuário

As informações são obtidas a partir de arquivos XML onde você diz qual a última versão do software, as novidades da nova versão etc. Vamos a um exemplo prático, no caso usarei o Flash Builder que já deve ter os arquivos applicationupdater.swc e applicationupdater_ui.swc como referencia na biblioteca.
Começamos pelo xml chamado updateConfig.xml, que “dira” a seu aplicativo onde estão os arquivos para atualização.

PLAIN TEXT
XML:

  1. version=“1.0″ encoding=“utf-8″?>
  2. xmlns=“http://ns.adobe.com/air/framework/update/configuration/1.0″>
  3. >http://localhost:81/leonardofranca/air/updates/testeUpdate/updateDescriptor.xml>
  4. >1>
  5. >

Ele deve ser salvo no mesmo diretorio da sua aplicação, junto com os outros arquivos xml e swf. Agora no Flex, instanciaremos a classe ApplicationUpdateUI e setaremos o arquivo xml de configuração para que o Flex possa saber onde está a atualização.

PLAIN TEXT
ACTIONSCRIPT3:

  1. var appUpdater:ApplicationUpdaterUI = new ApplicationUpdaterUI();
  2. appUpdater.configurationFile = new File(“app:/updateConfig.xml”);
  3. appUpdater.initialize();
  4. //via ActionScript
  5. //appUpdater.updateURL = ” http://example.com/updates/update.xml”;
  6. //appUpdater.delay = 1;

O arquivo updateDescriptor.xml é onde fica setado a versão em si da atualização do seu aplicativo e onde você pode colocar a descrição das novidades da atualização.

PLAIN TEXT
XML:

  1. version=“1.0″ encoding=“utf-8″?>
  2. xmlns=“http://ns.adobe.com/air/framework/update/description/2.5″>
  3. >0.0.2>
  4. >http://localhost:81/leonardofranca/air/updates/testeUpdate/testeUpdate_0.0.2.air>
  5. >
  6. This version has fixes for the following knowns issues:
  7. *First issue
  8. *Second issue
  9. ]]>>
  10. >

Basicamente é isso, vamos só implementar a chamada para que ao abrir o aplicativo, ele verifique se existe atualização.

PLAIN TEXT
MXML:

  1. “1.0″ encoding=“utf-8″?>
  2. xmlns:fx=“http://ns.adobe.com/mxml/2009″
  3. xmlns:s=“library://ns.adobe.com/flex/spark”
  4. xmlns:mx=“library://ns.adobe.com/flex/mx” creationComplete=“windowedapplication1_creationCompleteHandler(event)”>
  5. >
  6. [CDATA[
  7. import air.update.ApplicationUpdaterUI;
  8. import air.update.events.UpdateEvent;
  9. import mx.events.FlexEvent;
  10. private var appUpdater:ApplicationUpdaterUI;
  11. protected function windowedapplication1_creationCompleteHandler(event:FlexEvent):void
  12. appUpdater = new ApplicationUpdaterUI();
  13. appUpdater.configurationFile = new File("app:/updateConfig.xml");
  14. appUpdater.addEventListener(ErrorEvent.ERROR, onError);
  15. appUpdater.addEventListener(UpdateEvent.INITIALIZED, handlerInit);
  16. appUpdater.initialize();
  17. //via ActionScript
  18. //appUpdater.updateURL = " http://example.com/updates/update.xml";
  19. //appUpdater.delay = 1;
  20. protected function onError(event:ErrorEvent):void
  21. trace(event.text);
  22. protected function handlerInit(event:UpdateEvent):void
  23. appUpdater.checkNow();
  24. ]]>
  25. >
  26. >
  27. >
  28. >

Criei uma segunda versão do meu aplicativo de teste para demonstração, deveremos ter o seguinte resultado:

Check for update

Clique para ampliar

Caso o usuário queira verificar se existe alguma atualização do aplicativos, basta clicar no botão “check for upadates. O arquivo atualizado é baixado e instalado.

Clique para ampliar

Clique para ampliar

Clique para ampliar

Referências:
http://help.adobe.com/en_US/air/build/WS9CD40F06-4DD7-4230-B56A-88AA27541A1E.html
http://www.adobe.com/devnet/air/flex/quickstart/articles/update_framework.html

Mai 30

Carregando sub-aplicações de versões diferentes do Flex com SWFLoader

Escrito por Cognitiva Soluções em 1, 2.0, 3d, 4, 6, Adobe, app, AR, BI, blog, Blogs, C#, carregar, class, classe, classes, código, Documentação, event, EventListener, exemplo, Flex, Flex 4, for, function, Google, html, if, image, mg, NaN, O, on, processo, Ria’s Geral, S+S, string, swf, Teste, UI @ 05 30th, 2011 | via http://blog.cognitivasolucoes.com | Sem comentários
Cognitiva Soluções
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Existe uma maneira de carregar aplicações de versões anteriores dentro de outra aplicação Flex 4.5. No caso estas aplicações são chamadas sub-applications.
Utilizando o SWFLoader fica muito fácil!
Segue o exemplo:

Devesse colocar um parâmetro de compilação na aplicação principal e nas sub-aplicações:
-includes=mx.managers.systemClasses.MarshallingSupport


Agora vamos ao código Flex:

public function loadModule(url:String):void
   if( swfLoader == null )
    swfLoader = new SWFLoader();
    swfLoader.loadForCompatibility = true;
    swfLoader.percentWidth = 100;
    swfLoader.percentHeight = 100;

    // Adicionando listeners.
    swfLoader.addEventListener(Event.INIT, initSWF);

   swfLoader.unloadAndStop();
   swfLoader.source = url;
   swfLoader.load();
  }

  protected function initSWF(event:Event):void
   this.addChild(this.swfLoader);

   this.sysManagerSubSWF =  swfLoader.content;
   this.sysManagerSubSWF.addEventListener(FlexEvent.APPLICATION_COMPLETE, completeSWF);

  protected function completeSWF(event:*):void
   this.applicationSubSWF = sysManagerSubSWF.application;

   // Agora é possivel invocar funções da sub-aplicação
   if (this.applicationSubSWF.hasOwnProperty("funcaoTeste"))
    var funcaoTeste:Function = (this.applicationSubSWF["funcaoTeste"] as Function);
    funcaoTeste("Teste");

  }

Segue aqui a documentação oficial completada e detalhada sobre todo o processo de carregar sub-aplicações: “About loading sub-applications“.

Mai 28

TextArea com atalho para Desfazer e Refazer

Escrito por SamuelFacchinello em 1, 2.0, 4, 6, Adobe, Adobe Flex, AR, as2, BI, Bindable, blog, Blogs, botão, break, C#, case, class, código, código fonte, collection, Componente, control, Controls, Download, event, EventListener, Evento, events, flash, Flex, fonte, for, function, gestão, git, Google, html, IE, if, int, mg, O, on, padrão, RIA, Ria’s Geral, S+S, site, string, super(), Tema, tv, UI, utils @ 05 28th, 2011 | via http://desenvolvendoemflex.blogspot.com/ | Sem comentários
SamuelFacchinello
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Por padrão o componente TextArea do Flex não possui função de desfazer e refazer, com isso resolvi implementar estas duas funções.

Para testar é só digitar um texto, e pressionar Ctrl+Z para desfazer e Ctrl+Y para refazer.

*download do fonte: botão direito “View Source”

Código Fonte:

/*############################################################*/
/*                                                            */
/*   Powered by: Samuel Facchinello                           */
/*   http://desenvolvendoemflex.blogspot.com/                 */
/*                                                            */
/*############################################################*/
package com.blogspot.desenvolvendoemflex.utils
    import flash.events.Event;
    import flash.events.KeyboardEvent;

    import mx.collections.ArrayCollection;
    import mx.controls.Alert;
    import mx.controls.TextArea;

    /**
     *
     * @author SAMUEL FACCHINELLO
     * @site http://desenvolvendoemflex.blogspot.com/
     */
    public class TextAreaWithUndo extends TextArea 

        /**
         * Variable of control position Undo or Redo
         * */
        [Bindable]
        private var _position:int = -1;

        public function get position():int
            return _position;

        /**
         * Variable that stores all typed letters
         * */
        [Bindable]
        private var _array:ArrayCollection = new ArrayCollection();

        public function get array():ArrayCollection
            return _array;

        /**
         * Constructor
         *
         */
        public function TextAreaWithUndo()
            super();
            //add value default
            addValue("");

            //add Event on KeyDown
            addEventListener(KeyboardEvent.KEY_DOWN, myKeyDown);

        /**
         * Function with KeyDown
         * @param eventObj: KeyboardEvent
         *
         */
        private function myKeyDown(eventObj:KeyboardEvent):void
            // Was Ctrl key pressed?
            if (eventObj.ctrlKey)
                var valueReturn:String = null;

                switch (eventObj.keyCode) 

                    case 90: // Was Ctrl-Z pressed?
                        valueReturn = returnPrevisionValue();
                        break;

                    case 89: // Was Ctrl-Y pressed?
                        valueReturn = returnNextValue();
                        break;

                    default:
                        break;

                //if return exist
                if (valueReturn!=null)
                    //set text with return functions
                    text = valueReturn;

                    //select last _position in TextArea
                    setSelection(text.length, text.length);

            } else
                //only adds to the list if any of these characters.
                //list from here: http://help.adobe.com/en_US/AS2LCR/Flash_10.0/help.html?content=00000520.html
                if ((eventObj.keyCode>=65&&eventObj.keyCode<=90)
            }
        }

        /**
         * Function that adds the letters in the array
         * @param value: propertie "text" of TextArea
         *
         */
        private function addValue(value:String):void
            //it was press Ctrl + Z ever, and was entered some value, clears the values ??of the position in which this forward
            if (_array.length>0&&_array.length-1>_position)
                for (var i:int = _array.length-1; i>_position; i--)
                    _array.removeItemAt(i);

            }

            //if the value is being added is equal to the last added, not added!
            if (_array.length>0)
                if (value==_array.getItemAt(_array.length-1))
                    return;

            }

            _array.addItem(value);
            _position++;
        }

        /**
         * triggered when press Ctrl + Y
         * @return : Returns the next value from the list according to position
         *
         */
        private function returnNextValue():String
            if (_position+1>=0&&_position+1<_array.length)
                _position++;
                return _array.getItemAt(_position) as String;

            return null;
        }

        /**
         * triggered when press Ctrl + Z
         * @return : Returns the Prevision value from the list according to position
         *
         */
        private function returnPrevisionValue():String
            if (_position-1>=0)
                _position--;
                return _array.getItemAt(_position) as String;

            return null;
        }
    }
}

Adicionei este componente ao Google Code, pode ser visto aqui: http://code.google.com/p/textarea-with-undo/

Qualquer elogio, dúvida, sugestão ou melhoria para o componente, deixe um comentário!!

Abraço, até a próxima.

*Tradução para o inglês com o Google Translate. :)

Mai 19

10 coisas que um bom programador flex deve saber

Escrito por Daniel Schmitz em .NET, 1, 2.0, 2009, 3.5, 4, 6, action, Action Script, Actionscript, ActionScript 3, Actionscript 3.0, Actionscript3, Adobe, Air, api, Aplicativos, Apresentação, AR, Arquitetura, arte, Artigo, as3, BI, Bindable, blog, bug, builder 4, C#, Cairngorm, class, classe, classes, código, código fonte, Componente, Componentes, components, control, Controles, css, Curso, Cursos, custom, dados, Data Binding, DataGrid, Debug, demo, desempenho, Desenvolvedor, desenvolvedores, Design, developer, development, dispatch, dispatchEvent, DRE, empresas, err, Estilo, event, EventListener, Evento, Eventos, eventos customizados, events, Excel, explorer, Ferramenta, flash, flash builder, Flash Builder 4, Flash Player, Flex, Flex 3, Flex 4, Flex Examples, fonte, for, framework, Frameworks, Google, Gráfico, handle, html, HTTPService, ide, IE, if, int, interface, Java, layout, lista, live, Livro, lógica, map, Mate, MAX 2009, mvc, MXML, O, on, oop, opensource, Outros, player, polimorfismo, problema, problemas, programação, Projetos, pt, RIA, Ria’s Geral, ruby, S+S, site, skins, Sun, tag, TAT, Tech, Tecnologia, tv, UI, uint, utf8, Ved, Vídeo, vs, web, Webservice, XML, XP @ 05 19th, 2011 | via http://flex.etc.br | Sem comentários
Daniel Schmitz
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Esta é uma tradução do seguinte artigo: 10 Things A Good Flex Developer Should Know

Para ser um bom programador Flex é preciso mais que simplesmente saber como usar alguns componentes nativos do Flex. É preciso muito mais.

Aqui está minha contribuição sobre o assunto… juntamente com alguns recursos ou algumas palavras-chave que você poderá pesquisar facilmente através do Google.

Por favor, comente no blog se você achar que esqueci algo (o que é inevitável) ou se quiser sugerir alguns recursos interessantes que devo acrescentar.

1- Programação orientada a Objetos (OO)

O Flex se baseia na linguagem ActionScript3, que é totalmente orientada a objetos. Embora não seja um conceito fácil de aprender, programação orientada a objeto é um pré-requisito para aprender Flex. Se já possui experiência com OO (Java, C#, Ruby, etc), então você está pronto. Se não, você precisará pegar um livro sobre OO e começar a aprender o mais rápido possível.

· Head First Java (Java? Sim, Eu sei. Mas confie em mim.)

· Object-oriented programming with ActionScript 3.0

Nota: Alguns de vocês poderão perguntar – “O que são padrões de projetos?”. Vamos dar um passo de cada vez? Preocupe-se em entender classes e objetos, interfaces, herança, composição, polimorfismo, encapsulamento, etc. Só então considere estudar padrões de projetos. De fato, se eu escrever um post intitulado “10 coisas que um GRANDE programador Flex deve saber”, padrões de projeto estará nessa lista.

2- ActionScript/MXML

ActionScript é a linguagem de programação usada juntamente com MXML para criar aplicações Flex. MXML é uma linguagem de marcação baseada em XML. Cada tag MXML é mapeada diretamente para uma classe ActionScript correspondente. MXML é usado pelos desenvolvedores Flex principalmente para apresentar a interface do usuário, enquanto que, o ActionScript é usado para a lógica de negócio. Com exceções, é claro.

O Framework Flex inclui centenas de classes ActionScript e interfaces usadas para desenvolver aplicações Flex. Seu nível de habilidade como um desenvolvedor Flex está diretamente ligado ao seu conhecimento em relação ao ActionScript e MXML.

· Flex in a Week

· Tour De Flex

· Essential ActionScript 3.0

Nota: Fique ? vontade com a API do Flex. Como um desenvolvedor Flex, você vai usá-la diariamente.

3- Debugging

Boa parte do tempo de qualquer programador é gasto no debugging. Obviamente, é necessário debugar para rastrear a causa de bugs. No entanto, também é uma ótima maneira de conhecer o código fonte.

Felizmente, existem muitas ferramentas disponíveis para ajudá-lo com o trabalho de debugging. Invista algum tempo para aprender essas ferramentas. Seu investimento irá proporcionar retorno imediato.

· Flash Builder 4.5 Debugger

· De MonsterDebugger

· Kap Inspect

4- Programação orientada a eventos

Aplicações Flex são orientadas a eventos. Toda ação é o resultado de um evento assíncrono.

Como um desenvolvedor Flex, você deve saber como responder a eventos e como criar e disparar eventos. Para isso, é necessária uma sólida compreensão da arquitetura de eventos do Flex, incluindo familiaridade com os seguintes conceitos:

· Eventos nativos (Flash Player ou Framework de eventos Flex)

· Eventos customizados (Eventos criados pelo desenvolvedor, que estende a classe Event ou uma de suas subclasses)

· Disparar eventos, propagação de eventos (ver classe EventDispatcher e seu método dispatchEvent)

· Event listeners, event handlers (ver classe EventDispatcher e seus métodos addEventListener e removeEventListener)

· Fases do evento (capture, target & bubbling phases; target vs. currentTarget)

· Objetos do evento, tipos de eventos (ver classe Event e subclasses)

· Comportamento do evento default (ver classe Event e subclasses e seu método preventDefault)

5- Data binding

Aparentemente, data binding é um “no brainer”[1]. É só vincular o valor de uma propriedade ao valor de outra propriedade usando chaves. Quando o valor da propriedade de origem for alterado, o valor da propriedade de destino também é alterado.

No entanto, existe uma sobrecarga associada ao uso indiscriminado de data binding, podendo haver implicações no desempenho. Uma sólida compreensão de data binding ajudará a determinar quando é apropriado o seu uso e quando não é.

· Flex Tips – Using Bindable Metadata Events

· Michael Labriola’s presentation entitled Diving in the Data Binding Waters

6- Item renderers

Uma característica de uma aplicação Flex bem projetada é a apresentação dos dados de uma forma visualmente atraente. O Flex oferece uma série de controles baseados em listas (DataGrid, List, TileList, HorizontalList, etc) responsável pela apresentação dos dados. Portanto, pode-se personalizar a exibição dos dados com a ajuda de item renderers.

Você irá consumir muito tempo trabalhando com item renderers. Então é melhor saber bem como ele funciona.

· Flex Examples – Item Renderers in Practice

· A Deep Dive into Flex 4 Lists and Layouts

7- Acesso remoto a dados

Você conhece muitas aplicações que não interagem com os dados? Eu também não. Saiba como recuperar dados através de HTTPServive, WebService e RemoteObject. A arquitetura do framework Flex também poderá ajudá-lo com isso (ver #9).

· Retrieving and handling data with HTTPService

· Retrieving and handling data with WebService

· Retrieving and handling data with RemoteObject

8- Styling / Skinning

Não vamos nos esquecer que o Flex é uma tecnologia de interface e, como tal, certamente há expectativas em relação ao design. Como um desenvolvedor Flex, você deve ser capaz de personalizar a aparência de seus aplicativos usando estilos CSS, gráficos e/ou skins.

Com o Flex 4, não há mais desculpas. Use um pouco do seu tempo para conhecer de uma vez o lado direito do seu cérebro. É uma excelente mudança de paradigma, e vai ajudá-lo a diferenciar-se dos outros desenvolvedores Flex.

· Flex Style Explorer

· ScaleNine

· Introduction to Flex: Part 3 – Styles & Skins

9- Pelo menos um framework de arquitetura Flex

A maioria dos frameworks de arquitetura Flex impõe uma separação de camadas através da implementação do MVC (model-view-controller). Além disso, esses mesmos frameworks especificam como seu código deve ser organizado dentro do projeto Flex.

Embora muitos argumentariam que os frameworks são desnecessários, acredito que os desenvolvedores Flex se beneficiam em muitos aspectos da experiência de usá-los. Basta assistir ? s técnicas (boas ou más) empregadas por um framework para resolver problemas complexos de arquitetura. Isso contribuirá para seu crescimento como um desenvolvedor Flex.

Além disso, é difícil negar o fato de que a experiência com framework aumentará substancialmente o seu valor comercial como um desenvolvedor Flex. Jesse Warden me disse recentemente “Existem poucas empresas que não usam frameworks, mas isso é raro. Queiramos ou não, está na ‘moda’”. Eu concordo com Jesse.

· Cairngorm

· Parsley

· PureMVC

· Mate

· Swiz

· Robotlegs

10- Ciclo de vida de componentes e display list

Eu não estava convencido da necessidade de aprender o ciclo de vida de componentes Flex ou da display list até que escrevi o meu primeiro componente customizado (na verdade foi um componente semi-customizado que se estendia do componente Canvas). Até essa época eu usava componentes nativos do Flex, usando apenas o MXML enquanto que a display list era renderizada para mim. Em nenhuma vez tive que usar os métodos addChild, createChildren ou commitProperties, e usava o evento creatiomComplete para tudo.

Meu primeiro componente customizado usava uma quantidade enorme de eventos assíncronos, e eu não poderia prever a ordem em que cada evento seria disparado. Só depois que eu aprendi os métodos e variáveis do ciclo de vida dos componentes do Flex que eu pude ter um certo controle.

Estes métodos do ciclo de vida estão lá para serem usados. Saiba como funcionam e use-os para o seu benefício. Sua vida será mais fácil e você perderá menos cabelos.

· Colin Moock’s Lost ActionScript Weekend – The Display List

· Creating New Components in Flex 3

· Diving Deep with the Flex Component Lifecycle

· Understanding the Flex 3 Component and Framework Lifecycle


[1] Expressão americana usada para algo que requer pouco esforço mental ou inteligência para realizar ou compreender

Mai 11

Upload de arquivo com Servlet e Flex – Parte II

Escrito por Cognitiva Soluções em 1, 2.0, 3.5, 4, 6, AR, arte, Blazeds, blog, Blogs, C#, class, classe, err, erro, error, event, EventListener, exemplo, Flex, function, Google, handle, html, if, image, Java, mg, O, on, problema, progress, reference, RIA, Ria’s Geral, RoR, S+S, string, Tutorial, UI, vs @ 05 11th, 2011 | via http://blog.cognitivasolucoes.com | Sem comentários
Cognitiva Soluções
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Vamos a segunda parte. Para evitar o problema de perda de sessão ocasionado pelo Upload utilizando método upload da classe FileReference do Flex é preciso recuperar no Java o jsessionid.

Vamos ao exemplo de como recupera-lo:
public String getSessionId()
  // Pegando Request no blazeDS
  HttpServletRequest request = FlexContext.getHttpRequest();
  HttpSession session = request.getSession();

  return request.getSession().getId();

Já no Flex para utilizar o FileReference:

protected function btEscolher_clickHandler(event:MouseEvent):void
   if(fileRef == null)
    this.fileRef = new FileReference();
    this.fileRef.addEventListener(Event.SELECT, onSelect);
    this.fileRef.addEventListener(Event.COMPLETE, onUploadComplete);
    this.fileRef.addEventListener(SecurityErrorEvent.SECURITY_ERROR, onErro);
    this.fileRef.addEventListener(IOErrorEvent.IO_ERROR, onErro);
    fileRef.addEventListener(ProgressEvent.PROGRESS, onProgress);

   this.fileRef.browse();
  }

Apenas é necessários realizar os tratamento para cada EventListener colocado.

Caso você não tenha lido a Parte I deste tutorial acesse aqui.

Mai 7

Acessando a camera do celular com Adobe AIR for Android

Escrito por Leonardo França em .NET, 1, 2.0, 4, 6, action, Actionscript, Actionscript3, Adobe, Adobe Air, Air, Android, api, app, AR, auto, BI, C#, class, classe, classes, configuração, Curso, Cursos, demo, Desktop, err, erro, error, event, EventListener, exemplo, filter, flash, flash media, Flash Media Server, Flex, for, function, Geral, Google, html, ide, IE, if, image, int, internet, live, mg, mobile, O, on, padrão, PHP, platform, pt, reference, Ria’s Geral, RoR, S+S, server, servidor, SmartPhone, streaming, string, UI, Ved, Vídeo, web, XML @ 05 7th, 2011 | via http://www.leonardofranca.com.br | Sem comentários
Leonardo França
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »



O Adobe AIR for Android pode acessar alguns recursos do hardware dos smartphones. Dentre alguns deles podemos citar o acesso a internet, ler o estado do telefone, o acesso da rede, o acesso da wifi, GPS, sensores etc. O Adobe AIR pode acessar também a camera do dispositivo, sendo que isso pode ser feito de duas maneiras.

O Adobe AIR está disponivel para dispositivos rodando Android a partir da versão 2.2(Froyo)

Temos duas classes para acessar a camera com Adobe AIR for Android:

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/media/Camera.html
A primeira maneira de acessar a câmera do celular é usando a classe Camera, clássica e já bastante conhecida de nossos trabalhos em ambiente web e desktop. Antes você pode usar o método Camera.isSupported, e para pegar as câmeras usando Camera.getCamera().

Geralmente essa classe é usada também para enviar o streaming de sua câmera para o servidor Flash Media Server(em conjunto com a classe NetStream) e transmitir para web, desktop ou mobile. Veja um exemplo de uso:

PLAIN TEXT
ACTIONSCRIPT3:

  1. var camera:Camera = Camera.getCamera();
  2. if (camera != null)
  3. video = new Video(camera.width * 2, camera.height * 2);
  4. video.attachCamera(camera);
  5. addChild(video);
  6. else
  7. trace(“You need a camera.”);

No getCamera, se não for passado nenhum parâmetro, acessará a camera principal do dispositivo, você pode acessar uma câmera especifica passando o índice dela como string:

PLAIN TEXT
ACTIONSCRIPT3:

  1. var arrCamera:Array = Camera.names;// todas as câmeras como array
  2. var camera:Camera = Câmera.getCamera(“1”);//acessando a câmera de indece 1

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/media/CameraUI.html
CameraUI é uma classe nova exclusiva para o Adobe AIR for Mobile Devices, permitindo que você capture a imagem ou vídeo do aplicativo padrão de câmera do celular. A imagem ou video fica disponivel no objeto MediaEvent. Veja um exemplo de uso:

PLAIN TEXT
ACTIONSCRIPT3:

  1. var deviceCameraApp:CameraUI = new CameraUI();
  2. var imageLoader:Loader;
  3. deviceCameraApp.addEventListener( MediaEvent.COMPLETE, imageCaptured );
  4. deviceCameraApp.addEventListener( Event.CANCEL, captureCanceled );
  5. deviceCameraApp.addEventListener( ErrorEvent.ERROR, cameraError );
  6. deviceCameraApp.launch( MediaType.IMAGE );
  7. function imageCaptured( event:MediaEvent ):void
  8. trace( “Media captured…” );
  9. var imagePromise:MediaPromise = event.data;
  10. if( imagePromise.isAsync )
  11. trace( “Asynchronous media promise.” );
  12. imageLoader = new Loader();
  13. imageLoader.contentLoaderInfo.addEventListener( Event.COMPLETE, asyncImageLoaded );
  14. imageLoader.addEventListener( IOErrorEvent.IO_ERROR, cameraError );
  15. imageLoader.loadFilePromise( imagePromise );
  16. else
  17. trace( “Synchronous media promise.” );
  18. imageLoader.loadFilePromise( imagePromise );
  19. showMedia( imageLoader );
  20. }
  21. function captureCanceled( event:Event ):void
  22. trace( “Media capture canceled.” );
  23. NativeApplication.nativeApplication.exit();
  24. function asyncImageLoaded( event:Event ):void
  25. trace( “Media loaded in memory.” );
  26. showMedia( imageLoader );
  27. function showMedia( loader:Loader ):void
  28. this.addChild( loader );
  29. function cameraError( error:ErrorEvent ):void
  30. trace( “Error:” + error.text );
  31. NativeApplication.nativeApplication.exit();

Um ultimo detalhe para que funcione no smartphone, é necessario setar a permissão para que o aplicativo possa acessar a camera no Android. Isso é feito no xml de configuração do Adobe AIR:

PLAIN TEXT
XML:

  1. >
  2. >
  3. ]]>>
  4. >
Abr 7

ArrayCollection XML FileReference Flex

Escrito por Felipe Borella em 1, 4, 6, Adobe, app, AR, back, BI, Bindable, carregar, collection, control, Controls, dados, DataGrid, DataProvider, encode, encoder, err, erro, error, eval, event, EventListener, Evento, falha, filter, Flex, fonte, for, function, git, ide, IE, label, layout, lista, MXML, O, on, pt, reference, RIA, Ria’s Geral, RoR, string, tag, TAT, Tema, UI, utils, Ved, XML, XP @ 04 7th, 2011 | via http://www.fborella.com.br/blog/ | Sem comentários
Felipe Borella
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Opa.

Resolvi criar este post pois ja havia feito isso para trabalho de faculdade, então, compratilhando o conhecimento adquirido.

Segue abaixo aplicação e os fonte com as explicações:
Clique em Listar e depois salvar.

xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	backgroundColor="white">
?
	<mx:Script>
		[CDATA[
			import mx.rpc.xml.SimpleXMLEncoder;
			import mx.utils.ObjectUtil;
			import mx.controls.Alert;
			import mx.collections.ArrayCollection;
?
			private var fr:FileReference;
			private static const FILE_TYPES:Array=[new FileFilter("Arquivo XML", "*.xml")];
			private static const DEFAULT_FILE_NAME:String="trabalho.xml";
			[Bindable]
			public var arr:ArrayCollection=new ArrayCollection(
					[{id:1, nome:"Felipe Borella", cidade:"Marau"},
					{id:2, nome:"Mario Junior", cidade:"Rio de Janeiro"},
					{id:3, nome:"Bãrdei Futebol Clube", cidade:"Marau"},
					{id:4, nome:"Janderson Futebol Clube", cidade:"Rio de Janeiro"}]);
?
			private function iniciar():void
			{
				var xml:XML=objectToXML(arr.source);
				txt1.text=ObjectUtil.toString(arr.source);
				txt2.text=xml.toXMLString();
			}
?
?
			private function objectToXML(obj:Object):XML
			{
				var qName:QName=new QName("pessoa");
				var xmlDocument:XMLDocument=new XMLDocument();
				var simpleXMLEncoder:SimpleXMLEncoder=new SimpleXMLEncoder(xmlDocument);
				var xmlNode:XMLNode=simpleXMLEncoder.encodeValue(obj, qName, xmlDocument);
				var xml:XML=new XML(xmlDocument.toString());
				trace(xml.toXMLString());
				return xml;
			}
?
			private function onLoadFileClick():void
			{
				//cria a instancia do FileReference
				fr=new FileReference();
				//adiciona o evento para a escuta quando o arquivo for selecionado 
				fr.addEventListener(Event.SELECT, onFileSelect);
				//adiciona o evento para a escuta quando o arquivo for cancelado
				fr.addEventListener(Event.CANCEL, onCancel);
				//abri somente arquivos XML
				fr.browse(FILE_TYPES);
			}
?
			//chamado quando o usuario seleciona o arquivo
			private function onFileSelect(e:Event):void
			{
				//quando o arquivo for carregado dispara a escuta da funcao onLoadComplete
				fr.addEventListener(Event.COMPLETE, onLoadComplete);
				// adiciona a escuta quando acontece erro ao carregar arquivo
				fr.addEventListener(IOErrorEvent.IO_ERROR, onLoadError);
				//carrega o conteudo do arquivo
				fr.load();
			}
?
			//Chamado quando o usuario cancela
			private function onCancel(e:Event):void
			{
				trace("File Browse Canceled");
				fr=null;
			}
?
			//chama completa o arquivo carregado
			private function onLoadComplete(e:Event):void
			{
				//recupera os dados do arquivo como um byte array
				var data:ByteArray=fr.data;
				//le o arquivo como uma string e coloca em um text area
				txt2.text=data.readUTFBytes(data.bytesAvailable);
				//limpa a instancia do arquivo tipo filereference
				fr=null;
			}
?
			//quando ocorrer erros ao carregar
			private function onLoadError(e:IOErrorEvent):void
			{
				trace("Error loading file : " + e.text);
			}
?
			//chamadoquando o usuario digita no textarea
			private function onInputChange():void
			{
				//habilita o botao se ha texto para salvar
				saveButton.enabled=(txt2.text.length > 0);
			}
?
			//chamado quando o usuario clica o botao de carregar
			private function onSaveClick():void
			{
				//criando instancia de File Reference
				fr=new FileReference();
?
				//escuta para falha quando foi salvo
				fr.addEventListener(Event.COMPLETE, onFileSave);
?
				//escuta  para quando cancelar
				fr.addEventListener(Event.CANCEL, onCancel);
?
				//escuta para quando ha erros no salvar
				fr.addEventListener(IOErrorEvent.IO_ERROR, onSaveError);
?
				//abre a caixa para saber onde salvar o XML usando o nome default
				fr.save('n'+txt2.text, DEFAULT_FILE_NAME);
			}
?
			//chamado quando o arquivo for salvo
			private function onFileSave(e:Event):void
			{
				trace("File Saved");
				fr=null;
				Alert.show('Salvo com sucesso');
			}
?
			//chamado se o usuario cancela a caixa de dialogo
			private function onCance2l(e:Event):void
			{
				Alert.show('Arquivo cancelado', 'Sistema');
				fr=null;
			}
?
			//chamado se ocorrer erro enquanto salva o arquivo
			private function onSaveError(e:IOErrorEvent):void
			{
				Alert.show('Erro '+ e.text);
				fr=null;
			}
		]]>
	mx:Script>
?
	<mx:DataGrid x="10" y="10" dataProvider="{arr}" width="299">
		<mx:columns>
			<mx:DataGridColumn headerText="Nome" dataField="nome"/>
			<mx:DataGridColumn headerText="Cidade" dataField="cidade"/>
		mx:columns>
	mx:DataGrid>
	<mx:Button id="saveButton" x="412" y="130" label="Salvar" click="onSaveClick()"/>
	<mx:TextArea id="txt1" x="10" y="175" width="228" height="231" editable="false"/>
	<mx:TextArea id="txt2" x="246" y="175" width="228" height="231" editable="false"/>
	<mx:Button x="346" y="130" label="Listar" click="iniciar()"/>
?
mx:Application>

Valeu ai!

Felipe
Marau-RS

Mar 7

TextArea com Linhas.

Escrito por Felipe Borella em 1, 2009, 4, 6, Adobe, app, AR, back, bar, Blend, blog, Blogs, boolean, break, chrome, class, classe, classes, Componente, components, control, err, event, EventListener, events, exemplo, flash, Flex, fonts, for, function, gc, html, ide, IE, if, int, internet, label, layout, library, MXML, NaN, Number, O, on, override, pt, Ria’s Geral, Scroll, spark, state, string, strings, Stroke, TAT, UI, UML, update, XML, XP @ 03 7th, 2011 | via http://www.fborella.com.br/blog/ | Sem comentários
Felipe Borella
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Daeee galera!
Esse port é para mostra um Skin bacana que catei na internet.
Original em http://flexdevtips.blogspot.com/2010/07/spark-textarea-with-line-numbers.html

Vamos ao Skin:

xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
			 xmlns:s="library://ns.adobe.com/flex/spark"
			 xmlns:mx="library://ns.adobe.com/flex/mx"
			 xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
			 creationComplete="created(event)"
			 alpha.disabled="0.5"
			 blendMode="normal">
?
	<fx:Metadata>
		[CDATA[
		[HostComponent("spark.components.TextArea")]
		]]>
	fx:Metadata>
?
	<fx:Script fb:purpose="styling">
		private var lineBreakChanged:Boolean;
?
		private var paddingChanged:Boolean;
?
		private var verticalAlignChanged:Boolean;
?
		/* Define the skin elements that should not be colorized.
		For text area, the skin itself is colorized but the individual parts are not. */
		static private const exclusions:Array = ["background", "scroller"];
?
		/**
		 * @private
		 */
		override public function get colorizeExclusions():Array {
			return exclusions;
		}
?
		/* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
		static private const contentFill:Array = ["bgFill"];
?
		/**
		 *  @private
		 */
		override public function get contentItems():Array {
			return contentFill
		}
		;
?
		/**
		 *  @private
		 */
		override protected function commitProperties():void {
			super.commitProperties();
?
			if (lineBreakChanged) {
				updateStringStyle("lineBreak");
				lineBreakChanged = false;
?
				if (textDisplay != null) {
					if (getStyle("lineBreak") == "explicit") {
						if (textDisplay.percentWidth == 100) {
							textDisplay.width = NaN;
						}
					} else if (textDisplay.percentWidth != 100) {
						textDisplay.percentWidth = 100;
					}
				}
			}
			if (paddingChanged) {
				updatePadding();
				paddingChanged = false;
			}
			if (verticalAlignChanged) {
				updateStringStyle("verticalAlign");
				verticalAlignChanged = false;
			}
		}
?
		/**
		 * @private
		 */
		override protected function initializationComplete():void {
			useChromeColor = true;
			super.initializationComplete();
		}
?
		/**
		 *  @private
		 */
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
			if (getStyle("borderVisible") == true) {
				border.visible = true;
				shadow.visible = true;
				background.left = background.top = background.right = background.bottom = 1;
				scroller.left = scroller.top = scroller.right = scroller.bottom = 1;
			} else {
				border.visible = false;
				shadow.visible = false;
				background.left = background.top = background.right = background.bottom = 0;
				scroller.left = scroller.top = scroller.right = scroller.bottom = 0;
			}
?
			borderStroke.color = getStyle("borderColor");
			borderStroke.alpha = getStyle("borderAlpha");
?
			super.updateDisplayList(unscaledWidth, unscaledHeight);
		}
?
		/**
		 *  @private
		 */
		private function updatePadding():void {
			if (!textDisplay)
				return;
?
			// Push padding styles into the textDisplay
			var padding:Number;
?
			padding = getStyle("paddingLeft");
			if (textDisplay.getStyle("paddingLeft") != padding)
				textDisplay.setStyle("paddingLeft", padding);
?
			padding = getStyle("paddingTop");
			if (textDisplay.getStyle("paddingTop") != padding)
				textDisplay.setStyle("paddingTop", padding);
?
			padding = getStyle("paddingRight");
			if (textDisplay.getStyle("paddingRight") != padding)
				textDisplay.setStyle("paddingRight", padding);
?
			padding = getStyle("paddingBottom");
			if (textDisplay.getStyle("paddingBottom") != padding)
				textDisplay.setStyle("paddingBottom", padding);
		}
?
		/**
		 *  @private
		 */
		private function updateStringStyle(styleName:String):void {
			if (!textDisplay)
				return;
?
			// Push style into the textDisplay
			var style:String;
?
			style = getStyle(styleName);
			if (textDisplay.getStyle(styleName) != style) {
				textDisplay.setStyle(styleName, style);
			}
		}
?
		/**
		 *  @private
		 */
		override public function styleChanged(styleProp:String):void {
			var allStyles:Boolean = !styleProp || styleProp == "styleName";
?
			super.styleChanged(styleProp);
?
			if (allStyles || styleProp.indexOf("lineBreak") == 0) {
				lineBreakChanged = true;
				invalidateProperties();
			}
			if (allStyles || styleProp.indexOf("padding") == 0) {
				paddingChanged = true;
				invalidateProperties();
			}
			if (allStyles || styleProp.indexOf("verticalAlign") == 0) {
				verticalAlignChanged = true;
				invalidateProperties();
			}
		}
	fx:Script>
?
	<fx:Script>
		[CDATA[
			import mx.events.FlexEvent;
?
			/**
			 * @private
			 */
			private static const focusExclusions:Array = ["textDisplay"];
?
			/**
			 *  @private
			 */
			override public function get focusSkinExclusions():Array {
				return focusExclusions;
			}
?
			protected function created(event:FlexEvent):void {
				updateLineNumbers(event);
				hostComponent.addEventListener(FlexEvent.UPDATE_COMPLETE, updateLineNumbers, false, 0, true);
			}
?
			private var _lines:int = 0;
?
			private function updateLineNumbers(event:Event):void {
				var lines:int = textDisplay.mx_internal::textContainerManager.numLines;
				if (lines != _lines) {
					var old:int = _lines;
					this._lines = lines;
					var diff:int = lines - old;
					var linesString:String;
					var i:int;
					if (diff > 0) {
						linesString = lineNumbersLabel.text;
						for (i = old + 1; i <= _lines; i++) {
							if (i > 1) {
								linesString += "n";
							}
							linesString += i.toString(10);
						}
					} else {
						linesString = "";
						for (i = 1; i <= _lines; i++) {
							if (i > 1) {
								linesString += "n";
							}
							linesString += i.toString(10);
						}
					}
					lineNumbersLabel.text = linesString;
				}
			}
		]]>
	fx:Script>
?
	<s:states>
		<s:State name="normal"/>
		<s:State name="disabled"/>
	s:states>
?
	
	
	<s:Rect id="border"
			bottom="0"
			left="0"
			right="0"
			top="0">
		<s:stroke>
			
			<s:SolidColorStroke id="borderStroke"
								weight="1"/>
		s:stroke>
	s:Rect>
?
	
	
	
		
			
			
		
	
?
	
	
	
		
			
		
	
?
	
	
		
			
				
			
			
			
				
					
				
			
			
				
					
				
			
		
?
		
			
			
		
	
?

E ao Uso do mesmo no componente

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/mx" width="100%" height="100%">
	<fx:Declarations>
?
	fx:Declarations>
?
	<s:TextArea width="400" height="200" skinClass="br.com.fborella.SkinTextArea">
	s:TextArea>
s:Application>

Lembre-se de colocar o arquivo no seu pacore e ajustar o mesmo no skinClass

Exemplo:

Abraço

Felipe

Fev 27

Melhores práticas com Flex, PHP, Zend e Swiz

Escrito por Daniel Schmitz em 1, 2009, 4, 6, action, Actionscript, Adobe, AMF, amfphp, app, AR, Artigo, Artigos, auto, back, BI, botão, bug, busca, class, classe, classes, cliente, código, código fonte, Componente, Componentes, comunidade, configuração, control, Controls, Curso, Cursos, dados, Debug, demo, Desenvolvimento, dispatch, Diversos, Download, dynamic, Eclipse, email, err, erro, event, EventListener, Evento, Eventos, events, exemplo, falha, flash, flash builder, Flex, fonte, for, Formulário, Formulários, framework, function, handle, html, ide, IE, if, image, int, Java, labs, library, lista, Livro, Livros, LOB, Melhores Práticas, menu, mg, mvc, MXML, NaN, O, on, padrão, Pessoal, PHP, processo, procura, Projetos, pt, Remoting, RIA, Ria’s Geral, SDK, server, servidor, spark, string, Sun, swf, Swiz Framework, tag, Tech, Tecnologia, Tema, Teste, Twitter, UI, uint, utils, web, XML, XP, zend, Zend Framework @ 02 27th, 2011 | via http://flex.etc.br | Sem comentários
Daniel Schmitz
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Durante o ando de 2010 diversos leitores me escreveram solicitando alguma forma de “receita de bolo” para a criação de projetos em Flex. Estavam buscando uma maneira de criar uma aplicação de forma que fosse mais correta e mais fácil, baseada em padrões de projeto e definida através de uma estrutura que facilitasse o desenvolvimento.

No início de 2011 comecei a pensar mais no assunto, pois irei implementar estas regras nos próximos livros, chegando a uma série de “regras” das quais estarei apresentando neste artigo. Inicialmente, queria dizer que eu não sou o dono da verdade, e estou longe de criar alguma regra que se não usada irá causar o seu insucesso. Estou disposto a receber críticas que sejam construtivas, com o intuito de melhorar o sistema cada vez mais, possibilitando assim que a comunidade tenha em mãos um bom documento para consulta.

PHP ou Java?

Uma das perguntas que mais recebi ao longo de 2010, por isso estarei discutindo um pouco sobre qual linguagem de servidor usar. Inicialmente você deve saber que não é a linguagem que vai fazer você ter sucesso ou não em um sistema, e sim o quanto você conhece a mesma. Por exemplo, se você conhece muito bem PHP, porque aventurar-se em Java se dá conta do recado? O mesmo vale para o Java, mas não recebi emails de nenhum programador Java querendo mudar para php… (sic.. hehe).

O que? é fato nesta “briguinha” é que, não existe melhor ou pior. Java é mais complexo que php, exige mais atenção mas traz muitos benefícios, até financeiros (sim você ganha mais). PHP é mais fácil, você cria tudo mais rápido e com isso fica mais feliz :) Qual você vai escolher? Escolha a que te faz mais feliz.

Zend_AMF ou AMFPHP ?

Outra dúvida muito comum entre os programadores PHP. Eu costumo selecionar um ou outro dependendo do projeto em sí. Se o seu projeto vai usar alguns recursos do Zend Framework, e são muitos, utilize o Zend_AMF. Caso contrário, use AMFPHP.? Aqui chegamos a um impasse do qual julgo ser mais importante do que a briga entre Zend e AMFPHP: você ainda pensa em criar um projeto sem o Zend Framework? Você irá criar tudo que precisa “na mão” ou vai usar componentes de terceiros? Falo isso porque se um projeto em PHP é iniciado, o uso do Zend Framework irá acelerar muito o processo do mesmo. Rotinas como enviar email, acessar a sessão do php, gerenciar usuários com ACL, persistência de dados, acesso ao twitter… são todos muito bem implementados com o Zend e o Zend Framework é mantido pela mesma empresa que mantém o PHP, então não existe biblioteca mais segura em termos de continuidade do que esta.

E quais tecnologias vamos usar nas “melhores práticas” ?

Agora que discutimos as duas perguntas mais perguntadas em 2010 vamos a esta solução que julgo, pessoalmente, ser muito boa:

No cliente:

  • Adobe Flash Burrito e Flex SDK 4.5 (Basta baixar e instalar o Flash Burrito: http://labs.adobe.com/technologies/flashbuilder_burrito/).
  • SWIZ Framework (http://swizframework.org/)

No servidor:

  • PHP
  • Zend Framework (http://www.zend.com/community/downloads)
  • WAMP Server (para rodar o PHP na própria máquina – http://www.wampserver.com/en/download.php)
  • Netbeans ou Eclipse PDT – Eu estou gostando mais do Netbeans, então vou usá-lo.? (http://netbeans.org/downloads/index.html? – Versão PHP)

?

Certifique-se de ter tudo instalado, para que possamos dar prosseguimento no artigo.

Estrutura de pastas e projetos

Outra dúvida comum dos usuários, é definir a estrutura de pastas do projeto. Como instalamos o WAMP Server, ele nos fornece uma pasta onde é possível ter acesso pelo nacegador, através do endereço “localhost”. Isto é, ao acessarmos http://localhost/ o WAMP Server cuida de apontar para o diretório c:wampwww (que é o que chamamos de “document root”). Para que possamos entender a estrutura do projeto, é necessário compreender uma particularidade do Flex. Diferentemente do PHP, os arquivos que estão dentro do projeto Flex não precisam ser enviados ao servidor (os arquivos mxml, as, etc). veja que o Flex compila todos os mxml/as do projeto e gera um único arquivo swf. Este arquivo sim DEVE estar no diretório web do projeto!

Vamos então criar o projeto “melhoresPraticas” da seguinte forma:

  1. Crie a pasta c:wampwwwmelhoresPraticas Este é o diretório público do projeto, acessado através de http://localhost/melhoresPraticas?????????
  2. Crie a pasta c:wampwwwmelhoresPraticasclasses Este é o diretório onde iremos criar as nossas classes PHP
  3. Crie a pasta c:wampwwwmelhoresPraticasvos Este é o diretório onde as classes VOs serão criadas
  4. Crie a pasta c:wampwwwmelhoresPraticasZend Aqui você copia/cola o Zend framework, de forma que o arquivo melhoresPraticasZendLoader.php esteja acessível
  5. No Flash Builder, crie o projeto “melhoresPraticas”. Você pode deixar o DefaultLocation como está. Não clique em Finish, clique em Next, até chegar na configuração do “Compiled Flex application location”. Ou seja, aqui você irá informar para onde os aquivos compilados do flex irão ficar. Coloque o seguinte caminho: c:wampwwwmelhoresPraticasbin-debug. Não clique em Finish, clique em Next, e em Library Path, adicione a biblioteca swiz (o arquivo swc). Em “Output folder URL”, coloque: http://localhost/melhoresPraticas/bin-debug
  6. Com o projeto pronto, clique no botão RUN. Deve então surgir uma página em branco no endereço: http://localhost/melhoresPraticas/bin-debug/melhoresPraticas.html
  7. No Netbenas ou no eclipse, crie o projeto php apontando para c:wampwwwmelhoresPraticas

Testando a conexão

Com os projetos prontos, iremos inicialmente realizar uma simples conexão entre o Flex e o PHP. Isso é útil para que possamos começar com trabalho “pesado”. Para conectarmos o Flex no PHP, preciamos criar uma classe de conexão no Flex, que iremos chamar de ServiceBase, e um arquivo que recebe esta conexão no PHP, que chamaremos de gateway.php.

Para criar a classe ServiceBase, use o Flash Builder e acione o menu File > New > ActionScript Class e crie a classe de acordo com a imagem a seguir:

image

Classe ServiceBase:

package services
{
??? import mx.controls.Alert;
??? import mx.rpc.events.FaultEvent;
??? import mx.rpc.remoting.RemoteObject;
???
??? public dynamic class ServiceBase extends RemoteObject
??? {
??????? public function ServiceBase(classe:String)
??????? {
??????????? super(“zend”);
???????????
??????????? /*
???????????? * Como o arquivo swf está na pasta bin-debug,?
???????????? * precisamos subir um nível para chegarmos ao
???????????? * arquivo gateway.php
???????????? */
??????????? this.endpoint = “../gateway.php”;
???????????
??????????? this.source = classe;
??????????? this.addEventListener(FaultEvent.FAULT,OnFault);
??????? }
???????
??????? protected function OnFault(e:FaultEvent):void
??????? {
??????????? Alert.show(e.fault.faultString,”Erro” );
??????? }
??? }
}

Esta classe tem como principal objetivo estabelecer o endpoint, que é o gateway.php que ainda vamos criar. O atributo source define qual a classe que iremos acessar na pasta classes. Também adicionamos um listener genérico caso haja alguma falha na conexão. Veja que a classe é dinâmica (dynamic), ou seja, podemos chamar métodos da classe sem que eles estejam implementados na classe. Isso é útil pois os métodos chamados nesta classe serão os métodos remotos do PHP.

No servidor, temos que criar o arquivo gateway.php, com o seguinte código:

//Adiciona o autoloader do Zend Framework
// Assim todas as classes do framework
//? serão carregadas quando precisarem
require_once “Zend/Loader/Autoloader.php”;
Zend_Loader_Autoloader::getInstance()->setFallbackAutoloader(true);

//Instancia o servidor Zend_AMF
$server = new Zend_Amf_Server();

//Habilita o modo de desenvolvimento, retornando
// mensagens de erro. Comente esta linha quando
//?? estiver em modo de produção
$server->setProduction(false);

//Adiciona este diretorio como um diretorio de
// classes que podem ser usadas pelo Flex
$server->addDirectory(dirname(__FILE__).”/classes”);
set_include_path(dirname(__FILE__).”/vos”);

//TODO: Adicionar VOs

//Dependendo da requisição do Flex, irá
// chamar a classe correspondente, respondendo
//?? em formato AMF o que a classe responder.
echo $server->handle();

//Não fechar a tag PHP, nunca !!

?

O arquivo gateway.php é o ponto de entrada para as classes em PHP. Veja que inicialmente fazemos um include do Autoloader.php para que todas as classes do Zend Framework sejam instanciadas sem a necessidade de realizar requeires. Criamos então a instância do Zend_AMF_Server, que irá cuidar para que o flex consiga conversar com o PHP via AMF. Adicionamos o diretório classes como um diretório do AMF, onde as classes serão expostas ao flex e usamos o set_include_path para adicionar as classes que estão na pasta “vos” no path global do php, para que não precisamos fazer include das mesmas. Depois adicionaremos mais código sobre as classes VOs.

Na pasta “classes”, criamos a classe Teste, e o método sayHelloWorld. O nome do arquivo tem que ser o mesmo nome da classe, ou seja, Teste.php.

class Teste {
??? public function sayHelloWorld($name)
??? {
??????? return “Hello World $name”;
??? }
}

//Não feche a tag PHP!

?

Agora voltaremos ao Flex para que ele possa acessar a classe teste. No arquivo melhoresPraticas.mxml, adicionamos o seguinte código:

?


http://ns.adobe.com/mxml/2009″
?????????????? xmlns:s=”library://ns.adobe.com/flex/spark”
?????????????? xmlns:mx=”library://ns.adobe.com/flex/mx” minWidth=”955″ minHeight=”600″>
???
??????? ??????????? import mx.controls.Alert;
??????????? import mx.rpc.events.ResultEvent;
???????????
??????????? import org.swizframework.utils.services.ServiceHelper;
???????????
??????????? import services.ServiceBase;
??????? ]]>
???

???
???
??????? ???????????
??????????? var testeService:ServiceBase = new ServiceBase(“Teste”);
??????????? var serviceHelper:ServiceHelper = new ServiceHelper();
???????
??????? serviceHelper.executeServiceCall(
??????????? testeService.sayHelloWorld(“Daniel”),
??????????? function(e:ResultEvent):void{
??????????????? Alert.show(e.result.toString());
??????????? });
???????
??????? ]]>
???

???

?

Como estamos realizando um teste, fazemos o acesso ao PHP no evento creationComplete da aplicação. Criamos a variável testeService que é do tipo ServiceBase, repassando o parâmetro que é o nome da classe no PHP, ou seja, “Teste”. Também criamos a variável serviceHelper que pertence ao Swiz e é um facilitador de acessos ao PHP. Usamos no serviceHelper? o método executeServiceCall, que irá chamar remotamente o método sayHelloWorld repassando o parâmetro “Daniel” e quando concluído, executará a função que está no segundo parâmetro, realizando um Alert.

Ao executar esta aplicação, quando é carregada surgirá a mensagem de retorno do PHP:

?

image

Criando as classes em Service

Com o teste de conexão realizado, podemos avançar mais no código! A primeira refatoração que faremos é em relação as classes que estão na pasta service. Até agora criamos o seguinte código:

??? var testeService:ServiceBase = new ServiceBase(“Teste”);

Ao invés de criar a instância de ServiceBase repassando uma string que é o nome da classe, iremos criar a classe TesteService, da seguinte forma:

image

package services
{
??? public dynamic class TesteService extends ServiceBase
??? {
??????? public function TesteService()
??????? {
??????????? super(“Teste”);
??????? }
??? }
}

Veja que, ao criarmos a classe TesteService, podemos alterar o código da aplicação principal da seguinte forma:

var testeService:TesteService = new TesteService();

Implementando o SWIZ

Um dos melhores benefícios que o SWIZ traz é a possibilidade de separar todo o código Flex em camadas, assim como é feito no padrão MVC. Se você ainda não conhece SWIZ, é melhor conhecer, pois se está lendo este artigo está procurando criar aplicações com uma qualidade melhor e não há como chegar a esse nível sem um framework. O Swiz é o o melhor em termos de custo/benefício, porque nao é o mais fácil de aprender nem o mais complicado, e nao é o mais simples e nem o mais completo. É o meio termo em tudo.

Para usarmos o SWIZ, preciamos estabelecer algumas pastas dentro do projeto Flex, que serão nossas camadas. São elas:

  • config: contém os arquivos que chamamos de “bean”, que são os arquivos que fornecem informações para serem injetadas em outras classes
  • controllers: contém os arquivos que “ditam” a dinamica da camada de visualização
  • services: contém os arquivos que fazem o acesso ao PHP
  • events: contém eventos que podem ser disparados e mediados pelo flex
  • valueObjects: são os VOs que iremos usar na aplicação
  • views: contém os formúlários, é a camada de visão

Na pasta config, iremos criar o arquivo Bean.mxml, com o seguinte código:

??? xmlns:fx=”http://ns.adobe.com/mxml/2009″
??? xmlns:s=”library://ns.adobe.com/flex/spark”
??? xmlns:swiz=”http://swiz.swizframework.org”
??? xmlns:services=”services.*”
??? >
???
???
???

?

Neste bean, criamos a variável “testeService”, que é o tipo TesteService. Atenção quando ao uso de letras maiúsculas e minúsculas.? Sempre voltaremos no Bean.mxml para adicionar mais variáveis e com isso, injetá-las nos formulários e controllers da aplicação. Precisamos ainda configurar o Swiz no projeto principal da aplicação (melhoresPraticas.mxml):


http://ns.adobe.com/mxml/2009″
?????????????? xmlns:s=”library://ns.adobe.com/flex/spark”
?????????????? xmlns:mx=”library://ns.adobe.com/flex/mx”
?????????????? xmlns:swiz=”http://swiz.swizframework.org”
?????????????? minWidth=”955″ minHeight=”600″ xmlns:config=”config.*”>
???
???
???????
???????????
???????????????
???????????

???????????
???????????
??????????????? ??????????????????? eventPackages=”events.*”
??????????????????? viewPackages=”views.*”
??????????????????? />
???????????

???????????
???????????
???????????????
???????????

???????????
???????

???

???

?

Esta configuração, adicionada dentro do fx:Declarations, realiza uma configuração padrão no SWIZ. Basicamente adicionamos o Bean que criamos e definimos onde as classes relacionadas a eventos e formulários ficarão. Também definimos um LOG que será apresentado na aba Console do Flex se estiver rodando em modo de Debug.

Após a configuração

Podemos por exemplo criar a tela de login, e outras telas do sistema. Deixarei o código fonte da aplicação para que você possa olhar com calma.

Pegue o código fonte aqui

Conclusão

A lista a seguir é um resumo de melhores práticas que julgo importantes

  • Use módulos/sub applications somente se precisar mesmo. Não comece um projeto de 10 telas querendo usar módulos para cada tela.
  • Separe sua aplicação em camadas. Você escreve mais e cria mais artigos, mas o projeto fica mais consistente.
  • Você não precisa criar o arquivo services-config.xml para conectar sua app no servidor. Pode-se criar uma classe cujo o endpoint é um caminho RELATIVO ao gateway.
  • Use o caminho RELATIVO sempre, para faclitar o deploy da sua app. Isto é, use “../gateway.php” ao invés de “http://localhost/gateway.php”.
  • Injete o controller na view, para passar dados à ela. Se deseja enviar mensagens para a view, então use eventos
  • Não injete a view no controller.
  • Use o dispatcher do SWIZ.
  • Use o serviceHelper do SWIZ.
  • Quando criar um formulário na view, faça o databind com uma variável do controller.
  • Use eventos com moderação. Particularmente eu uso os eventos para notificar a view de alguma mudança, nunca para passar dados, que é função do controller.
  • Se você quer chamar um método da view pelo controller, use eventos.
  • Mais?

« Entradas anteriores |

ACERCA

O que é o RedeRIA ?

O redeRIA não é nada mais que um agregador de feed's que disponibiliza o conteudo de varios blogs e autores ao redor do mundo RIA, actualmente agregamos mais de 2755 entradas vindas de 53 blogs especializados em ria’s, pelo que só fica a ganhar em assinar o feed ou seguir a comunidade no twitter.

Se acha que o seu blog ou um blog de um amigo é interessante e util para os leitores o redeRIA, faça a sua submissão aqui.

Feed: assine já
Twitter: siga-nos

GOOGLE

Votação


Deveria o RedeRia agregar conteúdo em inglês?
Ver Resultados

AUTORES


Eduardo KrausAlexandre TadashiBindableCognitiva SoluçõesDaniel LopesDaniel SchmitzDanielPedrinhaDClick TeamEbercomEdgard DavidsonElvis FernandesErko BrideeFabiel PrestesFábio Batista da SilvaFabio da SilvaFabriccio BernardesFelipe BorellaFlavia MoreiraGabriel VersalliniGabriela T. PerryIgor MusardoJanderson CardosoJoão AugustoJose Carlos FielKelps SousaLeonardo FrançaLucas MarçalLuis MessiasLuiz TarabalMario JuniorMário SantosMauro MartinsPablo SouzaPedro ClaudioreneRia BrazilriaPTRicardo CerqueiraRobson FernandesRodrigo Pereira FragaSaintBrSamuelFacchinelloSergio SouzaSilva DeveloperStefan HorochovecTech CaffeTecinforThiago BuenoVedVinícius SandimWillian ManoXAML Cast

PUBLICIDADE








Powered by Wordpress & msdevstudio.com