Question

I’m a new developer creating a simple “dictionary” app for personal use and my question is about how to properly implement the Model-View-Controller design in my particular situation. Please bear with me for the necessary background:

I want to be able to hit a button and have a label display a word on one side of the screen, and to have another label display a list of associated words on the other side.

For instance: when I hit the button I want the main label to display “cats” and for the list to display “tiger”, “snow leopard”, “lion”, etc. The output would be random: the label displayed would be random and the list would be scrambled.

I’ve achieved this output in the Xcode 4.3 console through storing each list in an NSMutableArray, and using an NSDictionary to hold all of the NSArrays. Here is the code:

//creates lists
NSArray *catList = [NSArray arrayWithObjects:@"Lion", @"Snow Leopard", @"Cheetah", nil];
NSArray *dogList = [NSArray arrayWithObjects:@"Dachshund", @"Pitt Bull", @"Pug", nil]; 
...
//creates dictionary and stores lists values with dictionary keys
NSMutableDictionary *wordDictionary = [[NSMutableDictionary alloc] init];
[wordDictionary setObject: catList forKey:@"Cats"];
[wordDictionary setObject: dogList forKey:@"Dogs"]; 
...
//randomizes selection of dictionary key
NSInteger keyCount = [[wordDictionary allKeys] count];
NSInteger randomKeyIndex = arc4random() % keyCount;
//displays selected key, which is the main word
NSLog(@"%@", randomKey);
//selects array list corresponding to key
NSMutableArray *randomlySelectedArray = [wordDictionary objectForKey:randomKey];
//shuffles the output of the selected word list array
 for( int index = 0; index < keyCount; index++ )
            {
                int randomIndex = arc4random() % keyCount;
                [randomlySelectedArray exchangeObjectAtIndex:index withObjectAtIndex:randomIndex];
            }
//prints word list and removes displayed dictionary selection
 NSLog(@"%@", randomlySelectedArray);
[wordDictionary removeObjectForKey:randomKey];

(I need to add code that does displays a main word and list one at a time, maybe using NSTimer, but this is what I’ve got so far.)

Using a single-view template in Xcode, I’ve been able to get the simulator to show a main word and a corresponding list by adding some of this code to the IBAction method of the button in my view controller implementation file. (Of course I changed NSLog to initWithFormat.) However, none of my randomization code works.

My question, finally, is how do I separate things so that they conform best to the MVC design? I’m thinking that: My button and my two labels constitute the view. My view controller is the controller, and my NSArrays and NSDictionary data are the Model.

However, I’ve been keeping all of my model data inside the view controller, which I’m pretty sure is wrong. I think that I need to figure out how to create a class for my NSArrays and NSDictionary to store my model data. Then I must manage to get my button & labels to display the desired text of my model data via my view controller. At least I think that’s how MVC works.

I’m wondering if that understanding is correct and if anyone has any pointers on how to organize my model data most effectively to get my desired output.

Thanks very much for any help! I’m stuck!

Answer 1

Before starting to design an application based on MVC. We first need to know what these different components are and what MVC help us to achieve?

Why we use MVC?(Model-View-Controller)
Because it helps us in:

Separating responsibilites also leads to reusability

By minimizing dependencies, you can take a model or view class you’ve already written and use it elsewhere

Think of ways to write less code

While designing an application based on MVC, we should focus on above points.
Lets relate this ‘Dictionary’ application with real world dictionary.

A dictionary is composed of words, their meaning, pronunciation, examples, usage, antonyms, synonyms, indexes and other similar information.
When a user wants to look for a particular word he will use top-margin word for fast look-up. Once he found the right page he will go to that word and see its meaning, usage or other needed information.

Model Part:

Lets draw analogy between your application and what I described above.

In your application you will be having a class : ‘Dictionary’ which
will represent the real world dictionary. This dictionary is composed
of words, their meaning, pronunciation, usage and other information.
So we will need an array of words which will contain ‘Word’ object.
The ‘Word’ class will have all the information that we wish to provide
for particular word. You can also provide other attributes that you
can think of that belongs to Dictionary and add them to it.(Here we are talking about content only)

Now we need to think of different operations to be performed on this dictionary. The most basic operation are creating a dictionary and accessing it.

1. We will have a DictionaryCreator class which will add all the words that our dictionary will have. So this is another class
   ‘DictionaryCreator’. Or we can put this creating logic in ‘Dictionary’
   init methods. But it will be helpful to have this class this will
   enable the dictionary add-word features.

2. Once DictionaryCreator creates a dictionary, User will be ready to use it. So we will need to provide different operations that a user
   can perform on ‘Dictionary’ as its methods. In our case we can
   consider user is over controller, which in fact is controlled by real
   user.

The above techique will help you to create a component that performs only its responsiblity and can be reused in other application or extended for future use.
*Always remember Model is the most reusable component of MVC design. So whenever you are in doubt about Model just go remind the words ‘Model must be reusable’.
(Not aware of views or controllers)

So we have just finished Model part of the application.

View Part:

This depends on you, what interface you wish to provide to user. But lets again consider the real world Dictionary. A real world dictionary’s content(information) is spread across several pages. This view helps us to view/access/mark/bookmark in dictionary.(Remember that here user performs all the operation and not the pages neither the dictionary). The pages have easy look-up word on top or bottom and some pronunciation guidance at bottom.

In your application you said “I want to be able to hit a button and have a label display a word on one side of the screen, and to have another label display a list of associated words on the other side.”

Here we have again have multiple options to implement this, you can create view using Interface Builder and connection them with your controller. But then again this controller and View will be tightly coupled and when we wish to use similar interface somewhere else we will be unable to do so. So for reusability we will create another UIView class and create it with a new View XIB and load this nib. So in future if you need similar kind of view you can easily reuse(like cocoa-touch provides us UIView, UIButton etc.).

*View also tends to be a reusable component in MVC.
(Not aware of controllers, may be aware of relevant model objects)

Controller Part:

Now we have created view and model but how will they communicate? Controller will help them in this. A controller :

Knows about model and view objects
The brains of the operation 
Manages relationships and data flow 
Typically app-specific, so rarely reusable

*The points and definition I have taken from Stanford University Lectures[CS193P – Lecture 6
iPhone Application Development
Designing iPhone Applications Model-View-Controller (Why and How?) View Controllers]

Update:

Recently, I have come across another good lecture on MVC. It explains this design concept in much better way with very nice examples. It is available at iTunes U or you can directly go to first lecture by iPad and iPhone Application Development (SD) by Paul Hegarty.