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>
********************************************************************************
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>
********************************************************************************