Blog do Hollander :: RoR de leigo para leigos

19 outubro, 2008

Integrando Rails 2 com Adobe Flex 3

Filed under: Flex, Ruby / Rails — Tags: — hollanderramos @ 23:48

Após alguns meses sem postar nada, retomo a publicação de artigos. Infelizmente, estes intervalos entre publicações podem ser mais contantes do que eu esperava pois o tempo está curto! Mas vamos em frente…

Após iniciar meus estudos em Rails, eu fiquei muito frustado com o resultado final de apresentação na web. De fato, minha frustração não é com o Rails, mas sim quando é necessário criar uma aplicação baseada em RIA. RIA –ou, literalmente traduzindo: Aplicações Internet Ricas– é uma tendência criada nos últimos anos que dotam uma página web de funcionalidades similares as encontradas em uma aplicação desktop.

Devido ao conceito MVC do Rails, a parte que cabe a apresentação visual é independente do resto, permitindo que um mesmo modelo de negócio possua até várias visões, para vários tipos de aplicações. Podemos ter uma visão para web, outra para dispositivo móvel e assim, sucessivamente para quaisquer outras formas de apresentação.

Particularmente, eu tenho problemas com a camada de apresentação, principalmente, quando o negócio é HTML, CSS e AJAX. Não gosto de perder tempo testando se a forma de visualização de uma página será a mesma no Explorer, Firefox, Ópera e agora, Chrome. Perder tempo significa utilizar hacks em CSS para compatibilizar a exibição ou comandos que não possuem suporte neste ou naquele navegador.

Estou estudando o Adobe Flex desde Julho (sim, mais um negócio para aprender — e menos tempo para escrever ;)). Flex é uma tecnologia que permite o desenvolvimento de aplicações sobre a plataforma Macromedia Flash (ops! Agora Adobe Flash). A vantagem é o grande nível de facilidade de desenvolvimento além do resultado final superior, quase similar a aplicações desktop!

Flex utiliza uma linguagem de marcação (mxml). Basicamente, as instruções deste arquivo são enviadas para um servidor que compila gerando um segundo arquivo (swf), este compatível com o Macromedia Flash (agora Adobe Flash). Logo, um dos requisitos básicos é que o cliente possua o Flash instalado no computador.

Neste artigo, vamos ver como fazer a integração entre RAILS 2.0.2 (utilizando o Aptana) e o Adobe Flex Bulder 3 que é a última versão até o momento.

Requisitos

Para este artigo será necessário:

– Adobe Flash versão 10 ou superior.

– Adobe Flex Builder versão 3.0.1 devidamente instalado.

– Aptana Studio com o RadRails devidamente instalado.

Parte I – RAILS

Vamos começar pela parte difícil:😉 Precisamos montar um projeto Rails com um controller, retornando um simples texto que será utilizado no Flex. O famoso Olá Mundo!

1) Crie um novo projeto no RadRails, utilizando o menu File > New > Rails Project:

Escolha o Nome do projeto (Project Name). No meu caso flex3maisrails;

Também determine o Local de criação da aplicação (Location), eu escolhi: c:\Documentos\Sistemas\Testes\flex3maisrails.

Não se preocupe com o tipo de Banco de dados (Database). Ele não será necessário neste exemplo.

Escolha a versão do Rails: 2.0.2

Desabilite a opção para iniciar o servidor automaticamente após a criação do projeto (Automatically start server after project is created). Se você não fizer isso, vai ter que reiniciar o servidor  mais tarde após o passo 5.

Pressione o botão Finish para criar o projeto.

2) Uma vez criado o projeto, precisamos criar um controller. Selecione a aba Generators.

O tipo de Gerador (generators) escolha controller.

Em Parâmetros (parameters) digite: olamundo index. Este comando irá criar – em um único passo – um controller de nome olamundo com um action de nome index. Lembre-se de manter tudo em minúsculas devido as convenções do rails.

Pressione o botão Go para gerar o controle.

3) Vamos agora, desabilitar a integração com banco de dados. Ela não será necessária.

Via Ruby Explorer, selecione a pasta: flex3maisrails > config e abra o arquivo enviroment.rb. Após a instrução Rails::Initializer.run do |config|, inclua o comando:

config.frameworks -= [ :active_record]

4) Vamos agora editar o controle para gerar uma resposta:

Via Ruby Explorer, selecione a pasta: flex3maisrails > app > controllers e abra o arquivo olamundo_controller.rb. Dentro do bloco def index .. end, inclua o comando:

render :text => 'De Rails: Olá Mundo!'


5) Salve tudo (ctrl+shift+s). Lembra que no passo 1 eu falei para desabilitar o lançamento do servidor? Bem, se você não fez isso lá, vai ter que interromper o servidor aqui para que as alterações do enviroment.rb (não usar o banco de dados) possam ser aplicadas.

6) Reinicie o servidor. Aguarde o boot completo. Abra seu navegador preferido e digite o endereço da aplicação: No meu caso: http://127.0.0.1:3001/olamundo

Se o navegador mostrar algo semelhante a figura abaixo, a parte I estará finalizada:

Parte II – Flex

Uma nota preliminar nesta parte: Os próximos passos seguem a ilustração pelo Adobe Flex Builder 3. É importante ressaltar que esta ferramenta é uma IDE, assim como o Aptana. Sua utilização é opcional. Os arquivos apresentados nos próximos passos podem ser criados através de um editor de textos, porém neste caso, será necessário ter instalado pelo menos o SDK do Adobe Flex 3 para fazer a compilação.

A parte em Flex 3 é tão fácil quanto a anterior:

7) Vamos preparar o caminho para o projeto em Flex. Para isso é necessário criar duas pastas: via cmd digite:

md c:\Documentos\Sistemas\Testes\flex3maisrails\app\flex

md c:\Documentos\Sistemas\Testes\flex3maisrails\public\flex

Nota: O primeiro caminho é onde os arquivos mxml serão armazenados. O segundo caminho é o local de onde a aplicação será lançada.

8) No menu do Flex Builder, selecione File > New > Flex Project. A tela ao lado será exibida:

Em Nome do Projeto (Project name), digite o mesmo nome criado no Rails. No meu caso: flex3maisrails.

Também determine o Local de criação da aplicação (Location), com o mesmo caminho do Rails. Eu escolhi: c:\Documentos\Sistemas\Testes\flex3maisrails.

Selecione o tipo de aplicação como Web application (runs in Flash Player).

Tipo de servidor (Application server type) deixe como None.

Pressione o botão Next.

9) Nesta etapa, digite na pasta de saída (output folder): public\flex. Este será o local onde o arquivo compilado e o html proprietário será gerado. Novamente, pressione o botão Next.

10) Na próxima tela, preencha o campo Main source folder (pasta das fontes principais) com: app\flex. Em Main application file (arquivo principal da aplicação), digite: Flex3maisrails.mxml. Note que a primeira letra está em maíuscula conforme convenção. Finalmente, pressione o botão Finish para criar a aplicação.

11) O projeto agora está criado e o arquivo Flex3maisrails.mxml deve estar aberto. Digite os comandos em negrito:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:HTTPService
id="ChamaServico"
url="/olamundo/index"
method="POST" />
<mx:Button x="10" y="10" label="Chamar Rails"
click="ChamaServico.send()" />
<mx:Label x="10" y="40" text="{ChamaServico.lastResult}"/>
</mx:Application>

<mx:HTTPService: é o objeto responsável por criar uma chamada ao Rails. O endereço para submeter a chamada é definido pelo atributo url. O id identifica o nome do objeto que será referenciado nos outros comandos.

<mx:Button: responsável por criar um botão associado ao evento (click) que dispara a solicitação ao Rails.

<mx:Label: responsável por receber o retorno da solicitação através do atributo text.

12) Salve o projeto (ctrl+shift+s). É necessário agora compilar. Para isso uma última configuração é necessária. Desmarque a opção que está no menu Project > Build Automatically. Isso irá habilitar o comando Build All. Pressione ctrl+b e aguarde a finalização.

13) Retorne ao navegador novamente. Abra o endereço http://127.0.0.1:3001/flex/Flex3maisrails.html. A aplicação em Flash deve ser exibida. Pressione o botão Chamar Rails e veja a resposta.

É isso. Se tudo correu bem você obteve a resposta do action do Rails. caso não esteja vendo nada, sugiro que antes de mexer novamente no código, verifique se o Flash está instalado e operacional em seu navegador. Para isso, visite algum site que possua o recurso.

Espero que este artigo lhe encoraje a seguir Rails e também o Flex.

Deixe um comentário »

Nenhum comentário ainda.

RSS feed for comments on this post. TrackBack URI

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

Crie um website ou blog gratuito no WordPress.com.

%d blogueiros gostam disto: