Flex 外部渲染器(下)

ActionScript itemRenderer

现在, 您将编写另一个 itemRenderer, 这次使用 ActionScript 类。在上一篇文章中, 有一个 TileList 包含这个内联 itemRenderer:

Xml代码
  1. < mx:itemRenderer >   
  2.         < mx:Component >   
  3.             < mx:HBox   verticalAlign = "top" >   
  4.                 < mx:Image   source = "{data.image}"   />   
  5.                 < mx:VBox   height = "115"   verticalAlign = "top"   verticalGap = "0" >   
  6.                     < mx:Text   text = "{data.title}"   fontWeight = "bold"   width = "100%" />   
  7.   
  8.                     < mx:Spacer   height = "20"   />   
  9.                     < mx:Label   text = "{data.author}"   />   
  10.                     < mx:Label   text = "Available {data.date}"   />   
  11.                     < mx:Spacer   height = "100%"   />   
  12.                     < mx:HBox   width = "100%"   horizontalAlign = "right" >   
  13.                         < mx:Button   label = "Buy"   fillColors = "[0x99ff99,0x99ff99]" >   
  14.   
  15.                             < mx:click >   
  16.                             <![CDATA[  
  17.                                 var e:BuyBookEvent = new BuyBookEvent();  
  18.                                 e.bookData = data;  
  19.                                 dispatchEvent(e);  
  20.                             ]]>   
  21.                             </ mx:click >   
  22.                         </ mx:Button >   
  23.   
  24.                     </ mx:HBox >   
  25.                 </ mx:VBox >   
  26.             </ mx:HBox >   
  27.         </ mx:Component >   
  28.     </ mx:itemRenderer >   
<mx:itemRenderer>
		<mx:Component>
			<mx:HBox verticalAlign="top">
				<mx:Image source="{data.image}" />
				<mx:VBox height="115" verticalAlign="top" verticalGap="0">
					<mx:Text text="{data.title}" fontWeight="bold" width="100%"/>

					<mx:Spacer height="20" />
					<mx:Label text="{data.author}" />
					<mx:Label text="Available {data.date}" />
					<mx:Spacer height="100%" />
					<mx:HBox width="100%" horizontalAlign="right">
						<mx:Button label="Buy" fillColors="[0x99ff99,0x99ff99]">

							<mx:click>
							<![CDATA[
								var e:BuyBookEvent = new BuyBookEvent();
								e.bookData = data;
								dispatchEvent(e);
							]]>
							</mx:click>
						</mx:Button>

					</mx:HBox>
				</mx:VBox>
			</mx:HBox>
		</mx:Component>
	</mx:itemRenderer>

 

您将把它转变为一个 ActionScript 外部 itemRenderer。您需要执行以下步骤:

  1. 新建一个 ActionScript 类。将它命名为 BookTileRenderer.as 并使它扩展 HBox, 就像内联 itemRenderer 那样。

    Xml代码
    1. package  
    2. {  
    3.     import flash.events.MouseEvent;  
    4.       
    5.     import mx.containers.HBox;  
    6.     import mx.containers.VBox;  
    7.     import mx.controls.Button;  
    8.     import mx.controls.Image;  
    9.     import mx.controls.Label;  
    10.     import mx.controls.Spacer;  
    11.     import mx.controls.Text;  
    12.       
    13.     public class BookTileRenderer extends HBox  
    14.     {  
    15.         public function BookTileRenderer()  
    16.         {  
    17.             super();  
    18.         }  
    19.           
    20.     }  
    21. }  
    package
    {
    	import flash.events.MouseEvent;
    	
    	import mx.containers.HBox;
    	import mx.containers.VBox;
    	import mx.controls.Button;
    	import mx.controls.Image;
    	import mx.controls.Label;
    	import mx.controls.Spacer;
    	import mx.controls.Text;
    	
    	public class BookTileRenderer extends HBox
    	{
    		public function BookTileRenderer()
    		{
    			super();
    		}
    		
    	}
    }

     

  2. 创建成员变量, 用于存放子组件的引用。
    Xml代码
    1. private var coverImage:Image;  
    2. private var titleText:Text;  
    3. private var spacer1:Spacer;  
    4. private var authorLabel:Label;  
    5. private var pubdateLabel:Label;  
    6. private var spacer2:Spacer;  
    7. private var buyButton:Button;  
    private var coverImage:Image;
    private var titleText:Text;
    private var spacer1:Spacer;
    private var authorLabel:Label;
    private var pubdateLabel:Label;
    private var spacer2:Spacer;
    private var buyButton:Button;
     
  3. 覆盖 createChildren() 函数以创建子组件, 并将它们添加到 HBox。
    Xml代码
    1. override protected function createChildren():void  
    2.         {  
    3.             coverImage  =  new  Image();  
    4.             addChild(coverImage);  
    5.               
    6.             var innerBox:VBox  =  new  VBox();  
    7.             innerBox.explicitHeight  =  115 ;  
    8.             innerBox.percentWidth  =  100 ;  
    9.             innerBox.setStyle("verticalAlign","top");  
    10.             innerBox.setStyle("verticalGap", 0);  
    11.             addChild(innerBox);  
    12.               
    13.                 titleText  =  new  Text();  
    14.                 titleText.setStyle("fontWeight","bold");  
    15.                 titleText.percentWidth  =  100 ;  
    16.                 innerBox.addChild(titleText);  
    17.               
    18.                 spacer1  =  new  Spacer();  
    19.                 spacer1.explicitHeight  =  20 ;  
    20.                 innerBox.addChild(spacer1);  
    21.               
    22.                 authorLabel  =  new  Label();  
    23.                 innerBox.addChild(authorLabel);  
    24.               
    25.                 pubdateLabel  =  new  Label();  
    26.                 innerBox.addChild(pubdateLabel);  
    27.               
    28.                 spacer2  =  new  Spacer();  
    29.                 spacer2.percentHeight  =  100 ;  
    30.                 innerBox.addChild(spacer2);  
    31.               
    32.                 var buttonBox:HBox  =  new  HBox();  
    33.                 buttonBox.percentWidth  =  100 ;  
    34.                 buttonBox.setStyle("horizontalAlign","right");  
    35.                 innerBox.addChild(buttonBox);  
    36.               
    37.                     buyButton  =  new  Button();  
    38.                     buyButton.label  =  "Buy" ;  
    39.                     buyButton.setStyle("fillColors",[0x99ff99,0x99ff99]);  
    40.                     buyButton.addEventListener(MouseEvent.CLICK, handleBuyClick);  
    41.                     buttonBox.addChild(buyButton);  
    42.         }  
    override protected function createChildren():void
    		{
    			coverImage = new Image();
    			addChild(coverImage);
    			
    			var innerBox:VBox = new VBox();
    			innerBox.explicitHeight = 115;
    			innerBox.percentWidth = 100;
    			innerBox.setStyle("verticalAlign","top");
    			innerBox.setStyle("verticalGap", 0);
    			addChild(innerBox);
    			
    				titleText = new Text();
    				titleText.setStyle("fontWeight","bold");
    				titleText.percentWidth = 100;
    				innerBox.addChild(titleText);
    			
    				spacer1 = new Spacer();
    				spacer1.explicitHeight = 20;
    				innerBox.addChild(spacer1);
    			
    				authorLabel = new Label();
    				innerBox.addChild(authorLabel);
    			
    				pubdateLabel = new Label();
    				innerBox.addChild(pubdateLabel);
    			
    				spacer2 = new Spacer();
    				spacer2.percentHeight = 100;
    				innerBox.addChild(spacer2);
    			
    				var buttonBox:HBox = new HBox();
    				buttonBox.percentWidth = 100;
    				buttonBox.setStyle("horizontalAlign","right");
    				innerBox.addChild(buttonBox);
    			
    					buyButton = new Button();
    					buyButton.label = "Buy";
    					buyButton.setStyle("fillColors",[0x99ff99,0x99ff99]);
    					buyButton.addEventListener(MouseEvent.CLICK, handleBuyClick);
    					buttonBox.addChild(buyButton);
    		}
     我准备通过这一代码显示父子关系。同时, 确保在 Buy 按钮中包含一个事件侦听器。
  4. 覆盖 commitProperties() 函数, 并从数据设置用户界面控制。
    Xml代码
    1. override protected function commitProperties():void  
    2.     {  
    3.         super.commitProperties();  
    4.           
    5.         coverImage.source  =  data .image;  
    6.         titleText.text  =  data .title;  
    7.         authorLabel.text  =  data .author;  
    8.         pubdateLabel.text  =  data .date;  
    9.     }  
    	override protected function commitProperties():void
    		{
    			super.commitProperties();
    			
    			coverImage.source = data.image;
    			titleText.text = data.title;
    			authorLabel.text = data.author;
    			pubdateLabel.text = data.date;
    		}
     
  5. 为 Buy 按钮添加单击事件处理函数。
    Xml代码
    1. private function handleBuyClick( event:MouseEvent ) : void  
    2.         {  
    3.             var e:BuyBookEvent  =  new  BuyBookEvent();  
    4.             e.bookData  =  data ;  
    5.             dispatchEvent(e);  
    6.         }  
    private function handleBuyClick( event:MouseEvent ) : void
    		{
    			var e:BuyBookEvent = new BuyBookEvent();
    			e.bookData = data;
    			dispatchEvent(e);
    		}
     
  6. 将主应用程序中的 TileList 修改为使用 itemRenderer ActionScript 类。只需删除 inlineItemRenderer 并将它替换为标记中的 itemRenderer 属性。
    Xml代码
    1. < mx:TileList   id = "mylist"   x = "29"   y = "542"   width = "694"   itemRenderer = "BookTileRenderer"    
    2.        dataProvider = "{testData.book}"   height = "232"   columnWidth = "275"   rowHeight = "135"   >   
    <mx:TileList id="mylist" x="29" y="542" width="694" itemRenderer="BookTileRenderer" 
           dataProvider="{testData.book}" height="232" columnWidth="275" rowHeight="135" >
     

 如果要使用一个现有容器类, 如 HBox, 我不会使用 ActionScript 这样做。您会发现它比使用 MXML 文件复杂, 并且老实说, 性能方面几乎没有任何优势。

可重用的 itemRenderer

以下是一个 itemRenderer 示例, 它使用 CurrencyFormatter 显示一个数值。我称之为 PriceFormatter:

Xml代码
  1. <? xml   version = "1.0"   encoding = "utf-8" ?>   
  2. < mx:Text   xmlns:mx = "http://www.adobe.com/2006/mxml" >   
  3.   
  4.     < mx:Script >   
  5.         <![CDATA[  
  6.             import mx.controls.dataGridClasses.DataGridListData;  
  7.               
  8.             [Bindable] private var formattedValue:String;  
  9.               
  10.             override public function set data(value:Object):void  
  11.             {  
  12.                 super.data = value;  
  13.                   
  14.                 formattedValue = cfmt.format( Number(data[(listData as DataGridListData).dataField]) );  
  15.  
  16.             }  
  17.         ]]>   
  18.     </ mx:Script >   
  19.       
  20.     < mx:CurrencyFormatter   precision = "2"   id = "cfmt"   />   
  21.       
  22.     < mx:text > {formattedValue} </ mx:text >   
  23.       
  24. </ mx:Text >   
<?xml version="1.0" encoding="utf-8"?>
<mx:Text xmlns:mx="http://www.adobe.com/2006/mxml">

	<mx:Script>
		<![CDATA[
			import mx.controls.dataGridClasses.DataGridListData;
			
			[Bindable] private var formattedValue:String;
			
			override public function set data(value:Object):void
			{
				super.data = value;
				
				formattedValue = cfmt.format( Number(data[(listData as DataGridListData).dataField]) );

			}
		]]>
	</mx:Script>
	
	<mx:CurrencyFormatter precision="2" id="cfmt" />
	
	<mx:text>{formattedValue}</mx:text>
	
</mx:Text>

 

这个 itemRenderer 的关键部分以红色 标出, 设置可绑定变量 formattedValue 。首先, 您会发现 <mx:CurrentFormatter> 使用 id cfmt 定义为 MXML 标记 (如果您愿意, 也可以使用 ActionScript 这样做)。在上例中, formattedValue 设置为 CurrentFormatter 的 format() 函数的调用结果。

此函数将 Number 作为其参数类型, 所以值被转换为 Number -这是因为列表的 dataProvider 是 XML 并且 XML 中的所有内容是文本; 如果为数据使用 Object 并且您有实际数值, 执行 Number 转变将是无害的。

如您所知, 数据是存放 itemRenderer 所显示项目的属性。使用 [ ] 记号是访问数据项目字段的另一种方法。例如, data['price'] 是价格列。但是为了使这个 itemRenderer 可重用, 您不能为特定字段编码, 所以需要一种更普通的方法。

此时, listData 登台亮相。实施 IDropInListItemRenderer 接口的所有 Flex 组件都有一个 listData 属性。

注意: Text、Label、Button、CheckBox 等大多数控制都实施 IDropInListItemRenderer。HBox、Canvas 等大多数容器 实施此接口。如果要在扩展 Container 的 itemRenderer 中使用 listData , 您必须自己实施 IDropInListItemRenderer; 我将在下一篇文章中讨论这个问题。

除了其他内容, 提供给 itemRenderer 的 listData 还包含 rowIndex 和控制, 该控制拥有 itemRenderer-DataGrid、List 或 TileList。将 itemRenderer 用于 DataGrid 时, listData 实际上是一个 DataGridListData 对象-它包含 columnIndex 以及与 DataGridColumn 关联的 dataField 。以下是上述语句的明细, 从内部开始:

  • listData as DataGridListData -它将 listData 转换为 DataGridListData 对象, 使您能访问它的 dataField
  • .dataField -该字段用于渲染的列。它使这个 itemRenderer 变得一般。可以将这个 itemRenderer 用于多个列。在本例中, dataField 是“price”。
  • data[ ... ] -它访问项目中特定字段的数据。在本例中, 它是价格列。
  • Number( ... ) -它将值转换为 Number, 因为 format() 函数需要一个 Number 参数。
  • cfmt.format( ... ) -它将值格式化为货币。
内容概要:本文详细介绍了900W或1Kw,20V-90V 10A双管正激可调电源充电机的研发过程和技术细节。首先阐述了项目背景,强调了充电机在电动汽车和可再生能源领域的重要地位。接着深入探讨了硬件设计方面,包括PCB设计、磁性器件的选择及其对高功率因数的影响。随后介绍了软件实现,特别是程序代码中关键的保护功能如过流保护的具体实现方法。此外,文中还提到了充电机所具备的各种保护机制,如短路保护、欠压保护、电池反接保护、过流保护和过温度保护,确保设备的安全性和可靠性。通讯功能方面,支持RS232隔离通讯,采用自定义协议实现远程监控和控制。最后讨论了散热设计的重要性,以及为满足量产需求所做的准备工作,包括提供详细的PCB图、程序代码、BOM清单、磁性器件和散热片规格书等源文件。 适合人群:从事电力电子产品研发的技术人员,尤其是关注电动汽车充电解决方案的专业人士。 使用场景及目标:适用于需要高效、可靠充电解决方案的企业和个人开发者,旨在帮助他们快速理解和应用双管正激充电机的设计理念和技术要点,从而加速产品开发进程。 其他说明:本文不仅涵盖了理论知识,还包括具体的工程实践案例,对于想要深入了解充电机内部构造和工作原理的人来说是非常有价值的参考资料。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值