Looking at the world of media: from music to RIA.

Binding Source for Flex 4 in Flex Builder 3

August 28th, 2008 Posted in Flash Player, Flex Development, Rich Internet Applications, web 2.0

Flex LogoYesterday, I sat down and started playing around with trying to get the daily build of the Flex 4 SDK inside Flex Builder 3. After a bit of digging I finally got it all running and compiling as expected. I started off using Multimediacollege’s blog post on getting the SDK in place and I also used Sherif Abdou’s post to help troubleshoot a runtime error in the player.

My goal was to take these two posts, summarize them and show how to get the current source and check it in. Just as I sat down to write this all up, Mike Chambers comes in and scoops me. Figures. Anyway, I yelled at Mike via IM for stealing my thoughts and then mentioned that I figured out how to bind the Flex 4 source to the SWC in Flex Builder so that you can F3 / CTRL+Click you way to the code. So, I am going to post that aspect of the process and refer back to Mike’s straightforward post on how to get the SDK compiling and running.

Check Out The Source
The first step of linking the Flex 4 source to Flex Builder, is to download the code from Adobe’s Open Source website. Adobe and the Flex team are using Subversion to manage the code base so you will need to use SVN to checkout the source. I already had Subversion installed so I was able to jump right in and checkout the code. If you don’t have Subversion, or want to learn more about how Adobe has the SVN configured, then make sure to read how to check out from Adobe’s code base. If you have Subversion installed, then here is the short and sweet version.

First, I didn’t want to download the entire SDK SVN trunk, so I found the direct path the Flex 4 Framework code using their web browser interface:

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

Next, I picked a location to keep the source. I personally chose to put it inside the flex 4 SDK folder under a new subfolder called src. You can put this folder anywhere you want, I just chose this location on a whim. To get the source, I opened up my terminal, cd‘d to the new src folder and then ran the following command to download the source:

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

You don’t technically have to cd to the new folder but I hate having to fit it all in one command line. Whatever, I can do what I want! Once you run this command, Subversion will download all the ActionScript source for the framework into your new directory. The last step is to inform Flex Builder that you have source for it.

Get Flex Builder Into The Know
To do this, right click (CMD+Click) on your project in Flex Builder and choose Properties > Flex Build Path > Library Path. Expand the Flex 4 SDK tree and then expand Flex4.SWC so that you see the Source Attachment: option. Double click Source Attachment: and then browse to the folder that holds the source you just downloaded. Choose Okay, and there you have it, source is now bound to your SDK and you can F3 to your hearts content.

Setting SDK Source For Flex Builder

One thing to note, if you only use the default namespace, then hinting will not follow through in FB3. I recommend binding the gumbo library for this to work:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns="http://ns.adobe.com/mxml/2009"
	xmlns:mx="library:adobe/flex/halo" 
	xmlns:gumbo="library:adobe/flex/gumbo"
	layout="vertical">
 
	<gumbo:Button label="hello world" />
	<gumbo:Group>
		<gumbo:content>
			<gumbo:Ellipse width="30" height="30">
				<gumbo:fill>
					<mx:SolidColor color="#FF0000" />
				</gumbo:fill>
			</gumbo:Ellipse>
		</gumbo:content>
	</gumbo:Group>
</mx:Application>

This tells FB where to start looking for the source and enables it to open properly. If you know of a way to bind the namespace to the source, please let me know!