更新日期：2010.7.26
1.Observer类库简介
Cairngorm的 Observer 类库提供了一套在mxml中声明的非可视化的组件，用于观察其它对象，当这些对象的值发生改变时，将触发视图中的方法（行为）。这些组件可帮助减少mxml组件中的代码数量。
经常，视图组件需要观察并对model对象的值发生作用时，做出反应。一个最常见的方法是数据绑定。数据绑定最简单的用法如下：
这里将model对象的属性"firstName"与视图控件TextInput的属性"text"进行了绑定。但是，如果这个属性不存在，开发人员需要调用定义在视图组件上的方法。
2.Observer类库使用说明
2.1 标签Observe
作用
当Observe 标签中的属性source的值发生改变时，调用handler定义的方法。
举例
代码说明：当model的属性firstName发生任何改变，都调用函数observe。
详见例1：ObserverSamples.mxml
2.2 标签ObserveValue
作用
当ObserveValue 标签中的属性value的值与属性source的值相等时，调用handler定义的方法。
举例
source="{ person.lastName }" value="{ 'bar' }" handler="observeValue"/>
代码说明：当person.lastName的值等于"bar"时，调用函数observeValue。
详见例1：ObserverSamples.mxml
注意
我们一般都采用组件化开发。在Presentation
Model中，我们可能使用一个简单对象去封装视图的行为和视图状态。于是，在使用Observe/ObserveValue之前，我们应该提取出视图的
方法，封装到Presentation Model中。使用这些标签要小心与布局或视图组件中可视化相关的行为。
2.3 标签EventListener
标签EventListener 可以监听模型派发的事件，代码如下：
source="{ person }"
type="{ Person.UPDATE_EVENT }"
handler="eventListener"/>
代码说明：当person 对象派发事件Person.UPDATE_EVENT时，调用函数eventListener
详见例1：ObserverSamples.mxml
2.4 标签ChildProvider
ChildProvider类绑定dataProvider属性提供的数据源与childList属性提供的容器
代码举例
dataProvider="{ people }" childList="{ navigator }">
import com.adobe.cairngorm.observer.Person;
]]>
代码说明：将people数组与控件navigator绑定，自动生成三个mx:VBox组件，当容器的选择发生变化时，观察器则调用itemRenderer去重新显示，data 代表当前数据项。
代码详见 例2：ChildProviderWithAccordion.mxml
FLEX的一些控件允许使用dataprivder去绑定collection，并且可以自动随数据源的变化而变化，如下例：
本例中collection中添加或删除一个数据项，都将自动反应到FLEX控件上。
但是，FLEX framework中的一些控件，比如TabNavigator, Accordion 或 ViewStack并不能使用dataprivder。当collection发生变化时，开发人员必须通知这些FLEX控件，数据发生了改变。一种最常见的方法就是人工派发一个collection数据项变化的事件，通知视图添加或移除视图中的子项。
对于不支持dataprovider属性的视图组件，可以使用Observer 类库的ChildProvider 和SelectableChildProvider 。它们用来将data items和不能采用dataprovider的控件绑定到一起，比如TabNavigator。但需要item renderer的支持。
2.5 标签SelectableChildProvider
当一个Presentation Model封装了数据源并提供当前选中的index，就可以使用SelectableChildProvider 类，将
dataProvider="{ people }"
childList="{ navigator }"
selectedItem="{ pm.selectableItem }">
import com.adobe.cairngorm.observer.Person;
]]>
代码说明：将people数组与控件navigator绑定，自动生成三个mx:VBox组件，当容器的选择发生变化时，观察器则调用itemRenderer去重新显示，，data 代表当前选中数据项，由pm类中的selectableItem 提供。
PM类提供了序号
[Bindable]
public var people:IList;
private var _selectableItem:Person;
[Bindable("itemChange")]
public function get selectableItem():Person
{
return _selectableItem
}
代码详见例3：SelectableChildProviderWithModel.mxml
如果没有PM类，也可以直接将二个控件通过数据源进行绑定。
代码如下
dataProvider="{ people }"
childList="{ navigator }"
selectedItem="{ selectedItemCombo.selectedItem }">
import com.adobe.cairngorm.observer.Person;
]]>
width="400" height="200"
change="selectedItemCombo.selectedIndex = navigator.selectedIndex"/>
代码说明：本例将selectedItemCombo与navigator容器进行了绑定。
代码详见例4：SelectableChildProviderWithTabNavigator.mxml
例5：SelectableChildProviderWithViewStack.mxml
例1：ObserverSamples.mxml
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:cairngorm="com.adobe.cairngorm.observer.*"
minWidth="955" minHeight="600">
import com.adobe.cairngorm.observer.Person;
[Bindable]
private var person:Person = new Person();
private function observe(parameter:String):void
{
trace("observe " + parameter);
if (statusText)
statusText.text += "observe " + parameter + "\n";
}
private function observeWithoutParameter():void
{
trace("observeWithoutParameter");
if (statusText)
statusText.text += "observeWithoutParameter" + "\n";
}
private function observeValue():void
{
trace("observeValue");
statusText.text += "observeValue" + "\n";
}
private function observeValueWithParameter(parameter:String):void
{
trace("observeValueWithParameter " + parameter);
if (statusText)
statusText.text += "observeValueWithParameter " + parameter + "\n";
}
private function eventListener(event:Event):void
{
trace("eventListener " + event.type);
statusText.text += "eventListener " + event.type + "\n";
}
private function eventListenerWithoutParameter():void
{
trace("eventListenerWithoutParameter");
statusText.text += "eventListenerWithoutParameter" + "\n";
}
]]>
source="{ person.firstName }"
handler="observeWithoutParameter"
sendArgumentsToHandler="false"/>
source="{ person.lastName }" value="{ 'bar' }"
handler="observeValue"/>
source="{ person.lastName }" value="{ 'bar' }"
handler="observeValueWithParameter"
sendArgumentsToHandler="true"/>
source="{ person }"
type="{ Person.UPDATE_EVENT }"
handler="eventListener"/>
source="{ person }"
type="{ Person.UPDATE_EVENT }"
handler="eventListenerWithoutParameter"
sendArgumentsToHandler="false"/>
width="400" height="600"/>
例2：ChildProviderWithAccordion.mxml
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:sample="sample.*"
xmlns:cairngorm="com.adobe.cairngorm.observer.*"
xmlns:observer="com.adobe.cairngorm.observer.*"
minWidth="955" minHeight="600">
import com.adobe.cairngorm.observer.Person;
]]>
width="400" height="200"/>
例3：SelectableChildProviderWithModel.mxml
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:sample="sample.*"
xmlns:cairngorm="com.adobe.cairngorm.observer.*"
xmlns:observer="com.adobe.cairngorm.observer.*"
minWidth="955" minHeight="600">
dataProvider="{ people }"
childList="{ navigator }"
selectedItem="{ pm.selectableItem }">
import com.adobe.cairngorm.observer.Person;
]]>
dataProvider="{ people }" labelField="firstName"
selectedIndex="{ pm.selectableIndex }"
change="pm.selectPerson( selectedItemCombo.selectedItem )"/>
width="400" height="200"
change="pm.selectPersonByIndex( navigator.selectedIndex )"/>
例4：SelectableChildProviderWithTabNavigator.mxml
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:sample="sample.*"
xmlns:cairngorm="com.adobe.cairngorm.observer.*"
xmlns:observer="com.adobe.cairngorm.observer.*"
minWidth="955" minHeight="600">
dataProvider="{ people }"
childList="{ navigator }"
selectedItem="{ selectedItemCombo.selectedItem }">
import com.adobe.cairngorm.observer.Person;
]]>
dataProvider="{ people }" labelField="firstName"/>
width="400" height="200"
change="selectedItemCombo.selectedIndex = navigator.selectedIndex"/>
例5：SelectableChildProviderWithViewStack.mxml
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:sample="sample.*"
xmlns:cairngorm="com.adobe.cairngorm.observer.*"
xmlns:observer="com.adobe.cairngorm.observer.*"
minWidth="955" minHeight="600">
dataProvider="{ people }"
childList="{ navigator }"
selectedItem="{ selectedItemCombo.selectedItem }">
import com.adobe.cairngorm.observer.Person;
]]>
dataProvider="{ people }" labelField="firstName"/>
width="400" height="200"
change="selectedItemCombo.selectedIndex = navigator.selectedIndex"/>
参考文献
1.How to Use the Cairngorm Observer Library
.
阅读(1153) | 评论(0) | 转发(1) |
