Thursday 28 April 2011

First Flex Application

This is the small application i tried purely using flex 4.5.
To see what the application do follow the link:
http://www.youtube.com/watch?v=jJ-8F7UgGY8
Directly paste the code in your Flex builder and get ready to learn the concepts with pure fun. :D

The various concepts i have used in this application are:

1. Concept of States in flex.
2. Modular approach.
3. concept of parentDocument.
4. accessing components randomly.
5. Concept of Declaration tag.
6. Concept of actionScript tag.

Prerequisites:
1. Flex 4.5.downLoadLink
2. Images a. Smiley image.
                b. Sad Smiley image.
                c.Teasing Smiley image.
***********************************************************************************
 MainPage.mxml:This is the main page.                                                                         MainPage Starts
***********************************************************************************
<?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" width="80%" height="80%" xmlns:local="*" currentState="startPage" creationComplete="init()">
    <fx:Declarations>
       
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
           
            public function currentStatef():void
            {
                currentState="middlePage";
                label1.visible=true;
                sadSmiley.visible=true;
            }
            public function init():void
            {
                label1.visible=false;
                sadSmiley.visible=false;
               
            }
            public function endState():void
            {
                currentState="endState";
                label1.visible=false;
                sadSmiley.visible=false;
            }
        ]]>
    </fx:Script>
    <s:states>
        <s:State name="startPage"/>
        <s:State name="middlePage"/>
        <s:State name="endState"/>
    </s:states>
   
   
    <s:Panel width="100%" height="100%" backgroundColor="#FFFFFF" chromeColor="#363AF0"
             contentBackgroundColor="#E4E9E0" title="Crazy Shashank">
        <mx:VBox width="100%" height="100%" backgroundColor="red">
            <s:BorderContainer backgroundColor="red" borderColor="red" borderVisible="true" width="100%" height="100%" >
                <!--<s:layout>
                    <s:HorizontalLayout  verticalAlign="middle" horizontalAlign="center"/>
                </s:layout> -->
                <local:MiddleComponent id="middle" includeIn="middlePage"/>
                <local:StartComponent id="start" includeIn="startPage"/>
                <local:EndComponenet id="end" includeIn="endState"/>
                <!--<s:BorderContainer id="bdCont" backgroundColor="black" borderColor="green" borderVisible="true" width="90%" height="90%">
                    <s:Image  id="smiley" width="10%" height="10%" source="600px-Smiley.svg.png" mouseOver="createNewCoordinates()">
                    </s:Image>
                </s:BorderContainer>-->       
            </s:BorderContainer>
            <mx:HBox backgroundColor="red" borderVisible="false">
                <s:Label id="label1" text="Do You want Promotion? If yes click on Smiley or click here:" fontSize="25" fontStyle="italic" fontWeight="bold" color="black"/>
                <s:Image  id="sadSmiley" width="10%" height="23" source="sad-smiley.jpg" click="endState()"/>
               
            </mx:HBox>
           
        </mx:VBox>
    </s:Panel>
</s:Application>
**********************************************************************************
StartComponent.mxml:First page to come on screen.
**********************************************************************************
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:s="library://ns.adobe.com/flex/spark"
         xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
   
    <s:layout>
        <s:HorizontalLayout  verticalAlign="middle" horizontalAlign="center"/>
    </s:layout>
    <s:BorderContainer id="bdCont" backgroundColor="black" borderColor="green" borderVisible="true" width="90%" height="90%">
        <s:layout>
            <s:HorizontalLayout  verticalAlign="middle" horizontalAlign="center"/>
        </s:layout>
        <mx:VBox>
            <s:Label text="WELCOME" color="Green" fontSize="35" fontWeight="bold"/>
            <mx:HBox>
                <s:Label text="Click here to Continue" color="Green" fontSize="25" fontWeight="bold"/>
                <s:Image source="continue.jpg" width="80" height="60" click="parentDocument.currentStatef()"/>
            </mx:HBox>
        </mx:VBox>
    </s:BorderContainer>
   
</s:Group>
**********************************************************************************
MiddleComponent.mxml
**********************************************************************************
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:s="library://ns.adobe.com/flex/spark"
         xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            [Bindable]
            var globalNo:Number;
           
            private function createNewCoordinates():void{
                //var i:int=Math.ceil(Math.random()*1000);
                smiley.x=Math.ceil(Math.random()*1000);
                smiley.y=Math.ceil(Math.random()*400);;
            }
           
           
           
        ]]>
    </fx:Script>
    <s:layout>
        <s:HorizontalLayout  verticalAlign="middle" horizontalAlign="center"/>
    </s:layout>
    <s:BorderContainer id="bdCont" backgroundColor="black" borderColor="green" borderVisible="true" width="90%" height="90%">
        <s:Image  id="smiley" width="10%" height="10%" source="600px-Smiley.svg.png" mouseOver="createNewCoordinates()">
        </s:Image>
    </s:BorderContainer>
   
</s:Group>
***********************************************************************************
EndComponent.mxml
***********************************************************************************
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:s="library://ns.adobe.com/flex/spark"
         xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:layout>
        <s:HorizontalLayout  verticalAlign="middle" horizontalAlign="center"/>
    </s:layout>
    <s:BorderContainer id="bdCont" backgroundColor="black" borderColor="green" borderVisible="true" width="90%" height="90%">
        <s:layout>
            <s:HorizontalLayout  verticalAlign="middle" horizontalAlign="center"/>
        </s:layout>
        <mx:VBox>
            <s:Label text="Ha Ha Ha Ha" color="Green" fontSize="35" fontWeight="bold"/>
            <mx:HBox>
                <s:Label text="Chalo kaam pe lag jaao" color="Green" fontSize="25" fontWeight="bold"/>
                <s:Image source="laughing.smileface2.gif" width="150" height="150"/>
            </mx:HBox>
        </mx:VBox>
    </s:BorderContainer>
</s:Group>
********************************************************************************