lucmult » django http://blog.lucmult.com.br Python, Django and Plone Thu, 12 Nov 2009 01:30:48 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Django + AMF + Flex http://blog.lucmult.com.br/2009/08/django-amf-flex/ http://blog.lucmult.com.br/2009/08/django-amf-flex/#comments Sun, 23 Aug 2009 18:40:29 +0000 lucmult http://blog.lucmult.com.br/?p=100 Hoje fui almoçar na casa da mamãe e levei o note – o macluck. Meu pai estava lá estudando o C# com o Flex, que eles estão começando a utlizar na Mult .

O assunto foi o que utilizar entre o .Net e o Flex? Web Service (xml), JSON ou qualquer outra coisa.

Com isso fiquei pensando nas alternativas em Python e pesquisando o pessoal recomenda utilizar o formato AMF para serializar e transmitir objetos do servidor para o cliente Flex.

Logo pensei em tentar fazer algo em Django + AMF.

E é isso que vamos ver, faremos um Hello World. ;-)

O que precisamos ?

Django, SQLite e DjangoAMF no servidor para conseguirmos enviar objetos para o cliente Flex.

Flex SDK para compilarmos os fontes Flex e gerarmos o .swf que irá rodar no browser.

O Flex roda no Flash Player, portante você precisará dele também, mas hoje em dia todo mundo tem, afinal precisamos assistir ao YouTube. :-)

Instanlando o Flex SDK

Faça o download do Flex SDK , esse é um arquivão gigante com o Flex SDK compilado para as 3 plataformas (Linux, Mac e Win), ou seja basta descompactar em uma pasta que está pronto.

Mas crie uma pasta só para esse arquivo .zip, pois ele irá criar tudo na pasta em que ele está.

Então façamos isso:

  1.     $ mkdir -p ~/bin/flex-sdk   # vou colocar no diretório bin na home do meu usuário
  2.     $ cd ~/bin/flex-sdk
  3.     $ wget http://download.macromedia.com/pub/flex/sdk/flex_sdk_3.zip
  4.     $ unzip flex_sdk_3.zip

Vamos testar compilando um exemplo:

  1.     $ cd ~/bin/flex-sdk/samples/explorer
  2.     $ ./build.sh # ou 'sh build.sh' ou no windows 'build.bat'

Agora verifque se funcionou abrindo o arquivo ~/bin/flex-sdk/samples/explorer/explorer.html

Você verá algo como:

Flex Explorer

Vamos para o Django

Eu utilizo o virtualenv, mas você pode fazer sem ele se você preferir.

Criando o virtualenv, o importante é utilizar pelo menos o Python 2.5, pois o DjangoAMF requer.

  1.     $ cd ~/src_rm # diretório onde deixo os fontes que desenvolvo
  2.     $ virtualenv django_flex
  3.     $ cd django_flex
  4.     $ source bin/activate

Instalar o Django 1.1 e o DjangoAMF:

  1.     $ easy_install django
  2.     $ mkdir src   # ~/src_rm/django_flex/src
  3.     $ cd src
  4.     $ wget http://globalbase.dl.sourceforge.jp/djangoamf/36602/djangoamf-0.8.zip
  5.     $ unzip djangoamf-0.8.zip
  6.     $ cd djangoamf-0.8
  7.     $ python setup.py install

Criando uma aplicação django

  1.     $ cd ~/src_rm/django_flex
  2.     $ django-admin.py startproject mysite
  3.     $ cd mysite
  4.     $ python manage.py startapp teste
  5.     $ vi settings.py

Configure no settings.py, o banco de dados e adicione o Middleware do DjangoAMF que permitirá enviar os objetos pelo protocolo AMF.

Arquivo: mysite/settings.py
  1. DATABASE_ENGINE = 'sqlite3'
  2. DATABASE_NAME = 'mydb.db'
  3.  
  4. …
  5.  
  6. MIDDLEWARE_CLASSES = (
  7. …
  8.     'amf.django.middleware.AMFMiddleware',
  9. )

Agora vamos fazer um método que será chamado pelo Flex:

Arquivo: mysite/teste/views.py
  1.  
  2. import datetime
  3.  
  4. def horaAgora(request):    
  5.     return datetime.datetime.now()

Vamos configurar para essse método utilizar o AMF:

Arquivo: mysite/urls.py
  1.  
  2. urlpatterns = patterns('',
  3. …
  4.     (r'^gateway/teste/(.*)', 'amf.django.views', {'views': 'mysite.teste.views'}),
  5. )

Isso é o básico para você conseguir fazer a chamada no Flex.

Fazendo o nosso cliente Flex

Eu vou utilizar o Flex sem o Flex Builder que é pago, você pode fazer com Flex Builder, ou se você tiver no Windows com o FlashDevelop, que dá para trabalhar muito bem com o Flex.

Eu fiz o cliente Flex em outra pasta fora do Django e do virtualenv, para dar a idéia de ser totalmente separado, só fazendo a chamada via HTTP (e AMF).

  1.    $ cd src_rm
  2.    $ mkdir flex_cliente
  3.    $ cd flex_cliente
  4.    $ vi hora_servidor.mxml

Agora vem a parte que eu não conheço muito e praticamente só copiei daqui .

Muito embora, eu também não domino o Django eu comecei a estudar ele a pouco tempo e não sei muito não. :-/

Arquivo: hora_servidor.mxml
  1. <?xml version="1.0" encoding="utf-8" ?>
  2.  
  3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="getTime()">
  4.  
  5. <mx:Script>
  6.  
  7.  <![CDATA[
  8.  
  9.   import mx.controls.Alert;
  10.   import mx.rpc.events.ResultEvent;
  11.   import mx.rpc.events.FaultEvent;
  12.   import mx.rpc.remoting.mxml.RemoteObject;
  13.  
  14.   private function getTime(): void {
  15.    var ro: RemoteObject;
  16.    ro = new RemoteObject("teste"); // Aqui é o nome do objeto remoto, no nosso caso temos apenas uma função, mas o que está após o /gateway/ no urls.py, será considerado o objeto remote
  17.    ro.endpoint = 'http://127.0.0.1:8000/gateway/'  // URL do que chama-se de gateway
  18.    ro.addEventListener(FaultEvent.FAULT, getErro);
  19.    ro.addEventListener(ResultEvent.RESULT, showResult);
  20.    ro.getOperation('horaAgora').send();   // nome do método do objeto remoto
  21.  
  22.   }
  23.   public function getErro(ro:FaultEvent): void {
  24.    Alert.show(ro.fault.faultDetail);
  25.  
  26.   }
  27.   public function showResult (ro: ResultEvent) :void {
  28.  
  29.    Alert.show("A hora é " + ro.result);
  30.   }
  31. ]]>
  32.  
  33.  
  34. </mx:Script>
  35. </mx:Application>

Agora temos que compilar o danado.

Eu não coloquei o diretório bin do Flex SDK no PATH, pois eu não uso o Flex no dia-a-dia, portanto terei que utilizar o caminho para o compilador, mas se você for utilizar isso no dia-a-dia, recomendo colocar no PATH.

  1.      $ cd ~/src_rm/flex_cliente
  2.      $  ~/bin/flex-sdk/bin/mxmlc hora_servidor.mxml

Pronto você já tem um cliente Flex, pode abrí-lo no Firefox, no Safari eu não consegui abrir o .swf, tive que fazer um HTML que chama o .swf. :-/

Se você tiver sorte já irá funcionar :-) E você verá algo como:

Flex Cliente OK

Ou você não teve sorte e apareceu algo como:

Flex Cliente Erro

Mas você não deve ter sorte, e teremos que adicionar um novo arquivo no “servidor”, lá no Django, para o Flex funcionar, eu não entendi direito o que é isso e porque as vezes funciona sem esse arquivo.

Eu estava estudando isso por puro prazer, então não fui muito a fundo nos questões referentes ao flex, porém isso é algo importante para se saber ao usar em um ambiente de produção.

Vamos vamos resolver:

Lá no Django vamos criar um novo arquivo e disponibilizá-lo na raiz do site.

  1.     $ cd ~/src_rm/django_flex/mysite
  2.     $ vi crossdomain.xml

O arquivo deve conter esse conteúdo:

Arquivo: mysite/crossdomain.xml
  1. <?xml version="1.0"?>
  2. <cross-domain-policy>
  3.    <allow-http-request-headers-from domain="*" headers="*" secure="false" />
  4.    <allow-access-from domain="*" secure="false" />
  5. </cross-domain-policy>

Ainda falta ensinar o Django a disponibilizar esse arquivo como se estivesse na raiz.

Arquivo: mysite/urls.py
  1.  
  2. from django.conf import settings
  3. …
  4.  
  5. if settings.DEBUG:
  6.     urlpatterns += patterns('',
  7.         (r'^(crossdomain.xml)$', 'django.views.static.serve', {'document_root': './'}),
  8.     )

Provavelmente tem outras formas mais intenligentes de disponibilizar isso no raiz do Django, mas como eu sou iniciante ainda, fiz desse jeito mesmo que é simples o suficiente para resolver o problema. :-)

E agora está pronto nosso Hello World, ou melhor, nosso What time is it ?

Eu achei legal e simples a forma de utilizar o AMF no Django, permitindo interagir com clientes Flex.

E vocês, o que acharam ?

Fontes:

Django AMF: http://djangoamf.sourceforge.jp/
Django + Flex: http://chevitarese.wordpress.com/2009/07/24/django-django-e-flex-1%C2%B0-exemplo/
Django + Flex: http://chevitarese.files.wordpress.com/2009/07/djangoflex.pdf
VIM + Flex: http://ubuntuforums.org/showthread.php?t=742981
Meu VIM, agora com flex: http://hg.lucmult.com.br/vim/rev/32e24bf7768a
Flex SDK: http://download.macromedia.com/pub/flex/sdk/flex_sdk_3.zip

]]> http://blog.lucmult.com.br/2009/08/django-amf-flex/feed/ 4