The exact order of events is described in "Creating and extending Flex components" of the help file. However, in general you shouldn't expect the update handlers to be called in any particular order, since a subclass could force a call to updateDisplayList() or measure() without your objects being ready. So basically you should always check if an object exists before trying to access it.
Also, if I'm not mistaken, createChildren() might be called more than once during the life time of a component (I think that's when it's removed from the stage and added back), so you also need to check that "lineHolder" is not null before creating it. -- Laurent Cozic Flash, Flex and Web Application development http://pogopixels.com --- On Thu, 8/14/08, Regert, Michael <[EMAIL PROTECTED]> wrote: From: Regert, Michael <[EMAIL PROTECTED]> Subject: RE: [flexcoders] Displaying custom items in ComboBox To: flexcoders@yahoogroups.com Date: Thursday, August 14, 2008, 2:49 PM I’ve implemented it almost the same way your blog sample did, tweaking only a bit to add a canvas to the holder rather than a icon class. I’ve overridden the functions createChildren, measure, and updateDisplayList just as you have. I’m a C/C++ developer new to Adobe Flex and am trying to grasp everything. I guess I’m not fully understanding the call stack on this and the order of methods it calls to render the dropdown. Is there a good place to learn this? I had to put a check in place inside of updateDisplayList to check for null because the function was being call initially, even before the combobox was rendered. I figure I’m just missing the whole picture which is why I’m not understanding where the selected label is being set. Thanks. package { // Custom Combo Box import flash.display. DisplayObject; import mx.containers. Canvas; import mx.controls. ComboBox; import mx.core.IFlexDispla yObject; import mx.core.UIComponent ; public class LineComboBox extends ComboBox { // constructor public function LineComboBox( ) { super(); } // Private attribute to hold the line canvas private var lineHolder:UICompon ent; override protected function createChildren( ):void { super.createChildren( ); lineHolder = new UIComponent( ); addChild(lineHolder ); } override protected function measure():void { super.measure(); if (iterator && iterator.current) { // MyLineClass holds a canvas with the line drawn on it var lt:MyLineClass = iterator.current as MyLineClass; var line:IFlexDisplayOb ject = lt.getDisplayObject () as Canvas; while (lineHolder. numChildren > 0) { lineHolder.removeCh ildAt(0); } lineHolder.addChild (DisplayObject( line)); measuredWidth += line.measuredWidth; measuredHeight = Math.max(measuredHe ight, line.measuredHeight + borderMetrics. top + borderMetrics. bottom); } } override protected function updateDisplayList( unscaledWidth: Number, unscaledHeight: Number):void { super.updateDisplayList( unscaledWidth, unscaledHeight) ; if (selectedItem) { var lt:MyLineClass = selectedItem as MyLineClass; var line:IFlexDisplayOb ject = lt.getDisplayObject () as Canvas; while (lineHolder. numChildren > 0) { lineHolder.removeCh ildAt(0); } lineHolder.addChild (DisplayObject( line)); measuredWidth += line.measuredWidth; measuredHeight = Math.max(measuredHe ight, line.measuredHeight + borderMetrics. top + borderMetrics. bottom); } } } } Michael J. Regert From: [EMAIL PROTECTED] ups.com [mailto:flexcoders@ yahoogroups. com] On Behalf Of Alex Harui Sent: Wednesday, August 13, 2008 7:20 PM To: [EMAIL PROTECTED] ups.com Subject: RE: [flexcoders] Displaying custom items in ComboBox Not sure how you’ve got it coded now, but you can either hide the textInput or maybe override selectedLabel From: [EMAIL PROTECTED] ups.com [mailto:flexcoders@ yahoogroups. com] On Behalf Of Regert, Michael Sent: Wednesday, August 13, 2008 2:29 PM To: [EMAIL PROTECTED] ups.com Subject: RE: [flexcoders] Displaying custom items in ComboBox This blog was EXTREMELY helpful. I’m so close to having this working. The last problem I’m grappling with is on the initial population of the combo box, everything is displayed as expected – only my graphic (within a canvas). But once an item in the drop-down box is selected, the combo box displays both the new graphic AND [object MyObjectName] . I know I need to do something additional than what I’m doing in the updateDisplayList function but am unsure as to what. Michael J. Regert From: [EMAIL PROTECTED] ups.com [mailto:flexcoders@ yahoogroups. com] On Behalf Of Alex Harui Sent: Tuesday, August 12, 2008 6:17 PM To: [EMAIL PROTECTED] ups.com Subject: RE: [flexcoders] Displaying custom items in ComboBox IconComboBOx on my blog (blogs.adobe. com/aharui) From: [EMAIL PROTECTED] ups.com [mailto:flexcoders@ yahoogroups. com] On Behalf Of Michael Regert Sent: Tuesday, August 12, 2008 2:46 PM To: [EMAIL PROTECTED] ups.com Subject: [flexcoders] Displaying custom items in ComboBox Below is a "hello world" program that creates a combo box which has a circle or a square as the drop-down selections. The drop down has a custom renderer which shows a label as well as a graphic of the shape. What I'd like to do is display this shape not just in the drop-down menu, but when the combo box list is closed(show the image as the selected item). Righ now, I can only get it to display text. Is this not possible? Suggestions? Thanks. <!-- MAIN MXML FILE --> <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe. com/2006/ mxml" layout="absolute" creationComplete="initApp()"> <mx:Script> <![CDATA[ import mx.containers. Canvas; import mx.collections. ArrayCollection; [Bindable] public var acSelections: ArrayCollection; public var aSelections: Array = [{type:'circle' , image:circleSelecti on()},{type: 'square', image:squareSelecti on()}]; private function initApp():void { acSelections = new ArrayCollection (aSelections) ; } private function squareSelection( ):Canvas { var canvas:Canvas = new Canvas(); // New canvas to hold the drawing object canvas.width = canvas.height = 20; canvas.graphics. lineStyle( 2, 0x000000, 1); canvas.graphics. drawRect( 2, 2, 16, 16); return canvas; } private function circleSelection( ):Canvas { var canvas:Canvas = new Canvas(); // New canvas to hold the drawing object canvas.width = canvas.height = 20; canvas.graphics. lineStyle( 2, 0x000000, 1); canvas.graphics. drawCircle( 10, 10, 8); return canvas; } ]]> </mx:Script> <mx:Panel id="pnlMain" layout="absolute" title="Custom Combo Box" x="10" y="10" width="250" height="200"> <mx:ComboBox id="cbSelection" horizontalCenter="0" verticalCenter="0" dataProvider="{acSelections}" itemRenderer="MyComboBox" labelField="type" rowCount="{acSelections. length}" width="100"/> </mx:Panel> </mx:Application> <!-- ***** MYCOMBOBOX.MXML RENDERER BELOW ***** --> <?xml version="1.0" encoding="utf-8"?> <mx:HBox xmlns:mx="http://www.adobe. com/2006/ mxml"> <mx:Script> <![CDATA[ private var _data:Object; override public function set data(value:Object) :void { _data = value; removeAllChildren( ); switch (_data.type) { case "circle": addChild (_data.image) ; break; case "square": addChild (_data.image) ; break; } } override public function get data():Object { return _data; } ]]> </mx:Script> <mx:Label text="{data.type}"/> </mx:HBox>
