Repeating the background fill on a BitmapFill in Flex Gumbo

The following example shows how you can control the tiling of a bitmap fill on a Flex Gumbo Rect object by setting the Boolean repeat property on the BitmapFill object.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!--  -->
<Application name="BitmapFill_repeat_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <ApplicationControlBar dock="true">
        <Form styleName="plain">
            <FormItem label="repeat:">
                <CheckBox id="checkBox" selected="true" />
            </FormItem>
            <FormItem label="width:">
                <HSlider id="widthSlider"
                        minimum="100"
                        maximum="300"
                        value="300"
                        snapInterval="1"
                        tickInterval="50"
                        liveDragging="true" />
            </FormItem>
            <FormItem label="height:">
                <HSlider id="heightSlider"
                        minimum="100"
                        maximum="300"
                        value="200"
                        snapInterval="1"
                        tickInterval="50"
                        liveDragging="true" />
            </FormItem>
        </Form>
    </ApplicationControlBar>

    <Graphic>
        <Rect id="rect"
                width="{widthSlider.value}"
                height="{heightSlider.value}">
            <fill>
                <BitmapFill id="bitmapFill"
                        repeat="{checkBox.selected}"
                        source="@Embed('assets/fx_appicon-tn.gif')" />
            </fill>
        </Rect>
    </Graphic>

</Application>

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!--  -->
<Application name="BitmapFill_repeat_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <Script>
        <![CDATA[
            import mx.containers.ApplicationControlBar;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.controls.CheckBox;
            import mx.controls.HSlider;
            import mx.events.SliderEvent;
            import mx.graphics.BitmapFill;
            import mx.graphics.Graphic;
            import mx.graphics.Rect;

            [Embed("assets/fx_appicon-tn.gif")]
            private const FlexIcon:Class;

            private var checkBox:CheckBox;
            private var widthSlider:HSlider;
            private var heightSlider:HSlider;
            private var rect:Rect;
            private var bitmapFill:BitmapFill;

            private function init():void {
                checkBox = new CheckBox();
                checkBox.selected = true;
                checkBox.addEventListener(Event.CHANGE, checkBox_change);

                widthSlider = new HSlider();
                widthSlider.minimum = 100;
                widthSlider.maximum = 300;
                widthSlider.value = 300;
                widthSlider.snapInterval = 1;
                widthSlider.tickInterval = 50;
                widthSlider.liveDragging = true;
                widthSlider.addEventListener(SliderEvent.CHANGE, widthSlider_change);

                heightSlider = new HSlider();
                heightSlider.minimum = 100;
                heightSlider.maximum = 300;
                heightSlider.value = 300;
                heightSlider.snapInterval = 1;
                heightSlider.tickInterval = 50;
                heightSlider.liveDragging = true;
                heightSlider.addEventListener(SliderEvent.CHANGE, heightSlider_change);

                var formItem1:FormItem = new FormItem();
                formItem1.label = "repeat:";
                formItem1.addChild(checkBox);

                var formItem2:FormItem = new FormItem();
                formItem2.label = "width:";
                formItem2.addChild(widthSlider);

                var formItem3:FormItem = new FormItem();
                formItem3.label = "height:";
                formItem3.addChild(heightSlider);

                var form:Form = new Form();
                form.styleName = "plain";
                form.addChild(formItem1);
                form.addChild(formItem2);
                form.addChild(formItem3);

                var appControlBar:ApplicationControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(form);
                addChildAt(appControlBar, 0);

                bitmapFill = new BitmapFill();
                bitmapFill.repeat = checkBox.selected;
                bitmapFill.source = FlexIcon;

                rect = new Rect();
                rect.width = 300;
                rect.height = 300;
                rect.fill = bitmapFill;

                var graphic:Graphic = new Graphic();
                graphic.addItem(rect);
                addChild(graphic);
            }

            private function checkBox_change(evt:Event):void {
                bitmapFill.repeat = checkBox.selected;
            }

            private function widthSlider_change(evt:SliderEvent):void {
                rect.width = evt.value;
            }

            private function heightSlider_change(evt:SliderEvent):void {
                rect.height = evt.value;
            }
        ]]>
    </Script>

</Application>

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.

Tagged as: Gumbo, repeat