<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>