AS3/Flash Where to put code for visual transitions

[remida]

Hi there, I have a big doubt: where to put the code that generate transitions between different sections? I have an application (flash/as3). In the stage I have a navBar(component->mediator) and a container(component->mediator). In the container I add in runtime the sections (section->mediator). When I click on a button on the navBar component, the mediator send a notification (i.e. changeSection). This notification must trigger a transition. Suppose that the transition is a tween (a very simple situation) on the y property that moves a component/section out of the stage and moves another inside (i.e.

Tweener.addTween(component1, {y:-compoment.height, time:1, transition:"easeOutSine"});
component2.y=stage.stageHeight;
Tweener.addTween(component2, {y:0, time:1, transition:"easeOutSine"});

).
Here is the doubt...where to put the code that create and control the transition? I can put a listener in each mediator...but if I have a lot of transition type (i.e. moveUp, moveDown, moveLeft, moveRight...) I will have too many listeners (in the "best practice" doc I read that the mediators must have few listeners). Another problem is that often I need to know some information of other components (like width, height, y, x etc.) and in this way I must retrive a mediator from another mediator (coupling the classes). Another way is to put all the code in a command (so I will create a command for each transition)....but in this way I must retrive mediators and get the componentView through a getter (and I don't know if it's a best practice)....so what to do? Another way (but it seems to be very close to the last one) is to create a mediator for each transition...

[puremvc]

Put this in the component itself. Try to encapsulate the behavior of a component rather than 'puppeteering' it from the Mediator.

For an example, check out the HelloSprite in the HelloFlash Demo:

http://puremvc.org/pages/demos/AS3/Demo_AS3_Flash_HelloFlash/srcview/

-=Cliff>

[remida]

Hi Cliff, the problem is that my components don't know anything about other components, they are totaly decoupled from each other, the communication between the elements of the system is made with notifications. Maybe I could create a run time Mediator(for example MoveUpMediator) with a MoveUpComponent (not a display object) that control the transition between the two section. This component must hold a reference with the components involved in the transition (for example section1, section2, stage). What I mean is not writing the transition code inside the mediator but inside the component. The mediator listens for notification like: TRANSITION_START and TRANSITION_COMPLETE and calls public method in his component.
What do you think about this solution?

[myIP]

Does this navBar act like the one in Flex?  In otherwords, does it have a property that holds the container you mentioned?  If not, I would suggest to created a new component that will use this navBar for the controls and then have the container as a value for its dataProvider, just like Flex's NavBar.

[remida]

Hi, my NavBar is a custom class. I don't know what it is NavBar in Flex (I have never developed in Flex), however this component doesn't have a reference to the "container" (container is just a dummy component where I add the true content of the application).
Your solution sounds good for my minimal example....but in my real application I have a lot of interactive components that could change sections (for example in each section I could have products previews, and a click on them could trigger a section change).

[remida]

Moreover I prefer not to encapsulate the transition code inside each ViewComponents. I think, but I don't know if it's the right approach, that encapsulating too much code make the components code less reusable.
In a more complex example than my first minimal example, suppose to have a section/component which displays a set of pictures displayed in a grid (a very common situation, where the code could be reused a lot of time). The "transition out" could have a lot of implementation: move each picture out of the screen, change their alpha to 0, etc. etc. Each implementation are specific of a concrete application, so in my opinion is better to manage this in a specific class. In general I do this, but this is the first time I use pureMVC framework...so I have to rethink my habit and try to "save the savable".
And here come out my need to find the right place in which write this code...

[dr.swank]

Hi, I am new here so please excuse if this has been answerd, but why don't you put the view changes in a command?  If the command handles the specific updates for the uicomponent then it would seem legitimate to me.  Just a though.

Julian

[puremvc]

If you can encapsulate this behavior in the view component, it will be more portable.

Lets say you created a custom NavBar component which animates the buttons that it contains sliding in from one side when they are shown. If you encapsulated this behavior in the component itself, then you could use it anywhere -  a pure Flex or Flash app, a Cairngorm, Mate, etc. It would be generally reusable.

However if you puppeteer the animation from a Command, then you're required to use the framework that supports that Command.

The response I hear most often when dispensing this particular advice is, "Oh, well my app is different. It's purpose-built, we won't be reusing the code elsewhere." The problem with that sort of thinking is that it is a self-fulfilling prophecy. Stating that up front gives developers a license to write brittle code that can't be reused.

When I wrote the app for the Sea of Arrows site recently, I had absolutely no idea that I'd ever reuse any of the code again ever. It plays mp3s and shows visualizations while they play and it's a custom site for me.

But after it was done and it struck me that I could make a talking FAQ / narrated slideshow out of it to abate some of my onus for introductory PureMVC presentations, it took less than a weekend to have it in a library, and supporting  slides as visualizations. The bulk of the work was then just producing the assets.

http://seaofarrows.com
http://puremvc.tv

-=Cliff>