Flex Examples

The following example shows you how you can create and compile a simple Flex application using the latest version (build 4.0.0.3584) of the beta Flex Gumbo SDK.

If you haven’t downloaded and installed a Flex Gumbo SDK into Flex Builder 3 before, check out the following entries: “Downloading and installing Flex SDK builds from opensource.adobe.com” and “Using the beta Gumbo SDK in Flex Builder 3″. For other Gumbo entries, see http://blog.flexexamples.com/tag/gumbo/.

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/2008/10/11/compiling-a-simple-flex-application-using-the-flex-gumbo-sdk/ -->
<FxApplication name="FXApplication_test"
        xmlns="http://ns.adobe.com/mxml/2009">
    <layout>
        <BasicLayout />
    </layout>

    <HGroup id="hGroup" left="10" top="10">
        <FxButton id="fxButton"
                label="I'm a Gumbo Button, FxButton" />
        <Button id="mxButton"
                label="I'm a Halo Button, mx:Button" />
    </HGroup>

</FxApplication>

View source is enabled in the following example.

If you want to use the “mx” namespace for the older Halo tags (for example, <mx:Button/> instead of <Button/>), simply define a second XML namespace which points to the same URL, “http://ns.adobe.com/mxml/2009″, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/11/compiling-a-simple-flex-application-using-the-flex-gumbo-sdk/ -->
<FxApplication name="FXApplication_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        xmlns:mx="http://ns.adobe.com/mxml/2009">
    <layout>
        <BasicLayout />
    </layout>

    <HGroup id="hGroup" left="10" top="10">
        <FxButton id="fxButton"
                label="I’m a Gumbo Button, FxButton" />
        <mx:Button id="mxButton"
                label="I’m a Halo Button, mx:Button" />
    </HGroup>

</FxApplication>

You’ll notice that a few things have changed from Flex 3, and from earlier versions of the Flex Gumbo SDKs.

1. Instead of using the <mx:Application/> tag, you use the <FxApplication/> tag, plus, we define a newer XML namespace URL.
2. Instead of declaring the layout property inline in the <Application> tag, as seen in earlier versions of Flex and the Flex Gumbo beta, the layout property is now defined using an MXML tag, where we can specify <BasicLayout/>, <VerticalLayout/>, or <HorizontalLayout/> (which are similar to “absolute”, “vertical”, or “horizontal” layouts in earlier releases of Flex).
3. You can align controls or containers vertically or horizontally using the <VGroup/> or <HGroup/> tags instead of using the <VBox/> or <HBox/> tags, respectively.
4. In earlier versions of the Flex Gumbo SDK the Gumbo Button control used the flex.component.Button class. This class (along with everything else in the flex.* packages) have been renamed and moved into the mx.* packages. The Gumbo FxButton control now uses the mx.components.FxButton class and has been renamed “FxButton” (to avoid ambiguity with the mx.controls.Button class).

For more information on Flex Gumbo, as well as milestones and various documents and specifications, see http://opensource.adobe.com/wiki/display/flexsdk/Gumbo/.

Happy Flexing!

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.