21.5.创建Cairngorm视图、事件和模型

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
<mx:Script>
<![CDATA[
import
oreilly.cookbook.cairngorm.events.RecipeEvent;
import oreilly.cookbook.cairngorm.model.Model;
/*在下面的方法中，会发送RecipeEvent，该事件使得FrontController接收来自服务器的数据，我们不需要知道服务器究竟是从数据库中读取数据还是从其他地方读取。更多关于FrontController的信息，请查看21.8小节。而现在，我们关心的是视图和视图发送的通知应用程序获取数据的事件。另外需要注意的是，CairngormEvent类有一个dispatch方法，用来把它们发送到Cairngorm EventDispatcher上。这跟通常情况下处理事件的方式不同，需要确保事件被FrontController处理而不是被其他的截获。*/
privatefunction loadRecipes():void{
var evt:RecipeEvent = newRecipeEvent(RecipeEvent.GET_RECIPE);
evt.recipeKeywords= recipeKeywords.text.split("," );
//Note that the CairngormEvent class dispatches itself
//This notifies the Cairngorm EventBroadcaster that the event
//is being dispatched. This is used to ensure that the Cairngorm architecture
//handles the event rather than the flash.events.EventDispatcher
evt.dispatch();
}

]]>
</mx:Script>
<mx:VBox>
<mx:TextInput id="recipeKeywords"/>
<mx:Button label="Load Recipes" click="loadRecipes()"/>
<!--Cairngorm程序视图的另一个重要特征是它绑定到模型上。下面的例子中recipeArray是服务器返回的数据数组，它保存在模型中，视图就绑定到它上面。这样不需要把视图暴露给服务相关的逻辑，就能在数据加载到应用程序时更新视图。-->
<mx:DataGrid dataProvider="{Model.getInstance().recipeArray}">
<mx:columns>
<mx:DataGridColumn dataField="title"/>
<mx:DataGridColumn dataField="difficulty"/>
<mx:DataGridColumn dataField="pictureURL">
<mx:itemRenderer>
<mx:Component>
<mx:Image source="{data}"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="preparationTime"/>
<mx:DataGridColumn dataField="ingredients"/>
<mx:DataGridColumn dataField="instructions"/>
</mx:columns>
</mx:DataGrid>
</mx:VBox>
</mx:Canvas>