Flex 4.0 (Gumbo) tutorial setting workarea and using Firework CS4 and Flex 4 to build the iPhone

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

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 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:

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 -> CVS Repository -> ok
Once view is open select the Add new CVS 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>

Install Fireworks CS4 Beta

Download the beta version from here:
http://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_fireworkscs4. Install Firework CS4 using the default setting.

I will be using the iPhone GUI provided from this post: http://www.teehanlax.com/blog/?p=447
Open the iPhone_GUI.psd in Firework and choose the elements you want to use and do the following: Command -> Export to FXG

That command will create the FXG file to be used in Flex 4 and the images associated with the FXG file. We can now start building the component.

Fireworks CS4 generated the FXG code automatically sliced all the layers and placed them in an assests folder, see the code generated below:


<Graphic version="1.0" xmlns="http://ns.adobe.com/fxg/2008" xmlns:fw="http://ns.adobe.com/fxg/2008/fireworks"  viewHeight= "1141" viewWidth= "1790">
	<Library>
	</Library>

	<Group id="Page 1" fw:type="page">
		<Group id="State 1" fw:type="state">
			<Group id="Layer 1" fw:type="layer">
				<BitmapGraphic source="@Embed('/Fwks.assests/Image_0.png')" x="781" y="694" width="450" height="27">
				</BitmapGraphic>
				<BitmapGraphic source="@Embed('/Fwks.assests/Image_1.png')" x="810" y="-15" width="389" height="719">
				</BitmapGraphic>
						<BitmapGraphic source="@Embed('/Fwks.assests/Image_2.png')" x="846" y="105">
						</BitmapGraphic>
						<BitmapGraphic source="@Embed('/Fwks.assests/Image_3.png')" x="809" y="698" width="394" height="94">
						</BitmapGraphic>
						<BitmapGraphic source="@Embed('/Fwks.assests/Image_4.png')" x="846" y="106" width="320" height="480">
						</BitmapGraphic>
						<Group maskType='alpha'>
							<mask>
								<Group>
						<BitmapGraphic source="@Embed('/Fwks.assests/Image_5.png')" x="-553" y="-343" width="1866" height="1364">
						</BitmapGraphic>
								</Group>
							</mask>
							<BitmapGraphic source="@Embed('/Fwks.assests/Image_6.png')" x="745" y="107" width="483" height="483">
							</BitmapGraphic>
						</Group>
						<BitmapGraphic source="@Embed('/Fwks.assests/Image_7.png')" x="846" y="125" width="320" height="461">
						</BitmapGraphic>
								<BitmapGraphic source="@Embed('/Fwks.assests/Image_8.png')" x="955" y="140">
								</BitmapGraphic>
				<BitmapGraphic source="@Embed('/Fwks.assests/Image_9.png')" x="944" y="191">
				</BitmapGraphic>
				<BitmapGraphic source="@Embed('/Fwks.assests/Image_10.png')" x="867" y="512" width="279" height="51">
				</BitmapGraphic>
				<BitmapGraphic source="@Embed('/Fwks.assests/Image_11.png')" x="866" y="511" width="281" height="53">
				</BitmapGraphic>
				<Group maskType='alpha'>
					<mask>
						<Group>
				<BitmapGraphic source="@Embed('/Fwks.assests/Image_12.png')" x="-553" y="-343" width="1866" height="1364">
				</BitmapGraphic>
						</Group>
					</mask>
					<TextGraphic x="967" y="524.124267578125" width="143" height="30" kerning="false" blendMode="normal" alpha="1" visible="true">
						<content>
							<p fontFamily="ArialMT" fontSize="22" fontStyle="normal" fontWeight="normal" lineHeight="100%" tracking="0" textIndent="0" marginLeft="0" marginRight="0" textDecoration ="none" color="#ffffff" textAlign="left" direction="ltr">slide to unlock
							</p>
						</content>
					</TextGraphic>
				</Group>
						<BitmapGraphic source="@Embed('/Fwks.assests/Image_13.png')" x="869.5" y="515.25">
						</BitmapGraphic>
								<BitmapGraphic source="@Embed('/Fwks.assests/Image_14.png')" x="886.9998779296875" y="526.7500610351562">
								</BitmapGraphic>
								<BitmapGraphic source="@Embed('/Fwks.assests/Image_15.png')" x="947" y="105" width="219" height="188">
								</BitmapGraphic>
							</Group>
						</Group>
					</Group>
</Graphic>

Creating the iPhone Component

Once you have to FXG code you can start building the components, states and code to make your GUI work.

Basic example can be seen here:
http://elromdesign.com/blog/Flex/iphone/iphonegui.html

Shashank and I are presenting at MAX unconference, from 9:30-10:30AM on Wednesday November 19th, so we will show you how to create the application and use Mashups to actually use the phone.

We also going to show you some cool examples from our book and provide code source, so don’t miss our presentation. Looking forward, see you there…

3 Responses to “Flex 4.0 (Gumbo) tutorial setting workarea and using Firework CS4 and Flex 4 to build the iPhone”

Feed for this Entry Trackback Address View blog reactions

1 John Harding Nov 5th, 2008 at 7:54 am

Hey there… I have been waiting for a tutorial like this. I seem to be getting lost about here:
“Next we need to download the source code of the project so we can map the Flex 4 swc to the location of the so”

Could you elaborate a little? :/
2 Anonymous Nov 10th, 2008 at 4:07 pm

WOW, and WOW again.

Thank you very much. I really appreciate this material.

I am ColdFusion Developer since 2001. I start with Flex last Year and
this two bodies together rocks.

I will start today to study.

Thanks Elad
3 jadd Nov 24th, 2008 at 3:27 pm

hello,
of course first of all you must have the Flex 3 plugin installed….

Flash Rich Experience Blog