TabNavigation in Flex

<?xml version="1.0"?>
<!-- Simple example to demonstrate the TabBar control. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[

            import mx.events.ItemClickEvent;
            import mx.controls.TabBar;

            [Bindable]
            public var STATE_ARRAY:Array = [{label:"Alabama", data:"Montgomery"},
                {label:"Alaska", data:"Juneau"},
                {label:"Arkansas", data:"LittleRock"}
            ];
           
            private function clickEvt(event:ItemClickEvent):void {
                // Access target TabBar control.
                var targetComp:TabBar = TabBar(event.currentTarget);
                forClick.text="label is: " + event.label + ", index is: " +
                    event.index + ", capital is: " +
                    targetComp.dataProvider[event.index].data;
            }               
       ]]>
    </mx:Script>

    <mx:Panel title="TabBar Control Example" height="75%" width="75%"
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

        <mx:Label width="100%" color="blue"
            text="Select a tab to change the current panel."/>

        <mx:TabBar itemClick="clickEvt(event);">
            <mx:dataProvider>{STATE_ARRAY}</mx:dataProvider>
        </mx:TabBar>

        <mx:TextArea id="forClick" height="100%" width="100%"/>

    </mx:Panel>
</mx:Application>

DataGrid Using Flex

<?xml version="1.0"?>
<!-- DataGrid control example. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:XMLList id="employees">
        <employee>
            <name>Christina Coenraets</name>
            <phone>555-219-2270</phone>
            <email>ccoenraets@fictitious.com</email>
            <active>true</active>
        </employee>
        <employee>
            <name>Joanne Wall</name>
            <phone>555-219-2012</phone>
            <email>jwall@fictitious.com</email>
            <active>true</active>
        </employee>
        <employee>
            <name>Maurice Smith</name>
            <phone>555-219-2012</phone>
            <email>maurice@fictitious.com</email>
            <active>false</active>
        </employee>
        <employee>
            <name>Mary Jones</name>
            <phone>555-219-2000</phone>
            <email>mjones@fictitious.com</email>
            <active>true</active>
        </employee>
    </mx:XMLList>

    <mx:Panel title="DataGrid Control Example" height="100%" width="100%"
        paddingTop="10" paddingLeft="10" paddingRight="10">

        <mx:Label width="100%" color="blue"
            text="Select a row in the DataGrid control."/>

        <mx:DataGrid id="dg" width="100%" height="100%" rowCount="5" dataProvider="{employees}">
            <mx:columns>
                <mx:DataGridColumn dataField="name" headerText="Name"/>
                <mx:DataGridColumn dataField="phone" headerText="Phone"/>
                <mx:DataGridColumn dataField="email" headerText="Email"/>
            </mx:columns>
        </mx:DataGrid>

        <mx:Form width="100%" height="100%">
            <mx:FormItem label="Name">
                <mx:Label text="{dg.selectedItem.name}"/>
            </mx:FormItem>
            <mx:FormItem label="Email">
                <mx:Label text="{dg.selectedItem.email}"/>
            </mx:FormItem>
            <mx:FormItem label="Phone">
                <mx:Label text="{dg.selectedItem.phone}"/>
            </mx:FormItem>
        </mx:Form>
       
    </mx:Panel>
</mx:Application>       

ComboBox using Flex

<?xml version="1.0"?>
<!-- Simple example to demonstrate the ComboBox control. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            [Bindable]
            public var cards:ArrayCollection = new ArrayCollection(
                [ {label:"Visa", data:1},
                  {label:"MasterCard", data:2},
                  {label:"American Express", data:3} ]);
       
            private function closeHandler(event:Event):void {
                myLabel.text = "You selected: " +  ComboBox(event.target).selectedItem.label;
                myData.text = "Data: " +  ComboBox(event.target).selectedItem.data;
            }    
        ]]>
    </mx:Script>

    <mx:Panel title="ComboBox Control Example"
        height="75%" width="75%" layout="horizontal"
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

        <mx:ComboBox dataProvider="{cards}" width="150"
            close="closeHandler(event);"/>

        <mx:VBox width="250">
            <mx:Text  width="200" color="blue" text="Select a type of credit card."/>
            <mx:Label id="myLabel" text="You selected:"/>
            <mx:Label id="myData" text="Data:"/>
        </mx:VBox>        

    </mx:Panel>   
</mx:Application>      

Create alert using Flex

<?xml version="1.0"?>
<!-- Simple example to demonstrate the Alert control. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.events.CloseEvent;
       
            // Event handler function uses a static method to show
            // a pop-up window with the title, message, and requested buttons.       
            private function clickHandler(event:Event):void {
                Alert.show("Do you want to save your changes?", "Save Changes", 3, this, alertClickHandler);
            }
       
            // Event handler function for displaying the selected Alert button.
            private function alertClickHandler(event:CloseEvent):void {
                if (event.detail==Alert.YES)
                    status.text="You answered Yes";
                else
                    status.text="You answered No";
            }

            // Event handler function changes the default Button labels and sets the
            // Button widths. If you later use an Alert with the default Buttons,
            // you must reset these values.
            private function secondClickHandler(event:Event):void {
                Alert.buttonWidth = 100;
                Alert.yesLabel = "Magenta";
                Alert.noLabel = "Blue";
                Alert.cancelLabel = "Green";

                Alert.show("Select a color:","Color Selection",1|2|8,this);
               
                // Set the labels back to normal:
                Alert.yesLabel = "Yes";
                Alert.noLabel = "No";               
            }
        ]]>
    </mx:Script>

    <mx:Panel title="Alert Control Example" width="75%" horizontalAlign="center" paddingTop="10">
      <mx:Text width="100%" color="blue" textAlign="center"
          text="Click the button below to display a simple Alert window."/>
      <mx:Button label="Click Me" click="Alert.show('Hello World!', 'Message');"/>

      <mx:Text width="100%" color="blue" textAlign="center"
          text="Click the button below to display an Alert window and capture the button pressed by the user."/>
      <mx:Button label="Click Me" click="clickHandler(event);"/>
      <mx:Label id="status" fontWeight="bold"/>

      <mx:Text width="100%" color="blue" textAlign="center"
          text="Click the button below to display an Alert window that uses custom Button labels."/>
      <mx:Button label="Click Me" click="secondClickHandler(event);"/>
    </mx:Panel>

</mx:Application>

Hello World Flex Application

 <?xml version="1.0" encoding="utf-8"?>
<mx:application layout="absolute" xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:panel height="200" layout="absolute" title="Hello World Application" width="250" x="140" y="42">
<mx:label fontsize="24" fontweight="bold" text="Hello World" x="22" y="28">
</mx:label>
</mx:panel>
</mx:application>

Starting Flex Application

Open Flex Builder 2/3 Click on File -> choose New ->Flex Project select "Flex Project" it prompt a New FlexProject window enter your project name in "Project name" field if you want to a specific location for project "browse" that folder,if not leave as default "Use default Location" in Project location box, select WebApplication in "Application type" at we are not going to add server so that leave as it is "Server tecchnology" box, then click on "Next" leave as bin-debug as output folder then click Next then it show two tabs Sourcepath and Librarypath. default Sourepath is highlihted if wish to Chage file name enter new name in "Main application file" field with extension .mxml ex: index.mxml . click on image to enlarge