Cookbook 4 노트 8장 List 및 프로젝트 렌더링

1. 사용자 정의 프로젝트 렌더기 만들기
 

<s:List id="list" dataProvider="{provider}" selectedIndex="0">
	<s:itemRenderer>
		<fx:Component>
			<s:ItemRenderer>
				<s:states>
					<s:State name="normal"/>
					<s:State name="hovered"/>
					<s:State name="selected"/>
				</s:states>
				<s:Label text="{data}"/>
			</s:ItemRenderer>
		</fx:Component>
	</s:itemRenderer>
</s:List>

프로젝트 디스플레이의 기본 상태는'normal','hovered','selected'이다.Flex 4.5에는'down'과'downAndSelected'가 추가되었습니다.
 
 
2. List에서 지정된 항목으로 스크롤
 
spark.components.List.ensureIndexIsVisible(index:int):void
보기 쉬운 데이터 항목을 스크롤합니다.지정한 색인에 대한 데이터 항목이 완전히 표시되지 않으면 List는 데이터 항목이 표시될 때까지 스크롤합니다.데이터 항목이 이미 나타나면 다른 스크롤이 일어나지 않습니다.
 
 
4. 리스트의 배치 변경
 
(1) 맞춤형 스킨 사용
 

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" 
		xmlns:mx="library://ns.adobe.com/flex/mx">
	<!-- host component -->
	<fx:Metadata>
		[HostComponent("spark.components.List")]
	</fx:Metadata>
	
	<!-- states -->
	<s:states>
		<s:State name="disabled" />
		<s:State name="normal" />
		<s:State name="selected" />
	</s:states>
	
	<s:Scroller>
		<s:DataGroup id="dataGroup" height="{hostComponent.height}" width="{hostComponent.width}">
			<s:layout>
				<s:TileLayout clipAndEnableScrolling="true"/>
			</s:layout>
		</s:DataGroup>
	</s:Scroller>
</s:Skin>

(2) 위에는 쿡북의 예가 있고,layout을 직접 사용할 수도 있다.
 

<s:List width="120" height="80" dataProvider="{provider}" selectedIndex="0"
		itemRenderer="spark.skins.spark.DefaultItemRenderer">
	<s:layout>
		<s:TileLayout clipAndEnableScrolling="true"/>
	</s:layout>
</s:List>

 
7. 특정한 옵션 설정
 
SelectionRestrictedRenderer.mxml
 
 

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
				xmlns:s="library://ns.adobe.com/flex/spark"
				xmlns:mx="library://ns.adobe.com/flex/halo">
	<fx:Script>
		<![CDATA[
			private var __fun:Function;

			public function set selectableFunction(fun:Function):void {
				__fun = fun;
			}

			override public function set data(value:Object):void {
				if (value && __fun(value)) {
					mouseEnabled = true;
					enabled = true;
				} else {
					mouseEnabled = false;
					enabled = false;
				}
				super.data = value;
			}
		]]>
	</fx:Script>
	<s:states>
		<s:State name="normal"/>
		<s:State name="hovered"/>
		<s:State name="selected"/>
	</s:states>
	<s:Label text="{data}"/>
</s:ItemRenderer>

 
 

<?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/halo"
			   creationComplete="init()">
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;

			import renderers.SelectionRestrictedRenderer;
			[Bindable]
			public var provider:ArrayCollection;

			public function init():void {
				provider = new ArrayCollection([12, 13, 4, 5, 16, 19, 400]);
			}

			public function customItemRendererFunction(item:*):IFactory {
				var factory:ClassFactory = new ClassFactory(SelectionRestrictedRenderer);
				factory.properties = {"selectableFunction": selectionAllowFunction};
				return factory;
			}

			public function selectionAllowFunction(value:*):Boolean {
				if (value < Number(textInput.text)) {
					return false;
				} else {
					return true;
				}
			}

			public function updateList():void {
				list.executeBindings();
			}
		]]>
	</fx:Script>
	<s:layout>
		<s:HorizontalLayout/>
	</s:layout>
	<s:TextInput id="textInput" change="updateList()"/>
	<s:List id="list" dataProvider="{provider}" itemRendererFunction="{customItemRendererFunction}"/>
</s:Application>

 
9, List에 오른쪽 버튼 메뉴 추가
ItemRender의 set data() 메서드에서

var personMenu:ContextMenu = new ContextMenu();
var lookupRecord:ContextMenuItem = new
ContextMenuItem("Look Up Record");
var lookupPicture:ContextMenuItem = new
ContextMenuItem("Look Up Picture");
personMenu.customItems.push(lookupRecord);
personMenu.customItems.push(lookupPicture);
this.contextMenu = personMenu;

 public function ContextMenuItem(caption:String, separatorBefore:Boolean = false, enabled:Boolean = true, visible:Boolean = true)
caption:String - 메뉴 항목과 연관된 텍스트를 지정합니다.caption 값 제한에 대해서는 ContextMenuItem 클래스 개요를 참조하십시오.
separatorBefore:Boolean(default = false) - 컨텍스트 메뉴의 메뉴 항목 위에 구분 막대가 표시되는지 여부를 지정합니다.기본값은 false입니다.
enabled:Boolean(default =true) - 메뉴 항목이 컨텍스트 메뉴에서 활성화되어 있는지 비활성화되어 있는지 여부를 지정합니다.기본값은 true입니다.이 매개 변수는 선택할 수 있습니다.
visible:Boolean(default = true) - 메뉴 항목이 표시되는지 여부를 지정합니다.기본값은 true입니다.