Flex Examples » autoRepeat http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Setting the repeat delay on an auto repeating Spark Button control in Flex 4 http://blog.flexexamples.com/2009/02/07/setting-the-repeat-delay-on-an-auto-repeating-fxbutton-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/02/07/setting-the-repeat-delay-on-an-auto-repeating-fxbutton-control-in-flex-gumbo/#comments Sun, 08 Feb 2009 07:57:25 +0000 Peter deHaan http://blog.flexexamples.com/2009/02/07/setting-the-repeat-delay-on-an-auto-repeating-fxbutton-control-in-flex-gumbo/ The following example shows how you can set the repeat delay on an Flex 4 Spark Button control by setting the repeatDelay style and the autoRepeat property.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/02/07/setting-the-repeat-delay-on-an-auto-repeating-fxbutton-control-in-flex-gumbo/ --> <s:Application name="Spark_Button_repeatDelay_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 function btn_buttonDown(evt:FlexEvent):void { var [...]]]> The following example shows how you can set the repeat delay on an Flex 4 Spark Button control by setting the repeatDelay style and the autoRepeat property.

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/02/07/setting-the-repeat-delay-on-an-auto-repeating-fxbutton-control-in-flex-gumbo/ -->
<s:Application name="Spark_Button_repeatDelay_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 function btn_buttonDown(evt:FlexEvent):void {
                var obj:Object = {};
                obj.type = evt.type;
                obj.time = new Date().toTimeString();
                arrColl.addItemAt(obj, 0);
            }
 
            private function btn_click(evt:MouseEvent):void {
                var obj:Object = {};
                obj.type = evt.type;
                obj.time = new Date().toTimeString();
                arrColl.addItemAt(obj, 0);
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <s:ArrayCollection id="arrColl" />
    </fx:Declarations>
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <s:Button id="btn"
                label="Spark Button (repeatDelay={btn.getStyle('repeatDelay')})"
                autoRepeat="true"
                repeatDelay="1000"
                buttonDown="btn_buttonDown(event);"
                click="btn_click(event);" />
    </mx:ApplicationControlBar>
 
    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            width="300"
            rowCount="6"
            horizontalCenter="0" verticalCenter="0">
        <mx:columns>
            <mx:DataGridColumn dataField="type" />
            <mx:DataGridColumn dataField="time" />
        </mx:columns>
    </mx:DataGrid>
 
</s:Application>

View source is enabled in the following example.


You can also set the repeatDelay style in an external .CSS file or <Style> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/07/setting-the-repeat-delay-on-an-auto-repeating-fxbutton-control-in-flex-gumbo/ -->
<s:Application name="Spark_Button_repeatDelay_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:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        s|Button {
            repeatDelay: 1000; /* ms */
        }
    </fx:Style>
 
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
 
            private function btn_buttonDown(evt:FlexEvent):void {
                var obj:Object = {};
                obj.type = evt.type;
                obj.time = new Date().toTimeString();
                arrColl.addItemAt(obj, 0);
            }
 
            private function btn_click(evt:MouseEvent):void {
                var obj:Object = {};
                obj.type = evt.type;
                obj.time = new Date().toTimeString();
                arrColl.addItemAt(obj, 0);
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <s:ArrayCollection id="arrColl" />
    </fx:Declarations>
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <s:Button id="btn"
                label="Spark Button (repeatDelay={btn.getStyle('repeatDelay')})"
                autoRepeat="true"
                buttonDown="btn_buttonDown(event);"
                click="btn_click(event);" />
    </mx:ApplicationControlBar>
 
    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            width="300"
            rowCount="6"
            horizontalCenter="0" verticalCenter="0">
        <mx:columns>
            <mx:DataGridColumn dataField="type" />
            <mx:DataGridColumn dataField="time" />
        </mx:columns>
    </mx:DataGrid>
 
</s:Application>

Or, you can set the repeatDelay style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/07/setting-the-repeat-delay-on-an-auto-repeating-fxbutton-control-in-flex-gumbo/ -->
<s:Application name="Spark_Button_repeatDelay_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 function init():void {
                btn.setStyle("repeatDelay", 1000); /* ms */
            }
 
            private function btn_buttonDown(evt:FlexEvent):void {
                var obj:Object = {};
                obj.type = evt.type;
                obj.time = new Date().toTimeString();
                arrColl.addItemAt(obj, 0);
            }
 
            private function btn_click(evt:MouseEvent):void {
                var obj:Object = {};
                obj.type = evt.type;
                obj.time = new Date().toTimeString();
                arrColl.addItemAt(obj, 0);
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <s:ArrayCollection id="arrColl" />
    </fx:Declarations>
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <s:Button id="btn"
                label="Spark Button (repeatDelay={btn.getStyle('repeatDelay')})"
                autoRepeat="true"
                initialize="init();"
                buttonDown="btn_buttonDown(event);"
                click="btn_click(event);" />
    </mx:ApplicationControlBar>
 
    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            width="300"
            rowCount="6"
            horizontalCenter="0" verticalCenter="0">
        <mx:columns>
            <mx:DataGridColumn dataField="type" />
            <mx:DataGridColumn dataField="time" />
        </mx:columns>
    </mx:DataGrid>
 
</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.

 
]]> http://blog.flexexamples.com/2009/02/07/setting-the-repeat-delay-on-an-auto-repeating-fxbutton-control-in-flex-gumbo/feed/ 1 Creating an auto-repeating Spark Button control in Flex Gumbo http://blog.flexexamples.com/2009/01/30/creating-an-auto-repeating-fxbutton-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/01/30/creating-an-auto-repeating-fxbutton-control-in-flex-gumbo/#comments Sat, 31 Jan 2009 07:57:12 +0000 Peter deHaan http://blog.flexexamples.com/2009/01/30/creating-an-auto-repeating-fxbutton-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 { [...]]]> 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.

 
]]> http://blog.flexexamples.com/2009/01/30/creating-an-auto-repeating-fxbutton-control-in-flex-gumbo/feed/ 1 Making auto-repeat Button controls using the autoRepeat property and buttonDown event http://blog.flexexamples.com/2007/08/08/making-auto-repeat-button-controls-using-the-autorepeat-property-and-buttondown-event/ http://blog.flexexamples.com/2007/08/08/making-auto-repeat-button-controls-using-the-autorepeat-property-and-buttondown-event/#comments Thu, 09 Aug 2007 03:52:51 +0000 Peter deHaan http://blog.flexexamples.com/2007/08/08/making-auto-repeat-button-controls-using-the-autorepeat-property-and-buttondown-event/ A simple example of creating auto-repeat Button controls that dispatch the buttonDown event as long as the user is pressing the button.

Note that in the following example we listen for the buttonDown event and not the click event. The click event only gets dispatched when the user releases the mouse cursor over the [...]]]> A simple example of creating auto-repeat Button controls that dispatch the buttonDown event as long as the user is pressing the button.

Note that in the following example we listen for the buttonDown event and not the click event. The click event only gets dispatched when the user releases the mouse cursor over the Button control.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/08/making-auto-repeat-button-controls-using-the-autorepeat-property-and-buttondown-event/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.core.UIComponent;

            private function moveLeft(target:UIComponent):void {
                target.x = Math.max(target.x - 10, 0);
            }

            private function moveRight(target:UIComponent):void {
                target.x = Math.min(target.x + 10, Application.application.width - target.width);
            }
        ]]>
    </mx:Script>

    <mx:Box id="box" width="100" height="100" backgroundColor="red" />

    <mx:HBox>
        <mx:Button label="left" autoRepeat="true" buttonDown="moveLeft(box)" />
        <mx:Button label="right" autoRepeat="true" buttonDown="moveRight(box)" />
    </mx:HBox>

</mx:Application>

View source is enabled in the following example.

You can also control the amount of delay and the repeat interval between buttonDown events by setting the repeatDelay and repeatInterval styles on the Button, as shown in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/08/making-auto-repeat-button-controls-using-the-autorepeat-property-and-buttondown-event/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.core.UIComponent;

            private function moveLeft(target:UIComponent):void {
                var t1:int = target.x - 10;
                var t2:int = 0;
                target.x = Math.max(t1, t2);
            }

            private function moveRight(target:UIComponent):void {
                var t1:int = target.x + 10;
                var t2:int = Application.application.width - target.width;
                target.x = Math.min(t1, t2);
            }
        ]]>
    </mx:Script>

    <mx:Box id="box" width="100" height="100" backgroundColor="red" />

    <mx:HBox>
        <mx:Button id="leftButton"
                label="left"
                autoRepeat="true"
                repeatDelay="{button_repeatDelay.value}"
                repeatInterval="{button_repeatInterval.value}"
                buttonDown="moveLeft(box)" />

        <mx:Button id="rightButton"
                label="right"
                autoRepeat="true"
                repeatDelay="{button_repeatDelay.value}"
                repeatInterval="{button_repeatInterval.value}"
                buttonDown="moveRight(box)" />
    </mx:HBox>

    <mx:Form>
        <mx:FormItem label="repeatDelay ({button_repeatDelay.value}):">
            <mx:HSlider id="button_repeatDelay"
                    minimum="50"
                    maximum="950"
                    value="100"
                    snapInterval="50"
                    tickInterval="100"
                    dataTipPrecision="0" />
        </mx:FormItem>
        <mx:FormItem label="repeatInterval ({button_repeatInterval.value}):">
            <mx:HSlider id="button_repeatInterval"
                    minimum="10"
                    maximum="910"
                    value="10"
                    snapInterval="10"
                    tickInterval="100"
                    dataTipPrecision="0" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/08/08/making-auto-repeat-button-controls-using-the-autorepeat-property-and-buttondown-event/feed/ 2