Setting the background image resize mode on a Spark Border container in Flex 4

By On September 11, 2009 · 12 Comments

The following example shows how you can set the background image resize mode on a Spark Border container in Flex 4 by setting the backgroundImageResizeMode style.

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 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/09/11/setting-the-background-image-resize-mode-on-a-spark-border-container-in-flex-4/ -->
<s:Application name="Spark_Border_backgroundImageResizeMode_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:controlBarContent>
        <mx:Form paddingTop="0" paddingBottom="0">
            <mx:FormItem label="backgroundImageResizeMode:">
                <s:DropDownList id="dropDownList" requireSelection="true">
                    <s:dataProvider>
                        <s:ArrayList source="[scale,noScale,repeat]" />
                    </s:dataProvider>
                </s:DropDownList>
            </mx:FormItem>
            <mx:FormItem label="cornerRadius:">
                <s:HSlider id="slider" minimum="0" maximum="50" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:Border id="brdr"
            backgroundImage="@Embed('assets/pattern_158.gif')"
            backgroundImageResizeMode="{dropDownList.selectedItem}"
            cornerRadius="{slider.value}"
            left="40" right="40" top="40" bottom="40">
        <s:Label id="sdkVer"
                fontSize="72"
                initialize="sdkVer.text = mx_internal::VERSION;"
                horizontalCenter="0" verticalCenter="0" />
    </s:Border>
 
</s:Application>

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.

Visit Authors Website →

  • Add Widgets (Content Sidebar)

    This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

Share
Facebook Twitter

12 Responses to Setting the background image resize mode on a Spark Border container in Flex 4

  1. bobby says:
    September 14, 2009 at 9:20 am

    I got this error?
    Could not resolve to a component implementation. Test.mxml Test/src line 29 Flex Problem

    Can anybody help? Tia

  2. Lance says:
    September 15, 2009 at 1:44 am

    They just released this in the svn trunk, try downloading it there.

  3. bobby says:
    September 16, 2009 at 10:52 am

    oh.. got it thx mate

  4. Jeannie says:
    September 17, 2009 at 8:13 am

    I am receiving the same error. Could you tell me where to find the correct svn trunk to download?

  5. Jeannie says:
    September 17, 2009 at 4:46 pm

    I am working in 4.0.0.10339 …so I am stumped as to what is not correct then. I am new at Subersion and Ant. Do either of these need to be configured a certian way?

  6. Jeannie says:
    September 17, 2009 at 5:57 pm

    Hi Peter,

    I am so glad you are still with me and patient to reply.

    I have stillsvn.collba.net/repos/svn/trunk in my SVN Repository.
    I have the warning “cannot load spark.swc
    And when I try running it in my browser I get a series of errors beginning with:
    VerifyError: Error #1014: Class IVisualElement could not be found.

    • Peter deHaan says:
      September 17, 2009 at 6:33 pm

      @Jeannie,

      I don’t use SVN, I always just grab the ZIP files from http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4. I’d suggest using one of those builds (10008 or newer). This way we can try and eliminate an SVN/Ant/build problem.

      I wouldn’t worry about those runtime errors (yet) as it seems like the “cannot load spark.swc” is a more serious issue. And hopefully one that won’t happen if you use a precompiled nightly build rather than trying to get the SVN build working.

      Peter

  7. David Marques says:
    September 18, 2009 at 11:33 am

    Nice, very nice…

  8. priya says:
    October 14, 2009 at 12:21 am

    very beautiful its ery lovely & fantastic

  9. Ram says:
    February 8, 2010 at 9:30 am

    FLEX 4 is awesome………..

    Thanks peter…..your blog has been very helpful all these years……..

    Regards
    Ram