Understanding Flex itemRenderers — Part 2: External renderers

An ActionScript itemRenderer

Now you'll write another itemRenderer, this time using an ActionScript class. In the previous article there is a TileList with this inline 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>

You'll make that into an ActionScript external itemRenderer. You'll need to follow these steps:

1. Create a new ActionScript class. Call it BookTileRenderer.as and make it extend HBox, just like the inline itemRenderer.

   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. Create member variables to hold the references to the child components.

   		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. Override the createChildren() function to create the child components and add them to the HBox.

   		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);
   		}

   I've indented the code to show the parent-child relationships. Also, make sure you include an event listener on the Buy button.

4. Override the commitProperties() function and set the user interface controls from the data.

   		override protected function commitProperties():void
   		{
   			super.commitProperties();
   			
   			coverImage.source = data.image;
   			titleText.text = data.title;
   			authorLabel.text = data.author;
   			pubdateLabel.text = data.date;
   		}

5. Add the click event handler for the Buy button.

   		private function handleBuyClick( event:MouseEvent ) : void
   		{
   			var e:BuyBookEvent = new BuyBookEvent();
   			e.bookData = data;
   			dispatchEvent(e);
   		}

6. Modify the TileList in the main application to use the itemRenderer ActionScript class. Simply remove the inlineItemRenderer and replace it with an itemRenderer property right in the tag.

   <mx:TileList id="mylist" x="29" y="542" width="694" itemRenderer="BookTileRenderer" 
          dataProvider="{testData.book}" height="232" columnWidth="275" rowHeight="135" >

If you are going to use an existing container class, such as HBox, I wouldn't bother doing this in ActionScript. You can see it is more complex than using an MXML file and, quite frankly, there is little performance benefit to it.

Page 3 of 4

Previous Page

Next Page