Flex 4.0 (Gumbo) tutorial :Installing Flex 4.0 SDK in Eclipse IDE , Flash Player 10

I am very excited for the release of Flex 4.0, code name Gumbo, sometime next year.

Flex is finally moving in the right direction and changing the project cycle.

Flex 4 code is going to be more declarative than in any other versions and what that means is that component behaviors such as states are going to be separated from visual and can be created in Thermo as well as other Adobe suite CS4 tools such as Photoshop, Firework or Illustrator, allowing developers to take advantage
of the components built on FXG and working directly with Flash player version 10. This major advance will change the Flex development cycle paradigm.

Flex 4 is being integrated with the Halo (Flex ) architecture and additionally, Flex 4 will have a new MXML language namespace with backward-compatibility with the older namespace, a new file format called Flash XML Graphic (FXG ).

FXG format is a vector-based XML used for graphical elements and similar to SVG.
FXG works very similar to Degrafa but better integrated into Flex and the Flash Player 10.
In fact, Adobe has added the FXG file format export capability to the products tools such as PhotoShop, Illustrator, Firework and later on Flash (hopefully J ).

Let’s look at the HTML/CSS and server side programming paradigm;
there are programmers and designers.

• Front end developers (and sometimes designers) – are responsible for the
  graphic, HTML, CSS
• Back end developers – building the server side scripts and using the skins
  the designer created in HTML and CSS to give the application a “face”.

Flex will allow designers/front end developers to own the design and skins while the programmers can build the functionality of the application. This is a hugh step adobe is taking and is very consistent with other projects such as the adobe  open screen project where eventually flex application can be built cross platform for Web (Flex ), mobile (Flash Lite) and desktop (AIR).

I created this tutorial to help you explore Flex 4 SDK before it’s out and to see some of the new features Flex has to offer. I am sure you will be impressed!

Installing Flex 4.0 SDK in Eclipse IDE

Download Flex 4 SDK

1. Download the SDK – Navigate to the following URL:
   http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex +4
   and unzip the SDK to here: C:/Program Files/Adobe/Flex Builder 3 Plug-in/sdks/4.0.0
2. Add a new Flex SDK – Window -> Preference -> Flex -> Installed Flex SDKs -> Add

   Fill in the following information:

   Flex SDK Location: C:/Program Files/Adobe/Flex Builder 3 Plug-in/sdks/4.0.0

   Flex SDK name: Flex 4.0

   
   

Install Subversion:

1. Download subversion - http://subversion.tigris.org/ , I used the eclipse plug-in.

   Download the plug-in zip folder: http://subclipse.tigris.org/

2. Add the plug-in – Help -> Software Updates -> Find and Install ->
   Search for new features to install -> New Archive Site ->
   site-1.0.6.zip -> Ok -> Finish. Restart Eclipse (see figure below).
   
3. Window -> Open prospective -> Other -> SVN Repository -> ok
   
4. Once view is open select the Add new SVN Repository icon.
5. Url: http://opensource.adobe.com/svn/opensource/flex /sdk/trunk/frameworks/projects/flex4/
6. Right click the project and select Checkout.
   
7. Next we need to download the source code of the project so we can map the Flex 4 swc to the location of the source so we will be able to “step into” the code and see the actual code.
   Select: Check out as a project configured using the New Project Wizard.

   Next set it as Flex builder, Flex project name the project Flex4Src and complete the project. From now on you can always reference the swc to the src folder and you can step into the code and see the source code.
   
   

8. Right click the project -> Properties -> Library path ->
   Flex 4.0 -> flex4.swc -> Source attachment ->
   project path/Flex4Src/src click ok and you are all done!
   

Install Flash version 10.0

Flex 4 needs Flash player installed, navigate to the following URL:

http://www.adobe.com/support/flashplayer/downloads.html .

Next choose the debugger version for Flash player 10
based on your platform (Mac, PC) and browser (Active X or Mozilla).

Creating your first Flex 4 project

Create a new project, just as any project: File -> New -> Flex Project after project is created right click the project and set the SDK to Flex 4.0 and change the flash player version to 10.0 and you are done.

Now that the Flex 4 SDK is installed create a test application to ensure that the SWC
and source folder are mapped correctly.

To test that the Flex 4 is working correctly run the following script:

1. <Application xmlns= “http://ns.adobe.com/mxml/2009″ xmlns:mx= “http://ns.adobe.com/mxml/2009″ >
3. <Group>
4. <Rect width=“100″ height= “100″ >
5. <fill>
6. <SolidColor color=“white” />
7. </fill>
8. </Rect>
9. </Group>
11. </Application>
    

Originally By elad.ny