Blinking Label

Blinking Label:

package LabeledComp
{
    import flash.events.Event;

    import spark.components.Label;

    [Style(name="numOfFramesPerBlink", inherit="yes", type="uint")]
    public class BlinkingLabel extends Label
    {
        private static const DEFAULT_NUM_OF_FRAMES_PER_BLINK:Number = 10;

        private var _explicitVisibility:Boolean = true;

        private var blinkingDirty:Boolean;

        private var currentBlinkingPhaseFrames:uint;

        private var numOfFramesPerBlinkValue:uint = DEFAULT_NUM_OF_FRAMES_PER_BLINK;

        override public function get visible():Boolean
        {
            return _explicitVisibility;
        }

        override public function set visible(value:Boolean):void
        {
            super.visible = value;
            _explicitVisibility = value;
        }

        private var _blinking:Boolean;

        [Bindable]
        public function get blinking():Boolean
        {
            return _blinking;
        }

        public function set blinking(value:Boolean):void
        {
            if (_blinking == value)
                return;
            _blinking = value;
            blinkingDirty = true;
            invalidateProperties();
        }

        override public function styleChanged(styleProp:String):void
        {
            super.styleChanged(styleProp);

            var allStyles:Boolean = styleProp == null || styleProp == "styleName";
            if (allStyles || styleProp == "numOfFramesPerBlink")
            {
                var newNumOfFramesPerBlink:uint = getStyle("numOfFramesPerBlink");
                if (newNumOfFramesPerBlink > 0)
                    numOfFramesPerBlinkValue = newNumOfFramesPerBlink;
                else
                    numOfFramesPerBlinkValue = DEFAULT_NUM_OF_FRAMES_PER_BLINK
            }
        }

        override protected function commitProperties():void
        {
            super.commitProperties();

            if (blinkingDirty)
            {
                if (_blinking)
                {
                    addEventListener(Event.ENTER_FRAME, enterFrameHandler);
                    currentBlinkingPhaseFrames = 0;
                }
                else
                {
                    removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
                    setVisibleState(_explicitVisibility);
                }
                blinkingDirty = false;
            }
        }

        private function setVisibleState(value:Boolean):void
        {
            super.visible = value;
        }

        private function enterFrameHandler(event:Event):void
        {
            currentBlinkingPhaseFrames++;
            if (currentBlinkingPhaseFrames > numOfFramesPerBlinkValue)
            {
                setVisibleState(!super.visible);
                currentBlinkingPhaseFrames = 0;
            }
        }
    }
}

use this component as

<LabeledComp:BlinkingLabel id="lblStatusnotification" visible="false" blinking="true" color="red" fontWeight="bold" numOfFramesPerBlink="10"/>

Creating Favicon for flex web application

Paste below code under <head/> tag of HTML file


<link rel="icon"
      type="image/png"
      href="your icon.ico" />

Placer 'your icon.ico' in same folder where your app located at server.

Spark Datagrid skin for conditionally blink Row.

<fx:Component id="rowBackground">

            <s:Rect implements="spark.components.gridClasses.IGridVisualElement">
                <fx:Declarations>
                    <s:Animate id="myBlinkingEffect" 
                               repeatCount="0" 
                               repeatBehavior="reverse"
                               target="{rowBackgroundFillColor}"
                               duration="1000"
                               >
                        <s:motionPaths>
                            <s:SimpleMotionPath property="alpha"
                                                valueFrom="1"
                                                valueTo="0"
                                                />
                        </s:motionPaths>
                    </s:Animate>
                    <mx:DateFormatter id="df" formatString="MM/DD/YYYY LL:NN:SS A"/>
                </fx:Declarations>
                <fx:Script>
                    <![CDATA[
                        import spark.components.DataGrid;
                        import spark.components.Grid;

                        /**
                         * @private
                         */  
                        public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
                        {
                            const dataGrid:DataGrid = grid.dataGrid;
                            if (!dataGrid)
                                return;

                            var item:Object;
                            if (rowIndex < grid.dataProvider.length) {
                                item = grid.dataProvider[rowIndex];  // the data item from this row

                                if ( item.StatusColor != "") {
                                    rowBackgroundFillColor.color = item.StatusColor

                                }   else {
                                    rowBackgroundFillColor.color = 0xFFFFFF;
                                }
                                if ( new Date(df.format(item.ReminderTime)) < new Date() ){
                                        rowBackgroundFillColor.color = 0xFF0000;
                                    myBlinkingEffect.play();//Blinking
                                } 
                                else {
                                    myBlinkingEffect.stop();
                                    rowBackgroundFillColor.alpha=0.5;
                                }
                            }
                            else
                            {
                            rowBackgroundFillColor.color = 0xFFFFFF;
                            }
                        }
                    ]]>
                </fx:Script>  
                <s:fill>
                    <!--- @private -->  
                    <s:SolidColor id="rowBackgroundFillColor" color="0xFFFFFF" alpha="0.5"/>
                </s:fill>
            </s:Rect>
        </fx:Component>

Event Handling in ActionScript

http://www.adobe.com/devnet/actionscript/articles/event_handling_as3.html

ItemRenderer For RowNumber

<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                    xmlns:s="library://ns.adobe.com/flex/spark" 
                    xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true">

    <fx:Script>
        <![CDATA[

        ]]>
    </fx:Script>

    <s:Label id="lblData" top="9" left="7" text="{this.rowIndex+1}"/>

</s:GridItemRenderer>

Set Focus During Page Load Flex

The issue is that within your application the TextInput has focus, but within the HTML page your Flex application does not. So basically the only extra step you need is to give the Flex app focus. There's only one way to achieve this: through JavaScript. And you should do it after the application was loaded.

The guys at Farrata wrote a very good example on how to do this, so I'm just going to point you there:http://flexblog.faratasystems.com/2011/12/15/setting-focus-in-flex-components

Flex formatting byte to MB, GB, TB, etc.

 labelFunction IS:

<mx:AdvancedDataGridColumn width="80" dataField="totalunpublished" headerText="Photo Usage" labelFunction="convertSize"/>

private var _levels:Array = [ 'bytes','Kb','MB','GB','TB','PB','EB','ZB','YB'];
private function convertSize(data:Object, column:AdvancedDataGridColumn):String {
     var bytes:Number=data[column.dataField];
    var index:uint = Math.floor(Math.log(bytes) / Math.log(1024));
    return (bytes / Math.pow(1024, index)).toFixed(2)+" "+this._levels[index];
}