Switching Views in Actionscript 3.0 using MVC

Question

Hello, I am working on a Flash/AS3.0 app that I want to use MVC on. The question I have is who is responisble for adding/removing views from the stage? Most examples I find have the doc class add the view, but I haven't seen an example for who notifies the doc class to remove the view.

The structure of the app is one screen that shows images - click on an image and the gallery goes away and a larger version of the image shows up for editing. I see teh gallery as one view and the edit screen (which has the image for editing and edit toolbar) as the second view.

Opinions on the structure? I have seen many examples that would break the toolbar into its own view.

Any help is appreciated.

Thanks, -j

Answer 1

When you apply MVC in as3 (or flex) you're applying it as you'd do in any other language, so the base structure is always the same (and the view is notified by the model through an event\notification) http://upload.wikimedia.org/wikipedia/commons/2/2e/ModelViewControllerDiagram.svg

AS3 comes with no built in mvc architecture, you have to head towards the community frameworks to get somekind of mvc framework where build your own code.

Here some interesting links about mvc frameworks for the flash platform: http://puremvc.org/ http://opensource.adobe.com/wiki/display/cairngorm/Cairngorm http://swizframework.org/ http://www.spicefactory.org/parsley/

hope it helps ;)

Answer 2

Looking at the PureMVC diagram really made things clearer.

What I will do is combine functionally related UI controls/elements into objects and let the view remove objects as needed.

1. When a gallery object is pressed -> the view passes the click to the controller
2. The controller calls an internal function that triggers a function in the model
3. The model's called function changes internal state (which view should be on stage)
4. The model sends an update/change event which bubbles up to the view
5. The view calls an internal function to remove current view and add new view as listed in the models state

I am looking more at how/why PureMVC uses the command,mediator, proxy, and facade.

UI COMPONENTS: The gallery of images will be one UI component using a Factory pattern (what changes is the placement algorithm) to create either a landscape or portrait subclass of a picture abstract class.

The editing window will be a UI component

The edit toolbar will be a UI component using a builder pattern to build the buttons (one type of object - button - with custom attributes - title, icon, does it have a tool connected or an action etc)

When some buttons are pushed a tool (like a crop tool) will show up. The tools will be subclasses of a Tool abstract class