Some Other Tutorials To Read

1. http://www.adobe.com/devnet/flex/samples.html
2. http://www.adobe.com/devnet/flex/videotraining.html
3. http://www.adobe.com/newsletters/edge/january2011/articles/article5/index.html?trackingid=IEHCO

Watching Tutorial - BasicViewApp - View Transitions

Source Code:
BasicViewAppUserListView.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark" title="Cool People"
  creationComplete="view1_creationCompleteHandler(event)">
 <fx:Declarations>
  <!-- Place non-visual elements (e.g., services, value objects) here -->
  <s:FlipViewTransition id="flipLeft" duration="300" direction="left" />
  <s:FlipViewTransition id="flipRight" duration="300" direction="right" />
 </fx:Declarations>
 
 <s:layout>
  <s:VerticalLayout paddingTop="10" />
 </s:layout>
 
 <fx:Script>
  <![CDATA[
   import mx.events.FlexEvent;
   
   import spark.events.IndexChangeEvent;
   
   protected function userList_changeHandler(event:IndexChangeEvent):void
   {
    // TODO Auto-generated method stub
    navigator.pushView(views.UserProfile, userList.selectedItem);
   }
   
   protected function view1_creationCompleteHandler(event:FlexEvent):void
   {
    // TODO Auto-generated method stub
    navigator.defaultPopTransition = flipRight;
    navigator.defaultPushTransition = flipLeft;
   }
   
  ]]>
 </fx:Script>

Watching Tutorial - Basic View App - ActionBar

Source Code:
BasicViewApp.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
       xmlns:s="library://ns.adobe.com/flex/spark"
       firstView="views.BasicViewAppUserListView"
       applicationDPI="160">
 <fx:Declarations>
  <!-- Place non-visual elements (e.g., services, value objects) here -->
 </fx:Declarations>
 <s:navigationContent>
  <s:Button label="Back" click="navigator.popView();" />
 </s:navigationContent>
</s:ViewNavigatorApplication>

Watching Tutorial - Basic View App - profile and user notes

Source Code:
UserProfile.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark" title="Cool Person Profile">
 
 <fx:Script>
  <![CDATA[
   protected function button1_clickHandler(event:MouseEvent):void
   {
    // TODO Auto-generated method stub
    navigator.pushView(views.UserNotes, {personName:personaName.text});
   }
  ]]>
 </fx:Script>
 
 <fx:Declarations>
  <!-- Place non-visual elements (e.g., services, value objects) here -->
 </fx:Declarations>
 <s:Label id="personName" x="10" y="51" fontSize="24" text="{data.name}"/>
 <s:TextArea id="jobDescription" x="10" y="82" height="120" text="{data.job}"/>
 <s:Button x="10" y="210" label="Add notes" click="button1_clickHandler(event)"/>
</s:View>

Watching Tutorial - Basic View App - adjusting layout

Source Code:
BasicViewAppUserListView.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark" title="Cool People">
 <fx:Declarations>
  <!-- Place non-visual elements (e.g., services, value objects) here -->
 </fx:Declarations>
 
 <s:layout>
  <s:VerticalLayout paddingTop="10" />
 </s:layout>
 
 <fx:Script>
  <![CDATA[
   import spark.events.IndexChangeEvent;
   
   protected function userList_changeHandler(event:IndexChangeEvent):void
   {
    // TODO Auto-generated method stub
    navigator.pushView(views.UserProfile, userList.selectedItem);
   }
   
  ]]>
 </fx:Script>
 
 <s:Label text="Choose a Cool Person" paddingLeft="10" />
 <s:List id="userList"
   width="100%"
   height="100%"
   labelField="name"
   change="userList_changeHandler(event)">
  <s:ArrayCollection>
   <fx:Object name="Name 1 Lee" job="Adobe Evangelist" />
   <fx:Object name="Name 2 Brent" job="Flex geek" />
   <fx:Object name="Name 3 Ryan" job="Adobe Engelist" />
   <fx:Object name="Name 4 Steve" job="Cool Gadget guy" />
  </s:ArrayCollection>
 </s:List>
</s:View>

Watching Tutorial - Basic View App - Setup

Watching Tutorial - Simple Android app - Run Configuration