Saturday, March 21, 2009

Easy MVC Pattern for ESRI Flex API

I've gotten off to kind of a slow start here with my blogging. It seems this space will in fact be more of a dribble than a torrent.

In the year that I have been developing with the ESRI Flex API I have come to learn the importance and value of using a good architectural design pattern. I am a big fan of the Model-View-Controller (MVC) pattern and use it in most if not all of my projects. Using the pattern has saved my ass on numerous occassions -- and neglecting to use it has come back to bite me.

Although there are a number of popular Flex MVC frameworks available (eg. Cairngorm, pureMVC, mate, Model-Glue, among others) --these can be overkill for simple web mapping applications -- particularly for beginners. Ive found that many folks have chosen to avoid these what can be larger more complicated frameworks in favor of their own home-grown MVC solutions. I believe that can be a good option -- particularly for smaller projects.

Once such pattern is the EasyMVC pattern by Tom Bray. Be sure to check out the recorded seminar for all the details. This is the MVC pattern that I use most frequently. In this post I have provided the ESRI Flex API MapSwitcher sample using this pattern.

Here is the application in action as well as the application source.

I am certainly not advocating this as the best MVC pattern out there... but I believe its a good place to start place for beginners and small projects. In future posts I will likely use either this pattern -- or the pattern used by the ESRI Sample Flex Viewer (for posts in that context).

In the meantime, happy Flexing and welcome to MVC.

6 comments:

  1. nice to see your blogging.
    this is a really nice example and it helps me to try and understand how to approach design patterns.
    if you were to add in an interface would all classes get an interface? i.e., like IControler.as, IModel.as

    ReplyDelete
  2. @harley - glad it's helpful. i am not certain about the interface. i'm still learning here too -- i will have to read up on that and/or consult with some colleagues. i'll let you know should i find out anything useful! thanks for the encouragement!

    ReplyDelete
  3. Greg, I am starting to wrap my head around design patterns as well and am confused of where I should put things. For example...if I want to add a query and zoom to the results, where do I put things. I would guess that I would create a new .mxml file in the view-components folder and add the user interface for the query, such as a button and text input box. I think I would create a new .as event file for the click event on the button. Do I put the query code in the event file? Or does it go somewhere else? This is where I get confused.

    ReplyDelete
  4. @casey - sounds like you are on the right track. in general, UI components belong in the view folder. in order to keep your application/code decoupled, the view should dispatch an event as you described. in the sample pattern i illustrate here, the handler for the event would get picked up by the controller. there are other similar patterns where these handlers can be separate command classes. this pattern was demonstrated at the ESRI Dev Summit - and there is a code sample in the Flex Code Gallery. Hope this helps.

    ReplyDelete
  5. Hi Greg,

    congratulations for your blog! I have a beginner question (please be patient). I am using Flex Builder for my application. Do you mean in this post that I should use both Builder or any MVC?

    Regards,
    Manolo

    ReplyDelete
  6. At last! I found a good post like this.. Thanks for this informative post! By the way, can you write a post about plaxo seo factors? Thanks again!

    ReplyDelete