Since I have promised to share a PureMVC site template a long time ago, and it is still bound to happen, I will now share another project I also built using the aforesaid framework.

This little project was built about four months ago, to solve a skill test for a Senior Flash Developer position in a London based agency. It took around 10 hours to complete during after-work time. A working demonstration is available here: http://demo.joaopescada.com/searchable-image-gallery/.

The Project.

The test required to develop a small image gallery in Actionscript 3 storing the images set in an XML file and allowing a tag based search functionality. Also, all coding should follow Object Oriented Programming through classes and Actionscript’s coding conventions and best practices.

The visual side of the application was also important. And, in my opinion, this is a point that marks a great difference between “hardcore” developers — with strong technical skills but, usually, low sensibility to visual design — and front-end developers in general, where a Flash Developer should be included. Any good front-end developer should comfortably know the elements and principles of design.

Take time defining the problem, and then solve it fast.

Having recently learned how to use PureMVC, this test seemed like a great way to strengthen my experience with the framework. It was fairly simple and only had to implement a couple of basic actions: show the photos with or without a tag filter applied and show each photo in detail.

For the visual layout, I opted for a grid-less structure simulating a real life environment: a wood floor with the photos scattered all over. It wasn’t the most common solution, but it was still easy to use and hopefully eye-candy enough to stand out from the crowd (the other developers applying for the same position).

The architecture.

As any regular MVC project, the classes needed to be grouped in three folders / packages: model (storing all the data that the app will need), view (where anything-visual is kept and the user actions are captured) and controller (providing communication between view and model).

The stage was created in a single Flash file using the Main class as the document class, with all the visual assets in the library being linked to classes in the view package.

Gluing it all together.

From this point on, you should have the source code nearby in order to check it as I briefly explain the logic behind it. The source code is available to browse and download at my GitHub repository: https://github.com/jpescada/PureMVC-AS3-Searchable-Image-Gallery.

Startup and the Controller.

It all starts in the Main class in the app package.

As soon as the stage is available, the AppFacade singleton is fired, initialising the PureMVC framework, overriding the sendNotification method — to allow debug control, by tracing the notification arguments — and registering the possible controller command calls with specific notifications:
- the StartupCommand is triggered by the STARTUP notification. It registers and initialises the data sources available (StageProxy, StateProxy and PhotosProxy), and the AppMediator (attaching it to the stage) and then requests a new photo search, without any filter applied, to populate the initial layout.
- the PhotoSearchCommand will listen for PHOTO_SEARCH notifications, handling all searches, through the PhotosProxy.
- the PhotoDetailCommand will respond to SHOW and HIDE notifications, setting the app state using the StateProxy, and showing or hiding the detail of a photo.

The Model.

The StageProxy allows access to the app stage, and dispatches notifications every time the stage is resized.
The StateProxy works as a central point to store information about the current state of the app. Namely the current photo selected, if any, and dispatches notification when the state is changed.
The PhotosProxy loads and provides methods to access the information stored in the XML, like search and returns the result coupled to a PHOTO_SEARCH_RESULT notification.

And the View.

The AppMediator registers mediators for the visual components of the layout: the GalleryMediator, the SearchBoxMediator and the DetailMediator.

The GalleryMediator controls the gallery movieclip on the stage, that will load and display the photo thumbnails. It subscribes to PHOTO_CHANGED, PHOTO_SEARCH_RESULT and STAGE_RESIZE notifications in order to update the gallery movieclip as needed. It also listens for clicks in the photo thumbnails and dispatches notifications to the AppMediator when it happens.

The SearchBoxMediator holds a reference to the searchBox movieclip on the stage. It subscribes to PHOTO_SEARCH_RESULT and STAGE_RESIZE notifications and dispatches a PHOTO_SEARCH notification when the user submits the search.

The DetailMediator is linked to the detail movieclip on the stage, updating the display when the subscribed notifications PHOTO_CHANGED or STAGE_RESIZE are received, and dispatches a PHOTO_HIDE notification when the user clicks on the detail movieclip.

All the visual components in the library linked to classes in the app.view.components package have simple methods to update the display or dispatch custom events that will then be picked up by the associated mediators and processed as need be.

Wrapping up.

This was an overview of the logic behind the app.
Feel free to browse and change the code to see what happens and learn with it.
If you end up facing problems or doubts, just drop me an email or comment using the form bellow and I will happily give you all the help needed.

Again, the source code is available here:
https://github.com/jpescada/PureMVC-AS3-Searchable-Image-Gallery.

and the working demo here:
http://demo.joaopescada.com/searchable-image-gallery/

Thanks for reading this article!

For updates on more articles like this, subscribe the blog’s RSS Feed.

This was on my to-do list for quite some time… now I can scratch it of the list!

I’ve been willing to share source code of “real world” projects where I’ve been involved for ages! Not that I see my work as something über-awesome or anything for that matter… But the same way I’ve been lost in code and ended up finding “The” solution in a post from some random mate on the other side of the globe, so can someone find this post — and future ones — as a resource of great value. And, as a bonus, leave work on time. :)

Sharing is a good thing. Really!

We, (Web / Flash / Interactive / Multimedia) Developers, live in a not-so-big community where rookies, juniors, seniors, gurus, veterans, ninjas and any-other-fancy-title-out-there need to work together in order to evolve our skills both personal and group-wise. And with working together I don’t mean geographically, but really as a whole cohesive community where we not only take from, but also give back in the same proportion.

With this in mind, and fueled by Nuno Ribeiro‘s talk at 2010 edition of FlashCamp Portugal — where he referred the must-read post of Marco Neves “Porque partilhar???“ (Why share??? by Google Translate) —, I’ve decided to create an online repository for sharing code at GitHub.

The project and its source code.

So, today was “The Day” and I finally published the first source code of a “real world” project I’ve worked on this year.
It’s a simple 3D scene with draggable cubes take cast shadows on the ground. A striped down version of the scene used in the website oonique candles for oon solutions.

It’s coded in Actionscript 3.0 using Papervision3D + JigLibFlash 3D physics library + Andy Zupko’s ShadowCaster + TweenLite for camera transitions and the help of loads of posts in blogs and forums all over the internet to overcome some problems I’ve faced during development.

As you can now infer, such a simple thing and — yet! — hundreds of people were involved so I could build up this one.

There aren’t much comments throughout the source code, but I’m always around if you need some help understanding something in it. Drop me an e-mail and I’ll write back.

The source code is available for download here: http://github.com/jpescada/PV3D-Boxes.

Go get your hands dirty and feel free to use it as you see fit.
This goes without saying, but any credits will be much appreciated.

For updates on more articles like this, subscribe the blog’s RSS Feed.

Now… I have to get back to work.
And thanks for reading till the end! :)

As referenced in the title, this article is about coding Actionscript 3.0 in a Model-View-Controller design pattern, namely the PureMVC way.

Problems don’t exist. Only opportunities for creating solutions.

A few years back, when I started on web design / development, it was a one-man show. I then started working with other developers from time to time. Two years ago, I joined a team of Adobe Flash developers, and only then I realized how many routes a single coding task can take. We all have different approaches on coding and with this in mind, I felt the need to find a standardized way of developing Adobe Flash based websites / applications.

Last year, after a lot of online research on Actionscript frameworks, I found PureMVC to be the most stable, mature and — most importantly — well documented.

Kicking the tyres.

Before having other team members sharing my opinion, I had to try it myself and apply all the concept on a real project.

My first approach on this design pattern — by the time of publishing this article — is still to be available online. It’s nothing too fancy, but what’s on focus here, is the code holding the pieces together. It’s a structure built to support three websites with similar content for Casinos de Angola. Two websites are on an ongoing approval process, while the third is still to be designed.

“If anything can go wrong, it will.”

Having little to no experience using the MVC pattern, and a deadline to meet, it was a risky choice to make. But still, I opted to take this road. And so — validating the aforementioned Murphy’s Law — I failed the initial deadline.

The development process took waaaaaay longer than I expected. Not because there was a lot to code, but because there was a lot to learn in order to get a solid ground to start building with the chosen architecture.
A big learning curve of concepts before getting into any real coding is a bummer.

Happier programming.

What do you think about the idea? Sounds good, right? It feels even better!
The framework enables a loose coupling between resources allowing an easy development of really project independent components. Maybe this is geek / coder talk, but it feels a more Human-like communication between abstract project resources. Bare this in mind: the notifications are a bliss to work with!

Being an avid follower of the Don’t Repeat Yourself principle and a control freak for logical organization and standardization I chose to implement a Convention Over Configuration paradigm by specifying the website structure / layout in a single XML (Model) file.

As most developers, if I can avoid extra work, by automating processes, I do. Better yet: if I can avoid starting a new project from scratch, and just re-factor 10-15% code of a previous one, I SURE do. And that’s what happened. Having the website contents (Model/Proxies) automating the layout (View), only a few bits of the business logic (Mediators) had to be changed. Now THIS is (planned) code reuse!

Wrapping up…

“The concept of PureMVC may make the best of us shy away, but once you’ve got your head around the bare fundamentals, you’ll soon be flying your way around it.” — Ahmed Nuaman said it on the first tutorial on PureMVC I’ve read, and I could not agree more (though I’m still learning the flying part).

I’m currently — at the time I started writing this article — finishing the development of two video players with similar functionalities, and everything is running smoother and faster. The first player took around 7 hours to complete. The second one? 45 minutes!

One of the biggest conclusions I found with this road I took was that allowing myself to fail, brought an enormous bandwagon of knowledge and rewarding experience. Only by trying harder and harder every now and then, and subsequently failing a lot of those times, you will broaden your comfort zone and therefore your horizons.

Maybe there’s an influence here from the OFFF’s 2009 edition theme: “Fail Gracefully” and the “This isn’t flying, this is falling with style” quote from Toy Story.

Want to learn more about AS3 on PureMVC?

Follows a list of articles / tutorials / books I’ve read, that I think are important for anyone that would like to learn more on the subject:

• Understanding the PureMVC Open Source Framework by Ahmed Nuaman
• PureMVC: Implementation Idioms and Best Practices [PDF] by Cliff Hall
• Discovering PureMVC, and scaling the learning curve by Toby Ashley
• Building a Flash site using PureMVC by Yee Peng Chia
• Puremvc Tutorial – Flex, Puremvc, Jabber and Xiff 3 by Dave Keen
• Creating a YouTube Search and Play Gadget with PureMVC by Ahmed Nuaman
• Minimalist MVC example using the PureMVC Framework by Chandima Cumaranatunge
• ActionScript 3.0 Design Patterns: Object Oriented Programming Techniques [Book] by William Sander and Chandima Cumaranatunge

I’ll be keeping this list updated with new articles / tutorials / books once I find and read them.

Any feedback?

Do you use PureMVC or have tried it? Like it? Hate it? Maybe another framework?
I would love to hear your opinions and to know whether or not I should go for a “Round Two” article on the PureMVC subject.
Your feedback will be much appreciated!

For updates on more articles like this, subscribe the blog’s RSS Feed.

Photo by Jean Scheijen.