Log In  
 
  Getting Started  
----------------------------------------

Resources

 

Lists

The List control displays a vertical list of items. Features include:

  • Items displayed are contained within the dataProvider property
  • Custom item renderers can be specified
  • Custom item editors can also be used
  • Single or multiple items can be selected
  • The HorizontalList, TileList, DataGrid, Menu, and Tree controls all inherit from the List control
previous page next page

List control

<?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;
            }

            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:List id="mylist"
        labelField="firstName"
        dataProvider="{employeeList}"
        width="200" height="200"
        itemClick="showMessage(event)"/>

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

</mx:Application>

Rendered Example

HorizonalList control

<?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>

Rendered Example

previous page next page

Added by Mark Nichoson, last edited by matthew horn on Apr 22, 2008  (view change)

Labels:

Enter labels to add to this page:
Wait Image 
Looking for a label? Just start typing.