my journey with flex: February 2011

Thursday, February 10, 2011

Flash Player Security Problem

For More details Go to

http://kb2.adobe.com/cps/093/4c093f20.html#main_warning

Tuesday, February 8, 2011

<?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/mx"
               viewSourceURL="srcview/index.html" backgroundColor="0">
    <s:states>
        <s:State name="normal"/>
        <s:State name="b1"/>
        <s:State name="b2"/>
        <s:State name="b3"/>
    </s:states>
    <s:layout>
        <s:HorizontalLayout verticalAlign="middle"
                            horizontalAlign="center"/>
    </s:layout>

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

            protected function bordercontainer_clickHandler(event:MouseEvent):void
            {

                this.currentState=event.currentTarget.id;


            }

            protected function hg_creationCompleteHandler(event:FlexEvent):void
            {
                for (var i:int; i < this.hg.numElements; i++)
                {
                    BorderContainer(this.hg.getElementAt(i)).addEventListener(MouseEvent.CLICK, bordercontainer_clickHandler);
                }
            }
        ]]>
    </fx:Script>




    <s:HGroup gap="0"
            id="hg"
            creationComplete="hg_creationCompleteHandler(event)">

        <s:BorderContainer width="50"
                           width.b1="400"
                           height="300"
                           cornerRadius="5"
                           backgroundImage="@Embed(source='images/menu1.png')"
                           backgroundImageFillMode="clip"
                           id="b1"
                           resizeEffect="Resize"/>

        <s:BorderContainer width="50"
                           width.b2="400"
                           height="300"
                           cornerRadius="5"
                           backgroundImage="@Embed(source='images/menu2.png')"
                           backgroundImageFillMode="clip"
                           id="b2"
                           resizeEffect="Resize"/>

        <s:BorderContainer width="400"
                           width.b1="50"
                           width.b2="50"
                           height="300"
                           cornerRadius="5"
                           backgroundImage="@Embed(source='images/menu3.png')"
                           backgroundImageFillMode="clip"
                           id="b3"
                           resizeEffect="Resize"/>
    </s:HGroup>



</s:Application>

Timer Example

<?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/mx" minWidth="955" minHeight="600" >
    <fx:Script>
        <![CDATA[
            import flash.events.TimerEvent;

            import mx.controls.Alert;
            import mx.events.FlexEvent;


            protected function onButtonClick():void
            {
                Alert.show("application1_creationCompleteHandler");
                var tim1:Timer=new Timer(1000, 5);
                tim1.addEventListener(TimerEvent.TIMER_COMPLETE,timComplete1);
                tim1.start();
            }

            protected function timComplete1(ev:TimerEvent):void
            {
                (ev.target as Timer).stop();
                Alert.show("timComplete1");
            }
        ]]>
    </fx:Script>
    <fx:Declarations>
        
    </fx:Declarations>
    <s:Button x="453" y="164" label="Button" click="onButtonClick()"/>
</s:Application>

Attractive Checkbox in Flex4

Main mxml file (say AHCkeckboxTest.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"
    minWidth="1020"
    minHeight="720"
    frameRate="99"
    backgroundColor="0xe0f0ff" viewSourceURL="srcview/index.html">

    <fx:Style>
        @namespace mx "library://ns.adobe.com/flex/halo";
        @namespace s "library://ns.adobe.com/flex/spark";

        s|CheckBox {
            skinClass: ClassReference("AHCheckboxSkin");
            symbolColorChecked: "0x70d000";
            symbolColorUnchecked: "0xe83800";
            fontSize: "11";
            color: "0x606060";
        }

            .default {
                skinClass: ClassReference("spark.skins.spark.CheckBoxSkin");
            }
    </fx:Style>
    <s:HGroup gap="25" horizontalCenter="0" verticalCenter="0">
        <s:VGroup gap="5">
            <s:Label text="Default Spark CheckBox" paddingBottom="4" fontSize="11" textDecoration="underline" />
            <s:CheckBox label="Show Goalkeepers"    styleName="default" selected="true" />
            <s:CheckBox label="Show Defenders"         styleName="default" />
            <s:CheckBox label="Show Midfielders"     styleName="default" selected="true"/>
            <s:CheckBox label="Show Attackers"       styleName="default"    selected="true"/>
            <s:CheckBox label="Show Coaches"           styleName="default"    />
        </s:VGroup>
        <s:Line height="100%" >
            <s:stroke>
                <s:SolidColorStroke weight="1" color="0xd0e0f0" />
            </s:stroke>
        </s:Line>
        <s:VGroup gap="5">
            <s:Label text="Custom Spark CheckBox" paddingBottom="4" fontSize="11" textDecoration="underline" />
            <s:CheckBox label="Show Goalkeepers"     selected="true" />
            <s:CheckBox label="Show Defenders"     selected="true"/>
            <s:CheckBox label="Show Midfielder"     />
            <s:CheckBox label="Show Attackers"       />
            <s:CheckBox label="Show Coaches"         selected="true"/>
        </s:VGroup>
    </s:HGroup>
</s:Application>

Skin class (say AHCheckboxSkin.mxml )

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
            alpha.disabledStates="0.5" creationComplete="sparkskin1_creationCompleteHandler(event)">

    <fx:Metadata>
        <![CDATA[
    /**
    * @copy spark.skins.default.ApplicationSkin#hostComponent
    */
        [HostComponent("spark.components.CheckBox")]
    ]]>
    </fx:Metadata>
    <fx:Script>
    <![CDATA[
        import mx.utils.ColorUtil;
        import mx.events.FlexEvent;

        [Bindable]
        private var highlightColor:uint;

        protected function sparkskin1_creationCompleteHandler(event:FlexEvent):void
        {
            hostComponent.buttonMode = true;
            hostComponent.useHandCursor = true;
            var col:uint = uint (hostComponent.getStyle('color'));
            highlightColor = ColorUtil.adjustBrightness(col, 80);
        }
    ]]>
    </fx:Script>


    <fx:Declarations>
        <s:Linear id="easer" easeInFraction="0.5" easeOutFraction="0.5" />
    </fx:Declarations>

    <s:states>
        <s:State name="up" stateGroups="unchecked" />
        <s:State name="over" stateGroups="overStates, unchecked" />
        <s:State name="down" stateGroups="downStates, unchecked" />
        <s:State name="disabled" stateGroups="disabledStates, unchecked" />
        <s:State name="upAndSelected" stateGroups="selectedStates, checked" />
        <s:State name="overAndSelected" stateGroups="overStates, selectedStates, checked" />
        <s:State name="downAndSelected" stateGroups="downStates, selectedStates, checked" />
        <s:State name="disabledAndSelected" stateGroups="disabledStates, selectedStates, checked" />
    </s:states>

    
    <s:transitions>
        <s:Transition fromState="unchecked" toState="overAndSelected" >
            <s:Parallel target="{checkedMark}" >
                <s:Scale duration="250" scaleXBy="1"   easer="{easer}" />
            </s:Parallel>
        </s:Transition>
        <s:Transition fromState="checked" toState="over" >
            <s:Parallel target="{uncheckedMark}">
                <s:Scale duration="250" easer="{easer}" />
            </s:Parallel>
        </s:Transition>
    </s:transitions>

    
    <s:Label id="labelDisplay"
                textAlign="start"
                color.over="{highlightColor}"
                color.down="{highlightColor}"
                color.overAndSelected="{highlightColor}"
                color.downAndSelected="{highlightColor}"
                verticalAlign="middle"
                lineBreak="explicit"
                left="16" right="0" top="3" bottom="3" verticalCenter="2" />
    
    <s:Group id="marks" verticalCenter="0" width="11" height="11" left="0" >

        
        <s:Path horizontalCenter="0" verticalCenter="0" width="11" height="11" winding="nonZero" data="M 100 0 C 75.148 24.853 46.191 87.574 46.191 87.574 C 46.191 87.574 14.204 40.716 0 40.716 L 25.11 41.012 L 43.787 62.213 L 79.29 0 L 100 0 Z"
                id="checkedMark" scaleX.unchecked="0" scaleX="1" scaleY.unchecked="0" scaleY="1">
            <s:fill>
                <s:SolidColor color="{hostComponent.getStyle('symbolColorChecked')}"/>
            </s:fill>
        </s:Path>

        
        <s:Path horizontalCenter="0" verticalCenter="0" width="9" height="9" winding="nonZero" data="M 100 90.29 L 60.694 42.28 C 72.2 26.205 84.896 9.838 95.214 0 L 74.28 0.1 L 51.336 30.851 L 26.922 1.031 L 0 1.031 C 13.126 7.917 29.115 24.561 43.297 41.625 L 7.425 89.702 L 28.995 89.617 C 28.995 89.617 39.309 73.04 52.832 53.468 C 68.081 72.987 79.403 90.131 79.403 90.131 L 100 90.29 Z"
                id="uncheckedMark" scaleX.checked="0" scaleX="1" scaleY.checked="0" scaleY="1">
            <s:fill>
                <s:SolidColor id="checkMarkFill" color="{hostComponent.getStyle('symbolColorUnchecked')}"/>
            </s:fill>
        </s:Path>

        
        <s:Group width="100%" height="100%" alpha="0" >
            <s:Rect width="100%" height="100%" >
                <s:fill>
                    <s:SolidColor color="0xff0000" />
                </s:fill>
            </s:Rect>
        </s:Group>

        <s:filters>
            <s:DropShadowFilter distance="1" strength="0.75" blurX="1" blurY="1" />
        </s:filters>
    </s:Group>
</s:SparkSkin>

Folder Structure

Attractive Textbox in Flex4

Main mxml file (say AHTextFieldTest.mxml)

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/halo"
               xmlns:local="*"
               backgroundColor="0xf4f4f4"
               viewSourceURL="srcview/index.html">

    <Style>
            .textInput {
                skinClass: ClassReference("AHTextInputSkin");
                focusColor: "0xa2d2ff";
                color: "0x808080";
                fontSize: "12";
                selectionColor: "0xa2d2ff";
            }
        </Style>

    <s:HGroup horizontalCenter="0"
            verticalCenter="0"
            gap="25">
        <s:TextInput text="Spark Default"/>
        <local:AHTextInput id="cf"
                           text="Customized"
                           styleName="textInput"
                           width="100"/>
    </s:HGroup>

</s:Application>

Skin File (say AHTextInputSkin.mxml )

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
    alpha.disabled="0.5">

    <fx:Metadata>
        [HostComponent("AHTextInput")]
    </fx:Metadata>

    <fx:Script>
        /* Define the skin elements that should not be colorized. */
        static private const exclusions:Array = ["background", "textDisplay"];
        override public function get colorizeExclusions():Array {return exclusions;}

        /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
        static private const contentFill:Array; // = ["bgFill"];
        override public function get contentItems():Array {return contentFill};
    </fx:Script>

    <s:states>
        <s:State name="normal"/>
        <s:State name="disabled"/>
        <s:State name="focused"/>
        <s:State name="invalid"/>
    </s:states>

    
    <s:transitions>
        <s:Transition fromState="normal" toState="focused" >
            <s:AnimateColor duration="350" targets="{[bgFill, stroke]}" />
        </s:Transition>
        <s:Transition fromState="focused" toState="normal" >
            <s:AnimateColor duration="350" targets="{[bgFill, stroke]}" />
        </s:Transition>
    </s:transitions>

    
    <s:Rect blendMode="normal" left="1" right="1" top="1" bottom="1" radiusX="3" radiusY="3" alpha="1">
         <s:fill >
            <s:SolidColor id="bgFill" color="0xa2d2ff" color.focused="0xe8f8ff" />
        </s:fill>
        <s:stroke>
            <s:SolidColorStroke id="stroke" color="0x92c2ef" color.focused="0xffffff" weight="1" />
        </s:stroke>
    </s:Rect>

    
    <s:RichEditableText id="textDisplay" color.focused="0x303030" color.invalid="0xff0000" verticalAlign="middle"
              left="1" right="1" top="1" bottom="1"
            paddingLeft="3" paddingTop="5"
              paddingRight="3" paddingBottom="3"/>

</s:SparkSkin>

Package file (say AHTextInput.as )

package
{
    import flash.events.FocusEvent;
    import spark.components.TextInput;

    public class AHTextInput extends TextInput
    {
        //Declare the Additional SkinStates
        [SkinState("focused")];

        private var bfocused:Boolean;

        public function AHTextInput()
        {
            super();
        }

        //Add EventListeners to the textview for FocusEvent
        override protected function partAdded(partName:String, instance:Object):void {
            super.partAdded(partName, instance);
            if (instance == this.textDisplay) {
                trace ("Adding TextDisplay");
                this.textDisplay.addEventListener(FocusEvent.FOCUS_IN, onFocusInHandler);
                this.textDisplay.addEventListener(FocusEvent.FOCUS_OUT, onFocusOutHandler);
            }
        }

        //Clean up EventListeners and stuff...
        override protected function partRemoved(partName:String, instance:Object):void {
            super.partRemoved(partName, instance);
            if (instance == this.textDisplay) {
                this.textDisplay.removeEventListener(FocusEvent.FOCUS_IN, onFocusInHandler);
                this.textDisplay.removeEventListener(FocusEvent.FOCUS_OUT, onFocusOutHandler);
            }
        }

        //Leverage the new SkinState
        override protected function getCurrentSkinState():String {
            if (bfocused) {
                return "focused";
            } else {
                return super.getCurrentSkinState();
            }
        }

        //Handler for FocusIn Event
        private function onFocusInHandler(event:FocusEvent):void {
            bfocused = true;
            invalidateSkinState();
            trace("Getting focus");
        }

        //Handler for FocusOut
        private function onFocusOutHandler(event:FocusEvent):void {
            bfocused = false;
            invalidateSkinState();
            trace("Loosing focus");
        }

    }
}

Folder Structure

Sample XML Reader in Flex4

This is the Flex4 sample code.

<?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/mx"
               minWidth="955"
               minHeight="600">
    <fx:Declarations>
        
        <s:HTTPService id="imageData"
                       url="com/sampledata/images.xml"
                       resultFormat="e4x"
                       result="resultHandler(event);"
                       fault="faultHandler(event)"/>
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;
            import mx.rpc.http.HTTPService;

            private var xmldata:XML;

            private function init():void
            {
                imageData.send();
            }

            private function resultHandler(event:ResultEvent):void
            {
                xmldata=event.result as XML;
                //Alert.show("resultHandler : " + xmldata);
                for each (var thexml:XML in xmldata.img)
                {
                    Alert.show("resultHandler : "+thexml.src);
                    //imageSourceArray.push(thexml.src);
                }
            }

            private function faultHandler(event:FaultEvent):void
            {
                Alert.show("In Fault");
            }

        ]]>
    </fx:Script>
    <s:Button x="161" y="117" label="Button" click="init()"/>
</s:Application>

Sample XML file.

<?xml version="1.0" encoding="utf-8"?>
<gallery>
<img>
<src>com/assets/images/slideShow/1.JPG
</src>
<caption>What a pretty flower</caption>
</img>

<img>
<src>com/assets/images/slideShow/2.JPG
</src>
<caption>This is the grand canyon</caption>
</img>

<img>
<src>com/assets/images/slideShow/3.JPG
</src>
<caption>bean!</caption>
</img>

<img>
<src>com/assets/images/slideShow/4.JPG
</src>
<caption>another image caption</caption>
</img>

</gallery>

Folder Structure

Sunday, February 6, 2011

Minimize to System tray (AIR application)

This example describes how to dock an AIR application to the system tray and then undock it again.

The minimize and close actions of the WindowedApplication are caught, so that we can introduce our own actions.

A simple systray menu is presented, to show the usage of that.

<?xml version="1.0" encoding="utf-8"?>

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"

layout="absolute"

creationComplete="initApplication()">

<mx:Script>

<![CDATA[

import mx.controls.Alert;

import mx.events.CloseEvent;

private var dockImage:BitmapData;

/**

* Initialize the application to the default values.

* This method is called upon creationComplete from the Windowed

* application

public function initApplication():void

{

/**

* Use the loader object to load an image, which will be used for

* the systray

* After the image has been loaded into the object, we can

* prepare the application for docking to the system tray

var loader:Loader=new Loader();

loader.contentLoaderInfo.addEventListener(Event.COMPLETE, prepareForSystray);

loader.load(new URLRequest("http://www._____.com/sample16.png"));

/**

* Catch the closing event so that the user can decide if it wants to

dock or really

* close the application

this.addEventListener(Event.CLOSING, closingApplication);

}

/**

* Check if the user wants to close the application or dock it

private function closingApplication(evt:Event):void

{

/**

* Don't close, so prevent the event from happening

evt.preventDefault();

/**

* Check what the user really want's to do

Alert.yesLabel="Close";

Alert.noLabel="Minimize";

Alert.show("Close or minimize?", "Close?", 3, this, alertCloseHandler);

}

/**

* Event handler function for displaying the selected Alert button.

private function alertCloseHandler(event:CloseEvent):void

{

if (event.detail == Alert.YES)

{

closeApp(event);

}

else

{

dock();

}

/**

* Check to see if the application may be docked and set basic properties

public function prepareForSystray(event:Event):void

{

//Retrieve the image being used as the systray icon

dockImage=event.target.content.bitmapData;

/**

* For windows systems we can set the systray props

* (there's also an implementation for mac's, it's similar and you

* can find it on the net... ;) )

if (NativeApplication.supportsSystemTrayIcon)

{

setSystemTrayProperties();

/**

* Set some systray menu options, so that the user can

* right-click and access functionality

* without needing to open the application

SystemTrayIcon(NativeApplication.nativeApplication.icon).menu=createSystrayRootMenu();

}

/**

* Create a menu that can be accessed from the systray

private function createSystrayRootMenu():NativeMenu

{

/**

*Add the menuitems with the corresponding actions

var menu:NativeMenu=new NativeMenu();

var openNativeMenuItem:NativeMenuItem=new NativeMenuItem("Open");

var exitNativeMenuItem:NativeMenuItem=new NativeMenuItem("Exit");

/**

* What should happen when the user clicks on something...

openNativeMenuItem.addEventListener(Event.SELECT, undock);

exitNativeMenuItem.addEventListener(Event.SELECT, closeApp);

//Adding a submenu Status

var submenu:NativeMenu=new NativeMenu();

var onlineNativeMenuItem:NativeMenuItem=new NativeMenuItem("Online");

var disturbNativeMenuItem:NativeMenuItem=new NativeMenuItem("Do Not Disturb");

var invisibleNativeMenuItem:NativeMenuItem=new NativeMenuItem("Invisible");

var offlineNativeMenuItem:NativeMenuItem=new NativeMenuItem("Offline");

//Add Items to a sub-menu "Status"

submenu.addItem(onlineNativeMenuItem);

submenu.addItem(disturbNativeMenuItem);

submenu.addItem(invisibleNativeMenuItem);

submenu.addItem(offlineNativeMenuItem);

//Add the menuitems to the menu

menu.addItem(openNativeMenuItem);

menu.addSubmenu(submenu, "Status");

menu.addItem(new NativeMenuItem("", true));

//separator

menu.addItem(exitNativeMenuItem);

return menu;

}

/**

* To be able to dock and undock we need to set some eventlisteners

private function setSystemTrayProperties():void

{

/**

* Text to show when hovering of the docked application

* icon

SystemTrayIcon(NativeApplication.nativeApplication.icon).tooltip="Systray test application";

/**

* We want to be able to open the application after it has been

* docked

SystemTrayIcon(NativeApplication.nativeApplication.icon).addEventListener(MouseEvent.CLICK, undock);

/**

* Listen to the display state changing of the window, so that we

* can catch the minimize

stage.nativeWindow.addEventListener(NativeWindowDisplayStateEvent.DISPLAY_STATE_CHANGING, nwMinimized);

/**

* Catch the minimize event

}

/**

* Do the appropriate actions after the windows display state has changed.

* E.g. dock when the user clicks on minize

private function nwMinimized(displayStateEvent:NativeWindowDisplayStateEvent):void

{

/**

* Do we have an minimize action?

* The afterDisplayState hasn't happened yet, but

* only describes the state the window will go to, * so we can prevent it!

if (displayStateEvent.afterDisplayState == NativeWindowDisplayState.MINIMIZED)

{

/**

* Prevent the windowedapplication minimize action

* from happening and implement our own

* minimize

* The reason the windowedapplication minimize

* action is caught, is that if active we're not able to

* undock the application back neatly. The

* application doesn't become visible directly, but

* only after clicking on the taskbars application link.

* (Not sure yet what happens exactly with standard

* minimize)

* /

displayStateEvent.preventDefault();

//Dock (our own minimize)

dock();

}

/**

* Do our own 'minimize' by docking the application to the systray (showing

* the application icon in the systray)

public function dock():void

{

//Hide the applcation

stage.nativeWindow.visible=false;

//**

* Setting the bitmaps array will show the application icon in the

* systray

NativeApplication.nativeApplication.icon.bitmaps=[dockImage];

}

/**

* Show the application again and remove the application icon from the

* systray

public function undock(evt:Event):void

{

/**

* After setting the window to visible, make sure that the

* application is ordered to the front,

* else we'll still need to click on the application on the taskbar to

* make it visible

* /

stage.nativeWindow.visible=true;

stage.nativeWindow.orderToFront();

/**

* Clearing the bitmaps array also clears the applcation * icon from the systray

* /

NativeApplication.nativeApplication.icon.bitmaps=[];

}

/**

* Close the application

private function closeApp(evt:Event):void

{

stage.nativeWindow.close();

}

]]>

</mx:Script>

</mx:WindowedApplication>