Compiling a simple Flex application using the Flex 4 SDK

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 4 SDK.

If you haven’t downloaded and installed a Flex 4 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 Flex 4 SDK in Flex Builder 3″. For other Flex 4 entries, see http://blog.flexexamples.com/tag/gumbo/.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 beta, check out the Adobe Flash Builder 4 page on the Adobe Labs site. To download the latest build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4. For instructions on using the beta Flex 4 SDK in Flex Builder 3, see "Using the beta Flex 4 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/ -->
<s:Application name="Spark_Application_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>
 
    <s:HGroup id="hGroup" left="10" top="10">
        <s:Button id="fxButton"
                label="I'm a Spark Button, s:Button" />
        <mx:Button id="mxButton"
                label="I'm a Halo Button, mx:Button" />
    </s:HGroup>
 
</s:Application>

View source is enabled in the following example.

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

1. Instead of using the <mx:Application/> tag, you can use the <s:Application/> tag, plus, we define a couple newer XML namespace URLs.
2. Instead of declaring the layout property inline in the <Application> tag, as seen in earlier versions of Flex and the Flex 4 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 Spark <VGroup/> or <HGroup/> tags instead of using the Halo <VBox/> or <HBox/> tags, respectively.
4. In earlier versions of the Flex 4 SDK the Spark 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 spark.* packages. The Spark Button control now lives in the spark.components.* package.

For more information on Flex 4, 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 4 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 4 SDK.

Tagged as: Gumbo