Flex News , Links & Resources

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

Posted on: December 5, 2008

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-inHelp -> 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&#8243; xmlns:mx=http://ns.adobe.com/mxml/2009&#8243;>
  2. <Group>
  3. <Rect width=“100″ height=“100″>
  4. <fill>
  5. <SolidColor color=“white” />
  6. </fill>
  7. </Rect>
  8. </Group>
  9. </Application>
Originally By elad.ny
About these ads

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

thank you for this tutorial

Thank you so much.

Just a quick note, you seem to have accidentally written cvs instead of svn a couple of times which may confuse people as there is a cvs repo view already packaged with eclipse.

“# Window -> Open prospective -> Other -> CVS Repository -> ok
# Once view is open select the Add new CVS Repository icon.”

Thank You Justin Now i Have changed them 2 SVN.

Hi, is this the ordinary free Eclipse IDE or the paid version of Adobe Flex Builder?

How does one install Flex 4 on Linux Eclipse?

its a sad answer :(

adobe abandon linux users
most linux users are developers
gwt will come instide
google flavor is open source

there will be a good future after adobe.

Well, I just finished a small guide on different alternatives. :)

Yes, sadly Adobe has abandoned it’s Linux users, however, there are a few workarounds. The one I’m using is the “Flex Builder 4 Linux” hosted on Google code.
http://iqandreas.blogspot.com/2010/03/flexflash-builder-on-linux.html

Hope that helps,
Andreas

I just have downloaded eclipse framework, and surely i do not have in the window menu any Flex options. Probably you had earlier version of flex installed. So what to do if it is first version of flex sdk in eclipse??
Add a new Flex SDK – Window -> Preferences-> ???Flex ???-> Installed Flex SDKs -> Add

Hi, I’m having the same problem as northmantif.

No Flex4 in svn

In the title it’s about configuring the flex sdk in Eclipse.
But I wonder about which version of eclipse you used. I’ve downloaded Eclipse IDE for Java Developers, but in Window–>Preferences , I can’t find ‘Flex’ in the tree…could you tell me more about that?

Im experiencing the same problem, have you found a solution?

Hi,
Im having the same problem, is there a solution to this?

thanks
d

Hi,
i think it refers to the flex builder 3 (which is actually based on eclipse, taking all the advantages and adding the flex edit/build support). on a pure eclipse, downloaded from eclipse.org you won’t find this option.
currently i’m after the same problem and haven’t found an alternative yet

this is a tut, quite old tough http://www.darronschall.com/weblog/2005/08/setting-up-eclipse-for-flex.cfm with some hints how you can start

best regards
nas

I think there is no solutions..
If you take a look in the screenshots You can see that no generic eclipse IDE was used, but it’s Adobe declination.. : Flash Builder.

Once downloaded and unzipped, Flex 4 has several subfolders, including “framework” and “lib”: In one of those are certainly the folders to include in the eclipse “plug-in” folder. I have to make some tests..

Hi !
Nice tutorial !
Just the same question as above : where can we find the eclipse plugin that gives us the “flex” menu in preference ? Is it free ?
Thanks for your reply !
klem

Hey guys, I’m having the same problem, I found this though, and i’m going to give it a try.

http://www.adobe.com/support/documentation/en/flex/2/install.html

Hello,

In my Eclipse 3.5.1 in below sequence “Flex” Is not available.
Add a new Flex SDK – Window -> Preference -> Flex -> Installed Flex SDKs -> Add

Please let me know how it will be available, I am unable to run flex or see flex in eclipse 3.5.1

Thanks

Do we require flash player 10 if we use sdk 4.0 version.Can i use flash player 9 with sdk 4

Hi Kiran
yes Flash Player 10 is a must for flex 4 applications. Even some of flex 3.x sdks require flash player 10 if u use those particular classes of flash player 10 (ex: file reference in FP10) in flex 3 apps ..

Which Eclipse are you using I don’t have the option of flex under preferences what should I do?

Hi Arun
I couldn’t find “Flex” option in the Preferences window of Eclipse. I’m using Eclipse 3.5.2. Please explain more about that. I am unable to install Flex 4 SDK for this eclipse.

Hi there,

Thanks for the tutorial! Very well done!

For those looking for the “Flex” folder, you will likely find a “Flash Builder” option in the tree. Looks like around 3.5 they switched from calling it Flex to Flash. Under the Flash Builder option you will find the “Installed Flex SDK” option.

I did want to ask about this URL http://opensource.adobe.com/svn/opensource/flex/sdk/trunk/frameworks/projects/flex4/

It is a dead link. Any suggestions on where else I should look for the SVN repository?

Thank you for your time,
Shawn

Hi Shawn,

have a look at…
http://opensource.adobe.com/svn/opensource/flex/

Try this URL as a new SVN repository…

Good luck…

Ubi

Hi…..
In eclipse when I am clicking on “Window -> Preference ->” then Flex -> Installed Flex SDKs -> Add in not showing…..what should I do. Please help me out.

Thanks
suzan

Thanks for the information shared here. that was an interesting and informative. I had a good experience by participating in the Adobe DevSummit in 2009 and looking forward to attend Adobe Flash Platform Summit 2010 as well. AFPS 2010 is the single largest Flash Platform conference in India which features topics like Flash, Flex, Flash Platform, AIR 2.5, Andriod, RIA, LiveCycles, PHP and more. I found the information about the conference from adobesummit.com

[...] 7. Fire up eclipse, add flex 4 sdk (more info here) [...]

i don’t see step 2 “Add a new Flex SDK – Window -> Preference -> Flex -> Installed Flex SDKs -> Add”

Downloaded yesterday eclipse classic and Flex SDK 4.5.1 zip file, installed SVN and checkedout as in step 6, now in step 7 it doesnt have Flex project to select in wizard

it’s great this is free and open but it IS a pain in the ass to get it up and running

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog Visits

  • 215,583 hits

Categories

Im tweeting

See by Date

December 2008
M T W T F S S
« Nov   Jan »
1234567
891011121314
15161718192021
22232425262728
293031  

Flex Hackr

my Delicious Links

Follow

Get every new post delivered to your Inbox.