Custom Composite Control not rendering correctly for only 0.5-1 sec after being added back into a VGROUP

Question

I am moving away from MXML and have built a custom component control within ActionScript.

I have the control displaying correctly.

Answer 1

Thank you both so much for your answers! The consideration and attention to detail in explaining the concepts is awesome! Très bien!

@RIAstar However due to the amount of code already in place, changing my architecture (separating visual element from behavioural) would force to large a re-factor of the code and would cost to much for a feature that hasn't been explicitly requested. (visual representation of the control being able to change at runtime) It certainly is interesting and I will be adding that into a future version.

That said, I think I've been able to find a solution to my problem. I decided to build off of @SunilD.'s suggestion of validating the control before it's added back in. A hack I know, but humans aren't perfect and thus the code aint either. ;-)

When looking at the control, I noticed it was only the button that was having issues with rendering its image. So to test, I added and removed JUST a button instance with an icon, and I saw the same behaviour! (regardless of how comboBoxMultiSelect was implemented) I ALSO noticed that I didn't see the button do this when it was first created. So why not just reconstruct the button when it gets removed from the display list?

I ended up wiring comboBoxMultiSelect to the FlexEvent.REMOVE event, destroy the button reference, create a new one, and add it back in with AddChild(). Below is an explanation of the event.

"Dispatched when the component is removed from a container as a content child by using the removeChild(), removeChildAt(), removeElement(), or removeElementAt() method. If the component is removed from the container as a noncontent child by using the rawChildren.removeChild() or rawChildren.removeChildAt() method, the event is not dispatched.

This event only dispatched when there are one or more relevant listeners attached to the dispatching object."

Sure enough, this fixed the icon from displaying incorrectly and explains what happening. For some reason the button is taking more than one render event to apply its style when it's added back in. Anyone else able to replicate this behaviour?

I guess the real question now is "what is the best way to remove and add-back-in a button to the display list, so that its embedded icon is unaffected?"