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
The stage was created in a single Flash file using the
Mainclass as the document class, with all the visual assets in the library being linked to classes in the
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
Mainclass in the
apppackage. As soon as the stage is available, the
AppFacadesingleton is fired, initialising the PureMVC framework, overriding the
sendNotificationmethod — to allow debug control, by tracing the notification arguments — and registering the possible controller command calls with specific notifications:
StartupCommandis triggered by the
STARTUPnotification. It registers and initialises the data sources available (
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.
PhotoSearchCommandwill listen for
PHOTO_SEARCHnotifications, handling all searches, through the
PhotoDetailCommandwill respond to
HIDEnotifications, setting the app state using the
StateProxy, and showing or hiding the detail of a photo.
StageProxyallows access to the app stage, and dispatches notifications every time the stage is resized.
StateProxyworks 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.
PhotosProxyloads and provides methods to access the information stored in the XML, like
searchand returns the result coupled to a
And the View.The
AppMediatorregisters mediators for the visual components of the layout: the
gallerymovieclip on the stage, that will load and display the photo thumbnails. It subscribes to
STAGE_RESIZEnotifications in order to update the
gallerymovieclip as needed. It also listens for clicks in the photo thumbnails and dispatches notifications to the
AppMediatorwhen it happens.
SearchBoxMediatorholds a reference to the
searchBoxmovieclip on the stage. It subscribes to
STAGE_RESIZEnotifications and dispatches a
PHOTO_SEARCHnotification when the user submits the search.
DetailMediatoris linked to the
detailmovieclip on the stage, updating the display when the subscribed notifications
STAGE_RESIZEare received, and dispatches a
PHOTO_HIDEnotification when the user clicks on the
All the visual components in the library linked to classes in the
app.view.componentspackage 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:
and the working demo here:
Thanks for reading this article!