Creating an auto-repeating Spark Button control in Flex Gumbo

The following example shows how you can create an auto-repeating Flex Gumbo Soark Button control by setting the Boolean autoRepeat property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/01/30/creating-an-auto-repeating-fxbutton-control-in-flex-gumbo/ -->
<s:Application name="Spark_Button_autoRepeat_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">

    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            private var clr:Boolean = false;

            private function btn_buttonDown(evt:FlexEvent):void {
                if (clr) {
                    arrList.removeAll();
                    clr = false;
                }
                doAddItem(evt);
            }

            private function btn_click(evt:MouseEvent):void {
                clr = true;
                doAddItem(evt);
            }

            private function doAddItem(evt:Event):void {
                var obj:Object = {};
                obj.type = evt.type;
                obj.currentTarget = evt.currentTarget.name;
                obj.time = new Date().toTimeString();

                arrList.addItem(obj);
                callLater(doScroll);
            }

            private function doScroll():void {
                dataGrid.scrollToIndex(arrList.length);
            }
        ]]>
    </fx:Script>

    <fx:Declarations>
        <s:ArrayList id="arrList" />
    </fx:Declarations>

    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <mx:Form styleName="plain">
            <mx:FormItem label="autoRepeat:">
                <s:CheckBox id="checkBox"
                        selected="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <s:VGroup width="320" horizontalCenter="0" verticalCenter="0">
        <s:Button id="btn"
                label="Spark Button"
                autoRepeat="{checkBox.selected}"
                click="btn_click(event);"
                buttonDown="btn_buttonDown(event);" />

        <mx:DataGrid id="dataGrid"
                dataProvider="{arrList}"
                verticalScrollPolicy="on"
                width="100%"
                rowCount="8" />
    </s:VGroup>

</s:Application>

View source is enabled in the following example.

You can also add the buttonDown and click event listeners using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/01/30/creating-an-auto-repeating-fxbutton-control-in-flex-gumbo/ -->
<s:Application name="Spark_Button_autoRepeat_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"
        initialize="init();">

    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import spark.components.Button;

            private var btn:Button;

            private function init():void {
                btn = new Button();
                btn.label = "Spark Button";
                btn.autoRepeat = true;
                btn.horizontalCenter = 0;
                btn.verticalCenter = 0;
                btn.addEventListener(FlexEvent.BUTTON_DOWN, btn_buttonDown);
                btn.addEventListener(MouseEvent.CLICK, btn_click);
                addElement(btn);
            }

            private function btn_buttonDown(evt:FlexEvent):void {
                trace(evt.type);
            }

            private function btn_click(evt:MouseEvent):void {
                trace(evt.type);
            }
        ]]>
    </fx:Script>

</s: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: autoRepeat, buttonDown, click