Flex手机项目继承IconItemRenderer自定义List组件
2013-12-16 13:52
447 查看
在学习Flex手机项目的过程中,用到了List组件。系统默认的List有两种形式,一种是只显示一行文件的LabelItemRenderer简单样式,另一种为继承了LabelItemRenderer样式的IconItemRenderer样式。后一种相对比较复杂,在每个item中可以添加图片,图标,多行文件等内容。但是如果认真可以发现,后一种还是不能满足各种项目需求,例如想在每个item里添加一个"修改"或“删除”按钮,就不能做到了。本人花了不少时间查找相关资料,以为可以简单通过设置其属性的方法来添加按钮,但是没有找到,想到就来火,看来网络也不是万能的。写下一笔,以填空白。
认真可以发现,其实第二种就是继承了第一种的LabelItemRenderer重新的定义的组件。既然可以通过继承LabelItemRenderer重写,那么也就可以通过继承IconItemRenderer来自定义自己的组件了。好,行动。在FB4.6里,可以通过两种方法来处定义组件,一种是mxml的设计模式,另一种为as的代码模式。这里讲通过写一个as类来继承。新建一种as类,新建类的时候要继承IconItemRenderer,新建createChildren方法,在createChildren方法里动态添加一个button,设置这个button的各个属性,例如x,y,label等,最后利用this.addChild()方法把这个自定义组件添加到父类中去。
代码如下:
[java]
view plaincopyprint?
package common
{
import flash.events.MouseEvent;
import spark.components.Button;
import spark.components.IconItemRenderer;
public class MyItem2
extends IconItemRenderer
{
private var delButton:Button;
private var editButton:Button;
public function MyItem2()
{
super();
}
/**
* @private
*
* Override this method to create children for your item renderer
*/
override protected function createChildren():void
{
super.createChildren();
// create any additional children for your item renderer here
delButton=new Button();
delButton.x=this.parent.width-100;
delButton.y=25;
delButton.label="删除";
delButton.scaleX=0.6;
delButton.scaleY=0.6;
delButton.height=35;
delButton.width=70;
delButton.addEventListener(MouseEvent.CLICK,delHandleClick);
this.addChild(delButton);
editButton=new Button();
editButton.x=this.parent.width-50;
editButton.y=25;
editButton.label="修改";
editButton.scaleX=0.6;
editButton.scaleY=0.6;
editButton.height=35;
editButton.width=70;
editButton.addEventListener(MouseEvent.CLICK,editHandleClick);
this.addChild(editButton);
}
private function delHandleClick(event:MouseEvent):void{
}
private function editHandleClick(event:MouseEvent):void{
}
}
}
在上面的类中,每个item添加了一个“修改”及“删除”按钮,接下来,在mxml里引用这个自定义的组件
如下:
[java]
view plaincopyprint?
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="主页视图" xmlns:common="common.*">
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<s:List width="100%"
height="100%"
alternatingItemColors="0xE3E3E3"
contentBackgroundColor="0xF9F9F9"
downColor="0x70B2EE"
selectionColor="0x70B2EE"
labelField="productName" focusEnabled="false"
>
<s:itemRenderer>
<fx:Component>
<common:MyItem2 iconPlaceholder="@Embed('assets/home.png')"
iconField="productIcon"
iconWidth="50"
iconHeight="50">
</common:MyItem2>
</fx:Component>
</s:itemRenderer>
<s:dataProvider>
<s:ArrayList>
<fx:Object productIcon="assets/fx.jpg" productName="Flex SDK"
productDesc="A highly productive, free, open source framework."/>
<fx:Object productIcon="assets/fb.jpg" productName="Flash Builder"
productDesc="Designed to help developers rapidly develop RIAs."/>
<fx:Object productIcon="assets/fc.jpg" productName="Flash Catalyst"
productDesc="An approachable new interaction design tool."/>
</s:ArrayList>
</s:dataProvider>
</s:List>
</s:View>
怎样,效果还行吧?纠结了两个多星期,终于发现了这个方法,分享下。其实还有另一种方法可以实现,就是添加一个mxml组件,新建的时候要基于IconItemRenderer,然后添加以下代码:
[java]
view plaincopyprint?
<?xml version="1.0" encoding="utf-8"?>
<s:IconItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
labelField="title"
messageField="message"
iconField="ico"
iconWidth="64"
iconHeight="64"
initialize="init()">
<fx:Script>
<![CDATA[
import spark.components.Button;
private var delButton:Button;
private function init():void{
if(!delButton){
delButton=new Button();
delButton.addEventListener(MouseEvent.CLICK,handleClick);
delButton.x=this.parent.width-70;
delButton.y=20;
delButton.height=30;
delButton.width=50;
delButton.label="aa";
this.addChild(delButton);
}
}
private function handleClick(event:MouseEvent):void{
}
]]>
</fx:Script>
</s:IconItemRenderer>
这样同样可以在item里添加一个button按钮。触类旁通,如果想自定义添加一个图片或其它组件,可以通过这两种方法来实现。
认真可以发现,其实第二种就是继承了第一种的LabelItemRenderer重新的定义的组件。既然可以通过继承LabelItemRenderer重写,那么也就可以通过继承IconItemRenderer来自定义自己的组件了。好,行动。在FB4.6里,可以通过两种方法来处定义组件,一种是mxml的设计模式,另一种为as的代码模式。这里讲通过写一个as类来继承。新建一种as类,新建类的时候要继承IconItemRenderer,新建createChildren方法,在createChildren方法里动态添加一个button,设置这个button的各个属性,例如x,y,label等,最后利用this.addChild()方法把这个自定义组件添加到父类中去。
代码如下:
[java]
view plaincopyprint?
package common
{
import flash.events.MouseEvent;
import spark.components.Button;
import spark.components.IconItemRenderer;
public class MyItem2
extends IconItemRenderer
{
private var delButton:Button;
private var editButton:Button;
public function MyItem2()
{
super();
}
/**
* @private
*
* Override this method to create children for your item renderer
*/
override protected function createChildren():void
{
super.createChildren();
// create any additional children for your item renderer here
delButton=new Button();
delButton.x=this.parent.width-100;
delButton.y=25;
delButton.label="删除";
delButton.scaleX=0.6;
delButton.scaleY=0.6;
delButton.height=35;
delButton.width=70;
delButton.addEventListener(MouseEvent.CLICK,delHandleClick);
this.addChild(delButton);
editButton=new Button();
editButton.x=this.parent.width-50;
editButton.y=25;
editButton.label="修改";
editButton.scaleX=0.6;
editButton.scaleY=0.6;
editButton.height=35;
editButton.width=70;
editButton.addEventListener(MouseEvent.CLICK,editHandleClick);
this.addChild(editButton);
}
private function delHandleClick(event:MouseEvent):void{
}
private function editHandleClick(event:MouseEvent):void{
}
}
}
package common { import flash.events.MouseEvent; import spark.components.Button; import spark.components.IconItemRenderer; public class MyItem2 extends IconItemRenderer { private var delButton:Button; private var editButton:Button; public function MyItem2() { super(); } /** * @private * * Override this method to create children for your item renderer */ override protected function createChildren():void { super.createChildren(); // create any additional children for your item renderer here delButton=new Button(); delButton.x=this.parent.width-100; delButton.y=25; delButton.label="删除"; delButton.scaleX=0.6; delButton.scaleY=0.6; delButton.height=35; delButton.width=70; delButton.addEventListener(MouseEvent.CLICK,delHandleClick); this.addChild(delButton); editButton=new Button(); editButton.x=this.parent.width-50; editButton.y=25; editButton.label="修改"; editButton.scaleX=0.6; editButton.scaleY=0.6; editButton.height=35; editButton.width=70; editButton.addEventListener(MouseEvent.CLICK,editHandleClick); this.addChild(editButton); } private function delHandleClick(event:MouseEvent):void{ } private function editHandleClick(event:MouseEvent):void{ } } }
在上面的类中,每个item添加了一个“修改”及“删除”按钮,接下来,在mxml里引用这个自定义的组件
如下:
[java]
view plaincopyprint?
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="主页视图" xmlns:common="common.*">
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<s:List width="100%"
height="100%"
alternatingItemColors="0xE3E3E3"
contentBackgroundColor="0xF9F9F9"
downColor="0x70B2EE"
selectionColor="0x70B2EE"
labelField="productName" focusEnabled="false"
>
<s:itemRenderer>
<fx:Component>
<common:MyItem2 iconPlaceholder="@Embed('assets/home.png')"
iconField="productIcon"
iconWidth="50"
iconHeight="50">
</common:MyItem2>
</fx:Component>
</s:itemRenderer>
<s:dataProvider>
<s:ArrayList>
<fx:Object productIcon="assets/fx.jpg" productName="Flex SDK"
productDesc="A highly productive, free, open source framework."/>
<fx:Object productIcon="assets/fb.jpg" productName="Flash Builder"
productDesc="Designed to help developers rapidly develop RIAs."/>
<fx:Object productIcon="assets/fc.jpg" productName="Flash Catalyst"
productDesc="An approachable new interaction design tool."/>
</s:ArrayList>
</s:dataProvider>
</s:List>
</s:View>
<?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="主页视图" xmlns:common="common.*"> <fx:Declarations> <!-- 将非可视元素(例如服务、值对象)放在此处 --> </fx:Declarations> <s:List width="100%" height="100%" alternatingItemColors="0xE3E3E3" contentBackgroundColor="0xF9F9F9" downColor="0x70B2EE" selectionColor="0x70B2EE" labelField="productName" focusEnabled="false" > <s:itemRenderer> <fx:Component> <common:MyItem2 iconPlaceholder="@Embed('assets/home.png')" iconField="productIcon" iconWidth="50" iconHeight="50"> </common:MyItem2> </fx:Component> </s:itemRenderer> <s:dataProvider> <s:ArrayList> <fx:Object productIcon="assets/fx.jpg" productName="Flex SDK" productDesc="A highly productive, free, open source framework."/> <fx:Object productIcon="assets/fb.jpg" productName="Flash Builder" productDesc="Designed to help developers rapidly develop RIAs."/> <fx:Object productIcon="assets/fc.jpg" productName="Flash Catalyst" productDesc="An approachable new interaction design tool."/> </s:ArrayList> </s:dataProvider> </s:List> </s:View>效果如下:
怎样,效果还行吧?纠结了两个多星期,终于发现了这个方法,分享下。其实还有另一种方法可以实现,就是添加一个mxml组件,新建的时候要基于IconItemRenderer,然后添加以下代码:
[java]
view plaincopyprint?
<?xml version="1.0" encoding="utf-8"?>
<s:IconItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
labelField="title"
messageField="message"
iconField="ico"
iconWidth="64"
iconHeight="64"
initialize="init()">
<fx:Script>
<![CDATA[
import spark.components.Button;
private var delButton:Button;
private function init():void{
if(!delButton){
delButton=new Button();
delButton.addEventListener(MouseEvent.CLICK,handleClick);
delButton.x=this.parent.width-70;
delButton.y=20;
delButton.height=30;
delButton.width=50;
delButton.label="aa";
this.addChild(delButton);
}
}
private function handleClick(event:MouseEvent):void{
}
]]>
</fx:Script>
</s:IconItemRenderer>
<?xml version="1.0" encoding="utf-8"?> <s:IconItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" labelField="title" messageField="message" iconField="ico" iconWidth="64" iconHeight="64" initialize="init()"> <fx:Script> <![CDATA[ import spark.components.Button; private var delButton:Button; private function init():void{ if(!delButton){ delButton=new Button(); delButton.addEventListener(MouseEvent.CLICK,handleClick); delButton.x=this.parent.width-70; delButton.y=20; delButton.height=30; delButton.width=50; delButton.label="aa"; this.addChild(delButton); } } private function handleClick(event:MouseEvent):void{ } ]]> </fx:Script> </s:IconItemRenderer>
这样同样可以在item里添加一个button按钮。触类旁通,如果想自定义添加一个图片或其它组件,可以通过这两种方法来实现。
相关文章推荐
- php 关于session_start()总是提示错误
- ☀【响应式图片】
- 归并排序2
- UIWebView 打开文件的时候适应屏幕设置
- UIWebView 打开文件的时候适应屏幕设置
- 升级列表自动生成脚本
- RabbitMQ入门之安装配置与简单实例----perfect
- 树链剖分+segtree+treap HYSBZ 1146 网络管理Network
- JavaScript 自定义map
- 黑盒测试用例设计方法&理论结合实际 -> 等价类划分
- 设置bar的颜色,setTinColor&setBarTintColor
- 关于listview加载多种item的解决方案
- C语言堆栈入门——堆和栈的区别
- 关于Oracle 10g的schedule job
- jackson 注解的使用
- 多线程第七篇:互斥和同步总结
- (转)Apple Push Notification Services in iOS 6 Tutorial: Part 1/2
- 哎呀
- 归并排序1
- RedHat安装oracle 10g系统环境配置脚本