list for flex mobile app (android)

I am new in flex android and I've been practicing this right now. I have here an exercise program with flex android app (AS3). Here's the code of my HomeView.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="Home">

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

        [Bindable]
        private var people:ArrayCollection;

        private function init():void
        {
            people = new ArrayCollection();
            var somebody:Object = new Object();

            somebody.firstname = "John";
            somebody.lastname = "Doe";
            somebody.phone = "555213412";
            somebody.email = "john@doe.com";
            somebody.twitter = "@johndoe";

            people.addItem(somebody);

            somebody = new Object();
            somebody.firstname = "Jane";
            somebody.lastname = "Baker";
            somebody.phone = "5559981272";
            somebody.email = "jane@baker.com";
            so开发者_Go百科mebody.twitter = "@janebaker";

            people.addItem(somebody);

        }
        private function handleClick():void
                {
                    navigator.pushView( PeopleDetails, peopleList.selectedItem );
                }
      ]]>
    </fx:Script>

        <s:List  id="peopleList" dataProvider="{people}" click="handleClick()"  labelField="name" width="100%" height="100%" />


</s:View>

And this is the code of my PeopleDetails.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" 
               xmlns:mx="library://ns.adobe.com/flex/halo"
                title ="Person Details">
    <fx:Script>
        <![CDATA[
          private function gotoHome():void
            {   
                navigator.popToFirstView();
          }
        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
      <s:layout>
        <s:VerticalLayout paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"/>
    </s:layout>


    <s:Form width="100%" height="100%">
        <s:FormItem label="Name:" width="100%">
            <s:Label text="{data.name}"/>  
        </s:FormItem>
        <s:FormItem label="Phone:" width="100%">
            <s:Label text="{data.phone}"/>
        </s:FormItem>
        <s:FormItem label="Email:" width="100%">
            <s:Label text="{data.email}"/>
        </s:FormItem>
        <s:FormItem label="Twitter:" width="100%">
            <s:Label text="{data.twitter}"/>
        </s:FormItem>
    </s:Form>
        <s:navigationContent>
            <s:Button label="Home" click="gotoHome()"/>
        </s:navigationContent>
</s:View>

Now, my problem is, why is it that I can't see my list, and that if just click anywhere in the screen, it brings me to the the PeopleDetails.mxml view, and still, no data shown (but the labels where there).? What did I miss in my code?

And by the way, I'm currently using FlashDevelop for my apps, is there something you can recommend for me to study about it (flex android app)? thanks all.

Flex Android Apps are nothing more than glorified browser. You can test your code on the browser and figure out the problem.