[dan_vegas]

Hi CM, thanks for the offer of help. I may need to take you up on it.
I've found a work around using another MVC class for the time being (all though yours is much better!!)
I need to get a project finished quickly so will use this for the time being......just need to find some time to learn Cairngorm now!

[myIP]

Codemonkey, I am still coding away on this project that I mentioned on my last post here! I am really enjoying this MVC pattern.
I have another question, in your example you used a static instance factory to attach some assets to the stage. Since some of my movieclips are mainly empty at compile time I have tried to create an emptyMovieClip in the newInstance(). However when I try to invoke a function in this instance from the ControlsView.update() it fails silently. It doesn’t seem to find the instance. But when I check the SWF using XRAY I am able to see the new emptyMovieClip on stage.
Do you know the reason behind this? Is it a limitation in the type system or am I doing something incorrect.

[Codemonkey]

do you have classes associated with those movieclips you are attaching, and are they exported in 1st frame?

[myIP]

Yes.
But I traced the instance of this class in the ControlsView class (this is where I created the instance) and it returns 'null'.

[myIP]

Well, this is working for me currently;
Instead of having a ‘static instance factory’ I am using a Singleton. And when invoke a function inside of the Singleton instance, that is were I create my empty movieclip.
Perhaps I don’t know exactly what a ‘static instance factory’ is. Do you have a references on this subject you prefer?

[Codemonkey]

It's not actually a 'written' term, it's more like a description describing what it doesn: a static method that creates instances of the class (just like a factory).

could you show me some of the code of your version that didn't seem to work?

[myIP]

The code below has 2 sections, the first half is code that I tried to change to make it work and the other half is the current code that is working. The createInterface method resides in the ControlView class. All other methods for both examples below are in the Header class (a class that just renders a picture and a title). Again for the first half of the code, the header variable was returning ‘null’.

//////////////////////////////////////////////////////
//code that did'nt work for me
//////////////////////////////////////////////////////
public function createInterface(target)
{
    header = Header.newInstance(target, "header", this);
}
 
public static function newInstance(target:MovieClip, name:String, controlsview:ControlsView):Header 
{
    var depth:Number = target.getNextHighestDepth();
    var header:Header =  Header(target.createEmptyMovieClip(name, depth));
    header.controlsview = controlsview;
    return header;
}
 
 
 
 
 
//////////////////////////////////////////////////////
//code that is currently working for me
//////////////////////////////////////////////////////
public function createInterface(target)
{
    header =  Header.getInstance();
    header.createHolder(target);
}
 
public static function getInstance():Header
{
    if(header == null){
        header =  new Header();
    }
    return header;    
}
 
public function createHolder(target:MovieClip)
{
    var depth = target.getNextHighestDepth();
    header_mc = target.createEmptyMovieClip("header_mc", depth);
} 

[Codemonkey]

A couple of things go wrong with the code that didn't work for you. I'll break it down in steps.

// 1
public function createInterface(target) { // 2
        header = Header.newInstance(target, "header", this);
}
 
public static function newInstance(target:MovieClip, name:String, controlsview:ControlsView):Header {
        var depth:Number = target.getNextHighestDepth();
        var header:Header =  Header(target.createEmptyMovieClip(name, depth)); // 3
        header.controlsview = controlsview;
        return header;
} 

At 1. the class is extending MovieClip? If so, you already need an instance to be able to call createInterface() at 2., which is creating an instance. That doesn't make much sense to me, because you are calling that method because you want an instance of it, because you don't have one yet. So, call to createInterface should be replaced with calls to Header.newInstance().

At 3. you are creating an emptyMovieClip with just a name. That movieclip does *not* have a class associated with it, and in Flash such an instantiated movieclip doesn't finish initializing the next frame. That means you can't call its methods or use its properties right after creating it. Casting it to Header won't work because it's not a Header... it's a simple MovieClip with not class attached to it.

[myIP]

Thanks again for your time, I appreciate it.
No, I just realize it doesn’t extend a movieclip. Perhaps I was thinking that header would be a header and not a Movieclip as you pointed out in the second paragraph. However can you clarify the first half of your post? I am still confused on it.

Also, now I am adding a Preloader (more of a loading indicator) to the project. I see how you did yours in the PreloadImage, with is quite beautiful. But in my project, instead of having a Preloader instance nested into a PreloadImage in author-time as you have, I would like my preloader to be nested into a movie clip dynamically. So again, I am trying to make the code below work. The preloader.attach() is called from the second half of the code in the MCLoader class( which is analogous to your PreloadImage). And the Preloader symbol is associated with the Preloader class. Also both classes extends a MovieClip.

////////////////////////////////////////////////
//in the Preloader Class
///////////////////////////////////////////////
class accessories.Preloader extends MovieClip
{
    private var mcloader:MCLoader
    private function Preloader()
    {
    }
    
    public static function attach(target:MovieClip, mcloader:MCLoader)
    {
        
        var depth:Number = target.getNextHighestDepth();
        var preloader:Preloader = Preloader(target.attachMovie("Preloader", "progress_mc", depth));
        preloader.mcloader = mcloader;
        return preloader;
    }
 
.....[i]more code not shown[/i]
 
 
 
 
 
////////////////////////////////////////////////
//in the MCLoader Class
///////////////////////////////////////////////
 
preloader = Preloader.attach(targetMC, this) 

[Codemonkey]

I had to lookup PreloadImage to refresh my memory a bit. I can see I wrote the comments in an allnighter

Originally posted by myIP
Thanks again for your time, I appreciate it.
No, I just realize it doesn’t extend a movieclip. Perhaps I was thinking that header would be a header and not a Movieclip as you pointed out in the second paragraph. However can you clarify the first half of your post? I am still confused on it.

Well it seemed to me you are trying to create an instance of Header, using an instance method... which is ofcourse impossible, because you would actually already need an instance to call it on. Unless, createInterface is meant to do something else that is...

As to your second problem, I'm not sure. It seems ok, but one thing that seems odd to me is that you store a reference to MCLoader on the preloader, while in my PreloadImage, it's the other way around (except if you store it to later call a method onComplete() on MCLoader or something).

[myIP]

I can see I wrote the comments in an allnighter

hehe...

Wait, do you know, createInterface() is in a different class then Header’s static newInstance()? If not I think that is where the confusion is.

For the second problem I will try to have the mcloader to have preloader property in it. Thanks for pointing that out.

[wraevn]

First off - thanks Codemonkey for putting this out there for us to learn from.

I'm building my first AS3 project. It happens to be an image gallery/slideshow - so I thought I'd kill 3 birds w/ one stone:

1. learn AS3
2. learn the MVC pattern
3. get paid for my learning

I built a UML diagram using Grant Skinner's gModeler (http://www.gskinner.com/gmodeler/). I based the class structure off of Codemonkey's gallery_mvc class structure. I only included inheritance (extends) relational links for readability.

I'd appreciate any comments on how I've set it up so far, if it looks like I'm headed down the right path, pitfalls I may encounter doing this way etc.

Here is a screen-cap of the UML: http://www.wraevn.com/sample/SampleUML.jpg

[Codemonkey]

Looking good; You've established how functionality is spread among the class structure. You should also create a diagram of all the uses relationships (perhaps only the leaf classes) that clarifies how that functionality is used by whom, so you can look back at it lateron.

You may want to consider how the interface was solved in my gallery, since it deals with the quirks of AS2 and may be solved much better with AS3.0 (NavBar PreloadImage, ViewArea and the spread assets in the library etc.).

[Nutrox]

I'm back, and I'm still having a problem with the idea of using the MVC pattern within a MovieClip based Flash application.

Here's the thing: The idea behind the MVC pattern (separating the data, user input, and visual layers) is perfectly valid and I have no problem with that. However, problems arise when trying to stick to the structure of the MVC pattern in Flash because of the nature of Flash's time lines and the use of class extended library assets. I'm going to try and explain what I am going on about here so bare with me.


Let's take the following situation. You have a Flash movie that contains two MovieClips in the library. The first MovieClip extends the LittleMonkey class and the second MovieClip extends the BigMonkey class, both classes contain a monkeySize property. Problem no.1 is right there, the monkeySize property is not contained in a Model (unless you consider each MovieClip to be a Model). Both LittleMonkey and BigMonkey need to change size when the user clicks on them so we will throw a few more classes into the mix.

Model class. Contains littleSound and bigSound properties (strings) which are used to play a sound depending on which monkey is clicked.

View class. A display object which is used to display the monkeys. View is given a reference to the Model.

Controller class. Registers an event listener with the stage to catch mouse clicks. Controller is given a reference to the Model.

Ok, so everything is setup and ready to go. The classes have been initialised and the monkeys have been attached to the View class (display object). The user clicks the mouse on LittleMonkey, Controller catches that event and passes a LittleMonkey reference over to Model letting Model know that LittleMonkey has been clicked. In turn Model passes the littleSound value over a sound management class and the sound is played. Great, all is fine and dandy up until this point. The only way that Model is now able to change LittleMonkey's monkeySize property is by accessing LittleMonkey directly to retrieve the value (problem no.2)... then what happens?

Does Model adjust and set the monkeySize property directly causing LittleMonkey to change size? If that happens then wouldn't LittleMonkey be acting as a Model and a View?

Does Model pass the new monkeySize value and a LittleMonkey reference to View (after a request from View) which in turn updates LittleMonkey's monkeySize property allows LittleMonkey to adjust it's own size based on the new value? Again it seems that LittleMonkey would be acting as a Model and a View.


Unless I have completely got the wrong end of the stick here it would seem that any data initially stored in a library asset class (and not in the Model) breaks the MVC pattern unless you consider each library asset to be a Model, and also consider each library asset to be a View if those assets adjust their own position or visual state in any way which a lot of components and other assets do... and don't say that none of your Flash assets ever do that.

If I'm wrong here could someone put me on the right path and explain how this situation would in fact be classed as MVC. As far as I can tell the MVC pattern cannot be used with Flash if you want to take advantage of a lot of the features and functionality that Flash offers.

[Codemonkey]

Ok, everything in Flash that has properties and a visual representation managed by Flash (ie. a MovieClip) inherently is a model with its own view. Just look at the code in UIcomponent and related classes and you'll see there is a host of properties read out by the visual representation code on an interval when the model is being 'invalidated'. The seperation is not as clear as in MVC, but it is there. That's just code you can actually change (you're not supposed to, but you can); the code behind a MovieClip is safely tucked away in Flash' engine, but you can bet it works similar.

You can't actually separate the MovieClip properties from the visual display, because, as you know, it is maintained by Flash itself. It's like any component in Flash; they are all fullblown with their own event handling for visual interactivity response (scrollbar for example). But this goes for any programming language; at some point you call upon some native API that makes the visual change happen. That doesn't mean you can't have MVC there.

Remember, this is not the same kind of model/view as in MVC, where you want to separate responsibilities with your own new codebase, using universal building blocks like MovieClips, which on its own is a native model/view, except you don't care about it. It's not violating MVC because you simply delegate the responsibility to physically update the visuals to the MovieClip, to Flash.

Originally posted by Nutrox
As far as I can tell the MVC pattern cannot be used with Flash if you want to take advantage of a lot of the features and functionality that Flash offers.

You have a point there, but this greatly depends on the granularity of how much responsibility you want to take out of flash' hands. You can for example decide to catch each and every event from a component, make it go through your controller, model and then view, which in turn updates the component (you can manage a scrollbar in its entirety this way). But you don't want this. You need to decide which features of Flash you want to be autonomous and which to manage yourself. This is the granularity I meant.

MVC is not about is not about handling aspect of every Flash object. It is about regulating responsibilities to a certain degree (granularity again here). So in the example you describe, MVC is still valid, because it does exactly that and simply utilizes isolated functionality by delegating some responsibility to it (your monkySize example).

[Nutrox]

That makes sense, and makes things a lot clearer.

Just one more quick question relating to that example I posted: Would the Model or the View update the monkeySize property, and would the View or LittleMonkey handle the physical resizing of LittleMonkey?

Thanks for the reply mate.

[Codemonkey]

Good question. Depends.

Is the monkeySize part of the model's logic? Ask yourself this question: "If I would replace the current view I have with a completely different one, would monkeySize still exist?". It helps you to determine if the monkey is a reflection of the model like with a view or whether the monkey property is an intrinsic property to the model; the first case means the view sets the monkeySize, the latter case means the model sets the monkeySize and the view uses it to reflect this change somehow, possibly by actually having a monkey mc and setting its size.

However:
If monkeySize belongs to an object that is a subclass of MovieClip it becomes a different scenario, because the model shouldn't be allowed to set its properties that way. Remember, the point of a model and a view is to seperate any direct link allowing you to use a different view, multiple views or no views at all. Not any of them are garantueed to have the monkey movieclip with this property on stage, which would mean the model could have some kind of invalid object with a monkeySize property and the point of seperation that makes MVC what it is completely missed. really the model should be completely isolated from the stage and any of the clips in it.

[Nutrox]

If monkeySize belongs to an object that is a subclass of MovieClip it becomes a different scenario, because the model shouldn't be allowed to set its properties that way.

Yar, that is the situation. One thing I completely forgot about though was that the Controller can have access the View as well as the Model.

Once I have an image of how this all should work in my head that will be it, I will be able to leave you alone.

Let's change things slightly: When LittleMonkey is clicked it needs to (a) be resized and (b) needs to update a score value of some kind.

Ok, LittleMonkey is a MovieClip attached to the View, View is a display object. When the user clicks on LittleMonkey the Controller catches the event and does two things. First it calls Model.setScore() which tells the Model to update the score value it is holding, then the Controller calls View.setMonkeySize() which in turn calls LittleMonkey.updateSize().

If a second view is also being used (ScoreBoard) then the Model will dispatch an event when the score is updated, ScoreBoard catches that event then calls Model.getScore() to get the new score value and updates itself accordingly.

Would that be the correct way to handle things?

[Codemonkey]

Originally posted by Nutrox
Would that be the correct way to handle things?

Absolutely.

The only question here is where do you draw the line of separation of responsibility. More concrete: the controller can change the monkey's size, or the view can do this in response to a model update (just like the score board). Ask yourself this question: "Is it possible for the model to decide that the score shouldn't be updated and that nothing in the model changes?". Applied to your situation: "is it possible that even though the monkey was clicked, the score isn't changed?". In that case, the monkey shouldn't change in size and if the controller is responsible for this it has to perform extra checks on the model whether the score really changed... rather a complicated ordeal. If the model however is responsible for the monkey's size (*not* the MC version!) then it can send an update if the score actually changed and the views update accordingly, scoreboard and monkey's mc size.

Take a Pause Game button for example. If pushed, anything clicked should have no effect and the monkey shouldn't grow, because the model is in pause mode meaning no score was added.

It's really a matter of personal taste vs. added complexity.
Taste: what does the controller manage of the view part and what do the views do. What do you prefer to code?
Added complexity: If the controller manages some view part, will it need extra checks on the model?

For me, I mostly try to keep the controller unaware of its views... mostly (in practicality, you'll never succeed there because there are always exceptions where you just don't want to wait for a model's update). That way I can use more views without cluttering the controller with knowledge of all these views. You can have a controller per view though, a situation which deserves some more consideration in this regard.

If it makes it easier however to just quickly change a small view aspect, model changed or not, then sure do it directly in the controller.

[Nutrox]

Great reply as usual.

In a nutshell then, and when applied to Flash, it is better to look at the MVC pattern as a guide rather than a rule, and separate responsibility when it makes sense to do so.

[Codemonkey]

Sure, but then again modifying the view from the controller is actually described in the MVC pattern so incidentally taking it as a guide here would be according 'the rule' as well.

All patterns are guides. It's just a complex one like MVC takes a long road of comprehension of 'the rule' (intentions, separation issues, responsibility, capsulation and cohesion issues, plugable elements like the replaceable controller) before you can take it away and apply as guide.

And appearantly, I'm unable of posting short answers

[Nutrox]

Hehe.. long answers from the Codemonkey are always well received.

The reason for my questions here is I'm trying to apply MVC to a Flash game engine (heavy use of 'intelligent' MovieClips) and it is turning out to be a lot more complex than I initially thought it would be, and a lot more complex than it needs to be. I'm still not totally convinced that MVC is the way to go with the game engine although saying that using UIManager (controller) World (view) and WorldData (model) would fall into the MVC world I guess, but MVC it is definitely a good example of how responsibility can be separated in any type of application.

[wraevn]

Can someone explain to me why the constructor for the PreloadImage class is private?

I understand the need for the Singleton pattern in the Gallery and NavBar classes - they each contain functions that instantiate the object. But I can't find where the PreloadImage object gets instatiated ... and AS3 won't allow private constructors.

Oh wait a minute ... is it newInstance in ViewArea? I see that it creates a Singleton instance of ViewArea, which is extending PreloadImage, whose constructor calls super(); - is that where the PreloadImage constructor actually gets called?

(btw - I've been using Grant Skinner's suggestion for working around private constructors (http://www.gskinner.com/blog/archive...ingletons.html) as follows

// Singleton class:
package {
   
   public class SingletonDemo {
      private static var instance:SingletonDemo;
      private static var allowInstantiation:Boolean;
      
      public static function getInstance():SingletonDemo {
         if (instance == null) {
            allowInstantiation = true;
            instance = new SingletonDemo();
            allowInstantiation = false;
          }
         return instance;
       }
      
      public function SingletonDemo():void {
         if (!allowInstantiation) {
            throw new Error("Error: Instantiation failed: Use SingletonDemo.getInstance() instead of new.");
          }
       }
    }
} 

[Codemonkey]

Originally posted by wraevn
Oh wait a minute ... is it newInstance in ViewArea? I see that it creates a Singleton instance of ViewArea, which is extending PreloadImage, whose constructor calls super(); - is that where the PreloadImage constructor actually gets called?

Yep, that's exactly right. PreloadImage can't be instatiated except by its subclasses. It is supposed to be abstract. And PreloadImage's constructor is private, because it is a MovieClip.

Originally posted by wraevn
btw - I've been using Grant Skinner's suggestion for working around private constructors (http://www.gskinner.com/blog/archive...ingletons.html as follows

Actually, we had this discussion on these boards as well. I like the second options Grant has on his blog, but the first one seems more transparent.

[wraevn]

I've got this bug in the Preloader class when trying to compile my AS3 version ...

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at com.assets::Preloader/com.assets:Preloader::setPercentage()[C:\Flash_Projects\PhotoSites\com\assets\Preloader.as:64]
at com.assets::Preloader/reset()[C:\Flash_Projects\PhotoSites\com\assets\Preloader.as:57]
at com.assets::PreloadImage/loadImage()[C:\Flash_Projects\PhotoSites\com\assets\PreloadImage.as:51]
at com.assets::ThumbImage/loadImage()[C:\Flash_Projects\PhotoSites\com\assets\ThumbImage.as:67]
at com.assets::NavBar/createThumb()[C:\Flash_Projects\PhotoSites\com\assets\NavBar.as:122]
at com.gallery::GalleryView/update()[C:\Flash_Projects\PhotoSites\com\gallery\GalleryView.as:120]
at com.interfaces.observer::Observable/notifyObservers()[C:\Flash_Projects\PhotoSites\com\interfaces\observer\Observable.as:74]
at com.gallery::GalleryModel/com.gallery:GalleryModel::notifyViews()[C:\Flash_Projects\PhotoSites\com\gallery\GalleryModel.as:238]
at com.gallery::GalleryModel/loadNextImage()[C:\Flash_Projects\PhotoSites\com\gallery\GalleryModel.as:194]
at com.gallery::GalleryController/loadNextImage()[C:\Flash_Projects\PhotoSites\com\gallery\GalleryController.as:22]
at com.gallery::GalleryView/notifyModel()[C:\Flash_Projects\PhotoSites\com\gallery\GalleryView.as:139]
at com.gallery::GalleryView/update()[C:\Flash_Projects\PhotoSites\com\gallery\GalleryView.as:123]
at com.interfaces.observer::Observable/notifyObservers()[C:\Flash_Projects\PhotoSites\com\interfaces\observer\Observable.as:74]
at com.gallery::GalleryModel/com.gallery:GalleryModel::notifyViews()[C:\Flash_Projects\PhotoSites\com\gallery\GalleryModel.as:238]
at com.gallery::GalleryModel/com.gallery::loadComplete()[C:\Flash_Projects\PhotoSites\com\gallery\GalleryModel.as:144]
at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at flash.net::URLLoader/flash.net:URLLoader:nComplete()

(btw - I'm not using any of the graphical assets from the original .fla - I've only created the bare minimum MCs in the .fla the replace the attachMovie calls ... but even if I put the line mc and display textfield from the old .fla into PreloaderMC on the stage I still get the null error)

What it's saying is that in the setPercentage() function, line (and eventually display as well) is a null object.

I'm tracing out the function call and I know that the first time the newInstance function is called line and display are getting created.

But then it gets called again, which should simply return what was created before. When this happens, line and display both trace as null, just as the error says.

Can someone help me track this puppy down? I'm at a loss ...

/**
 * Preloader component. Has a percentage indicating line, a display and
 * an exra _onLoadComplete method assign by external users.
 * This preloader should be passed to a MovieClipLoader as a listener.
 */
package com.assets{
 
    import flash.display.Sprite;
    import flash.display.MovieClip;
    import flash.text.TextField;
 
    public class Preloader extends MovieClip {
 
        // workaround for non-existing/private constructors for Singleton pattern
        private static  var preloader:Preloader;
        private static  var allowInstantiation:Boolean = false;
 
        // assets: the line indicating percentage
        private var line:Sprite;
 
        // assets: the textfield indicating percentage as number
        private var display:TextField;
 
        public function Preloader():void {
            if (!allowInstantiation) {
                throw new Error("Error: Instantiation failed: Use Preloader.newInstance() instead of new Preloader.");
            }
        }
 
        // a static instance factory.
        // attaches the movie from the library and returns this strict-typed
        public static function newInstance(target:Sprite, name:String):Preloader {
            if (preloader == null) {
                allowInstantiation = true;
                var p:PreloaderMC = new PreloaderMC();
                p.name = name;
                line = new Sprite();
                line.name = "line";
                display = new TextField();
                target.addChild(p);
                p.addChild(line);
                p.addChild(display);
                preloader = Preloader(p);
                allowInstantiation = false;
            }
            return preloader;
        }
 
        // called by a MovieClipLoader, to update the 
        // graphcial representations of the bytes loaded so far.
        public function onLoadProgress(target:MovieClip, loaded:Number, total:Number):void {
            setPercentage(Math.round((loaded / total) * 100));
        }
        // reset the graphical representation
        public function reset():void {
            setPercentage(0);
        }
        // sets the width of the line and sets the display textfield 
        // and aligns the display to the end of the line
        private function setPercentage(p:Number):void {
            line.width = p / 2;
            display.x = line.width - display.width / 2;
            display.text = p + "%";
        }
    }
} 

here is the original, AS2 class:

class assets.Preloader extends MovieClip {
    // assets: the line indicating percentage
    private var line:MovieClip;
    // assets: the textfield indicating percentage as number
    private var display:TextField;
 
    // a static instance factory.
    // attaches the movie from the library and returns this stricttyped
    public static function newInstance(target:MovieClip, name:String):Preloader {
        var depth:Number = target.getNextHighestDepth();
        return Preloader(target.attachMovie("Preloader", name, depth));
    }
 
    // called by a MovieClipLoader, to update the 
    // graphcial representations of the bytes loaded so far.
    public function onLoadProgress(target:MovieClip, loaded:Number, total:Number) {
        setPercentage(Math.round((loaded / total) * 100));
    }
    
    // reset the graphical representation
    public function reset() {
        setPercentage(0);
    }
    
    // sets the width of the line and sets the display textfield 
    // and aligns the display to the end of the line
    private function setPercentage(p:Number) {
        line._width = p / 2;
        display._x = line._width - display._width / 2;
        display.text = p + "%";
    }
} 

[wraevn]

Hmm ... if I make line and display public and have them inside the PreloadMC movie-clip on the stage in the .fla, and take out the constructors in newInstance - no more error

public static function newInstance(target:Sprite, name:String):Preloader {
            if (preloader == null) {
                allowInstantiation = true;
                var p:PreloaderMC = new PreloaderMC();
                p.name = name;
                //line = new Sprite();
                //line.name = "line";
                //display = new TextField();
                target.addChild(p);
                //p.addChild(line);
                //p.addChild(display);
                preloader = Preloader(p);
                allowInstantiation = false;
            }
            return preloader;
        } 

... how can I do this and keep them private?

Better still ... why is what I've got above in my previous post wrong?

EDIT:

Well, it looks as if in AS3, MCs and TextFields etc. that are in an MC that gets created at runtime are already part of the class ... therefore, they don't need to be declared in the external class, but simply referenced as if you'd already declared and created them (which, in fact you did, just not at runtime). This is quite cool actually!

I switched to using the .fla and all of its contents (modified for AS3 of course). I then removed references in the external classes (e.g. Preloader.as) that referred to existing items in the MCs. I then referenced them via the static instance (e.g. _preloader.line) and all is well!

[wraevn]

Given the following 2 classes, why won't my button functions work (see _createControls())?

The buttons exist in the ControlsMC movieclip
ControlsMC is linked as ControlsMC
ControlsMC's base class is com.assets.Controls
All instance names are correct.
The buttons are buttons and they're being tracked as buttons.

ControlsView.as

/**
 * The controls panel with all the controls (previous and next buttons).
 * This is also a view for convieniance, so that when a button
 * has been pressed, the request can go directly to the model,
* instead of backtracing the gallery_view and then do it that way.
 *
 * This view contains a Controls instance which actually physically 
 * contains the buttons. controls couldn't be the view, because it
 * already inherited from MovieClip, (being an asset in the library).
 * For this reason only is it, that ControlsView can access the buttons
 * inside the Controls instance directly publicly.
 */
package com.gallery{
    //
    import flash.display.Sprite;
    import flash.events.MouseEvent;
    import flash.events.Event;
    import com.gallery.GalleryModel;
    import com.gallery.GalleryView;
    import com.gallery.GalleryController;
    import com.gallery.GalleryUpdate;
    import com.gallery.ImageObject;
    import com.interfaces.mvc.AbstractView;
    import com.interfaces.mvc.IController;
    import com.interfaces.observer.Observable;
    import com.assets.Controls;
    import com.transitions.Fader;
    //
    public class ControlsView extends AbstractView {
 
        // the synergant brother of ControlsView
        private var _controls:Controls;
 
        // constructor, creates the Controls brother instance
        // the observable and controller come from the galler_view, who is
        // creating this CotnrolsView, the the model and controller are the same.
        public function ControlsView(m:Observable, c:IController, target:Sprite) {
            trace("CALL: ControlsView("+m+", " + c+", " + target+")");
            super(m, c);
            _createControls(target);
        }
 
        // creates the Controls instance with the buttons and aligns that panel.
        private function _createControls(target:Sprite) {
            trace("CALL: ControlsView._createControls("+target+")");
            _controls = Controls.newInstance(target, "controls");
            _controls.x = 1;
            _controls.y = 3;
            target.addChild(_controls);
            
            _controls.btn_prev.addEventListener(MouseEvent.CLICK, _viewPreviousImage);
            _controls.btn_next.addEventListener(MouseEvent.CLICK, _viewNextImage);
            _controls.btn_slideshow.addEventListener(MouseEvent.CLICK, _switchSlideshow);
            _controls.btn_slideshowr.addEventListener(MouseEvent.CLICK, _switchSlideshowRandom);
            
            // thumbs preloadline is zero (no thumbs loaded yet)
            _controls.line.width = 0;
        }
 
        // makes the Controls instance align its buttons
        public function alignControls(x:Number, y:Number) {
            trace("CALL: ControlsView.alignControls("+x+", " + y+")");
            _controls.x = x;
            _controls.y = y;
        }
 
        // notifies the model to view the previous image.
        // this method is called by the buttons inside Controls.
        private function _viewPreviousImage(event:Event) {
            trace("---------------");
            trace("ControlsView: notifying controller -> request view previous image");
            GalleryController(getController()).viewPreviousImage();
        }
        // notifies the model to view the next image.
        // this method is called by the buttons inside Controls.
        private function _viewNextImage(event:Event) {
            trace("---------------");
            trace("ControlsView: notifying controller -> request view next image");
            GalleryController(getController()).viewNextImage();
        }
        // notifies the model to start a slideshow.
        // this method is called by the buttons inside Controls.
        private function _switchSlideshow(event:Event) {
            trace("---------------");
            trace("ControlsView: notifying controller -> request switch slideshow mode");
            GalleryController(getController()).switchSlideshow(false);
        }
        // notifies the model to start a random slideshow.
        // this method is called by the buttons inside Controls.
        private function _switchSlideshowRandom(event:Event) {
            trace("---------------");
            trace("ControlsView: notifying controller -> request switch random slideshow mode");
            GalleryController(getController()).switchSlideshow(true);
        }
 
        // returns the height of the synergant controls.
        // meaning this class should be treated as if has the buttons directly.
        // since that would've been the case if assets didn't have to extend from MovieCLip.
        public function getHeight():Number {
            trace("CALL: ControlsView.getHeight()");
            return _controls.height;
        }
 
        // responds to the 'loading' notification the gallery model has dispatched.
        // sets the line inside the Controls instance to match the percentage of images
        // loaded so far.
        public override function update(o:Observable, infoObj:Object):void {
            trace("CALL: ControlsView.update("+o+", " + infoObj+")");
            // Cast the generic infoObj to the GalleryUpdate datatype.
            var info:GalleryUpdate = GalleryUpdate(infoObj);
            // if loading images, show percentage
            if (info.state == "loading") {
                Fader.fade(_controls.line, "width", info.percent * 1.15, 5);
            }
        }
    }
} 

Controls.as

/**
 * The 'controls vessel' for the ControlsView.
 * Contains the buttons used in this gallery.
 * Has no methods because Controls isn't supposed exist.
 * Read ControlsView why.
 */
package com.assets{
    import flash.display.Sprite;
    //
    public class Controls extends Sprite {
 
        // a reference to the Controls
        private static  var _controls:Controls;
        private static  var _allowInstantiation:Boolean = false;
        
        // private constructor, because Controls can't be instantiated directly
        public function Controls():void {
            // private constructor
            if (!_allowInstantiation) {
                //throw new Error("Error: Instantiation failed: Use Controls.newInstance() instead of new Controls.");
            }
        }
 
        // a static instance factory.
        // attaches the movie from the library and returns this stricttyped
        public static function newInstance(target:Sprite, name:String):Controls {
            trace("CALL: Controls.newInstance("+target+", " +name+")");
            if (_controls == null) {
                _allowInstantiation = true;
                _controls = Controls(new ControlsMC());
                _allowInstantiation = false;
            }
            return _controls;
        }
    }
} 

[Codemonkey]

I have to admit my AS3 isn't very good, but I was meaning to do a conversion of the gallery to AS3 soon.

Meanwhile, it's hard to see what's going wrong, but I'll gladly take a look at your version (and learn a thing or two in the process )

[wraevn]

I'll reply off-forum to your email address ... it'll be from Brandon E.B. Ward.

Thanks!

[wraevn]

A-hah!!!

I tooootally forgot about button propagation in AS3 ... the buttons were sitting beneath navbar and viewarea, and therefore couldn't be clicked!

I just made sure that the controls ended up on top of everything and voila!!

I guess I could also have turned button click-through on for the other items, but I wanted controls on top anyway.

Whew - problem solved!

[Codemonkey]

ahh, glad you found it. Now I can slack

[Nutrox]

Monkey matey,

Let's say we have a basic one Model, one View, one Controller setup. Where would something like an audio management system fit into the M->V->C flow?

Also, would the audio management system be similar to MVC.. but with SoundPlayer and MusicPlayer classes instead of views?

Model->Player->Control

[wraevn]

A favorite book of mine - Object-Oriented ActionScript For Flash 8 has a whole chapter dedicated to the MVC pattern and a media player (mp3, swf and flv)

You can download the files/code here:

http://www.friendsofed.com/download....sbn=1590596196

I highly recommend the book for 1st-time OOPers (which obviously, Codemonkey and Nutrox are not). I think the way they use the MVC pattern to deal w/ playing various types of media is really effective.

They have a new book for AS3, but I havn't read it yet.

[Codemonkey]

Originally posted by Nutrox
Monkey matey,

Let's say we have a basic one Model, one View, one Controller setup. Where would something like an audio management system fit into the M->V->C flow?

The manager is created and used by the view in my opinion.

Here's why:
The model as you know just holds and maintains the application logic and variably contains the data itself or data through a domain layer in combination with DAO access to external databases and stuff.

It is bound to your application specific implementation.

That audio management system is a component on its own that is tailored to your application by feeding it lots of parameters from your application, configuring the sounds and stuff. At least, if you are using an isolated sound system, which you have.

Then the question is: "where is the sound manager created and used and where are the parameters that configure it?". well, ask yourself this: "Are sounds in my application reflecting the model?", the answer is yes... almost always. It is view specific, a representation of the model to the user. For interaction it is dialogs and buttons, for the one-way signals Model->View (read: user!) it can be sounds. So, the manager is created and used by the view in my opinion. The id's to the sounds are not even in the model, because the view decides how it should represent the model, which sounds for the various events.

Originally posted by Nutrox
Also, would the audio management system be similar to MVC.. but with SoundPlayer and MusicPlayer classes instead of views?

If you ask me, and you did, I would say no.

If you are talking about a mediaplayer with a menu and interaction and stuff, then yes; there is a lot of interaction between user and the sound functionality and so there is the concern of separating those aspects model, view and controller. The whole idea is to be able to easily manage and scale the application logic, data logic and interaction/graphical logic.

You don't need all that however if it is a sound manager just behind the scenes in any application. In that case, I would not bother with MVC, because it doesn't give you what it is meant to give you. You could probably store the id's to sounds, looping, volume, panning etc. per sound in a model, then have a semi-view-playerlogic-containing class that uses those properties by M->V updates and then play and all the while using some controller, but that is lunacy.

Hope it helps

[Nutrox]

I have been thinking about how a music player with a GUI would fit into MVC, and I was thinking about something like this:

PlayerModel (observable) - Contains the player's state, volume/pan, and play list data etc.

PlayerEngine (observer) - Contains and manages the actual Sound object.

PlayerUI (observer/view) - Contains and manages the GUI.

PlayerController (controller) - Handles the interaction feedback from PlayerUI and updates PlayerModel via command objects.


That could all be wrapped up in a single Player object/component.

So, it would be MVC but you would have two observers watching the model. That would allow you to easily flip the view between standard-mode and mini-mode simply by changing the view object. A visual representation of the play list could also be a different view I guess.

Oh, one more thing. Can a view only have one model and one controller assigned to it, or can a view watch multiple models?

Thanks mate.

[Nutrox]

This is a really good thread, I've just been reading through it all again.

The discussion about getter/setters got me thinking. The main problem with getters/setters when introduced to MVC seems to be the fact that setters, by their nature, update the value of a property, which in the MVC world should be the job of the Controller.

I was thinking that instead of having getters/setters hardwired in a View you could create a special object which ( a ) encapsulates collections of related getters/setter, and ( b ) talks to the Controller in that same way a View does. That way the Model would still hold all of the data and the Controller would still be the only thing that updates the Model.

For example, let's say we have GalleryComponent which contains the Model, View, and Controller for the gallery. A new GalleryComponent instance is created whenever someone wants to create a gallery.

Now, GalleryComponent would have a public property (read-only) called 'style' which would reference a Style object. The Style object would contain getters/setters for changing the gallery's background colour, thumbnail size, etc. When a setter is invoked in the Style object the Controller is notified which in turn updates the Model with the new value. When a getter is invoked the Style object references an info object passed to it by the Model, and returns the value.

In a nutshell, the Style object would act like a View but would not render anything, and the setters would be replacements for buttons clicks etc.

gallery.style.backgroundColor = 0x303030; 

public function get backgroundColor():uint
{
    return modelData.backgroundColor;
}
 
public function set backgroundColor( value:uint ):void
{
    controller.executeCommand( "updateBackgroundColor", {value:value} );
} 

Is this making any sense, or am I completely crazy?

[sentinels]

err... any MVC i've ever worked with never had the controller updating anything. all the controller would do is handle requests from the view, create command objects to pass to a service, and potentially dispatch an event to inform any listening view(s) that the model has been updated once the service has returned a result. the delegate or command should be the object updating the model and informing the controller that the model has been updated.

[Nutrox]

Well yeah, that's what I meant. I only said the Controller updates the Model because it makes more sense saying that when looking at M->V->C

[Nutrox]

@CM

Another question regarding the way you have coded the MVC classes/interfaces: In your implementation of MVC you have things setup so that the View can only have one Model and one Controller added to it. In that situation, would it not be better to a getter/setter for the model and control references instead of using getModel() setModel() etc?

If you were allowing multiple Models to be added to a View then the use of addModel() removeModel() methods would obviously make sense, but I don't see the point of using getModel() setModel() when only one Model can be added to the View.

Is the use of getModel() and setModel() just something that has sneaked across from Java, or is that the 'normal' way to do things in MVC?

[Nutrox]

How is this looking... 0-9-4.zip

The classes and interfaces don't have comments at the moment, but I have included documentation for them for quick viewing. It is based heavily on the framework Codemonkey uploaded.

The next step will be trying to base an MP3 player on that framework. I will upload that when it is working.


PS: My server seems to be acting like an ass at the moment. If you can't download the file now then try again soon.