Not bad for a first try.
I would: 1) extend UIComponent instead of Canvas. You aren't using any of Canvas's features so you'll save on size and performance 2) only call invalidateProperties() in the data setter. Move the code in there to commitProperties instead. That'll probably remove the need for the try/catch block. The way it is coded now, you'll get exceptions if the data setter is run before child objects have been set up in createChildren 3) Move the positioning of your components to updateDisplayList(). 4) Calculate measuredWidth/Height in measure(), but you shouldn't set x,y there as you may not actually be sized to your measured size and in general, you'll probably want to react to that in updateDisplayList(). The measure method should compute measuredWidth/Height from the getExplicitOrMeasuredWidth/Height of the child components plus any spacing and gap styles or properties. 5) not bother to set the avatarholder's imagesource in measure(). If these are external images, they won't be measureable in measure() because loading external images is asynchronous. I don't see any particular reason for why your images end up on the wrong row. Maybe there's some problem with AvatarHolder? The 'template' for this is in our docs. I'm sure our doc team would love to know why the docs weren't clear enough for you. -Alex ________________________________ From: [email protected] [mailto:[EMAIL PROTECTED] On Behalf Of learner Sent: Friday, February 15, 2008 12:52 AM To: [EMAIL PROTECTED]; [email protected] Subject: [flexcomponents] simple renderer please help..........please review it Hi all, I am doing my constant effort to learn and make a decent item renderer for a list .. I have also attached a code that i have written for it... please please have a look at it and tell me where i am doing wrong and loopholes are... the problem that i am facing is ; in my image holder the images are not shown properly ... meaning sometimes the image from the different row gets displayed in the other row.. I guessed that there is a way in which u can cache the bitmap in image holder and things like that.. don't know in details ... can any body please suggest me the proper way to design a renderer for this.. please review the following code... (Would be a great help if any body can design this properly for me...i know its too much too ask.. but that will give me guideline and a sort of template . And I once for all ,will get the authentic way to make renderer...till this time .. for me its just blind chess which has really exhausted me ) Thanks my item rendere contains : 1) image.. 2) a text comming next to image 3) a text comming below the text in 2) (Code file is attached) package ms.messengermodule { import mx.containers.Canvas; import mx.controls.Image; import mx.controls.Label; public class ContactBox extends Canvas { /*private var memberStatus:Label;*/ [Embed(source='style.swf', symbol='memberOnline')] private var onlineIcon:Class; [Embed(source='style.swf', symbol='memberOffline')] private var offlineIcon:Class; [Embed(source='ms/felix/css /assets/felixStyle.swf', symbol='memberBusy')] private var busyIcon:Class; [Embed(source='style.swf', symbol='organizer')] private var organizerIcon:Class; private var memberName:Label; private var memberDescription1:Label; private var memberDescription2:Label; private var memberDescription3:Label; private var avatarHolder:ImageHolder; private var description1:String; private var description2:String; private var description3:String; private var contactObject:ContactObject; private var statusImage:Image; private var statusIcon:Object; private var memberNamestr:String; private var userImage:String; /** * Constructor */ function ContactBox() { super(); this.horizontalScrollPolicy = "off"; this.verticalScrollPolicy = "off"; } override public function set data(value:Object):void { try{ super.data = value; contactObject = value as ContactObject; description1 = contactObject.extensionObject["E"]; // take the value from some dictinory object memberNamestr = contactObject.name.split(" ")[0]; userImage = contactObject.imageUrl; // user image statusIcon = ""; getStatusIcon(); invalidateProperties(); } catch(e:Error){ trace(e.message); } } private function getStatusIcon():void { if(contactObject.presence == Constants.Online_Presence){ statusIcon = new onlineIcon() ; } if(contactObject.presence == Constants.offline_Presence){ statusIcon = new offlineIcon(); } if(contactObject.presence == Constants.Busy_Presence){ statusIcon = new busyIcon(); } } override protected function createChildren():void { avatarHolder = new ImageHolder(); addChild(avatarHolder); avatarHolder.height = 38; avatarHolder.width = 38; //avatarHolder.imageSource = ""; memberName = new Label(); memberName.styleName = "NormalTextBoldSmall" memberName.setStyle("color","0xbababa"); memberName.text=""; addChild(memberName); memberDescription1 = new Label(); memberDescription1.styleName = "NormalText"; memberDescription1.setStyle("fontWeight","normal"); memberDescription1.text="" addChild(memberDescription1); memberDescription2 = new Label(); memberDescription2.styleName = "NormalTextSmall"; memberDescription2.text="" addChild(memberDescription2); memberDescription3 = new Label(); memberDescription3.styleName = "NormalTextSmall"; memberDescription3.text="" addChild(memberDescription3); statusImage = new Image(); addChild(statusImage); statusImage.height = 10; statusImage.width = 10; super.createChildren(); this.styleName="messengerlistRenderer"; } override protected function measure():void{ //trace(" measure MemberBox"+ memberObject.name); super.measure(); memberName.text = memberNamestr//contactObject.name; avatarHolder.x = 0; avatarHolder.y=0; avatarHolder.imageSource = contactObject.imageUrl; memberName.width = 100 memberDescription1.width = 150; memberName.x = avatarHolder.width + avatarHolder.x + 4; memberDescription1.htmlText = description1//contactObject.discription1; memberDescription1.x = memberName.x; memberDescription1.y = memberName.textHeight+5; var memberWidth:Number = (memberName.textWidth> memberWidth)?memberWidth:memberName.textWidth statusImage.x = memberName.x + memberWidth+ 10; statusImage.y = memberName.y + 5; } override protected function commitProperties():void { memberDescription1.htmlText = description1//contactObject.extensionObjectArray[Constants.D_EVENT_NAME] ; memberName.text = contactObject.name; statusImage.source = statusIcon; avatarHolder.unloadImage(); //avatarHolder.visible = false; avatarHolder.imageSource = contactObject.imageUrl; statusImage.source = statusIcon; super.commitProperties(); //trace(" commitProperties MemberBox"+ memberObject.name); } } } Regards PS
