carly31
2/2/2016 - 6:01 AM

list

<?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">
	
	<!-- the ActionScript defined here will handle event dispatches that occur
	whenever the selected item in the list is changed -->
	<fx:Script>
		<![CDATA[
			import spark.events.IndexChangeEvent;
			private function selectionChangingHandler(event:IndexChangeEvent):void {
				var item:* = list.dataProvider.getItemAt(event.newIndex);
				if (item.type != "employee") {
					event.preventDefault();
				}
			}
		]]>
	</fx:Script>
	
	<!-- define the list and how the data it contains will be displayed -->
	<s:List id="list" changing="selectionChangingHandler(event);" verticalCenter="0" horizontalCenter="0">
		<s:itemRenderer>
			<fx:Component>
				<s:ItemRenderer>
					<s:states>
						<s:State name="normal" />
						<s:State name="hovered" />
						<s:State name="selected" />
					</s:states>
					<s:Rect left="0" right="0" top="0" bottom="0">
						<s:fill>
							<s:SolidColor color="0x999999" alpha="0" alpha.hovered="0.2"
										  alpha.selected="0.6" />
						</s:fill>
					</s:Rect>
					<s:Label id="nameLabel" text="{data.lastName}, {data.firstName}"
							 top="5" left="5" right="5" />
					<s:Label y="20" id="phoneLabel" text="{data.phone}" includeIn="selected"
							 top="25" bottom="5" left="5" right="5" />
				</s:ItemRenderer>
			</fx:Component>
		</s:itemRenderer>
		
		<!-- define the data to be inserted into the List container -->
		<s:dataProvider>
			<s:ArrayList>
				<fx:Object type="hr" firstName="Ann" lastName="Green" />
				<fx:Object type="employee" firstName="Tom"  lastName="Smith" phone="415-155-1212" />
				<fx:Object type="employee" firstName="John" lastName="Black" phone="408-344-1234" />
				<fx:Object type="employee" firstName="Jane" lastName="White" phone="415-235-7878" />
				<fx:Object type="employee" firstName="Bill" lastName="Jones" phone="415-875-7800" />
			</s:ArrayList>
		</s:dataProvider>
	</s:List>
	
</s:Application>