FLEX에서 간단한 서비스 레이어와 VIEW 레이어를 분리하는 방법

package services {
	import mx.collections.ArrayCollection;
	import mx.rpc.events.ResultEvent;
	import mx.rpc.http.mxml.HTTPService;
	
	import valueObjects.Product;
	
	public class ProductService extends HTTPService {
		[Bindable]
		public var products:ArrayCollection;

		public function ProductService(rootURL:String=null, destination:String=null) {
			super(rootURL, destination);

			this.resultFormat="e4x";
			this.url="http://www.flexgrocer.com/categorizedProducts.xml";
			
			addEventListener(ResultEvent.RESULT, handleProductResult);
		}
		
		private function handleProductResult( event:ResultEvent ):void {
			var productsArray:Array = new Array();
			var resultData:XMLList = event.result..product;
			for each (var p:XML in resultData) {			
				var product:Product = Product.buildProductFromAttributes( p );
				productsArray.push( product );
			}

			products = new ArrayCollection( productsArray );
		}		
	}
}

<?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/mx"
			   xmlns:views="views.*" xmlns:services="services.*"
			   creationComplete="handleCreationComplete(event)">

	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
		<services:CategoryService id="categoryService"/>
		<services:ProductService id="productService"/>
	</fx:Declarations>

	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			
			private function handleViewCartClick( event:MouseEvent ):void {
				bodyGroup.currentState="cartView";
			}

			private function handleCreationComplete(event:FlexEvent):void {
				categoryService.send();
				productService.send();
			}
			

		]]>
	</fx:Script>

	<s:controlBarLayout>
		<s:BasicLayout/>
	</s:controlBarLayout>
	
	<s:controlBarContent>
		<s:Button y="10" label="Checkout" id="btnCheckout" right="10"/>
		<s:Button y="10" label="View Cart" id="btnCartView" right="90" click="handleViewCartClick( event )"/>
		<s:Button label="Flex Grocer" x="5" y="5"/>
		<s:List left="200" height="40" dataProvider="{categoryService.categories}" labelField="name">
			<s:layout>
				<s:HorizontalLayout/>
			</s:layout>
		</s:List>
	</s:controlBarContent>
	<s:Label text="(c) 2009, FlexGrocer" right="10" bottom="10"/>
	<views:ShoppingView id="bodyGroup" 
						width="100%" height="100%"
						groceryInventory="{productService.products}"/>

</s:Application>