nwebb

I’m using FlexBuilder as an Eclipse plugin and I wanted to update the SDK from 3.0 to 3.3. Should be a 5 minute job right ;)

It actually turned out to be more fiddly than it should have been; In part because the links on the Adobe site appear to have changed recently (so I couldn’t find the files that other bloggers had pointed to) but also, I simply didn’t find all the steps explained clearly on the Adobe site, so here is a quick run down that may help you:

1) First off you will need to download the updated Flex SDK. There are various versions of the SDK that you can download depending on whether you want stability or the most up-to-date code (stable builds vs nightly builds) but for this post I’ll assume you just want to update to the latest stable build (which at the time of writing is 3.3)

2) If you just update the SDK and are using visualisation components in your project (such as charting components) then you will see a bunch of errors when you try to compile; This is because these components are not included in the SDK. You need to get the Data Visualisation Components SDK too.

Once you have downloaded both zips, you’ll want to first unzip the Flex SDK (i.e. extract the folder to a location such as your desktop) and second, unzip the datavisulaization_sdk.zip in to the Flex SDK folder.

Just in case I lost you on the last part, I’m on a Windows machine (using jzip – an excellent altenative to Winzip) and I can merge the two downloads by right-clicking on the zip and doing something like this (should be an almost identical process regardless of which zip utility you are using):

I choose to extract the datavisualization_sdk.zip in to my Flex SDK folder, and the files are effectively merged.

Once I merged the two, I then moved the entire folder to C:\Program Files\Adobe\Flex Builder 3 Plug-in\sdks, the default location for FlexBuilder plugin SDKS on my Windows machine (this location was automatically set up for me when I initially installed the FlexBuilder SDK)

3) The final piece of the puzzle for me was to stop an error from occurring which was preventing me from viewing MXML files in Design View after I had updated to the latest SDK. When I tried to view an MXML file in Design View I got the following error: This component is based on Application, which is not a visual component. Switch to source mode to edit it. The technote relating to this error can be found here and you’ll need to download the latest Flex Builder Update if you encounter this error and need to fix it.

That should be all of the downloads you’ll need. Now we need to set everything up.

Ensure Eclipse/FB is closed, then install the FlexBuilder update. When that’s completed you need to associate the new SDK (i.e. the merged SDKs you downloaded earlier) with FlexBuilder. To do this, open up Eclipse and choose Window -> Preferences from the menu. Then choose Flex -> Installed Flex SDKs as shown in the image below:

Click the “Add” button, select the folder we ‘created’ earlier (if you’re on a windows machine it will be in the location specified earlier, i.e. C:\Program Files\Adobe\Flex Builder 3 Plug-in\sdks), give it a name for general reference, and press “OK”. The new SDK should now appear in the list of SDKs. You can now tick the checkbox next to the new SDK if you want it to be the default for new projects.

In order to update one of your current project to use the new SDK, right-click the main project folder (in the Flex Navigator panel) for the project you wish to target, then right-click and choose Properties -> Flex Compiler. The new SDK should be showing in the list of SDKs (see the combo at the top of this screen). Choose the new SDK and voila – your project should be using the updated SDK.

I’ve knocked together a basic Flex GoogleMap application and I’ll run over the basics in the next couple of posts.

Click the image below to view the app.

Google finally released an AS3 API for GoogleMaps (how cool is that). The Hello World example shown here is written in AS3 and intended to be compiled with the SDK's mxmlc compiler. Here is a quick code-conversion aimed squarely at Flex developers. Rather than extend Map we create an instance and add it as a child of a UIComponent instance.

You will need to register your own key and insert it in to the code at the appropriate point.

Igor Costa created a nice little GoogleMap Flex component here which encapsulates much of the essential stuff :]

Edit: Haha, I got so excited I threw this together before reading on ... there is actually a Flex example already on the Hello World page near the bottom. Note that they also take advantage of the resize event.