`
schy_hqh
  • 浏览: 558105 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

(九)对List和DataGroup使用itemRenderer

 
阅读更多
数据集
      包含一组数据元素的对象就叫做数据集DataSet
      如:Array、XMLList、ArrayCollection、XMLListCollection
如何显示一个数据集?
   通过labelField指定列表应该显示数据集中哪个属性(局限:只能显示文本)
   如果要显示格式化的数据,或者拼接多个属性,则需要使用LabelFunction
如何操作(增删改查)一个数据集?
   IViewCursor
如何循环一个数据集?
   for循环  for each循环
-----------------------------------------------
List与DataProvider组件
List类与DataGroup类相似,都有一个可以用来设置其数据集的dataProvider
并基于itemRenderer来呈现数据集中的每一项数据!!!
注意:List还有另一个功能,可以管理用户选择的数据项,并可以获取到哪些项被选中(基于这些选中项dosomething)

在List中使用labelFunction属性
       labelFunction指定一个函数,该函数会返回一个String
即:通过该函数实现如何显示List中的每一项


在DataGroup中应用itemRenderer
    系统提供了DefaultItemRenderer,将使用Label组件呈现每个数据项
    创建自定义的itemRenderer
创建itemRenderer时,新类可以实现IDataRenderer接口,也可以继承某个实现了该接口的类
IDataRenderer接口指定了实现它的类必须有实现针对data属性的get和set函数(data通常为Object类型)
itemRenderer的原理:
针对dataProvider中的每一个数据项都创建一个呈现器实例,然后取得相应数据项的数据放到data中


应用程序中复写data的set方法,然后将传入的value赋值给我们自己创建的那个引用,这样就获取到

需要的数据了!

虚拟化与List
    虚拟化:只创建对用户可见的元素的对象。离开用户可见范围的对象将被回收,然后将原有空间设置为显示新入屏

幕的元素。(好处:只创建用户可见的,不可见的马上回收,节省资源消耗)
    如:DataGroup中包含1000个商品,每次显示10个,那么应用程序每次就只创建对用户可见的那10个商品实例
使用方法:
    <s:layout>下的布局对象中设置useVirtalLayout="true"
对于List而言,虚拟化是默认开启的!
而且List列表还支持选择功能:
    列表项用户呈现一些项,用户选择,列表围绕被选择项提供了很多操作
    如:属性、方法、事件
    selectedIndex、selectedItem属性可以指定或者取得当前选中的项
--------------------------------------------------------------------创建一个呈现器,在应用程序顶部的控制条中通过呈现器来显示不同商品类别
根据选择的类别显示商品(实现筛选功能)

1.使用List存放控制条中显示的商品种类
2.使用itemRenderer属性指定一个自定义的项目呈现器进行自定义的格式显示
3.因为List还支持事件、属性等,所以可以对列表中选中商品的变化作出响应

主程序:FlexGrocery.mxml
<?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"
			   creationComplete="handleCreationComplete(event)" xmlns:views="views.*" xmlns:services="services.*">

	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
		<!-- 将HTTPService获取数据的功能放到两个ActionScript类中进行处理,此处引入即可 -->
		<!-- 提供商品类别服务的组件(不可见组件)-->
		<services:CategoryService id="categoryService"/>
		<!-- 提供具体各种商品服务的组件(不可见组件)-->
		<services:ProductService id="productService"/>
	</fx:Declarations>

	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			
			import spark.events.IndexChangeEvent;
			//当系统组件构建完成后,会调用到此方法,在这里向远端发起请求,获取数据
			//当数据获取成功后,事件监听器会调用指定的方法处理数据
			private function handleCreationComplete(event:FlexEvent):void {
				categoryService.send();
				productService.send();
			}
			
			//查看当前购物车中的商品
			private function handleViewCartClick( event:MouseEvent ):void {
				bodyGroup.currentState="cartView";//切换到bodyGroup下的cartView状态
			}
			
			//响应列表的变化,对change事件进行处理
			protected function list1_changeHandler(event:IndexChangeEvent):void
			{
				//当控制条中商品的选中状态改变了,会触发change事件,该方法就会得到执行
				//传入当前选中商品的catID,然后products集合会根据此id寻找对应的项,并只呈现匹配的哪些项
				productService.filterCollection(event.target.selectedItem.categoryID);
			}
			
		]]>
	</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"/>
		<!-- 从categoryService中获取商品种类信息 ,使用指定的项目呈现器NavigationItem显示内容-->
		<s:List left="200" height="52" 
				dataProvider="{categoryService.categories}"
				itemRenderer="components.NavigationItem"
				change="list1_changeHandler(event)">
			<s:layout>
				<s:HorizontalLayout/>
			</s:layout>
		</s:List>	</s:controlBarContent>
	
	<!-- 实例化商品组件(该组件被单独抽取出来,在主应用程序中实例化) -->
	<!-- 从productService中获取商品 -->
	<views:ShoppingView id="bodyGroup" width="100%" height="100%" groceryInventory="{productService.products}"/>	
	
	<!-- 版权说明 -->
	<s:Label text="(c) 2009, FlexGrocer" right="10" bottom="10"/>
</s:Application>



项目呈现器NavigationItem.mxml
<?xml version="1.0" encoding="utf-8"?>
<!-- 顶部控制条的项目呈现器-->
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
				xmlns:s="library://ns.adobe.com/flex/spark" 
				xmlns:mx="library://ns.adobe.com/flex/mx">
	<s:layout>
		<s:VerticalLayout horizontalAlign="center"/>
	</s:layout>
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
	</fx:Declarations>
	<!-- flex会将针对dataProvider中每项创建对应的呈现器实例,然后将取得的相应数据放到data中-->
	<s:Image source="assets/nav_{data.name.toLowerCase()}.jpg"
			 height="31" width="93"/>
	<s:Label text="{data.name}"/>
</s:ItemRenderer>



ProductService.as
对集合中的商品进行过滤,只显示被选择的那类商品
package services
{
	import mx.collections.ArrayCollection;
	import mx.rpc.events.ResultEvent;
	import mx.rpc.http.mxml.HTTPService;
	
	import valueObjects.Product;

	/**
	 * 该类用于获取所有的商品
	 * 对外提供products(products为ArrayCollection,存放着所有商品) 
	 * @author lenovo
	 * 
	 */	
	public class ProductService extends HTTPService
	{
		[Bindable]
		public var products:ArrayCollection;//获取远程数据,使用e4x找出product节点,转换为对象,放入Array,最后将Array放入ArrayCollection
		
		
		public function ProductService(rootURL:String=null, destination:String=null)
		{
			super(rootURL, destination);
			this.resultFormat = "e4x";//指定返回xml格式的数据以便使用e4x表达式对xml进行操作
			this.url = "http://www.flexgrocer.com/categorizedProducts.xml";//数据源
			this.addEventListener(ResultEvent.RESULT,handleProductResult);//事件监听器,并指定事件处理函数
		}
		
		private function handleProductResult( event:ResultEvent ):void {
			var productArray:Array = new Array();
			var resultData:XMLList = event.result..product;//e4x筛选子节点
			for each (var p:XML in resultData) {			
				var product:Product = Product.buildProductFromAttributes( p );//将每个子节点创建对应的product对象
				productArray.push( product );//添加到数组中
			}
			products = new ArrayCollection( productArray );//将整个数组放入ArrayCollection中,为数组提供代理
			
			//为products集合(ArrayCollection)指定一个筛选函数
			products.filterFunction = filterForCategory;
			products.refresh();//刷新集合
		}
		
		//默认选择index=1的商品
		private var selectedCategory:Number=1;
		
		//products集合的过滤函数
		public function filterForCategory(item:Product) :Boolean {
			return item.catID == selectedCategory;//将集合中的每项的catID与selectedCategory进行比较,结果为true的那项将被呈现
		}
		
		//当选择其它商品时发生change事件,会将其catID传入到此方法,然后赋值给selectedCategory
		//调用集合的refresh方法,重新对集合进行过滤,过滤的时候使用的selectedCategory就是刚才传入的catID
		public function filterCollection(id:Number):void {
			selectedCategory = id;
			products.refresh();
		}
	}
}


====================================================================
对bodyGroup中的商品进行呈现
1.使用DataGroup
2.使用DataRenderer

ShoppingView.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx" width="0" height="0" xmlns:components="components.*">
	<s:layout>
		<s:HorizontalLayout/>
	</s:layout>
	<s:states>
		<s:State name="State1"/>
		<s:State name="cartView"/>
	</s:states>
	

	<fx:Script>
		<![CDATA[
			import cart.ShoppingCart;
			import cart.ShoppingCartItem;
			
			import components.ProductItem;
			
			import mx.collections.ArrayCollection;
			
			import valueObjects.Product;
			[Bindable]
			public var shoppingCart:ShoppingCart = new ShoppingCart();//创建一个购物车,分别传入不同的商品对象中,而不是在每种商品中都new一个购物车!
			[Bindable]
			public var groceryInventory:ArrayCollection;//用于存放HTTPService返回的各种商品信息
			
			//查看当前购物车中的商品
			private function handleViewCartClick( event:MouseEvent ):void {
				this.currentState="cartView";
			}
			
			//该方法返回一个字符串,用来作为数据集的呈现方式,由labelFunction函数指定
			//当List中使用labelFunction时,会自动以正确的方式从dataProvider中获取数据并传递到该方法中
			//返回的字符串将作为被呈现的内容
			private function renderProductName(item:ShoppingCartItem):String {
				var product:Product = item.product;
				return "("+item.quantity+")" + product.prodName + " $" + item.subtotal;
			}
		]]>
	</fx:Script>
	
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
	</fx:Declarations>
	
	<!-- 必须为组件指定在界面中占据的空间大小 否则不可见-->
	<s:DataGroup width="100%" height="100%" 
				 width.cartView="0" height.cartView="0" visible.cartView="false"
				 dataProvider="{groceryInventory}"
				 itemRenderer="components.ProductItem">
		<!-- dataProvider属性指定数据来源,itemRenderer属性负责数据呈现 -->
		<!-- 将ProductItem改为了一个DataRenderer-->
		
		<!-- 为DataGroup指定布局对象,否则展现出来的视图都重叠在一起了 -->
		<s:layout>
			<s:VerticalLayout/>
		</s:layout>
	</s:DataGroup>
	
	<!-- 购物车组件 -->
	<s:VGroup id="cartGroup" height="100%"  width.cartView="100%">
		<s:List id="cartList"
				dataProvider="{shoppingCart.items}" includeIn="State1"
				labelFunction="renderProductName"/>			
		<s:Label text="Your Cart Total: $"/>
		<s:Button label="View Cart" click="handleViewCartClick( event )" includeIn="State1"/>
		<mx:DataGrid includeIn="cartView" id="dgCart" width="100%">
			<mx:columns>
				<mx:DataGridColumn headerText="Column 1" dataField="col1"/>
				<mx:DataGridColumn headerText="Column 2" dataField="col2"/>
				<mx:DataGridColumn headerText="Column 3" dataField="col3"/>
			</mx:columns>
		</mx:DataGrid>
		<s:Button includeIn="cartView" label="Continue Shopping" click="this.currentState=''"/>
	</s:VGroup>
</s:Group>

ProductItem.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:DataRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx" 
		 width="100%">

	<s:states>
		<s:State name="State1"/>
		<s:State name="expanded"/>
	</s:states>
	
	<fx:Script>
		<![CDATA[
			import cart.ShoppingCart;
			import cart.ShoppingCartItem;
			
			import valueObjects.Product;
			[Bindable]
			public var product:Product;//由flex在为data赋值的时候,将value赋值给product
			
			public var shoppingCart:ShoppingCart;//购物车从哪里传入呢?
			
			//添加某类商品到购物车,一次添加1个
			private function addToCart(product:Product):void {
				var sci:ShoppingCartItem = new ShoppingCartItem( product );
				shoppingCart.addItem( sci );
			}
			
			//从购物车中删除该类商品,一次性全部删除
			private function removeFromCart( product:Product ):void {
				var sci:ShoppingCartItem = new ShoppingCartItem( product );
				shoppingCart.removeItem( sci );
			}
			
			//当指定了dataProvider之后,flex会针对数据集中每个数据项创建一个呈现器实例
			//然后将取得的数据放到data中保存
			//这里覆盖data的set方法,利用上述原理,在赋值时直接将数据赋值到product对象中,而不是赋值给data
			public override function set data(value:Object) :void {
				this.product = value as Product; //注意进行类型转换
			}
		]]>
	</fx:Script>
	
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
	</fx:Declarations>
	
	<!-- 商品 -->
	<s:VGroup  id="products">
		<s:Label text="{product.prodName}" id="prodName"/>
		<mx:Image source="assets/{product.imageName}" scaleContent="true" 
				  mouseOver="this.currentState='expanded'"
				  mouseOut="this.currentState='State1'"/>
		<s:Label text="${product.listPrice}" id="price"/>
		<s:Button label="AddToCart" id="add"
				  click="addToCart(product )"/>
		<s:Button label="Remove From Cart" id="remove"
				  click="removeFromCart(product )"/>			
	</s:VGroup>
	
	<!-- 商品详细信息 -->
	<s:VGroup includeIn="expanded" x="200" width="100%">
		<s:RichText text="{product.description}"
					width="50%"/>
		<s:Label text="Certified Organic"
				 visible="{product.isOrganic}"/>
		<s:Label text="Low Fat"
				 visible="{product.isLowFat}"/>
	</s:VGroup>
</s:DataRenderer>
分享到:
评论

相关推荐

    DataGroup工具,数据库操作端

    这表明DataGroup不仅是一个完整的应用程序,也可能包含可单独使用的模块,方便用户根据实际需求选择安装和使用。 总结起来,DataGroup工具作为一款全面的数据库操作端,以其丰富的功能、广泛的数据库支持和友好的...

    FlexGrocerappt_10(DataGroupaList).rar_FlashMX/Flex源码_Flex_

    本资源“FlexGrocerappt_10(DataGroupaList).rar”是一个关于Flex编程的教育材料,特别关注如何在应用中使用DataGroup和List组件。这个压缩包包含了两个关键文件:一个PowerPoint演示文稿(10DataGroup&List.ppt)和...

    Flex4权威指南+随书源代码+Flexbuild使用工具

    10. 使用DataGroup和List 11. 创建和分派事件 12. 使用DataGrid与项目呈现器 13. 使用拖放 14. 实现导航 15. 使用格式化器和验证器 16. 使用样式定制Flex应用 17. 使用皮肤定制Flex应用 18. 自定义ActionScript组件

    flex 常用组件附例子介绍

    ### Flex常用UI组件详解 #### 一、DataGrid 组件 **DataGrid** 是 Flex 中一个非常重要的组件,主要...以上是 Flex 中 DataGrid 和 List 组件的基本使用及扩展功能介绍,希望能帮助大家更好地理解和使用这些组件。

    Python2.7基于笛卡尔积算法实现N个数组的排列组合运算示例

    本文实例讲述了Python2.7基于笛卡尔积算法实现N...datagroup : 表示n个list(python 中的list与其他编程中的数组定义类似)的集合,即一个二维数组 counterIndex:datagroup反向下标值 counter : 用来记录当前datagroup中

    Flex4权威指南(清晰pdf中文版)

    FLEX 4权威指南(带实例代码) 1.理解AIR 2.flex4开发 3.布置界面 ...10.使用DataGroup 和 List 11.创建和分派事件 。。。。。。。。。。。。 16.使用样式制动 17.使用皮肤指定FLEX应用 18.自定义组件

    AdvancedDataGrid综合应用

    通过使用GroupingField和DataGroup对象,我们可以将数据按照特定字段进行分组。 3. **多列排序** 与DataGrid单列排序不同,AdvancedDataGrid允许用户对多列进行排序,提供了更好的用户体验。通过设置`...

    F5-iRule规则编写详解.ppt

    在F5-iRule规则编写中,Datagroup的创建是非常重要的一步,Datagroup是iRules中的基本数据结构,用于存储和处理数据。在iRule的创建和管理中,Datagroup的创建是必不可少的步骤。 iRule的引用是将iRule应用于实际...

    FLEX DATA GRID 分页

    - **使用mx.controls.DataGrid**:在MX DataGrid中,可以通过设置`horizontalScrollPolicy`和`verticalScrollPolicy`为`off`来禁用滚动,然后使用`Pagination`类来实现分页。`Pagination`类提供了`pageCount`、`...

    Neodata Group Toolbox-crx插件

    语言:English 一键验证exaudi标签。...-浏览量和自定义事件信息。 如何使用工具箱? 导航到任何网页,单击导航栏右上方的Neodata Toolbox扩展,您将看到该页面的标签详细信息。 验证标签从未如此简单。

    flex4.5学习笔记

    - **DataGroup使用**: 可以结合其他控件如`DataGrid`、`List`等显示数据。 **知识点13:借助基于列表的控件显示数据** - **DataGrid控件**: - **labelFunction**: 定义如何显示数据项。 - **dataField属性**: ...

    java 内部排序算法的性能分析

    这个文件很可能是测试程序的主窗口类,它可能包含了对各种排序算法的调用和性能测试的逻辑。 4. **GraphViewer.java 和 TextViewerWindow.java**: 这两个文件可能是用于可视化结果的组件,GraphViewer可能用于...

    Flex讲座讲义(pdf)

    3. **DataControls(数据类控件)**:如`DataGrid`和`List`,用于展示和操作数据集。 4. **LoaderControls(载入类控件)**:用于动态加载外部资源,如图像或其它Flex组件。 5. **MenuControls(菜单控件)**:如`...

    01 EPS2008地理信息工作站概述.pdf

    根据给定文件内容,以下是关于“EPS2008地理信息工作站”以及测绘软件EPS...通过这些知识点,可以对EPS平台有一个全面的了解,特别是对于测绘和地理信息行业的专业人士,在实际应用中可以充分利用该软件提高工作效率。

    像Excel一样的table表格

    overflow:hidden\"&gt;&lt;div id=\"DataGroup1\" style=\"position:relative\"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;&lt;/td&gt;&lt;td valign=\"top\"&gt;;overflow-x:scroll\"&gt;...

    vscode-flex-snippets:适用于Visual Studio Code的Flex(MX和Spark)代码段

    快速创建MX和Spark组件。 如何使用 在VSCode中安装扩展 打开mxml文件,开始输入组件名称并选择代码段 注意:要在VSCode中创建Flex项目,请安装。 片段 AdvancedDataGrid BorderContainer Box MX Button Spark ...

    TWAIN驱动详解

    用户可以通过“选择设备”的方式打开Source Manager的界面,从中选择需要使用的图像设备,并通过“获取...”打开设备的界面执行相应操作。TWAIN提供了灵活性,允许开发者自定义或替换这些用户界面。 #### 接口函数 ...

Global site tag (gtag.js) - Google Analytics