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 [b]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
).

[/b]

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

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

Add a new [b]Flex
SDK[/b]
– 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:

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

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).


Window -> Open prospective -> Other -> SVN Repository -> ok

Once view is open select the Add new SVN Repository
icon.

Url: http://opensource.adobe.com/svn/opensource/flex /sdk/trunk/frameworks/projects/flex4/

Right click the project and select Checkout.



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.



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:

<Application xmlns=
“http://ns.adobe.com/mxml/2009″
xmlns:mx=
“http://ns.adobe.com/mxml/2009″
>

<Group>

<Rect width=“100″
height=
“100″
>

<fill>

<SolidColor color=“white”
/>

</fill>

</Rect>

</Group>

</Application>

Originally By elad.ny