The Idea behind MVC is to break apart any program into it's distinct parts the data (M:Model), the algorithms that work on the data (C:Controller) and what you see (V:View). The Concepts are the way that these three ideas are created.
M:Model
The Model holds all the data, but any given program can have many many models. For now, let's keep things simple and look at an example. A button on a page. This button is represented by a Model. The Model would hold a label (ex:label="submit"), and a state (ex:clicked=true/false). To create this Model, the code would look something like this:
var submitButton = new Button();
var submitButtonInitializer = new ButtonInitializer(submitButton);
This Controller will have a method that will allow us to modify the label of it's Model. This method would be defined in the ButtonInitializer class. The definition would look something like this.
//Inside ButtonInitializer
function setLabel(value)
{
this.model.label = value;
}
This might seem like overkill, but it allows for the way the label is set to be handled outside the data, and in a unified, repeatable fashion. For example you could create other Controllers that have different things they do to the label when you call their setLabel methods.
The second Controller is going to show a bit more brains, and Controllers can get very complex. This second Controller is going to be a ButtonClicker. To create this Controller the code would look something like this:
var submitButtonClicker = new ButtonClicker(submitButton);
This Controller again only has one method, but could have many more methods to change other properties that might make sense to change. In this example it will have a method to effect the click state of the Model and would look something like this:
//Inside ButtonClicker
function click()
{
if(!model.click)
{
model.click = true;
}
}
As you can see this method actually does some thinking. In this case the model can't be clicked more than once. Most of the code that will be written will be inside the Controllers.
The View is quite simple like the Model, but performs two functions. The View shows what the state of the Model is, and it receives input from the user. It is for all intents and purposes the Input/Output of your program. For this example we'll have one View, but we could use two Views and separate the code even further by having one View that sends user input to the submitButtonClicker and one that reads the different properties of the submitButton. With only one View it will need to do all three of these things and since it is dealing with both the user input and reading the Model, it will need both the Model and the Controller when it is created. The code to create it would look like this:
var submitVisual = new SubmitVisual(submitButton, submitButtonClicker);
Let's look next at receiving the click. When it receives the click, it needs to pass it along to the brains of the operation -- the Controller.
//Inside SubmitVisual
function handleClick(event)
{
controller.click();
}
Pretty simple. It took the click from the user and sent it right to the Controller to do with as it needs to. This allows the View to just be a nice visual and nothing more. Speaking of visuals, let's look at the last piece. The visuals that this button displays. First it displays the label of the model. It does this by looking at the model's label and updating what it shows to the user, second it gives visual feedback to the user of the button's click state. It does both of these things by looking at the model and showing the user the values. That's it.
You can review any of the related topics here:
Thanks,
GT
You can review any of the related topics here:
Thanks,
GT
No comments:
Post a Comment