Snippet Repo Browser - List Topics By Tag

If you are trying to extend a custom component and you get the following error

"Multiple sets of visual children have been specified for this component (base component definition and derived component definition)."

the problem is that you have created an MXML component with some children hardcoded;

Surfing the net I've found an interesting discussion here but the solution provided there hasn't convinced me at all.

After some attempts I've finally found a nice solution that is not to hardcode components inside the MXML but create components using actionscript and then add them to the displayList in the createChildren method.

override protected function childrenCreated():void{
	
	super.childrenCreated();
	
	if(!btn){
	
		btn = new Button();
		btn.label = "my as button";
		addChild(btn);
	
	}

}

this isn't an unpublished info for sure, but can be useful as a little reminder.
The scenario:
You have some custom mxml event and need to add your custom event o simply dispatch an ordinary event not listed in your parent class. Usually extending mxml comp it's a matter to base on IEventDispatcher inherited class, so it's quite easy to invoke dispatchEvent BUT ...
You want to refer to you component in mxml code, f.i.: change="onCustomCompChange(event)"
the solution:
- add the event you need via Metadata tag
- of course, if it's a custom event, you must implement it :D
in this snippet we simple add Event.CHANGE to an HBox (that's current missing by default)

// your custom comp
<?xml version="1.0" encoding="UTF-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Metadata>
        [Event(name="change", type="flash.events.Event")]
    </mx:Metadata>

  <mx:Script>
   	<![CDATA[

        import flash.events.Event;
        import flash.events.MouseEvent;


        /*... */


        /**
         * event that dispatch the event we added
         */
        internal function onBtClickmeClick(evt:MouseEvent):void {

            if(hasEventListener(Event.CHANGE)) dispatchEvent(new Event(Event.CHANGE, true));
        }

        ]]>
  </mx:Script>

   <mx:Button label="clickme" click="onBtClickmeClick(event)" />

</mx:HBox>

// your app demo, fit the path to your CustomComp
<?xml version="1.0" encoding="UTF-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	ui="path.to.your.customcomp.*">

  <mx:Script>
   	<![CDATA[

        import flash.events.Event;
        import flash.events.MouseEvent;

        /*... */

        /**
         * change listener on customComp
         */
        internal function onCustomCompChange(evt:Event):void { trace("something has changed!"); }

        ]]>
  </mx:Script>



  <ui:CustomComp change="onCustomCompChange(event)" />
</mx:Application>


/*
:)
Jaco
*/

Related Tags

On This Page:

Extending a custom component

stylable custom events in mxml

On This Page: