Flex 学习笔记2
7.Event 事件：捕获，定位，冒泡
键盘事件：
private function trapKeys(event:KeyboardEvent):void{
Alert.show("charCode:"+String(event.charCode)+" | keyCode:"+String(event.keyCode));
Alert.show(event.currentTarget.name);
}
<mx:TextArea id="text_area" name="mytest" keyDown="trapKeys(event)"/>
8.Flex 可视化组件
Flex中所有可视化组件都继承自UIComponent,当自定义组件时，应该扩展该类，该基类包括宽度，高度，双击事件，id属性，样式及x ,y
9.组件事件处理示例：
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.controls.List;
private function handleChageEvent(event:Event):void
{
Alert.show("you select the name:"+List(event.currentTarget).selectedItem.label);
}
]]>
</mx:Script>
<mx:List change="handleChageEvent(event)">
<mx:dataProvider>
<mx:Array>
<mx:Object label="zhang san"/>
<mx:Object label="li si"/>
<mx:Object label="wang wu"/>
</mx:Array>
</mx:dataProvider>
</mx:List>
10.组件行为：
行为：触发器也效果的结合
<mx:Fade id="fadeInstance" alphaFrom="0" alphaTo="1" duration="1000"/>
<mx:Button label="Fade Button" creationCompleteEffect="{fadeInstance}"/>
11.为了使用组件的x和y属性，子组件的父容器必须使用绝对定位，，默认情况下，Canvas容器使用绝对定位，但对于Application,Box,Panel容器，必须将layout设置为absolute
12.集合定义的方法：
<mx:ArrayCollection id="myArrayCollection">
<mx:source>
<mx:Array>
<mx:String>United states</mx:String>
<mx:String>South Africa</mx:String>
<mx:String>United kingdom</mx:String>
</mx:Array>
</mx:source>
</mx:ArrayCollection>
或着
import mx.collections.ArrayCollection;
[Bindable]
public var myCollection:ArrayCollection = new ArrayCollection(["United states","South Africa","United kingdom"]);
或着
public var myCollection:arrayCollection = new ArrayCollection();
var myArray:Array = ["United states","South Africa","United kingdom"];
myColleaction.source = myArray;
13.集合的接口
IList:以顺序方式组织项的集合，不支持排序过虑或指针
适合于在集合的特定索引获取、设置、添加、删除项
在集合末尾添加一项
获取集合中项的索引
获取集合中项的总数
获取集合中所有的项
IcollectionView：基于数据集合的视图，支持排序过虑，而不修改底层数据，为了访问项，此接口提供对IViewCursor对象的访问
适合于通过修改视图来排序数据，或过滤显示项的子集，而不修改底层数据
移动集合中的项，并使用书签保存项在集合中的位置
显示最初可能不用的远程数据，或显示器显示不同时间的不同数据
IviewCursor:实现对于集合视图的双向枚举，指针提供了定位搜索和设置标签功能
var myArrayCollection:ICollectionView = new ArrayCollection([ "Bobby", "Mark", "Trevor", "Jacey", "Tyler" ]);
var cursor:IViewCursor = myArrayCollection.createCursor();
cursor.seek(CursorBookmark.last);
while (!cursor.beforeFirst)
{
trace(current);
cursor.movePrevious();
}
ArrayCollection 和XMLListCollection 类都城实现了IList 和ICollectionView接口
public function sortCollection():void
{
var sort:Sort = new Sort();
sort.fields = [new SortField("label", true, true)];
myCollection.sort = sort;
myCollection.refresh();
}
public function filterCollection():void
{
myCollection.filterFunction = stateFilterFunc;
myCollection.refresh();
}
private function stateFilterFunc(item:Object):Boolean
{
return item.label >= "A" && item.label < "N";
}
private function resetCollection():void
{
myCollection.filterFunction = null;
myCollection.sort = null;
myCollection.refresh();
}
]]>
</mx:Script>
<mx:ArrayCollection id="myCollection">
<mx:Array>
<mx:Object label="LA" data="Baton Rouge" />
<mx:Object label="NH" data="Concord" />
<mx:Object label="TX" data="Austin" />
<mx:Object label="MA" data="Boston" />
<mx:Object label="AZ" data="Phoenix" />
</mx:Array>
</mx:ArrayCollection>
<mx:List dataProvider="{myCollection}" width="200" />
<mx:Button label="Sort Collection" click="sortCollection()" />
<mx:Button label="Filter Collection" click="filterCollection()" />
<mx:Button label="Reset Collection" click="resetCollection()" />
14.集合变化引发事件
IList ICollectionView接口实现类的集合发生变化时，都会分派CollectionEvent类事件
<mx:Script>
<![CDATA[
import mx.events.CollectionEventKind;
import mx.events.CollectionEvent;
import mx.collections.SortField;
import mx.collections.Sort;
import mx.collections.ArrayCollection;
private var index:Number = 0;
public function collectionChange(event:CollectionEvent):void
{
switch (event.kind)
{
case CollectionEventKind.ADD:
myTextArea.text += "Item Added\n";
break;
case CollectionEventKind.REPLACE:
myTextArea.text += "Item Replaced\n";
break;
case CollectionEventKind.REMOVE:
myTextArea.text += "Item Removed\n";
break;
}
}
public function addItem():void
{
myCollection.addItem({label: myTextInput.text, data: index});
index++;
}
private function updateItem():void
{
if (myList.selectedItem != null)
myCollection.setItemAt({label: myTextInput.text, data: index}, myList.selectedIndex);
}
private function removeItem():void
{
if (myList.selectedItem != null)
myCollection.removeItemAt(myList.selectedIndex);
}
]]>
</mx:Script>
<mx:ArrayCollection id="myCollection" collectionChange="collectionChange(event)" />
<mx:TextInput id="myTextInput" />
<mx:List id="myList" dataProvider="{myCollection}" width="200" height="200" />
<mx:Button label="ADD" click="addItem()" />
<mx:Button label="UPDATE" click="updateItem()" />
<mx:Button label="REMOVE" click="removeItem()" />
<mx:TextArea id="myTextArea" width="200" height="200" />