Using the new Fx prefix-less Flex Gumbo builds

The following example shows how you can use styles in a <Style/> block to style a Spark Button and TextInput control as well as a Halo Button and TextInput control.

To compile this example, you’ll need to download the nightly beta Flex Gumbo build 5873 (4.0.0.5873) or newer. The latest Gumbo SDK builds can be downloaded from the opensource.adobe.com site at http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on the “Fx” prefix removal and API changes, see the “Dropping the Fx Prefix” page on the Flex Gumbo opensource.adobe.com site.
For more information on the new CSS namespaces and styling in Flex Gumbo, see the “Styling Component Parts” page on the Flex Gumbo opensource.adobe.com site.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For more information on downloading and installing the Gumbo SDK into Flex Builder 3, see “Using the beta Gumbo SDK in Flex Builder 3”.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/04/02/using-the-new-fx-prefix-less-flex-gumbo-builds/ -->
<s:Application name="FxGumbo_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:layout>
        <s:BasicLayout />
    </s:layout>

    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";

        global {
            color: red;
            fontStyle: italic;
            fontWeight: bold;
        }

        s|Button {
            baseColor: haloOrange;
        }

        mx|Button {
            baseColor: haloGreen;
        }
    </fx:Style>

    <s:VGroup horizontalCenter="0" verticalCenter="0">
        <s:Button label="I'm a Spark Button" />
        <mx:Button label="I'm a Halo Button" />
        <mx:HRule width="100%" />
        <s:TextInput text="I'm a Spark TextInput" />
        <mx:TextInput text="I'm a Halo TextInput" />
    </s:VGroup>

    <s:RichEditableText id="sdkVer"
            editable="false"
            initialize="sdkVer.text = mx_internal::VERSION;"
            bottom="10"
            right="10" />

</s:Application>

View source is enabled in the following example.

This entry is based on a beta version of the Flex Gumbo SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex Gumbo SDK.

6 thoughts on “Using the new Fx prefix-less Flex Gumbo builds

  1. Besides the obvious SEO you could do something a little useful and post the compiled examples.

  2. Hi,
    I can compile your source code without any errors using the current SDK (4.0.0.5900). But all four components are displayed as Spark components (The two halo components are also Spark).
    Any ideas?
    Thanks

  3. Florian,

    Correct. The Halo components have new skins so they look the same as the Spark components. This allows you to mix and match Halo+Spark components in the same application and have a consistent look.

    Peter

  4. Help!

    I’m drownding in all this Name space upset…… I’m fairly new to Felx,
    and was just diving into trying out one of the 3D examples posted on this sight..

    See :
    http://blog.flexexamples.com/2008/10/25/incrementally-3d-rotating-objects-in-flex-using-the-fxrotate3d-in-flex/

    I got the example to work under the last “stable” Gumbo API, but as the name space shifted all around….I’m felling rather discouraged to figure out how to get the same example to compile under the latest beta, builds of the Gumbo API….. I relize that Name space issues are a real thing that best be gotten to a stable and well formed place…. Then this is sure feeling like rather turbulent sailing from my end. Can anyone help me with exactly what its going to take in terms of adjustment to get one of the existing 3D Flex programing examples up and running with the new name space changes….. this feels like just a bit much for a Flex newbi to be taking in all at once…. I will gladly return the favor, once I’m up to speed.

    -Peter Lindener

Comments are closed.