[Tutorial] Introdução ao Flex 3 e instalação no Ubuntu

[Tutorial] Introdução ao Flex 3 e instalação no Ubuntu

Introdução

Flex é um framework open-source mantido pela Adobe que resolve o grande problema de desenvolver RIA (aplicações de interfaces ricas) na plataforma Flash, uma vez que esta não é muito familiar para desenvolvedores, sendo mais usada por designers.

Muita gente confune achando que o Flex é uma linguagem ou uma plataforma, sendo que na verdade Flex é apenas um framework para o desenvolvimento do frontend das aplicações e o backend continuará sendo desenvolvido em qualquer linguagem, como Ruby on Rails, Java, etc. Basicamente, você utiliza o MXML para substituir o XHTML e o ActionScript 3 para substituir o JavaScript.

Neste tutorial irei explicar como instalar no Ubuntu as ferramentas necessárias para se trabalhar com Flex e uma introdução básica sobre o desenvolvimento de aplicações usando ele.

Atenção! Na data da publicação desse tutorial, segundo a Adobe Labs, a versão final do Flex Builder 3 não está disponível oficialmente para Linux, então usaremos a versão alpha 4.

Pré-requisitos

No Mac e no Windows, é possível instalar o Flex Builder de duas maneiras: baixando uma IDE baseada no Eclipse pronta para ser usada ou caso você já tenha o Eclipse (versão 3.3 ou superior) instalado, é possível baixar um plugin para ele. No Linux, como ainda está na versão alpha4, apenas a segunda maneira está disponível, e só funciona com o Eclipse 3.3. Teoricamente até funcionaria na versão 3.4 ou 3.5, mas existem alguns bugs e embora exista algumas gambiarras soluções alternativas, algumas pessoas (e eu também) relatam que isto não resolve 100% dos problemas, então irei instalar a versão 3.3 do Eclipse, com a qual funciona muito bem:
http://www.eclipse.org/downloads/moreinfo/custom.php

Obviamente que para rodar o Eclipse você precisará do JDK instalado, porém não irei explicar como fazer isto aqui, para não fugir do escopo do tutorial, mas você pode encontrar facilmente como fazer isso no Google :)

Depois, baixe o Flex Builder para Linux (atualmente na versão alpha 4):
http://labs.adobe.com/downloads/flexbuilder_linux.html

Instalação

Primeiramente vamos instalar o Eclipse. Para isto, basta descompactar o arquivo .tar.gz que você baixou e pronto, está feito (irei descompactá-lo na pasta /opt/eclipse, mas isto não é obrigatório).

Pra instalar o Flex Builder, abra um terminal, vá até a pasta com o arquivo que você baixou e execute os comandos:

chmod +x flexbuilder_linux_install_a4_081408.bin
sudo ./flexbuilder_linux_install_a4_081408.bin

O primeiro comando é para dar permissão de execução para o arquivo e o segundo para rodar a instalação. Aparecerá um assistente. Clique em ‘Next’, aceite os termos da licença, escolha o diretório de instalação (eu usei /opt/flex_builder), diga onde você instalou o Eclipse (eu o fiz em /opt/eclipse) e siga até o final da instalação.

Criando um “Hello world”

Depois de tudo instalado, abra o Eclipse e crie um novo projeto em: “File/New/Project” e selecione “Flex Builder/Flex Project”. Feito isto, clique em “Next”, selecione um nome para o projeto e clique em “Finish”. Pronto: seu primeiro projeto Flex está criado!

Como eu já falei, no Flex os MXMLs substituem o XHTML e o ActionScript 3 substitui o Javascript – basicamente. A partir disto, vamos então criar um “hello world”:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			public function helloWorld():void{
				Alert.show("Hello World!");
			}
		]]>
	</mx:Script>
	<mx:Button x="300" y="150" label="Hello World" click="helloWorld()" />
</mx:Application>

Aperte Ctrl+F11 e pronto!

Avançando um pouco mais

No Flex 3 Component Explorer, você pode ver os componentes que poderão ser usados em suas aplicações. Ele pode ser seu melhor amigo no começo de seus estudos.

Vou colocar mais um código aqui, que pega um texto digitado num editor de texto rico e o transforma em um texto comum ou gera código html. Compile e veja como fica:

<?xml version="1.0" ?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="middle">

  <mx:Script>
    <![CDATA[
      public function setText(obj:Object,type:String):void{
        if(type=="text"){
          obj.text=rte.text;
        }else if(type=="html"){
          obj.text=rte.htmlText;
        }
      }
    ]]>
  </mx:Script>

  <mx:RichTextEditor id="rte" title="RichTextEditor" width="80%" height="75%" />
  <mx:HBox>
    <mx:Button label="Show Plain Text" click="setText(ta,'text');" />
    <mx:Button label="Show HTML Markup" click="setText(ta,'html');" />
  </mx:HBox>

  <mx:TextArea id="ta" width="80%" height="25%" />

</mx:Application>

Links interessantes

1. Flex in a Week

Mantido pela Adobe Flex Developer Center, são vídeos e tutoriais do tipo “aprenda em uma semana”:
http://www.adobe.com/devnet/flex/videotraining/

2. RestfulX

Se você vai usar Ruby on Rails, Merb, Sinatra, CouchDB ou Google App Engine no seu backend, experimente o RestfulX, o qual irá facilitar muito sua vida:
http://restfulx.github.com/

  • Fala Lucas,

    Parabéns pelo post :) Seria legal se depois você colocasse alguma coisa prática sobre o restfulx aqui, acho que nunca vi nada sobre ele em pt-br.

    Ah, o layout do blog tá massa!

    Abraço!

  • parabens Lucas, segui aqui teu tutorial e deu tudo certinho! :D Abraço a idéia do Cassio com relação ao restfulx, e agradeceria você por isso. :D

    Abraço.

  • carol

    oi! vi seu blog e achei interesssante o plugin de sintax, qual que é este plugin?

    bj

  • Opa. Parabéns pelo artigo.
    Gostaria de acrescentar só 1 comentário.
    É necessário dar permissão 777 na pasta do eclipse:
    (no meu caso)
    chmod a+rwx -R /usr/lib/eclipse/

    Abraços

  • Rodrigo Maia

    Ótimo artigo muito bom mesmo para nos que estamos começando gostei do layout das aplicações ricas , parabéns :D

  • Up The Irons

    No meu projeto Flex pede pra configurar o Data Service.

Comments are closed.