Moonlighting - My first PureMVC website: AS3, Papervision, and a lil SWFAddress

[shauno]

My first PureMVC app has finally gone live! Actually, it was finished last year, but was only launched the other day (the client is still capturing content).

It was a great learning experience for me. I really got a feel for the benefits of PureMVC - things took a little longer to set up (creating proxies, mediators and commands), but once the basic structure had been defined, implementing big changes to the app was relatively painless (and there were a LOT of changes!!). It was also really easy to drop in SWFAddress towards the end of the project - granted that the deep-linking in the site is very simple (only goes down to section level).

Some tech specs: Developed in FlashDevelop3, AS3 (no flex), using PureMVC 1.7.1, Tweener, Papervision 1.5, SWFAddress 2.0, and completely content managed by the client.

Thanks again to Cliff for PureMVC!!

EDIT:

and then in all the excitement I forget to post the URL!

http://www.moonlighting.co.za/

[puremvc]

Wow! I love the unique three-d menu, it rocks pretty hard.

For others first checking out the site, you might not notice the menu it at first, I didn't. I discovered it a bit later.

When the loader is complete and the company logo and 'about us' and other text comes up, don't get sucked into clicking 'about us' or any of the tidily arranged words underneath it right away.

There's a yellow ribbon bisecting the view and along you can see some other things like 'show reel' and 'contact us' sort of turned at odd angles . Click on show reel first. then it's like an outer-space roller-coaster going from menu to menu.

Again, WOW, Shauno, you rock!

-=Cliff>

[shauno]

Cool, thanks so much Cliff! As I said, it was my first, and I've started a couple more since then, but nothing live yet unfortunately - ah the client review proccess

[shauno]

For others first checking out the site, you might not notice the menu it at first, I didn't. I discovered it a bit later.

Ok, have added a little glow effect to the 3D menu items on rollover. Hopefully that'll make them a bit more obvious

[trilec]

Great site,
 Im also starting my first MVC project and plan on using SWFAddress, Id love to get some pointers from you of how you integrated this and perhaps pre-loading into you project.

if you feel up to offering some code snips and a few comments, it would be warmly welcomed.   

cheers
C

[shauno]

Thanks Trilec,

I only discovered SWFAddress towards the end of the project, so it was a bit of a hack to get it in there.. I already had a Command and Notification based system in place for handling the transitions to/from the main sections, so I just wired up a mediator to listen to these notifications and call SWFAddress.setValue() as appropraite. This was not the best way to go however, as calling SWFAddress.setValue() changes the URL and makes SWFAddress fire off it's SWFAddressEvent.CHANGE event - which basically meant my sections were being requested twice (once by my original system, and again by my SWFAddressEvent.CHANGE handler). Had to do something nasty to fix this!

The next site I built with SWFAddress and PureMVC worked a LOT better. I had a command called RequestURICommand, and anything that wanted to navigate or change the state of the app had to send off a notification called REQUEST_URI (which would fire off RequestURICommand) passing an array of URI Segments. The command invoked a method called requestURI() on my URIProxy (again, passing the requested URI segments through).

The requestURI() method in my URIProxy allowed me to do a cleaner integration of SWFAddress than before. It looked something like this:

Code:

public function requestURI(uriSegments:Array):void
{
if (ExternalInterface.available) {
var url:String = uriSegments.join('/');
var title:String = uriSegments.join(' ');
SWFAddress.setTitle(title);
SWFAddress.setValue(url);
} else {
setTargetURI(uriSegments);
}
}

Basically, if the app was in a browser it would call SWFAddress.setValue() which in turn would change the URL - causing a SWFAddressEvent.CHANGE event to be fired. The handler for this event would eventually call setTargetURI(). Alternatively, if the app wasn't in a browser (ie when running the SWF standalone during dev) it would skip all that and call setTargetURI() directly.

But then I went completely over board and made almost every single gesture in the app URI driven! Cool in theory, but a little impractical 

As for preloading, not sure which kind you mean.. preloading the main app, preloading external assets, or preloading the data?

cheers,

[trilec]

thanks shauno,
very insightful, it appears flash development is moving very quickly, I was just about to start my project when found pureMVC and SWFaddress. So I put a few things on hold to do study in these frameworks.

In regards to the preloading, I was interested in how you were preloading assets within your pureMVC layout. My assumption is you would be using a similar method for your data anyway.

Thanks again
Trilec

[Gareth Shapiro]

First of all thanks for posting this shauno, this is helping get up to speed with SWF Address from inside PureMVC sharpish.  It is always nice to have the benefit of somebody else's hindsight!!

I had a command called RequestURICommand, and anything that wanted to navigate or change the state of the app had to send off a notification called REQUEST_URI (which would fire off RequestURICommand) passing an array of URI Segments. The command invoked a method called requestURI() on my URIProxy (again, passing the requested URI segments through).

I am down with all of this except I have a ExternalInterfaceMediator as I am treating the HTML as another View Component.  At the moment this is handling which screen (item on the view stack) should be the first one based on a value from within the Javascript on the page.  I have everything working fine, deferred instantiation etc (a result).  SWF Address is the next step and it would make sense to put requestURI() inside the same Mediator.  You have yours in a Proxy though. 

Any insight as to the decision to put it in a Proxy and not a Mediator?  Am I making too much of a fuss about it?  I am trying to build up a set of classes that I can reuse so want to get it right, but I am new to patterns.

Thanks

Gags

[trilec]

Yes, came to the same conclusion Gags, was also discussing with Pedr about this exact topic.
My train of thought was that in a simplistic manner and striving for loose coupling the question I felt was "what is SWFAddress communicating", one could look at this as displaying the status of navigation to a user in a URL field
therefore this could be looked at as a form of view thus a mediator, the mediator is updating a URL text field and as I found with the chaining utility the mediator already has built in support for sending and receiving notification which would seem that important part in the SWFAddress process.

I'm not sure where Pedr is up to but he was looking into re-factoring this into a mediator.

T

[shauno]

Hi Gags,

I think both ways (mediator and proxy) make sense depending on your perspective. The way I was looking at it, I needed something to proxy the application's state. I'm also very new to patterns however, so it might be a good idea to get advice from some of the more experienced community members

Cheers,
//shn

[Gareth Shapiro]

Thanks for the replies fellas.

Not wanting to have a go at your work, but to rather to have the discussion ...

The way I see it is that the state of the application is something else and the URL/Title merely another representation of that state.

I have not got too far in what I am doing but I now have a decent structure working injecting values from the page into swf, and translating it back to the browser as a URL. 

I used your suggestion but just had my ExternalInterfaceMediator observe for the ApplicationFacade.REQUEST_URI notification and then run requestURI() which I made private so that the only way this can happen is through the notification.

I have just spent the last 5 min clicking back and forward in my browser to proving it works!!!  What a little kid I am!!! AS3 and  PureMVC have made me addicted to programming again..

[Glidias]

If you don't want to reinvent the wheel too much with SWFAddress, deep-linking, among other stuffs ,you might want to consider Gaia Framework. http://www.gaiaflashframework.com . It already has a wide array of front-end features which you can leverage upon to deliver your site's basic features immediately. Event hijacking would come in useful for your transitions (your index page which could house your 3D spaceScene that hijacks every onBeforeGoto event to navigate about in space prior to transitioning in the page). Your nav overlay would be on a TOP depth layer. And your other concrete content pages could transition in accordingly in the middle depth layer, each page having an onDeepLink event to basically handle lots of deeplinking/bookmarking, easily. I see your site concrete content pages has very little bookmarking.. In such a scenerio, the front-to-back approach (the bookmark triggering the COMMAND) could be more effective, with the bookmarks actually controlling what gets displayed. It'd also make your site information more accessible for people, since each page in Gaia already has a onDeepLink event method built in already.
 
Of course, PureMVC is useful for linking your content with your backend model proxies, and your view medaitors to receive/send notifications. Thus, I came up with some experiments combining both PureMVC and Gaia to take advantage of both frameworks which you can see here.  http://www.gaiaflashframework.com/index.php/topic,898.msg3868.html . Of course, you can still rely on a traditional PureMVC SWFProxy to send out notifications. I guess, since you already have many 'wheel" feature proxies, commands & mediators within PureMVC itself, there comes a delimma of deciding whether PureMVC's way is still better, since custom made "wheel" features still provide better control for the developer, and the ability to register/unregister such services as and when you like.

[shauno]

Hi Glidias,

Yes, Gaia looks really promising, and your experiments look very interesting (although I will need some time to go through them properly to see what you've been up to).

Unfortunately, I discovered SWFAddress right at the end of the Moonlighting project, so it was thrown in amongst a functioning system more as a bonus than anything else (hence the fact that the linking doesn't go very deep).

For an example of a PureMVC website with more complete deep linking, the project I did following Moonlighting might be worth checking out:

http://www.earthcote.co.za
http://www.earthcote.co.za/flash/#/products/concreteandplasterstainer/bluestone

Unfortunately, some things changed right at the end of the project and I didn't have time to sort them out - previewing a product used to happen via a click and hence was part of the deep linking, but changed right at the end to being triggered by rollovers. So deep linking is now integrated with certain rollovers - which is not ideal!

[fx.barrett]

Really great work !

A question: Might it be possible that you share the source of those sites ? I'm quite new to PureMVC and I still have a lot to learn, it would be really great if I ( we - the whole community ) could get our hands on some concrete site examples that were built with PureMVC.

Obviously, you don't have to supply the graphics and everything, just the source code...

I know this is an almost impossible will but I thought I'll give it a shot and ask you. Or, if you don't want to share those sites, than could you maybe upload a few simple example you did ( exepriments ) ? Those would help a lot too...

Thanks.

[shauno]

Would love to (even though that old code would embarrass me somewhat now), but the clients who own the code probably wouldn't be cool with the idea. Besides, I'm not very satisfied with the approach I took. I'm still trying to get my head around Application Architecture in general, and the role of Architectural Frameworks (like PureMVC) in web/software development. The more I learn the more complex everything gets.. I'm hoping there's a halfway point - after which things start becoming simple again

If you wanna risk it, you can check out my short-lived experiment with PureMVC and Box2D here:

http://code.google.com/p/hoverhead2d/
Note: It's an FDT project - made it while evaluating FDT just before my trial expired.

Or, check out this little game/thing I made the other day:

http://code.google.com/p/mudboy/
Note: It doesn't use PureMVC, but rather a little framework I made that is very similar to PureMVC called Minibus.


Unfortunately, neither of those are good examples of how to build a website with PureMVC. The next time I build a personal site with PureMVC (or Minibus) I'll post the source on Google Code. In case they help, you can check out my PureMVC bookmarks here:

http://delicious.com/shaunphilipsmith/puremvc
http://delicious.com/shaunphilipsmith/as3
http://delicious.com/shaunphilipsmith/flash
http://delicious.com/shaunphilipsmith/flex


Cheers,
Shaun