- 浏览: 544115 次
- 性别:
文章分类
- 全部博客 (337)
- WEB前端@HTML (4)
- WEB前端@CSS (5)
- WEB前端@javascript (31)
- WEB前端@DHTML (8)
- WEB前端@jQuery (3)
- WEB前端@Flex4 (19)
- WEB前端@BootStrap3 (21)
- 数据交换@JSON (1)
- 模板标签@JSTL (1)
- 模板标签@Thymeleaf (1)
- 模板标签@XSL-FO (3)
- WEB后台@JavaSE (75)
- WEB后台@JAX-WS (27)
- WEB后台@HttpClient (0)
- WEB后台@SSO (2)
- 框架@Spring3 (3)
- 框架@spring_MVC (8)
- 框架@Hibernate (26)
- 框架@play framework (18)
- 框架@sl4j (4)
- 数据库@ (2)
- 数据库@JDBC (0)
- 服务器@Linux (14)
- 服务器@Tomcat (2)
- 第三方jar@dom4j (1)
- 第三方jar@POI (2)
- 第三方jar@CXF (5)
- 项目管理@Maven (22)
- 项目管理@SVN (1)
- 缓存管理@ehcache (1)
- 系统设计@设计模式 (10)
- 单元测试@JunitTest (1)
- 开发工具 (3)
- BUG收录 (1)
- 学习之路 (6)
- 面试之道 (1)
- 我的项目 (2)
最新评论
-
superich2008:
logback配置文件的改动会导致应用重新加载,多改动几次后就 ...
Chapter 3: Logback configuration -
chenzhihui:
不是可以在log4j中配置以控制台或者文件方式保存日志的?
play记录日志 -
smilease:
很棒,正缺这个,非常感谢
bootstrap3-typeahead 自动补全 -
guangling13345:
[size=x-small][/size]
二级联动菜单 -
jacksondesign:
有,和YAML的格式有关,不知道有没有什么好的YAML格式的验 ...
(四)play之yabe项目【页面】
增强型拖放组件:
List、DataGrid、PrintDataGrid、Tree、Menu、HorizontalList、TileList
这些组件只需要设置dragEnable="true"即可拖拽!
在不可直接拖拽的组件上实现拖放(重点)
1.把数据赋值给DragSource对象
2.检查格式是否允许把数据放入释放目标上
3.在释放目标里使用数据
4.允许拖拽组件
5.接收释放
DragSource类中的方法:
addData(data:*,format:String):void 向dragSource添加与格式向关联的数据
hasFormat(format:String):Boolean 检查DragSource对象包含于释放目标的format是否匹配
dataForFormat(format:String):Array of * 获取addData方法添加的能匹配format格式的数据
DragManager类中的方法:
doDrag(initiator:Component, 允许组件被拖放,通常用于mouseDown/mouseMove事件
dragSource:DragSource,
mouseEvent:MouseEvent):void
acceptDragDrop(target:Component):void 在DropEnter事件处理程序中调用该函数,通常用于hasFormat方法的if条件语句中
--------------------------------------------------------------------
拖放操作3步骤:
1.源的初始化
2.拖拽
3.释放
每步都会触发一个事件,通过事件监听实现数据的传递!
也就是,点击源的时候,获取到数据,当进入到释放目的地的时候,触发一个函数执行,从event中获取数据,将数据填充到目的地中!
要实现拖与放,必须设置两个最基本的属性:
被拖拽的组件设置:dragEnable="true"
目的组件设置:dropEnable="true"
1.相同组件之间的拖放,将默认使用同名属性进行数据填充。
两个DataGrid之间的拖放
2.不同组件之间的拖放,不能使用"默认释放行为",因为组件不同,程序不知道该将如何处理数据,只好放一个Object对象到目标组件上!这不是我们想要的结果!
在目标组件上定义dragDrop事件,并生成一个监听DragEvent事件的方法。
在方法内部:
var dgRow:Object = event.dragSource.dataForFormat("items");
某行的数据将被全部放到dgRow中存放起来。
注:如果要实现一次拖拽多行数据,只需设置DataGrid的allowMultipleSelection="true"
3.定义一个ArrayCollection用来存放将被放置进入的对象的某些属性
[Bindable]
private var targetListDP:ArrayCollection=new ArrayCollection();
然后目标DataGrid中设置dataProvider="{targetListDP}"
这样做的目的是:在事件监听处理函数中,向这个collection中放入我们自己指定的数据!在方法中:通过DataGrip定义的id(可看做一个对象)调用到其dataProvider属性,然后
addItem(dgRow[0].name),这里只是将dgRow中的name属性的值取出,同样可以取其它值,只需要改变属性名称即可!
4.最后,某些时候虽然自定义了拖放时数据的放置规则,但程序仍然会将默认的数据放置到目的地,这时,可以在事件处理方法中:event.preventDefault();
将数据从DataGrid拖放到List组件
--------------------------------------------------------------------
非增强型组件(程序中默认不具备拖拽功能的组件)的拖放
5步:
1.在拖拽源上定义mouseDown事件
2.在事件处理函数至少定义4个形式参数准备接收数据:
initiator:Label,//描述源
dsData:String,//描述数据
event:MouseEvent,//描述事件
format:String//描述格式
3.新建一个DragSource对象:var ds:DragSource = new DragSource();
将数据和格式放入到对象中:ds.addData(dsData,format);
开启拖拽功能:DragManager.doDrag(initiator as IUIComponent,ds,event);
4.到此,源已经可以拖动了,数据也被放置到了DataSource对象中保存起来了
下面就需要对目标进行操作了
目标上设置dragEnter事件,事件处理函数中判断格式是否匹配
如果匹配,则接收释放,否则不做任何处理
if(event.dragSource.dataForFormat(format))
DragManager.acceptDragDrop(event.target as IUIComponent);
5.到此,目标可以接收拖放,但是目标并为处理数据
处理DataSource对象中存放的数据
目标上定义dragDrop事件
事件处理函数中,根据指定的format从DragSource中获取数据,
设置到目标的dataProvider中,实现将数据填充到目标上
var myLabelData:Object = event.dragSource.dataForFormat(format);
myList.dataProvider.addItem(myLabelData);
6.到此,实现非增强型组件的拖拽和目标正确显示数据
--------------------------------------------------------------------------------
源码
说明:将Label拖拽到List中,并在List中呈现数据
--------------------------------------------------------------------
实现图片的拖拽
1.图片上定义mouseDown事件,将数据放入DragSource对象中
ProductItem.mxml
2.在目标上定义DragEnter事件,根据format判断是否允许进入
3.在目标上定义DragDrop事件,通过format从DragSource对象中获取数据
ShoppingView.mxml
List、DataGrid、PrintDataGrid、Tree、Menu、HorizontalList、TileList
这些组件只需要设置dragEnable="true"即可拖拽!
在不可直接拖拽的组件上实现拖放(重点)
1.把数据赋值给DragSource对象
2.检查格式是否允许把数据放入释放目标上
3.在释放目标里使用数据
4.允许拖拽组件
5.接收释放
DragSource类中的方法:
addData(data:*,format:String):void 向dragSource添加与格式向关联的数据
hasFormat(format:String):Boolean 检查DragSource对象包含于释放目标的format是否匹配
dataForFormat(format:String):Array of * 获取addData方法添加的能匹配format格式的数据
DragManager类中的方法:
doDrag(initiator:Component, 允许组件被拖放,通常用于mouseDown/mouseMove事件
dragSource:DragSource,
mouseEvent:MouseEvent):void
acceptDragDrop(target:Component):void 在DropEnter事件处理程序中调用该函数,通常用于hasFormat方法的if条件语句中
--------------------------------------------------------------------
拖放操作3步骤:
1.源的初始化
2.拖拽
3.释放
每步都会触发一个事件,通过事件监听实现数据的传递!
也就是,点击源的时候,获取到数据,当进入到释放目的地的时候,触发一个函数执行,从event中获取数据,将数据填充到目的地中!
要实现拖与放,必须设置两个最基本的属性:
被拖拽的组件设置:dragEnable="true"
目的组件设置:dropEnable="true"
1.相同组件之间的拖放,将默认使用同名属性进行数据填充。
两个DataGrid之间的拖放
<?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" minWidth="955" minHeight="600" creationComplete="prodData.send()"> <!-- 组件构建完成后,调用send()向远端请求数据--> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.rpc.events.ResultEvent; [Bindable] private var products:ArrayCollection;//存储数据的集合 private function resultHandler(event:ResultEvent):void{ products=event.result.catalog.product;//从返回的数据中检索product子节点,并放入集合中 } ]]> </fx:Script> <s:layout> <s:VerticalLayout gap="50" paddingLeft="20" paddingTop="20"/> </s:layout> <fx:Declarations> <!-- HTTPService从服务器获取数据 --> <s:HTTPService id="prodData" url="http://www.flexgrocer.com/product.xml" result="resultHandler(event)"/> </fx:Declarations> <mx:DataGrid id="initiatorGrid" dataProvider="{products}" dragEnabled="true"> <!--拖拽源设置dragEnabled="true"--> <mx:columns> <mx:DataGridColumn dataField="name" headerText="Product"/> <mx:DataGridColumn dataField="cost" headerText="Price"/> <mx:DataGridColumn dataField="isLowFat" headerText="Low Fat"/> <mx:DataGridColumn dataField="isOrganic" headerText="Organic"/> </mx:columns> </mx:DataGrid> <mx:DataGrid id="targetGrid" dropEnabled="true"> <!-- 释放目标,设置dropEnabled="true"--> <mx:columns> <mx:DataGridColumn dataField="name" headerText="Product"/> <mx:DataGridColumn dataField="category" headerText="Category"/> </mx:columns> </mx:DataGrid> </s:Application>
2.不同组件之间的拖放,不能使用"默认释放行为",因为组件不同,程序不知道该将如何处理数据,只好放一个Object对象到目标组件上!这不是我们想要的结果!
在目标组件上定义dragDrop事件,并生成一个监听DragEvent事件的方法。
在方法内部:
var dgRow:Object = event.dragSource.dataForFormat("items");
某行的数据将被全部放到dgRow中存放起来。
注:如果要实现一次拖拽多行数据,只需设置DataGrid的allowMultipleSelection="true"
3.定义一个ArrayCollection用来存放将被放置进入的对象的某些属性
[Bindable]
private var targetListDP:ArrayCollection=new ArrayCollection();
然后目标DataGrid中设置dataProvider="{targetListDP}"
这样做的目的是:在事件监听处理函数中,向这个collection中放入我们自己指定的数据!在方法中:通过DataGrip定义的id(可看做一个对象)调用到其dataProvider属性,然后
addItem(dgRow[0].name),这里只是将dgRow中的name属性的值取出,同样可以取其它值,只需要改变属性名称即可!
4.最后,某些时候虽然自定义了拖放时数据的放置规则,但程序仍然会将默认的数据放置到目的地,这时,可以在事件处理方法中:event.preventDefault();
将数据从DataGrid拖放到List组件
<?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" minWidth="955" minHeight="600" creationComplete="prodData.send()"> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.events.DragEvent; import mx.rpc.events.ResultEvent; [Bindable] private var products:ArrayCollection;//存放HTTPService从服务器请求的数据 [Bindable] private var targetListDP:ArrayCollection=new ArrayCollection(); //在拖拽事件完成时,将事件对象带过来的数据添加到该集合中,该集合作为目标的dataProvider private function resultHandler(event:ResultEvent):void{ products=event.result.catalog.product; } protected function targetList_dragDropHandler(event:DragEvent):void { // 拖拽结束时,从事件对象中获取数据,设置到目标的dataProvider中 //记住:与DataGrid中数据相关的格式总是"items" var dgRow:Object = event.dragSource.dataForFormat("items"); //将数据设置到目标所绑定的dataProvider中 targetListDP.addItem(dgRow[0].name); //阻止事件的默认行为(将数据以Object对象的形式放到目标中) event.preventDefault(); } ]]> </fx:Script> <s:layout> <s:VerticalLayout gap="30" paddingLeft="20" paddingTop="20"/> </s:layout> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> <s:HTTPService id="prodData" url="http://www.flexgrocer.com/product.xml" result="resultHandler(event)"/> </fx:Declarations> <mx:DataGrid id="initiatorGrid" dataProvider="{products}" dragEnabled="true"> <mx:columns> <mx:DataGridColumn dataField="name" headerText="Product"/> <mx:DataGridColumn dataField="cost" headerText="Prine"/> <mx:DataGridColumn dataField="isLowFat" headerText="Low Fat"/> <mx:DataGridColumn dataField="isOrganic" headerText="Organic"/> </mx:columns> </mx:DataGrid> <s:List id="targetList" width="200" dropEnabled="true" dataProvider="{targetListDP}" dragDrop="targetList_dragDropHandler(event)"/> </s:Application>
--------------------------------------------------------------------
非增强型组件(程序中默认不具备拖拽功能的组件)的拖放
5步:
1.在拖拽源上定义mouseDown事件
2.在事件处理函数至少定义4个形式参数准备接收数据:
initiator:Label,//描述源
dsData:String,//描述数据
event:MouseEvent,//描述事件
format:String//描述格式
3.新建一个DragSource对象:var ds:DragSource = new DragSource();
将数据和格式放入到对象中:ds.addData(dsData,format);
开启拖拽功能:DragManager.doDrag(initiator as IUIComponent,ds,event);
4.到此,源已经可以拖动了,数据也被放置到了DataSource对象中保存起来了
下面就需要对目标进行操作了
目标上设置dragEnter事件,事件处理函数中判断格式是否匹配
如果匹配,则接收释放,否则不做任何处理
if(event.dragSource.dataForFormat(format))
DragManager.acceptDragDrop(event.target as IUIComponent);
5.到此,目标可以接收拖放,但是目标并为处理数据
处理DataSource对象中存放的数据
目标上定义dragDrop事件
事件处理函数中,根据指定的format从DragSource中获取数据,
设置到目标的dataProvider中,实现将数据填充到目标上
var myLabelData:Object = event.dragSource.dataForFormat(format);
myList.dataProvider.addItem(myLabelData);
6.到此,实现非增强型组件的拖拽和目标正确显示数据
--------------------------------------------------------------------------------
源码
说明:将Label拖拽到List中,并在List中呈现数据
<?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" minWidth="955" minHeight="600"> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.core.DragSource; import mx.core.IUIComponent; import mx.events.DragEvent; import mx.managers.DragManager; [Bindable] private var myListDP:ArrayCollection=new ArrayCollection();//dataProvider属性对应的数据存放仓库(集合) //1.被拖拽组件发生mouseDown事件 protected function myLabel_mouseDownHandler(initiator:Label,dsData:String,event:MouseEvent,format:String):void { var ds:DragSource = new DragSource();//创建DragSource对象 ds.addData(dsData,format);//将数据以及指定的格式设置到DragSource中 DragManager.doDrag(initiator as IUIComponent,ds,event);//开启拖拽功能 } //2.被拖拽的组件(代理)进入到目的地时,检查格式是否匹配,如果匹配,则接受释放 protected function myList_dragEnterHandler(event:DragEvent,format:String):void { if(event.dragSource.dataForFormat(format))//如果DragSource中的format格式与形参中的format匹配,则接收释放 DragManager.acceptDragDrop(event.target as IUIComponent); } //3.释放事件发生后,处理数据 protected function myList_dragDropHandler(event:DragEvent,format:String):void { var myLabelData:Object = event.dragSource.dataForFormat(format);//从DragSource中获取数据 myList.dataProvider.addItem(myLabelData);//设置到List的dataProvider中,数据得以呈现 } ]]> </fx:Script> <s:layout> <s:VerticalLayout gap="20" paddingLeft="20" paddingTop="20"/> </s:layout> <!--被拖拽的Label --> <s:Label id="myLabel" text="Drag me" mouseDown="myLabel_mouseDownHandler(myLabel,'something',event,'this format')"/> <!--目的地--> <s:List id="myList" width="200" dataProvider="{myListDP}" dragEnter="myList_dragEnterHandler(event,'this format')" dragDrop="myList_dragDropHandler(event,'this format')"/> </s:Application>
--------------------------------------------------------------------
实现图片的拖拽
1.图片上定义mouseDown事件,将数据放入DragSource对象中
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:Metadata> [Event(name="addProduct", type="events.ProductEvent")] [Event(name="removeProduct", type="events.ProductEvent")] </fx:Metadata> <fx:Script> <![CDATA[ import cart.ShoppingCart; import cart.ShoppingCartItem; import events.ProductEvent; import mx.core.DragSource; import mx.core.IUIComponent; import mx.managers.DragManager; import spark.components.Group; import spark.primitives.BitmapImage; import valueObjects.Product; [Bindable] public var product:Product;//由flex在为data赋值的时候,将value赋值给product //public var shoppingCart:ShoppingCart;//购物车从哪里传入呢?通过事件派发添加/删除事件,在ShoppingView中完成,而不是在ProductItem中完成! //添加某类商品到购物车,添加商品会派发一个addProduct事件 private function addToCart(product:Product):void { var event:Event = new ProductEvent("addProduct",product);//将product放到事件对象event中 this.dispatchEvent(event);//派发事件 } //从购物车中删除该类商品,派发一个removeProduct事件 private function removeFromCart( product:Product ):void { var event:Event = new ProductEvent("removeProduct",product);//将product放到事件对象event中 this.dispatchEvent(event);//派发事件 } //当指定了dataProvider之后,flex会针对数据集中每个数据项创建一个呈现器实例 //然后将取得的数据放到data中保存 //这里覆盖data的set方法,利用上述原理,在赋值时直接将数据赋值到product对象中,而不是赋值给data public override function set data(value:Object) :void { this.product = value as Product; //注意进行类型转换 } // 图片发生mouseDown事件 protected function img_mouseDownHandler(event:MouseEvent,format:String):void { //创建一个图片代理 var proxy:BitmapImage = new BitmapImage(); proxy.source = img.content;//获取图片数据放入BItmapImage对象中 //因为proxy不是IFlexDisplayObject类型,不能直接作为参数加入到doDrag方法中 //这里通过Group来进行包装 var imageHolder:Group = new Group(); imageHolder.addElement(proxy); //将product对象放入DragSource对象中 var dragSource:DragSource = new DragSource(); dragSource.addData(product,format); //开启image组件的拖放功能,必须指定3个参数:初始器、DragSource对象、事件 DragManager.doDrag(event.currentTarget as IUIComponent,dragSource,event,imageHolder); } ]]> </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'" id="img" mouseDown="img_mouseDownHandler(event,'cartFormat')"/> <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>
2.在目标上定义DragEnter事件,根据format判断是否允许进入
3.在目标上定义DragDrop事件,通过format从DragSource对象中获取数据
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 events.ProductEvent; import mx.collections.ArrayCollection; import mx.core.IUIComponent; import mx.events.DragEvent; import mx.managers.DragManager; import valueObjects.Product; [Bindable] public var shoppingCart:ShoppingCart = new ShoppingCart();//创建一个购物车,每种商品都使用同一个购物车! [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; } //对ProductItem派发的addProduct事件进行监听并处理 public function addProductHandler(event:ProductEvent):void { var sci:ShoppingCartItem = new ShoppingCartItem(event.product);//从自定义事件中获取属性 shoppingCart.addItem(sci); } //对ProductItem派发的removeProduct事件进行监听并处理 public function removeProductHandler(event:ProductEvent):void { var sci:ShoppingCartItem = new ShoppingCartItem(event.product);//从自定义事件中获取属性 shoppingCart.removeItem(sci); } //拖拽图片进入到购物车List组件 protected function cartList_dragEnterHandler(event:DragEvent,format:String):void { // 检测格式,匹配则接受释放 if(event.dragSource.hasFormat(format)) DragManager.acceptDragDrop(event.target as IUIComponent); } //释放图片事件发生 protected function cartList_dragDropHandler(event:DragEvent,format:String):void { // 接受释放之后,从DragSource对象中获取数据 var product:Product = event.dragSource.dataForFormat(format) as Product; // 将product加入到shoppingCartItem中 var shoppingCartItem:ShoppingCartItem = new ShoppingCartItem(product,1); // 将shoppingCartItem加入到购物车对象中(该对象为购物车List的dataProvider) shoppingCart.addItem(shoppingCartItem); } ]]> </fx:Script> <fx:Declarations> <!-- 将非可视元素(例如服务、值对象)放在此处 --> </fx:Declarations> <!-- 该DataGroup被下面的ProductList取代 通过事件冒泡实现商品的添加与删除 因为原来在ProductItem中直接对购物车添加或删除商品的操作无法进行 原因是无法对每个ProductItem都传入同一个购物车 [虽然this.parent.parent.shoppingCart可以访问到购物车,但是依赖性太强,不推荐] <s:DataGroup width="100%" height="100%" width.cartView="0" height.cartView="0" visible.cartView="false" dataProvider="{groceryInventory}" itemRenderer="components.ProductItem"> <s:layout> <s:VerticalLayout/> </s:layout> </s:DataGroup> --> <!-- 使用具有事件监听出派发功能的组件替代原来的DataGroup--> <!-- 实现添加/删除商品的步骤: ProductList作为一个组件,通过dataProvider获取到数据 在ProductList中又指名了itemRenderer为ProductItem 这样,ProductItem中的product属性就可以被赋予值 当添加商品的时候,会触发addProduct事件,而且事件可以冒泡 在ProductList中对该事件进行了声明,则可以对该事件继续向上冒泡 这样,在ShoppingView中就可以对这个事件进行捕获并处理!!! 然后,在ProductList组件中就可以指定事件发生后的处理函数了!!! --> <components:ProductList width="100%" height="100%" width.cartView="0" height.cartView="0" visible.cartView="false" dataProvider="{groceryInventory}" addProduct="addProductHandler(event)" removeProduct="removeProductHandler(event)"/> <!-- 购物车组件 --> <s:VGroup id="cartGroup" height="100%" width.cartView="100%"> <s:List id="cartList" dataProvider="{shoppingCart.items}" includeIn="State1" labelFunction="renderProductName" dragEnter="cartList_dragEnterHandler(event,'cartFormat')" dragDrop="cartList_dragDropHandler(event,'cartFormat')"/> <s:Label text="Your Cart Total: ${shoppingCart.total}"/> <s:Button label="View Cart" click="handleViewCartClick( event )" includeIn="State1"/> <!-- 使用自定义的DataGrid呈现购物车的详细信息--> <components:CartGrid id="dgCart" includeIn="cartView" width="100%" height="100%" dataProvider="{shoppingCart.items}" removeProduct="removeProductHandler(event)"/> <s:Button includeIn="cartView" label="Continue Shopping" click="this.currentState=''"/> </s:VGroup> </s:Group>
发表评论
-
(十七)为Flex定制皮肤
2013-01-03 16:46 1238皮肤与组件的关系 使用状态和皮肤 创建Button皮肤 为应用 ... -
(十六)使用样式定制Flex应用
2013-01-03 11:47 1544为Flex应用程序添加样式: 通过标签属性设置样式 可 ... -
(十二)AdvancedDataGrid
2013-01-02 14:37 1543AdvancedDataGrid扩展了普通的DataGrid, ... -
(十一)为DataGrid指定项目呈现器(单元格内显示图片和按钮)
2013-01-02 14:31 16451.使用DataGrid组件展现数 ... -
(十)自定义事件并利用事件对象传递数据以及集合元素变化能派发的事件
2013-01-02 00:14 1249创建和分派事件 1.使用事件可以降低程序的耦合度 2.子类自定 ... -
(九)对List和DataGroup使用itemRenderer
2013-01-01 21:47 5295数据集 包含一组数据元素的对象就叫做数据集Data ... -
(八)自定义组件
2012-12-30 23:35 10151.组件的作用及其对开发的好处 2.Flex类的层次 3.可见 ... -
(七)数据绑定和集合
2012-12-30 17:53 900数据绑定和集合 1.数据绑定的原理 2.ArrayCollec ... -
(六)创建ActionScript类---值对象
2012-12-30 15:31 935创建ActionScript类--值对象DTO/VO--数据模 ... -
(五)Flex4_使用远程数据
2012-12-30 11:44 1032使用远程XML数据 1.数据 ... -
(四)Flex4_事件
2012-12-29 23:57 857事件编程模型,构建松散耦合的应用程序 设置事件,向事件 ... -
(三)Flex4_Image控件,数据绑定
2012-12-29 23:03 1092数据绑定 1.给需要数据绑定的对象设置id,以便在程序中 ... -
(十八)Flex4_自定义ActionScript组件
2012-12-28 17:11 1042Spark组件是按复合(composi ... -
(十五)Flex4_格式化与校验器
2012-12-28 14:56 1321Flex提供了数据格式化功能,可以对数据进行格式化。通过内置的 ... -
(十四)Flex4_导航
2012-12-28 09:46 985Flex中实现导航有两种方式可以实现 1.使用状态,在不同事件 ... -
(二)Flex4 容器与布局
2012-12-27 23:03 1529MXML文件 1.文件头 2.命名空间 3.历史版本的恢复 4 ... -
(一)Flex4 第一篇 RIA到底是什么
2012-12-27 22:57 951待续... -
本地Host文件的修改
2012-12-23 09:40 1003Flash builder 4.6 序列号: 1424-49 ...
相关推荐
基于Flex4_Java的多个文件上传类源码,flex批量上传文件服务器
flexbuilder_linux_install_a5_112409.bin网上难得下载,现提供给广大程序员
flex4.5+spring3+hibernate的项目实例,登录实例
FLEX4_Flex4教程 - FLEX4从入门到精通,挺不错的值得一看
超cool 的flex 菜单,flash builder 4
FLEX4_Flex4教程 1. Flex + Spring 、 iBATIS 、 Cairngorm
Flex 3 实现的拖放示例,很简单,可以移植到自己的程序中,Web形式和AIR形式都可以使用。
flex4源码 超酷menu导航 flex4
flex的一个list展示 带有增加和删除功能,并带有一定的特效。
FLEX4_Flex4教程,学习flex的最新技术
不要以为我要5分很高,这个绝对是官网资源,其中包含各位最一直在寻找却找不到即使找到也不好用的 flex-bootstrap-jsp.jar flex-bootstrap.jar flex-webtier-jsp.jar flex-webtier.jar
Flex,中文版,Flex4中文版,Flex4_Tutorials中文版
FlexModule_j2ee Flex 与JSP 整合用的.jar 文件 Jsp 中引用Flex 标签
Flex4_httpService远程调用JAVA。包含源码。jar包,配置。
Flex3组件拖放教程,该组件是flex组件中最有特色的
Flex_3_with_JavaFlex_3_with_JavaFlex_3_with_JavaFlex_3_with_Java
一个用flex技术实现的地图开源代码。 可以实现google map之类的地图
S32K3_MCAL_FlexCAN_Example_FIFO_DMA,S32K3_MCAL_FlexCAN_Example_Interrupt,S32K3_MCAL_FlexCAN_Example_Polling
Flex4_CSS手册
flex4 flex4与服务器通信 flex 与java通信