Iam tyring to reproduce the same output as this: `http://tourdeflex.adobe.com/flex4samples/GroupsAndContainers/TabbedNavigator/sample1.html`

Below is my own code developed myself, but iam not getting required output.. dont know what went wrong. pls kindly run my code and provide me correct solution:

**TabBarDemo.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/mx"  xmlns:components="components.*">

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

            import mx.collections.ArrayCollection;
            import mx.controls.Alert;

            import vo.EmployeeVO;

            public var empVO: EmployeeVO;

            [Bindable]
            public var empList: ArrayCollection;

            protected function contactInfo_employeeEventHandler(event:EmployeeEvent):void
            {
                empVO = event.employeeInfoVO;

                if(empVO != null)
                    empList.addItem(empVO);
                else
                    Alert.show("Object is null");

            }
        ]]>
    </fx:Script>

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <s:VGroup>

        <s:TabBar dataProvider="{contact}" />

        <mx:ViewStack id="contact"
                      resizeToContent="true">

            <components:ContactInfo id="contactInfo"
                                    label="Employee Info" 
                                    employeeEvent="contactInfo_employeeEventHandler(event)"/>

            <components:ContactList label="Employee List"
                                    empList="{empList}"/>

        </mx:ViewStack>

    </s:VGroup>

</s:Application>

```

**ContactInfo.mxml**

```
<?xml version="1.0" encoding="utf-8"?>
<s:NavigatorContent 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="400" height="300">

    <fx:Metadata>

        [Event(name="employeeEvent", type="events.EmployeeEvent")]

    </fx:Metadata>

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

            import vo.EmployeeVO;

            protected function submit_clickHandler(event:MouseEvent):void
            {
                var empVO: EmployeeVO = new EmployeeVO();

                empVO.empName = empName.text;
                empVO.address = address.text;
                empVO.state = state.text;
                empVO.city = city.text;
                empVO.zip = zip.text;

                var empEvent: EmployeeEvent = new EmployeeEvent("employeeEvent", empVO);
                dispatchEvent(empEvent);

            }
        ]]>
    </fx:Script>

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <s:Form>

        <s:FormItem label="Name">
            <s:TextInput id="empName"/>
        </s:FormItem>

        <s:FormItem label="Address">
            <s:TextInput id="address" />
        </s:FormItem>

        <s:FormItem label="City">
            <s:TextInput id="city" />
        </s:FormItem>

        <s:FormItem label="State">
            <s:TextInput id="state" />
        </s:FormItem>

        <s:FormItem label="Zip">
            <s:TextInput id="zip" />
        </s:FormItem>

        <s:FormItem>
            <s:Button id="submit"
                      label="Submit" 
                      click="submit_clickHandler(event)"/>
        </s:FormItem>

    </s:Form>

</s:NavigatorContent>

```

**ContactList.mxml**

```
<?xml version="1.0" encoding="utf-8"?>
<s:NavigatorContent 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="400" height="300"
         >

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

            import spark.components.List;

            import vo.EmployeeVO;

            [Bindable]
            public var empList: ArrayCollection;

        ]]>
    </fx:Script>

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <s:DataGrid dataProvider="{empList}"/>

</s:NavigatorContent>

```

**EmployeeEvent.as**

```
package events
{
    import flash.events.Event;

    import vo.EmployeeVO;

    public class EmployeeEvent extends Event
    {

        public var employeeInfoVO: EmployeeVO;

        public function EmployeeEvent(type: String, employeeInfoVO: EmployeeVO)
        {
            super(type);
            this.employeeInfoVO = employeeInfoVO;
        }
    }
}

```

**EmployeeVO.as**

```
package vo
{
    public class EmployeeVO
    {
        public function EmployeeVO()
        {
        }

        public var empName: String;
        public var address: String;
        public var state: String;
        public var city: String;
        public var zip: String;

    }
}

```

Awaiting your responses!