Cooking an MVC framework for data visualization: Hello World!

For the last few years MVC frameworks have become a hot topic in the developer community. Many people love them and for a good reason. They make writing code much easier and more fun to do. The programs written in MVC are more scalable and easier to maintain. One of the biggest benefits is that if you learn one, you can probably learn others pretty quickly.

A few words about my background

I am a web developer and designer who specializes in data visualization. I have been using a few MVC frameworks such as Django, ASP.NET MVC and more recently iPhone SDK for my work and I can tell you, they are very similar. Since I am still learning these concepts myself, please let me know if I don’t make sense or I am completely wrong. I promise I won’t feel bad about it :) .

Preparation

In this series of tutorials I will introduce you to the MVC world. You will learn how to make your code cleaner and your applications more modular. Along the way you will learn a few useful design patterns, one of which is MVC, and how to apply them to your work. Although the main focus is on building a data visualization framework, many techniques are applicable to any kind of work.

These tutorials assume that you have general knowledge of object oriented programming and understand AS3 syntax. If you are not familiar with these, please go here and here.

Ingredients

So what is MVC and why is it so useful? MVC stands for Model-View-Controller and it is a design pattern in programming. When you structure an application in MVC, you break it down into small pieces and group them into distinct areas based on their function. In the most basic sense, a model deals with data. You can load, get and store data using the model. A view, on the other hand, is what you see and interact with on a screen. The view doesn’t know about the model, nor the other way around. They talk to each other through a controller. A typical flow of an MVC application goes like this:

  • The user starts the application
  • The application creates and sends a request to the controller.
  • The controller goes to the model, asks for data and sends it to the view.
  • The view renders the data on the screen and waits for user interaction.
  • When the view receives the user interaction, it sends a new request to the controller and the cycle continues.

A good example of an MVC in real life is a newspaper. The reporter is the model, the designer is the view, and the editor is the controller. The editor receives a request for a story and tells the reporter to write it. The reporter then goes out to the world, fetches the information and carefully organizes it into a draft. The editor receives the draft, edits its and sends the final story to the designer. The designer then figures out the layout and adds the story to the page.

Preparing the sauce

I hope I didn’t put you to sleep with the theory. Now we are going to write some code.

mvc project overview

A typical MVC application can have more than one model, one view and one controller. In fact, a large application can have hundreds of them. That is why we need to keep things organized. We will put the source code in the “/src” folder and the project files in the “/deploy” folder. It looks like we will be writing a lot of classes, but don’t be scared, most of the classes are just for initial setup. You can download the project here. You may notice that there is a myApp.tmproj file included. If you don’t have TextMate, just ignore it.

The first thing we write is the Model class. It is the base class for all models in an MVC application. It provides common functionality shared across all models. Every model we write from now on will inherit from this one.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// Model.as
//-----------------------------------------------------------------
package models {
  import flash.display.*;
  import flash.events.*;
  import flash.text.*;

  public class Model extends Object {
//-----------------------------------------------------------------
// CONSTRUCTOR
//-----------------------------------------------------------------
    public function Model() {
    }
//-----------------------------------------------------------------
// API
//-----------------------------------------------------------------
    public function getData():Object {
      return null;
    }
//-----------------------------------------------------------------
  }
}

As you can see, the Model class has public method getData(). Right now it doesn’t do much, it just returns null. We will provide actual implementation for this method in a subclass.

Similar to the Model class, the View class encapsulates common functionality across all views. Every view we write from now on will inherit from this one.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// View.as
//-----------------------------------------------------------------
package views {
  import flash.display.*;
  import flash.events.*;
  import flash.text.*;

  public class View extends Sprite {
//-----------------------------------------------------------------
// INSTANCE VARIABLES
//-----------------------------------------------------------------
    protected var content:Object;
//-----------------------------------------------------------------
// CONSTRUCTOR
//-----------------------------------------------------------------
    public function View() {
    }
//-----------------------------------------------------------------
// API
//-----------------------------------------------------------------
    // Render the view
    public function render(content:Object):void {
      this.content = content;
    }
//-----------------------------------------------------------------
  }
}

The View base class has an instance variable content that we will use to store the content of a view. The render() method stores the content that you pass to it. We will override it to provide specific rendering routines.

We are done with the setup. You may notice that we don’t have a Controller base class. For the purpose of this tutorial, we won’t need one.

Putting it all together

Now that we have the foundation in place, we can go ahead and write our first MVC application. Yay!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// TextModel.as
//-----------------------------------------------------------------
package models {
  import flash.display.*;
  import flash.events.*;
  import flash.text.*;
  import models.Model;
 
  public class TextModel extends Model {
//-----------------------------------------------------------------
// CONSTRUCTOR
//-----------------------------------------------------------------
    public function TextModel() {
      super();
    }
//-----------------------------------------------------------------
// API
//-----------------------------------------------------------------
    public override function getData():Object {
      return "Hello world!!!";
    }
//-----------------------------------------------------------------
  }
}

The TextModel class extends the Model class. It overrides the getData() method from the parent class to provide a specific implementation. In this care, the method creates a string and returns it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// TextView.as
//-----------------------------------------------------------------
package views {
  import flash.display.*;
  import flash.events.*;
  import flash.text.*;

  public class TextView extends View {
//-----------------------------------------------------------------
// INSTANCE VARIABLES
//-----------------------------------------------------------------
    private var textField:TextField;   
//-----------------------------------------------------------------
// CONSTRUCTOR
//-----------------------------------------------------------------
    public function TextView() {
      textField = new TextField();
      textField.x = 180;
      textField.y = 40;    
      addChild(textField);           
    }
//-----------------------------------------------------------------
// API
//-----------------------------------------------------------------
    // Render the TextView
    public override function render(content:Object):void {
      super.render(content);     
      textField.text = content as String;    
    }
//-----------------------------------------------------------------
  }
}

The TextView class extends the View class and overrides the render() method. It creates a text field and centers it on the stage. The render() method uses the text field to display whatever string you give it. Note that it also takes advantage of the functionality provided in the parent class by calling the super.render() method to store the string in the content variable .

The last class we will write is the Main class. It acts as the glue that connects the TextModel and the TextView together. Sounds familiar? It is actually the main controller of your application. When your application starts, the Main class takes over and is responsible for creating the initial view.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// Main.as
//-----------------------------------------------------------------
package {
  import flash.display.*;
  import flash.events.*;
  import flash.text.*;
  import models.*;
  import views.*;

  /**
  * @langversion : ActionScript 3.0, Flash Player 10.0
  *
  * @author      : Vu Nguyen
  * @description : Intro to Model-View-Controller system
  */
 
  public class Main extends MovieClip {
//-----------------------------------------------------------------
//  CONSTRUCTOR
//-----------------------------------------------------------------
    public function Main() {
      // Create a model
      var myModel:Model = new TextModel();
      // Create a view
      var myView:View = new TextView();
      // Render the view
      myView.render( myModel.getData() );
      // Add to stage
      addChild(myView);
    }
//-----------------------------------------------------------------
  }
}

In our case, the Main class doesn’t do much. It creates an instance of the TextModel class. The controller then creates an instance of the TextView class, calls its render() method, and passes it the data from the model by calling the model’s getData() method.

The result

If you publish the application now, you should see something like this:

Yes, I know it is disappointing. “We wrote all this code just to print ‘Hello World!!!’ on the screen?”, you may ask. What we did here was to build the foundation of a truly scalable framework. The power of the MVC pattern is that different models can work with different views. A lot of the code you write will be reusable. In the next few tutorials, we will build real visualization views such as charts and maps. We will also build models that can load data from an external source such as XML, JSON or CSV files.

Follow any comments here with the RSS feed for this post. Both comments and trackbacks are currently closed.

One Trackback

  1. [...] This post was mentioned on Twitter by koci, Tyra Banks. Tyra Banks said: BiofusionDesign | Cooking an MVC framework for data visualization …: Model; public class TextModel extends Model… http://bit.ly/amEpEM [...]