Nesting components

[Lee Henson]

Hi

How does the team envision the usage of nested components with respect
to the wiring up of events? For example, I have a toolbar component
which contains several buttons. I want to be able to wire up a per-
button "selected" event to the toolbar, such that the toolbar
controller can handle events like "toolASelected" and "toolBSelected",
and then change the state of the other buttons as appropriate
(enabling/disabling etc).

As far as I can see there are a couple of options:

1) Attach event handlers in my toolbar view which handle the
"selected" event on each button, then dispatch an appropriate
"toolASelected"-like event which is handled by the toolbar
controller.

2) Modify the ViewHandler metadata tag to allow the specification of a
component id from which to grab the event, e.g.
[ViewHandler(id="toolAButton", event="selected",
handler="toolASelectedHandler")]

Am I missing a more obvious pattern?

Cheers
Lee

[Ben Stucki]

Hi Lee,

Ideally in OpenFlux you wouldn't have to deal with events in the view at all. So, something along the lines of option two sounds like a better choice, however instead of defining an id in ViewHandler you should be able to test for the event's currentTarget property in the handler function.

For something like a toolbar I would suggest using the List component provided in OpenFlux with a custom controller, or the list component may already work for your purposes as is. You should be able to provide a collection of UIComponents directly to the data property and it will act like a container (perhaps I should think about renaming it). You can assign a custom controller to any component just like you can with a custom view, and we've provided some additional metadata concepts to help wire things together automatically. They're not all documented yet, but here's the general idea.

// class metadata

[EventHandler(event="itemClick", handler="itemClickHandler")] // make itemClickHandler a listener for the itemClick event of my component

[ViewHandler(event="click", handler="clickHandler")] // make clickHandler a listener for the click event of whatever my component's view is

// property metadata (EventHandlers can also be placed above properties)

[ModelAlias] public var button:IButton; // ModelAlias automatically assigns the component to this var if it can be typed correctly, if not it's null

[ViewContract] public var upButton:DisplayObject; // ViewContract automatically looks for this property on the view and assigns it to this var if it can be typed correctly, if not it's null

We've also provided a ComplexController class, so that you can easily mix and match individual controllers to suit your needs. For instance you may want to keep the existing list selection behavior, but add an additional custom controller for Drag n' Drop behavior or any non-standard behavior you need. Let me know if this helps out at all and if not I'll try to put a ButtonBar example together soon. Thanks.

- Ben Stucki

http://blog.benstucki.net

[Lee Henson]

Hi Ben

Thanks for the advice. A sample of how *you* would produce a ButtonBar component would certainly be helpful, just to get a further insight into your ideas on how the various bits of OpenFlux hang together. In fact, more "real-world" samples of any kind would be useful, but I realise these are early days for the project.

Regarding your comment: "instead of defining an id in ViewHandler you should be able to test for the event's currentTarget property in the handler function", wouldn't it make sense to add an optional "id" parameters to that metadata which would route that event for a specific component to a specific handler? It makes the whole thing a bit more declarative, and shifts the burden of providing some basic "plumbing" onto the framework. Otherwise you may end up with big switch(event.target) constructs all over the place.

Pseudocode style:

when event received
    if (ViewHandlers.ExistsForIdAndType(event.target.id, event.type))
        ViewHandlers.GetAllForIdAndType(event.target.id).ForEach(Handle(event))
    else if (ViewHandlers.ExistsForType(event.type))
        ViewHandlers.GetAllForType(event.type).ForEach(Handle(event))

Cheers
L

2008/8/5 Ben Stucki <bens...@gmail.com>