The following example shows how you can compile your Flex 4 application and specify the Wireframe theme by setting the theme compiler flag to ${flexlib}/themes/Wireframe/wireframe.swc.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/21/using-the-wireframe-theme-with-spark-controls-in-flex-gumbo/ -->
<s:Application name="Spark_wireframe_theme_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:RichText fontWeight="bold" x="10" y="10">
        <s:text>-theme+=$\{flexlib\}/themes/Wireframe/wireframe.swc</s:text>
    </s:RichText>
 
    <s:Panel title="Spark Panel title"
            horizontalCenter="0"
            verticalCenter="0">
        <s:VGroup left="10" right="10" top="10" bottom="10">
            <s:Button label="Spark Button label" />
            <s:ToggleButton label="Spark ToggleButton label" selected="true" />
            <s:CheckBox label="Spark CheckBox label" />
            <s:RadioButton label="Spark RadioButton label" />
            <s:TextArea text="Spark TextArea text" />
            <s:TextInput text="Spark TextInput text" />
        </s:VGroup>
    </s:Panel>
 
</s:Application>

View source is enabled in the following example.

You can also set the Wireframe theme using the project properties dialog, and selecting a theme, as seen in the following screenshot:

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 with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

2 Responses to Using the wireframe theme with Spark controls in Flex 4

  1. Fuad Kamal says:

    How about just setting the background image of the application? backgroundImage is no longer a style (nor a property) of Application – does this have to be set from a skin, now? Can you provide an example?

  2. Peter deHaan says:

    Fuad Kamal,

    For an example of setting a background image fill on an FxApplication tag, see “Setting a background image on an FxApplication in Flex Gumbo”.

    Yes, the easiest way is to create a custom skin and set the skinClass style.

    Peter

Leave a Reply

Your email address will not be published.

You may 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