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.