Using the beta Flex 4 SDK in Flex Builder 3

by Peter deHaan on August 2, 2008

in Flex SDK, Nightly Builds, beta

In a previous entry, “Downloading and installing Flex SDK builds from opensource.adobe.com”, we saw how to download and install nightly builds of the Flex 3 SDK into Flex Builder 3.
Setting up the beta Flex 4 SDK has a couple little “gotchas” which can be a little tricky.

  1. Download the latest Flex 4 SDK nightly build from opensource.adobe.com and extract the files in the .ZIP archive to your hard drive.
  2. Follow steps 4 through 6 in the “Downloading and installing Flex SDK builds from opensource.adobe.com” entry to add the Flex SDK build to Flex Builder.
  3. Create a new Flex project in Flex Builder 3.
  4. Select Project > Properties in Flex Builder’s main menu to launch the Project Properties dialog box. Select Flex Compiler from the left menu, click the Use a specific SDK radio button, and select the Flex 4 SDK you added in the previous step.
  5. In the HTML wrapper section of the Flex Compiler settings dialog, set the required Flash Player version to 10.0.0 (see Figure 1). Click OK to close this dialog box.

Flex Builder Project Properties dialog box

Figure 1. Flex Builder Project Properties dialog box.

If you forget to change the Flash Player detection to Flash Player 10, you may see the following compiler errors in your Flex Builder Problems tab:
1046: Type was not found or was not a compile-time constant: ContentElement.
1046: Type was not found or was not a compile-time constant: ElementFormat.
1046: Type was not found or was not a compile-time constant: FontMetrics.
1046: Type was not found or was not a compile-time constant: GroupElement.
1046: Type was not found or was not a compile-time constant: TextElement.
1046: Type was not found or was not a compile-time constant: TextLine.

If you haven’t already installed the Flash Player 10 beta yet, you can find the various installers in the downloaded SDK’s /runtimes/player/10/{OS}/ directory.

Now that you have the Flex 4 SDK and Flash Player 10 installed, now it’s time to write a simple test file using the latest Flex SDK.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/02/using-the-beta-gumbo-sdk-in-flex-builder-3/ -->
<s:Application name="Gumbo_SDK_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <s:Group id="group"
            horizontalCenter="0" verticalCenter="0">
        <s:Rect id="rect"
                width="120" height="60">
            <s:fill>
                <s:SolidColor color="red" alpha="0.2" />
            </s:fill>
            <s:stroke>
                <s:SolidColorStroke color="black" weight="4" />
            </s:stroke>
        </s:Rect>
        <s:RichText id="textGraphic"
                    color="#000000"
                    fontFamily="Arial"
                    fontWeight="bold"
                    horizontalCenter="0" verticalCenter="0">
            <s:content>{Capabilities.version}</s:content>
        </s:RichText>
    </s:Group>
 
    <mx:Label text="I'm a Halo Label component!" />
 
</s:Application>

View source is enabled in the following example.

{ 38 comments… read them below or add one }

1 akyo August 4, 2008 at 8:47 pm

Thanks~!

Reply

2 Oluwaseun August 5, 2008 at 9:34 am

After, we changer to flash player 10, I’m wondering why it is asking to install flash player 9.

Would you want to tell me why this happened?

Reply

3 Renaun Erickson August 6, 2008 at 4:23 pm

Thanks, just had the problem with the Flash Player Detection and compiler errors.

Reply

4 simon August 9, 2008 at 7:27 pm

Am working with Gumbo and getting this error “An unknown item is declared as the root of your MXML document. Switch to source mode to correct it”

The application runs fine but i cannot use the designer.

Reply

5 simon August 9, 2008 at 7:30 pm

Am also showing this warning:

Design mode: Cannot load text_model.swc (reason: ERROR: Load Verify). It may require classes (such as Adobe AIR components) that are not supported by design mode.

Does anyone have any idea what it is?

Reply

6 lakshmikanthreddy August 18, 2008 at 11:31 pm

hi simon ,

even i am getting the same error , the application is running fine with Gumbo SDK but it is unable to open in the Design mode , can anyone help me out .

Reply

7 looptroop August 21, 2008 at 3:43 am

and i’m getting the same error ((((

Reply

8 peterd August 21, 2008 at 7:06 am

I get the same error in Flex Builder 3.0.1 also (“An unknown item is declared as the root of your MXML document. Switch to source mode to correct it.”)

Can one of you file this in the Flex Bugbase, http://bugs.adobe.com/flex/, and post the bug number here so a few of us can vote on it.

Thanks,
Peter

Reply

9 Alex C August 22, 2008 at 11:27 am

Thanks for the great info, as always! Does anyone know if the latest SDK builds fix the issue with the FileUpload, where it had a malformed post that caused this error on Tomcat’s error log: “Multipart: final boundary missing”?

Reply

10 peterd August 22, 2008 at 11:50 am

Alex C,

I’m not aware of that specific bug, but if it is FileReference related, it would be a Flash Player issue, not a Flex SDK issue.
If the problem still occurs with the latest public version of Flash Player 10 beta, can you file a bug at http://bugs.adobe.com/flashplayer/ if a bug isn’t already filed?

Thanks,
Peter

PS: if you post the bug number here, a few of us can vote on the issue.

Reply

11 Alex C August 22, 2008 at 1:41 pm

Hi, peterd. Thanks for your reply. Here’s the bug on the Flash bug site: https://bugs.adobe.com/jira/browse/FP-292

However, it’s marked as “unresolved” and doesn’t seem to be a high priority. A lot of people have run into the issue; the only solution on an Apache/Tomcat server is to turn off the mod_security on the app — which then opens you up to attacks.

I posted about it on the Flex forum today, where you can view the full details of the problem and its insecure solution: http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?catid=585&threadid=1387645

Reply

12 Alex C August 22, 2008 at 1:58 pm

BTW, I’m using Flash 10 beta on my system and the problem occurs with that as well.

Reply

13 Alex C August 25, 2008 at 8:48 am

If everyone could vote on the Flash bug page here, we could see some faster resolution to the issue discussed above: https://bugs.adobe.com/jira/browse/FP-292

Thanks :-)

Reply

14 Alex.B October 17, 2008 at 7:53 am

Hi Peter,
I’m trying to use the FileReference API in FB3 with new Gumbo, but I don’t able!!
I’m looking for the solution in several forums but there isn’t anything about this problem.
Maybe my problem is stupid, but have you any suggests for me?

P.S.
I have Flex Builder 3 with SDK 4.0.0.3699
and Flash Player 10.

Reply

15 peterd October 17, 2008 at 10:42 am

Alex.B,

Good timing! I just posted an example of FileReference in Gumbo the other day in the comments. Check out “Displaying XML data in a DataGrid”.

And remember to change your SDK version to 4.0.0.3699, and set your Flash Player detection version to 10.0.0.

Peter

Reply

16 GrayP October 23, 2008 at 4:59 am

Hey there, thanks for all the info. I’ve got an issue getting the example to compile and I’ve followed all instructions.

I’ve got FP10debug version installed, SDK 4.0.0.3827, and compiler settings for this set to the above screenshot. Under Flex build path/Library path, Flex4 is there with all the swcs.

Unfortunatley Flex Builder flags an error for this line”
<mx:Label text=”I’m a Halo Label component!” />

Could not resolve <mx:Label> to a component implementation.

Any ideas please? Thanks

Reply

17 peterd October 23, 2008 at 7:00 am

GrayP,

The example is probably just out of date with the API naming changes.

Try this instead:

<FxApplication xmlns="http://ns.adobe.com/mxml/2009"
        xmlns:mx="http://ns.adobe.com/mxml/2009">
...
</FxApplication>

Peter

Reply

18 GrayP October 27, 2008 at 2:16 am

Hi Peter,

Thanks for the reply, unfortunately that’s not it. I tried on a different machine over the weekend but got the same issue. Am I missing out something?? All I’m doing is:-
1. Download & install gumbo sdk.
2. Create new project, under Project Properties>Flex Compiler, set SDK to Gumbo, set target Flash player = 10.
3. That should be it. However I get the error message I mentioned above, also using Adobe’s test script at the bottom of this page:-
http://opensource.adobe.com/wiki/display/flexsdk/Gumbo+Application?showComments=false
I also get a similar problem,
Could not resolve to a component implementation.

Seems to be an issue with the mx namespace, after xmlns:mx=”library:adobe/flex/halo”

I’ve tried this on OSX and WinXP, same result. I have also written a non-MXML application that uses SDK 4.0 in order to try out the new Flash 10 features, and that is fine, no problem.

I find it odd I seem to be the only one with this issue :-(

Reply

19 GrayP October 27, 2008 at 7:12 am

Aah, I have just come across this post:
http://blog.simb.net/2008/10/13/gumbo-namespace-changes-revisited/

The small code snippet there has a mix of Halo and Gumbo buttons, and compiles fine for me. Perhaps my Gumbo build – 4.0.0.3827 – is newer, and contains this change to namespaces…?

Reply

20 peterd October 27, 2008 at 8:28 am

GrayP,

Correct, the xmlns:mx="library:adobe/flex/halo is old and would require and older Flex Gumbo SDK to compile. If you are using a recent Flex Gumbo SDK, you’d either need to import the 2009 namespace twice (once with the “mx” prefix), or else just use <Label/> instead of <mx:Label/>.

The example on the opensource.adobe.com site is old and should be corrected for the latest Flex Gumbo SDK.

Peter

Reply

21 GrayP October 27, 2008 at 8:32 am

Thanks for clearing that up Peter.

Cheers.

Reply

22 peterd October 27, 2008 at 8:43 am

GrayP,

I also updated the example code above (inline, I didn’t republish ZIPs and SWFs), so hopefully that will help.
After re-reading the example, it is important to note that with the latest Flex Gumbo SDK, you do not need to import the “mx” namespace to use the Halo components. You can use the default namespace and use the Halo Label control by typing <Label/>. If you want to use the “mx” namespace for any reason (you just like the way it looks), you can add the mx namespace and use the same namespace URL (http://ns.adobe.com/mxml/2009 — see my previous comment for an example), but the 2009 namespace contains both the Gumbo and Halo components.

Not sure if that made it any clearer, but yeah. Basically, both of these should work and just depends on your personal preference.
Default 2009 namespace:

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://ns.adobe.com/mxml/2009">
    <FxButton label="Gumbo Button"/>
    <Button label="Halo Button" />
</Application>

Default 2009 namespace and mx namespace:

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://ns.adobe.com/mxml/2009"
        xmlns:mx="http://ns.adobe.com/mxml/2009">
    <FxButton label="Gumbo Button"/>
    <mx:Button label="Halo Button" />
</Application>

Peter

Reply

23 saul October 28, 2008 at 6:57 am

Peter Thanks Yet Again!

Anyone new to the world of flex who visits this page follow the instructions, its easy and you will be happy. I didn’t realise how easy and important it is to be updating the sdk’s.

unloadAndStop() and FP10….

….SAVED MY LIFE. TY!

Now we can build multiple swf based apps easily, without the nightmare that was FP9 and AS3 combo not garbaging the unloaded swf.

I’m like so happy i want to kill myself right now. This is ecstacy!

Reply

24 Barry November 6, 2008 at 6:32 am

Hi.

After reading through the comments above and trying out various things I too still get the error:

‘This component is based on FxApplication, which is not a visual component. Switch to source mode to edit it’

I am using Flex Builder 3.0.194161 and Flex 4 SDK 4.0.0.4025. All I want to do is to use DESIGN view. Any suggestions?

Thanks

Barry.

Reply

25 Alan Yu November 27, 2008 at 6:42 pm

If you want to use Flex 4 SDK with DESIGN mode ,you should update your Flex Builder to 3.2.

Reply

26 peterd November 28, 2008 at 9:18 pm

For instructions on upgrading your Flex Builder from 3.0.x to 3.0.2 (with Flex SDK 3.2), check out the following post: “Upgrading to Flex Builder 3.0.2″

Peter

Reply

27 Peter December 10, 2008 at 2:08 am

Hello,

I have installed gumbo and now the design mode is inactiv in flex

Have you any idea about this trouble and how to repear it?

Best Regards

Reply

28 Dave January 1, 2009 at 7:10 pm

I also just installed Gumbo for the first time. Flex 3.0.2 Dec 24 nightly SDK 4.0 and also tried the milestone release Aug 27.

Tried it on two different computers, same problem, no design view with the new namespace.

I’m guessing Design view does not work at all, can someone confirm please.

Thanks

Reply

29 suresh February 6, 2009 at 12:13 am

Dear Peter,

From last nigth for about 4-5 hours i spend in working FileReference_load_test in your example,
i upgraded to flex 3.02 version having flex_sdk_4.0.0.4845 and flash player is set to 10.0.0
but i am not at all able to compile, I get the same error in Flex Builder 3.0.2 also (”An unknown item is declared as the root of your MXML document. Switch to source mode to correct it.”)

I read all your comments could not solve it, i am very newbie and using your site to learn a lot, thanks a lot for this amazing help over blogs.

Can you please help me in this issue, i am very basic coder. Just now started learning.

My need is to browse the jpg file preview it and add it.
http://www.mafunet.com/crop/ i saw the above example but there is no souce code :-)
i need to crop the image exactly to the same size and save it before any one uploads to the server

Reply

30 Justin Buser March 29, 2009 at 1:56 pm

I’m curious why, in all these examples, both the default and mx namespaces are declared with the same value… There’s no reason to use 2 that I can think of, personally I’ve always just used the default. The first thing I’ve always done when creating a new mxml component is change <mx:Component xmlns:mx=”http://www.adobe.com/2006/mxml” > to <Component xmlns=”http://www.adobe.com/2006/mxml” /> just for the sake of saving keystrokes.

I guess my point is that, when, using the example above with both namespaces,
<FxButton label=”Gumbo Button”/>
<mx:Button label=”Halo Button”/>
would be exactly the same as:
<mx:FxButton label=”Gumbo Button”/>
<Button label=”Halo Button”/>

what’s the point in using both? I guess the fact that the majority of the discussion in this topic is pertaining to the design view, which I personally have never used, may be in some way relevant. However, as far as straight coding is concerned I’d recommend just using one namespace or the other, just to keep yourself sane.

Reply

31 Peter deHaan March 29, 2009 at 8:40 pm

Justin Buser,
In this example there is no reason why you would need to declare two namespaces which which resolve to the same URL (unless you explicitly wanted to mx: prefix all your Halo controls, for some reason).

But the SDK recently underwent a big rename (see the “Dropping the Fx Prefix” page on the opensource.adobe.com site for more details), so all these old Gumbo examples will ultimately be rewritten so they’ll compile with the latest nightly Flex Gumbo SDKs).

Peter

Reply

32 dev.my June 19, 2009 at 4:58 am

How to upgrade from a nightly builder version to latest nightly builder version?

Reply

33 Peter deHaan June 19, 2009 at 6:52 am

dev.my,

You can download nightly versions of the Flex 3 SDK and Flex 4 SDK from the Adobe Open Source site at http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+3 and http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

You can download the latest trial version of Flash Builder 4 (formerly Flex Builder) from the Adobe Labs site at http://labs.adobe.com/technologies/flashbuilder4/, although nightly versions of Builder are not available. And, if you have a valid Flex Builder 3 license, you can watch http://www.adobe.com/go/flashbuilderextension to request a serial number to extend the Flash Builder 4 trial period.

Peter

Reply

34 Rashmi September 11, 2009 at 6:42 am

hey, i m also facing some problems stated by some of you,
My problem is,
Could not resolve to a component implementation.
Please help me
I m using Flex gumbo sdk 4.0.0.7219 and flash player 10.

Reply

35 Peter deHaan September 11, 2009 at 7:10 am

@Rashmi,

I updated the example above to work in newer Flex 4 builds. I tested it w/ Flex SDK 4.0.0.10008, but it should work on 4.0.0.7219 also.

Peter

Reply

36 Rashmi September 14, 2009 at 12:03 am

i tried ur code but i m still facing same problem.
and error is at “xmlns:mx=”http://ns.adobe.com/mxml/2009″”
For this only i m getting error as,
Could not resolve “Applictaion” to a component implementation.
Are there any other settings for project properties?

Reply

37 Peter deHaan September 14, 2009 at 6:47 am

@Rashmi,

That line isn’t in my example. It may have been in an earlier, obsolete comment. What happens when you run this code using Flex 4.0.0.10008 or later?

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/02/using-the-beta-gumbo-sdk-in-flex-builder-3/ -->
<s:Application name="Gumbo_SDK_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <s:Group id="group"
            horizontalCenter="0" verticalCenter="0">
        <s:Rect id="rect"
                width="120" height="60">
            <s:fill>
                <s:SolidColor color="red" alpha="0.2" />
            </s:fill>
            <s:stroke>
                <s:SolidColorStroke color="black" weight="4" />
            </s:stroke>
        </s:Rect>
        <s:RichText id="textGraphic"
                    color="#000000"
                    fontFamily="Arial"
                    fontWeight="bold"
                    horizontalCenter="0" verticalCenter="0">
            <s:content>{Capabilities.version}</s:content>
        </s:RichText>
    </s:Group>
 
    <mx:Label text="I'm a Halo Label component!" />
 
</s:Application>

Peter

Reply

38 pankaj October 7, 2009 at 10:55 pm

I am creating bar chart In flex 3 having Y axis value “<1 yr” in xml file but it is not displating whereas “>1 yr” is comming perfectly.
Can anybody face this problem.
Please help me out.
Thanks

Reply

Leave a Comment

Sorry, this blog is terrible at eating HTML comments.
If you're pasting any HTML/XML/MXML code, you need to convert your < characters to &lt; and your > characters to &gt; .

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree

Previous post:

Next post: