MVC/UMC revisit

I was doing a simple audio clip playlist a couple weeks ago. Such a small thing got to the level at which I almost couldn’t handle it when I started to try to put some buttons to indicate and prompt users to toggle “repeat all” on and off. It works like this:

If no clip is playing and “repeat all” is off, the player displays “toggle off” icon while displaying a “play all clips” button when mouse rolls over it. If a clip is playing and “repeat all” is off, the player instead displays “turn on autoplay” when mouse-over. When “repeat all” is on, the player displays “repeat all on” icon on “mouse-up” state and “turn off autoplay” on “mouse-over” state.

I got into interwinded “if-else” conditions and was almost lost. I spent almost a whole day and still couldn’t get the buttons work together nicely. I think to myself hey if such a small thing takes me so long to figure out, what else could I possibly do? I have been doing ActionScript full-time for about 3 years now; although most of my stuff is not stellar in terms of the coding level, I’ve gained quite a bit of confidence in coding UI and animation. So I decided to give myself a little break and went to the library and Borders. After reading and thinking, I finally think I not only got the stuff done, but also showed a bit of logic in my spaghetti code. At the end I list the books/articles that I have been reading for the past couple of days. Not that I feel I have been elevated to another level, but here are just some thoughts:

Basically Control is like a hub. It knows about both View and Model and connects View and Model. It contains the logic of the UI. The responsibility of Control basically is about coordinating all the events and actions that affect both UI and Model. Many of them (but not all) are about how to react to the requests from UI and updates it; if there is anything it cannot decide by itself, it relays them to the Model. The rule of thumb here is that if an interaction won’t affect other UI components and doesn’t request anything from Model, Control will handle it directly (like most of the roll-overs) without consulting Model.

If the UI is requesting anything from Model (like asking to play another song or movie), Control would not change View directly. Instead it sends the request to Model and Model makes changes accordingly and then signals Control about the updates. Control/View receives the information about the changes and View is then updated (like dehighlighting the currently highlighted button and highlighting the button that is associated to the clip that is requested, assuming the clip starts playing.)

The change of UI doesn’t necessarily initiated by a request from UI. It could be a system event, like a song completes playing, or a change from Model, like a new song has been added to the pool of all the available songs on the server, etc.. Control should have routines to handle all these changes (such as “handleClipComplete()”, etc..)

It’s just a matter of your coding style and about the complexity of the entities you are dealing with when it comes to whether to use classes (each of which present only a segment of MVC), or whether to have one UI component per View, or just to stuff everything in one big chunk of code. It’s the thought behind it that matters.

It helps me a lot since I’ve started to learn to draw diagrams of the states (statechart) and then to figure out all the classes and operations/attributes from it. I am using paper and pall pen instead of any of the UML tools. It helps me to concentrate on the thinking.

Readings:

Advertisements

One Response to “MVC/UMC revisit”

  1. frank Says:

    Thanks for yout thoughts on state charts and mvc. Recently I had to deal with the same problems and funlly found the state pattern to solve this mess. I especially like “I spent almost a whole day and still couldn’t get the buttons work together nicely” 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: