<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    backgroundColor="#FFFFFF"
    backgroundAlpha="0"
    horizontalAlign="left"
    verticalGap="15" horizontalGap="15">

      <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.rpc.events.ResultEvent;
            import mx.events.ListEvent;

            [Bindable]
            private var employeeList:ArrayCollection = new ArrayCollection();

            private function requestEmployees():void {
                employeesService.send();
            }

            private function resultHandler(event:ResultEvent):void {
                employeeList = event.result.employees.employee as ArrayCollection;

            }

            //show text message when user selects image
            private function showMessage(event:Event):void {
                message.text = "You selected: " +
                    event.currentTarget.selectedItem.firstName + ' ' +
                    event.currentTarget.selectedItem.lastName;
            }
         ]]>
    </mx:Script>


    <mx:HTTPService
        id="employeesService"
        url="http://www.flexmonkeys.com/F3GSE/PartIII/CRUD/employees.xml"
        result="resultHandler(event)"
    />

    <mx:Button label="Return Employees"
        click="requestEmployees()" />

    <mx:HorizontalList id="mylist"
        labelField="firstName"
        dataProvider="{employeeList}"
        columnWidth="100" rowHeight="50"
        columnCount="5"
        itemClick="showMessage(event)"/>

    <mx:Text id="message"
        paddingTop="20" />

</mx:Application>
