Setting the resize mode on a Spark BitmapImage object in Flex Gumbo

The following example shows how you can set the resize mode on a Flex Gumbo BitmapO,age object by setting the resizeMode property to one of the static constants in the BitmapImageResizeMode class.

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"?>
<s:Application 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:VerticalLayout />
    </s:layout>

    <fx:Script>
        <![CDATA[
            import mx.events.IndexChangedEvent;
            import spark.primitives.BitmapImageResizeMode;

            protected function dropDownList_selectionChanged(evt:IndexChangedEvent):void {
                bitmapImg.resizeMode = dropDownList.selectedItem;
            }
        ]]>
    </fx:Script>

    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <mx:Form styleName="plain">
            <mx:FormItem label="resizeMode:">
                <s:DropDownList id="dropDownList"
                        prompt="Please select a resize mode:"
                        selectionChanged="dropDownList_selectionChanged(event);">
                    <s:dataProvider>
                        <s:ArrayList>
                            <fx:String>{BitmapImageResizeMode.NORMAL}</fx:String>
                            <fx:String>{BitmapImageResizeMode.REPEAT}</fx:String>
                            <fx:String>{BitmapImageResizeMode.SCALE}</fx:String>
                        </s:ArrayList>
                    </s:dataProvider>
                </s:DropDownList>
            </mx:FormItem>
            <mx:FormItem label="percentWidth:">
                <s:HSlider id="sliderH"
                        minimum="10"
                        maximum="90"
                        liveDragging="true" />
            </mx:FormItem>
            <mx:FormItem label="percentHeight:">
                <s:HSlider id="sliderV"
                        minimum="10"
                        maximum="90"
                        liveDragging="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <s:Group width="100%" height="100%">
        <s:BitmapImage id="bitmapImg"
                source="@Embed('assets/fx_appicon-tn.gif')"
                percentWidth="{sliderH.value}"
                percentHeight="{sliderV.value}"
                horizontalCenter="0"
                verticalCenter="0" />
    </s:Group>

</s:Application>

Tagged as: Gumbo, resizeMode