We should probably add some documentation regarding containers and controlParents

edited April 2015 in General
Today I ran into some problems while refactoring part of our UI library. I solved them, but it took quite a bit of digging around in the source. My case was as follows.

I have a PopupDecorator component, which loosely couples an Activator component to a ContextualPopup component. If the Activator is clicked, the Popup opens or closes, pretty similar to the way it's done in Onyx.

To render content inside the Popup, I wanted to use the PopupDecorator.components property. So, I set the controlParentName of my PopupDecorator to the name of the ContextualPopup instance and all was good.

Next up, I wanted to create a PopupMenu kind. This would be a sub-kind of the PopupDecorator that puts a ScrollingMenu inside the ContextualPopup. The content defined in PopupMenu.components should be rendered inside the client of the Scroller of the ScrollingMenu. This is where things got complicated...

In order to render my ScrollingMenu into the ContextualPopup, I would need to set the Popup to be the PopupMenu's controlParent. But once the ScrollingMenu is rendered, controlParent should change tot the ScrollingMenu, so it can cascade the content all the way down to the client of it's scroller.

The solution I came up with was the following:
- PopupDecorator overrides enyo.Component.createChrome to create the Activator and ContextualPopup. It then sets the controlParent to the ContextualPopup instance.

- PopupMenu overrides PopupDecorator.createChrome to create the ScrollingMenu after the Activator and ContextualPopup have been created. It then sets the controlParent to the ScrollingMenu instance.

- enyo.Component.createClientComponents will create the content and it will be passed down to the client of the ScrollingMenu's scroller.

This works, and is actually quite powerful, but I don't see it documented anywhere. It probably should be, because it seems like a very fundamental property of the framework.

Another way to make my ScrollingMenu render inside of the ContextualPopup, would be to set the Popup instance as the container of the menu when creating the ScrollingMenu component. Are there any side-effects to using the container property on the child rather than using the controlParent property on the ancestor? If so, this should probably also be documented.
Sign In or Register to comment.