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.
Blog do Hollander :: RoR de leigo para leigos 