Photo search with PureMVC in AS3

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!

This entry was posted in Codes, Thoughts, Visuals and tagged , , , , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

8 Comments

  1. Posted July 8, 2011 at 17:17 | Permalink

    Hi, thanks for the nice demo, i was looking for a “real world” introduction to PureMVC and that’s perfect :). The only thing i must say i don’t really “like” is the fact that the main graphical elements are declared in the Main class (cause its the document class) would it have been possible to link this to an “AppView” class or something like that instead ?
    thx !

    • Posted July 15, 2011 at 10:40 | Permalink

      Hi Lucas,

      Yes, it would. This is a simplified approach to the architecture, but it could be made more modular and use a base view class other than the Main. The AppView could be defined in the Main and then to the facade you would send a reference of the AppView and go on from there.

      Did this help?

  2. MikeG
    Posted July 10, 2011 at 06:17 | Permalink

    Interesting article, thank you for sharing!

  3. Lluís
    Posted August 26, 2011 at 12:33 | Permalink

    Thanks for the article. Very clear and useful. I modified it and translated it to Flex (without the visual effects, grid instead of gallery…)
    Just one small detail: in order to isolate completely the mediators from their UI components, I think that “get component” methods should be declared private:
    private function get detail():Detail (instead of public)

    • Posted October 10, 2011 at 21:31 | Permalink

      Did you share your Flex version? I’ve never built a Flex only app.
      That would be interesting to check, how a Flex version looks like.

      And yes, I must agree.
      There’s really no need for public “get components”. Thanks for pointing that up!

  4. Posted September 7, 2011 at 13:47 | Permalink

    Thanks a lot for sharing.

    Can I ask you what program you were using for script coding ?
    (Just curious what is your work flow)

    I usually use FlashDevelop and Flash IDE only for exporting graphical assets in swc.

    I have just started my ” round no 193″ ;) with PureMVC , not going to give up and finally start using it for projects.

    • Posted October 10, 2011 at 21:26 | Permalink

      I currently use Flash Builder as IDE. Or even TextMate for minor tweaks.
      But most of the times I still use Flash IDE to compile SWF’s. I just link the document class and that’s it. Not many times I use compiled SWC with graphical assets, though I know it’s much faster to compile. Old habits I guess.

      PureMVC it’s an excellent way of getting used to MVC. And better yet, you can always apply the framework in other languages.

Leave a Reply

  • Building Mobile Apps with PhoneGap
  • Subscribe to get my
    best content.

    Delivered for free to your inbox, every
    two weeks.

    No spam, ever. Unsubscribe any time.

  • Advert

  • On Twitter