Leonardo França http://www.leonardofranca.com.br Consultor e Desenvolvedor Flash Platform (Adobe AIR/Flex/Flash/Flash Media Server/PHP/Java/.NET) Wed, 01 Feb 2012 13:56:45 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 SharedObject com Flash Media Server http://www.leonardofranca.com.br/index.php/2012/01/02/sharedobject-com-flash-media-server/ http://www.leonardofranca.com.br/index.php/2012/01/02/sharedobject-com-flash-media-server/#comments Tue, 03 Jan 2012 01:24:06 +0000 Leonardo França http://www.leonardofranca.com.br/?p=2047 Continue reading →]]> 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.  
  5.  
  6. function init():void
  7. {
  8.     nc = new NetConnection();
  9.     nc.addEventListener(NetStatusEvent.NET_STATUS, handlerNetStatus);
  10.     nc.connect("rtmp://localhost/sharedBall");
  11. }
  12.  
  13. function handlerNetStatus(evt:NetStatusEvent):void
  14. {
  15.     trace(evt.info.code);
  16. }
  17.  
  18. 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.     {
  3.         so = SharedObject.getRemote("so",nc.uri,false);
  4.         so.addEventListener(NetStatusEvent.NET_STATUS, handlerNetStatus);
  5.         so.addEventListener(SyncEvent.SYNC, handlerSync);
  6.         so.connect(nc);
  7.     }

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. {
  3.     mc_ball.x = so.data.x;
  4.     mc_ball.y = so.data.y;
  5. }

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.  
  4. function handlerSharedBall(evt:MouseEvent):void
  5. {
  6.     this.addEventListener(Event.ENTER_FRAME, update);
  7.     mc_ball.startDrag();
  8. }
  9.  
  10. function handlerSharedBallOut(evt:MouseEvent):void
  11. {
  12.     mc_ball.stopDrag();
  13. }
  14.  
  15. function update(evt:Event=null):void
  16. {
  17.     so.setProperty("x",mc_ball.x);
  18.     so.setProperty("y",mc_ball.y);
  19. }

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.  
  9. var so:SharedObject;
  10.  
  11. function init():void
  12. {
  13.     nc = new NetConnection();
  14.     nc.addEventListener(NetStatusEvent.NET_STATUS, handlerNetStatus);
  15.     nc.connect("rtmp://localhost/sharedBall");
  16. }
  17.  
  18. function handlerNetStatus(evt:NetStatusEvent):void
  19. {
  20.     trace(evt.info.code);
  21.     if(evt.info.code == "NetConnection.Connect.Success")
  22.     {
  23.         so = SharedObject.getRemote("so",nc.uri,false);
  24.         so.addEventListener(NetStatusEvent.NET_STATUS, handlerNetStatus);
  25.         so.addEventListener(SyncEvent.SYNC, handlerSync);
  26.         so.connect(nc);
  27.     }
  28. }
  29.  
  30. function handlerSync(evt:SyncEvent):void
  31. {
  32.     mc_ball.x = so.data.x;
  33.     mc_ball.y = so.data.y;
  34. }
  35.  
  36. mc_ball.addEventListener(MouseEvent.MOUSE_DOWN, handlerSharedBall);
  37. mc_ball.addEventListener(MouseEvent.MOUSE_UP, handlerSharedBallOut);
  38.  
  39. function handlerSharedBall(evt:MouseEvent):void
  40. {
  41.     this.addEventListener(Event.ENTER_FRAME, update);
  42.     mc_ball.startDrag();
  43. }
  44.  
  45. function handlerSharedBallOut(evt:MouseEvent):void
  46. {
  47.     mc_ball.stopDrag();
  48. }
  49.  
  50. function update(evt:Event=null):void
  51. {
  52.     so.setProperty("x",mc_ball.x);
  53.     so.setProperty("y",mc_ball.y);
  54. }
  55.  
  56. init();

Veja uma demostração em funcionamento:

Compre o Arquivo fonte de exemplo por R$4,99

Mais códigos e PDFs clique aqui.

]]> http://www.leonardofranca.com.br/index.php/2012/01/02/sharedobject-com-flash-media-server/feed/ 0 Flex com PHP usando ZendAMF – Zend_Db http://www.leonardofranca.com.br/index.php/2011/12/27/flex-com-php-usando-zendamf-zend_db/ http://www.leonardofranca.com.br/index.php/2011/12/27/flex-com-php-usando-zendamf-zend_db/#comments Tue, 27 Dec 2011 23:35:08 +0000 Leonardo França http://www.leonardofranca.com.br/?p=1996 Continue reading →]]> O artigo Adobe Flex com PHP usando ZendAMF - primeiros passos teve como objetivo exemplificar a integração do Flex com PHP para quem já tinha sistemas desenvolvidos usando o AMFPHP, por isso não usei as classes para acesso a banco de dados do ZendFramework. Neste artigo mostrarei o mesmo exemplo mas usando exclusivamente ZendFramework.

Pegarei o mesmo exemplo utilizado no artigo anterior, só modificando a classe PHP para usar as classes de abstração de banco de dados do ZendFramework. Começaremos com nosso gateway.php

PLAIN TEXT
PHP:
  1. <?php
  2. require_once 'Zend/Config.php';
  3. require_once 'Zend/Db.php';
  4. require_once 'Zend/Amf/Server.php';
  5. require_once 'Zend/Amf/Exception.php';
  6. require_once 'Zend/Amf/Server.php';
  7. $server = new Zend_Amf_Server();
  8. $server->setProduction(false);
  9. $server->setClass('Contato');
  10. echo($server->handle());
  11. ?>

Executando o link no seu navegador, deve aparecer a seguinte mensagem:

Zend Amf Endpoint

Em seguida, modificaremos em nossa classe principal, que efetuará as operações de listar, inserir, apagar e atualizar os dados do nosso banco:

PLAIN TEXT
PHP:
  1. <?php
  2. /*
  3.  * author Leonardo França
  4.  * site http://www.leonardofranca.com.br
  5.  */
  6.  
  7. class Contatos  
  8. {
  9.     private $db;
  10.     private $config;
  11.     private $select;
  12.     private $stmt;
  13.    
  14.     function __construct()
  15.     {
  16.         $params['host'] = 'localhost';
  17.         $params['dbname'] = 'java';
  18.         $params['username'] = 'root';
  19.         $params['password'] = '';
  20.         $database['adapter'] = 'Mysqli';
  21.         $database['params'] = $params;
  22.         $data['database'] = $database;
  23.        
  24.         $this->config = new Zend_Config($data);
  25.         $this->db = Zend_Db::factory($this->config->database);
  26.     }
  27.    
  28.     public function getData()
  29.     {
  30.                try
  31.            {
  32.             $this->select = $this->db->select();
  33.             $this->select->from('tabela',array('id','nome','email'));
  34.             $this->stmt = $this->select->query();
  35.             $result = $this->stmt->fetchAll();
  36.             return $result;
  37.         }
  38.         catch (Exception $e)
  39.             {
  40.                     throw new Exception($e->getMessage());
  41.             }  
  42.     }
  43.    
  44.     public function insertData($data=array())
  45.     {
  46.             try
  47.         {
  48.             $dados = array(
  49.                 'nome'          => $data['nome'],
  50.                 'email'         => $data['email']
  51.             );
  52.             $retorno = $this->db->insert('tabela', $dados);
  53.             return $retorno;
  54.         }
  55.         catch (Exception $e)
  56.         {
  57.             throw new Exception($e->getMessage());
  58.         }
  59.     }
  60.    
  61.     public function deleteData($data=array())
  62.     {
  63.         try
  64.         {
  65.             $retorno = $this->db->delete('tabela', 'id = '.$data['id']);
  66.             return $retorno;
  67.         }
  68.         catch (Exception $e)
  69.         {
  70.             throw new Exception($e->getMessage());
  71.         }
  72.  
  73.     }
  74.    
  75.     public function updateData($data=array())
  76.     {
  77.     try
  78.         {
  79.             $dados = array(
  80.                 'nome'          => $data['nome'],
  81.                 'email'         => $data['email']
  82.             );
  83.             $where['id = ?'] = $data['id '];
  84.             return $this->db->update('tabela', $dados, $where);
  85.         }
  86.         catch (Exception $e)
  87.         {
  88.             throw new Exception($e->getMessage());
  89.         }
  90.     }
  91.    
  92. }
  93. ?>

No ActionScript só precisaremos mudar o que será passado para o PHP, ao inves de VOs, mandaremos Arrays:

PLAIN TEXT
ACTIONSCRIPT3:
  1. public function insertData():void
  2.             {
  3.                 var contatosVO:Array = [];
  4.                 contatosVO['nome']= input_nome.text;
  5.                 contatosVO['email'] = input_email.text;
  6.                 ro.insertData(contatosVO);
  7.             }

Referências:
http://framework.zend.com/manual/en/zend.db.adapter.html

Mais códigos e PDFs clique aqui.

]]> http://www.leonardofranca.com.br/index.php/2011/12/27/flex-com-php-usando-zendamf-zend_db/feed/ 0 LCCS e PHP com ZendAMF http://www.leonardofranca.com.br/index.php/2011/11/16/lccs-e-php-com-zendamf/ http://www.leonardofranca.com.br/index.php/2011/11/16/lccs-e-php-com-zendamf/#comments Wed, 16 Nov 2011 23:16:52 +0000 Leonardo França http://www.leonardofranca.com.br/?p=1981 Continue reading →]]> O Adobe LiveCycle Collaboration Service possui em seu SDK, exemplos de integração com as principais linguagens de programação web do mercado como PHP, Java, Python, etc.
Na documentação da Adobe, é recomendado o uso do AMFPHP ou o PHP puro mesmo, mas nada impede de usar tranquilamente em conjunto com o ZendFramework (usando ZendAMF)
Ryan Stewart escreveu dois artigos mostrando a implementação com PHP e REST.

Uma observação sobre o artigo de Ryan, no Flex 4, Adobe passou a usar o swfobject, então o modo de pegar os parâmetros via URL e passar para o SWF fica desse modo:

PLAIN TEXT
JAVASCRIPT:
  1. var xiSwfUrlStr = "playerProductInstall.swf";
  2. var flashvars = {};
  3. {
  4.     flashvars.roomURL = swfobject.getQueryParamValue("roomURL");
  5.     flashvars.authToken = swfobject.getQueryParamValue("authToken");
  6. }
  7. var params = {};

No SDK do LCCS, existe um arquivo chamado lccs.php, basta copiar para o mesmo diretório em que você já usa suas classes. Em seguida, adicionar o include no arquivo gateway.php

PLAIN TEXT
PHP:
  1. <?php
  2. require_once 'Zend/Amf/Server.php';
  3. require_once 'lccs.php';
  4. require_once 'Test.php';
  5.  
  6. /** Bootstrap */
  7.  
  8. // Instantiate server
  9. $server = new Zend_Amf_Server();
  10. $server->setProduction(false);
  11. $server->setClass('Test');
  12. // Handle request
  13. echo($server->handle());
  14. ?>

E está é uma simples classe para teste chamando o método que retorna o token para autenticação.

PLAIN TEXT
PHP:
  1. <?php
  2.  
  3. class Test
  4. {
  5.     private $account;
  6.     private $room;
  7.     private $devUsername;
  8.     private $devPassword;
  9.     private $secret;
  10.  
  11.     //$accountURL = "https://collaboration.adobelivecycle.com/$account";
  12.     private $accountURL;
  13.     private $roomURL;
  14.    
  15.     function __construct()
  16.     {
  17.         //for LCCS
  18.         $this->account = "Your SDK account username from LCCS developer portal";
  19.         $this->room    = "The room you want to connect to";
  20.         $this->devUsername = "Your LCCS developer account username";
  21.         $this->devPassword = "Your LCCS developer account password";
  22.         $this->secret  = "The shared secret from the LCCS developer portal";
  23.  
  24.         //$accountURL = "https://collaboration.adobelivecycle.com/$account";
  25.         $this->accountURL = "http://connectnow.acrobat.com/$this->account";
  26.         $this->roomURL = "$this->accountURL/$this->room";
  27.     }
  28.    
  29.     public function getToken($data=array())
  30.     {
  31.         try
  32.         {
  33.             $this->account = new RTCAccount($this->accountURL);
  34.             $this->account->login($this->devUsername,$this->devPassword);
  35.             $session = $this->account->getSession($data['room']);
  36.             $displayName = $data['displayName'];
  37.             $username = $data['username'];
  38.             $role = $data['role'];
  39.             $token = $session->getAuthenticationToken($this->secret, $displayName, $username, $role);
  40.             return $token;
  41.         }
  42.         catch (Exception $e)
  43.         {
  44.             throw new Exception($e->getMessage());
  45.         }
  46.     }
  47. }
  48. ?>

]]> http://www.leonardofranca.com.br/index.php/2011/11/16/lccs-e-php-com-zendamf/feed/ 0 FlashMobileDay etapa Brasília http://www.leonardofranca.com.br/index.php/2011/09/22/flashmobileday-etapa-brasilia/ http://www.leonardofranca.com.br/index.php/2011/09/22/flashmobileday-etapa-brasilia/#comments Thu, 22 Sep 2011 14:14:09 +0000 Leonardo França http://www.leonardofranca.com.br/?p=1971
O AUGDF está responsavel pela etapa Brasília do FlashMobileDay, evento nacional com a tematica especifica da Plataforma Flash para dispositivos moveis, participe e concorra a varios brindes :D

site do evento: http://flashmobileday.com/

site da etapa Brasília: http://www.augdf.com.br/eventos/flashmobileday/

]]> http://www.leonardofranca.com.br/index.php/2011/09/22/flashmobileday-etapa-brasilia/feed/ 1 Usando a API de atualização do Adobe AIR http://www.leonardofranca.com.br/index.php/2011/08/18/usando-a-api-de-atualizacao-do-adobe-air/ http://www.leonardofranca.com.br/index.php/2011/08/18/usando-a-api-de-atualizacao-do-adobe-air/#comments Thu, 18 Aug 2011 21:10:50 +0000 Leonardo França http://www.leonardofranca.com.br/?p=349 Continue reading →]]> 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. <?xml version="1.0" encoding="utf-8"?>
  2. <configuration xmlns="http://ns.adobe.com/air/framework/update/configuration/1.0">
  3.      <url>http://localhost:81/leonardofranca/air/updates/testeUpdate/updateDescriptor.xml</url>
  4.     <delay>1</delay>
  5. </configuration>

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.  
  5. //via ActionScript
  6. //appUpdater.updateURL = " http://example.com/updates/update.xml";
  7. //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. <?xml version="1.0" encoding="utf-8"?>
  2.      <update xmlns="http://ns.adobe.com/air/framework/update/description/2.5">
  3.        <versionNumber>0.0.2</versionNumber>
  4.        <url>http://localhost:81/leonardofranca/air/updates/testeUpdate/testeUpdate_0.0.2.air</url>
  5.        <description><![CDATA[
  6. This version has fixes for the following knowns issues:
  7. *First issue
  8. *Second issue  
  9.  ]]></description>
  10.     </update>

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

PLAIN TEXT
MXML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:WindowedApplication 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.     <fx:Script>
  6.         <![CDATA[
  7.             import air.update.ApplicationUpdaterUI;
  8.             import air.update.events.UpdateEvent;
  9.            
  10.             import mx.events.FlexEvent;
  11.            
  12.             private var appUpdater:ApplicationUpdaterUI;
  13.            
  14.             protected function windowedapplication1_creationCompleteHandler(event:FlexEvent):void
  15.             {
  16.                 appUpdater = new ApplicationUpdaterUI();
  17.                 appUpdater.configurationFile = new File("app:/updateConfig.xml");
  18.                 appUpdater.addEventListener(ErrorEvent.ERROR, onError);
  19.                 appUpdater.addEventListener(UpdateEvent.INITIALIZED, handlerInit);
  20.                 appUpdater.initialize();
  21.                
  22.                
  23.                 //via ActionScript
  24.                 //appUpdater.updateURL = " http://example.com/updates/update.xml";
  25.                 //appUpdater.delay = 1;
  26.                
  27.             }
  28.            
  29.             protected function onError(event:ErrorEvent):void
  30.             {
  31.                 trace(event.text);             
  32.             }
  33.            
  34.             protected function handlerInit(event:UpdateEvent):void
  35.             {
  36.                 appUpdater.checkNow();
  37.             }
  38.            
  39.         ]]>
  40.     </fx:Script>
  41.     <fx:Declarations>
  42.         <!-- Place non-visual elements (e.g., services, value objects) here -->
  43.     </fx:Declarations>
  44. </s:WindowedApplication>

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

]]> http://www.leonardofranca.com.br/index.php/2011/08/18/usando-a-api-de-atualizacao-do-adobe-air/feed/ 1