BiofusionDesign » Programming

Visualization of our solar system in CSS3

Vu Nguyen — Mon, 31 May 2010 15:30:30 +0000

Click on image to view the page. You may need a more up-to-date browser to view this.

Alex Girón of nclud created this visualization of our solar system by using only HTML and CSS3. In his words:

These past few months I’ve been exploring CSS3, trying to learn some of it’s new features and getting a feel for which browsers support it. A few weeks back I put out my first experiment exploring @font-face and transforms. This time, I set out to experiment with border-radius, and what I thought was going to be a boring little project turned out to be quite interesting.

via Veerle Pieters

Google celebrates Pacman’s 30th birthday with playable logo

Vu Nguyen — Fri, 21 May 2010 17:37:32 +0000

Click image to play the game

Adobe Flash to eliminate bandwidth costs with P2P

Vu Nguyen — Wed, 19 May 2010 18:21:32 +0000

From TorrentFreak:

Adobe is getting serious about their implementation of peer-to-peer technology to assist Flash-based video streaming and applications. The upcoming release of Adobe’s Flash Player 10.1 will enable publishers to dramatically reduce bandwidth costs by outsourcing media distribution to users.

The system Adobe is offering to support P2P Flash is called Stratus. It is offered to developers free of charge and can support both live and on-demand video streaming. Besides video, Stratus can also be used for Flash based multi-player games and other forms of real time communication.

For broadcasters and video services, Stratus has the capacity to eliminate a significant amount of bandwidth costs. Instead of serving the media from a central server, users will provide the necessary bandwidth. Adobe’s Stratus system serves as an intermediary in this process, managing the communications between Flash players much like a BitTorrent tracker does for BitTorrent transfers.

Via Jim Ray

Cooking an MVC framework for data visualization: Models

Vu Nguyen — Wed, 19 May 2010 14:30:37 +0000

Last time we learned how to create a dynamic bar chart with data that we had to type in manually. That data entry part was tedious and unnecessary. Today we will solve that problem by creating a model that can load and parse data from an external file. Although in this example we only use the model to parse comma delimited file (CSV), we will build it in a way that allow us to parse tab delimited file as well. CSV is a very popular and compact format for storing data. It is also very easy to parse.

If you didn’t follow the previous tutorial, you can download the project from here.

Before we create our CSV model, we need to modify the base Model class slightly to make it ready for external data.

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

// Model.as
//-----------------------------------------------------------------
package models {
import flash.events.EventDispatcher;
public class Model extends EventDispatcher {
//-----------------------------------------------------------------
// EVENT CONSTANTS
//-----------------------------------------------------------------
public static const LOADING:String = "loading";
public static const LOADED:String = "loaded";
public static const LOAD_ERROR:String = "loadError";
//-----------------------------------------------------------------
// CONSTRUCTOR
//-----------------------------------------------------------------
public function Model() {
}
//-----------------------------------------------------------------
// API
//-----------------------------------------------------------------
public function loadData(url:String):void {

}
public function getData():Object {
return null;
}
//-----------------------------------------------------------------
}
}

The Model class now inherits from EventDispatcher allowing all of its subclasses to dispatch events. We will use this capability to notify the rest of the application when the file is loaded. We also added three event strings (line 9, 10, 11) that our parser will dispatch at different stages of loading data. The last thing we added to the Model class is the loadData() method.

Now we are ready for the DelimitedTextParser class. It is relatively long, but most of the code has to do with setting up the events.

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

// DelimitedTextParser.as
//-----------------------------------------------------------------
package models {
import flash.events.*;
import flash.net.*;
import flash.errors.*;
import models.Model;

public class DelimitedTextParser extends Model {
//-----------------------------------------------------------------
// CONSTANTS
//-----------------------------------------------------------------
public static const TAB:String = "\t";
public static const COMMA:String = ",";
//-----------------------------------------------------------------
// PROPERTIES
//-----------------------------------------------------------------
public var delimiter:String;
public var data:Array;
private var loader:URLLoader = new URLLoader();
//-----------------------------------------------------------------
// CONSTRUCTOR
//-----------------------------------------------------------------
public function DelimitedTextParser(delimiter:String = COMMA) {
this.delimiter = delimiter;
setEventListeners();
}
//-----------------------------------------------------------------
// API
//-----------------------------------------------------------------
public override function loadData(url:String):void {
if(!url) {
throw new Error( "Error:DelimitedTextParser invalid url." );
}
loader.load(new URLRequest(url));
}
public override function getData():Object {
return data;
}
//-----------------------------------------------------------------
// EVENT HANDLERS
//-----------------------------------------------------------------
private function onLoading(e:Event):void {
dispatchEvent(new Event(Model.LOADING));
}
private function onLoaded(e:Event):void {
parseData(String(loader.data));
dispatchEvent(new Event(Model.LOADED));
}
private function onLoadError(e:Event):void {
dispatchEvent(new Event(Model.LOAD_ERROR));
}
//-----------------------------------------------------------------
// PRIVATE METHODS
//-----------------------------------------------------------------
private function parseData(rawData:String):void {
data = new Array();
// split data into rows using \n or \r character
var rows:Array = rawData.split( "\n" );
if(rows.length == 1) {
rows = rawData.split( "\r" );
}
// get column names
var columnsName:Array = rows[0].split( delimiter );

// Loop that create an array of data objects
for ( var i:Number = 1 ; i < rows.length; i++ ) {
var RecordArray:Array = new Array();
RecordArray = rows[i].split( delimiter );
var record:Object = new Object();
for (var j:Number = 0; j<columnsName.length;j++) {
record[columnsName[j]] = RecordArray[j];
}
data.push(record);
}
}
private function setEventListeners():void {
loader.addEventListener(ProgressEvent.PROGRESS, onLoading);
loader.addEventListener(Event.COMPLETE, onLoaded);
loader.addEventListener(IOErrorEvent.IO_ERROR, onLoadError);
}
//-----------------------------------------------------------------
}
}

You may notice that the constructor takes a parameter delimiter that has a default value of COMMA. We will use this delimiter string to parse the text we load from the external file. The constructor also sets up all the event handlers related to loading files from an url. We are using the URLLoader class (line 20) from Flash to load files from an external location, so the events we are handling are the events dispatched by that class.

Once the file is loaded, the onLoaded() (line 46) method is called. The model then parses the data and dispatches a Model.LOADED event. The parseData() (line 56) method is what does the actual job. It splits the text by lines and then by columns (line 64) based on the delimiter. It then creates an array of objects with each object representing the data on each line. It will convert raw text that looks like this:

1
2
3
4
5

// data.csv
//-----------------------------------------------------------------
year,period,value
2000,M01,4.0
2000,M02,4.1

To an array of objects that looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// Array of objects
//-----------------------------------------------------------------
[
{
"year":2000,
"period":M01,
"value":4.0
},
{
"year":2000,
"period":M02,
"value":4.1
}
]

Now let’s put all the pieces together.

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
33
34
35
36
37
38
39

// Main.as
//-----------------------------------------------------------------
package {
import flash.display.*;
import flash.events.*;
import flash.text.*;
import models.*;
import views.*;
import views.barchart.*;

public class Main extends MovieClip {
//-----------------------------------------------------------------
// CONSTRUCTOR
//-----------------------------------------------------------------
public function Main() {
createSimpleBarChart();
}
//-----------------------------------------------------------------
// PRIVATE METHODS
//-----------------------------------------------------------------
private function createSimpleBarChart():void {
// Create a parser model
var myModel:Model = new DelimitedTextParser();
// Create a chart view
var myChart:SimpleBarChart = new SimpleBarChart();
// Add to stage
addChild(myChart);
// Send data to the chart once it is loaded
myModel.addEventListener(Model.LOADED, function(e:Event) {
// Send data to chart
myChart.render( myModel.getData() );
});
// Load the data from a csv file
myModel.loadData("unemployment.csv");

}
//-----------------------------------------------------------------
}
}

The Main class looks almost the same. We now wait for the data to be loaded and parsed (line 29) before sending it to the view (line 31). We will also need to make a small change to the SimpleBarChart view. It used to take an array of numbers to draw the bars, now it will take an array of objects (line 43 below). Pay attention to this part content[i][“value”]. The chart view looks for the “value” property in the data object, so we need to have a column called “value” in the original csv file.

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

// SimpleBarChart.as
//----------------------------------------------------------------
package views.barchart {
import flash.display.*;
import flash.events.*;
import flash.text.*;
import views.View;
import views.barchart.*;

public class SimpleBarChart extends View {
//-----------------------------------------------------------------
// CONSTANTS
//-----------------------------------------------------------------
// Padding between bars
private static const PADDING:int = 1;
// Default sizes for the chart
private static const DEFAULT_WIDTH:int = 430;
private static const DEFAULT_HEIGHT:int = 200;
//-----------------------------------------------------------------
// GLOBAL VARIABLES
//-----------------------------------------------------------------
// store references to all bars on stage
private var bars:Array = [];
//-----------------------------------------------------------------
// CONSTRUCTOR
//-----------------------------------------------------------------
public function SimpleBarChart() {
}
//-----------------------------------------------------------------
// API
//-----------------------------------------------------------------
// Render the view
public override function render(content:Object):void {

super.render(content);
// create the bars and add them to the stage
var maxValue = getMaxValue();

var maxBarWidth:Number = DEFAULT_WIDTH/content.length - PADDING;
for (var i:int = 0; i < content.length; i++) {
var data:Object = new Object();
// data that each bar will need to render itself
data.height = content[i]["value"]/maxValue*DEFAULT_HEIGHT;
data.width = maxBarWidth;
// create and render a bar
bars[i] = new Bar();
bars[i].render(data);
// position the bar
bars[i].x = (maxBarWidth + PADDING)*i;
bars[i].y = DEFAULT_HEIGHT - bars[i].height;
addChild(bars[i]);
}
}
//-----------------------------------------------------------------
// PRIVATE METHODS
//-----------------------------------------------------------------
private function getMaxValue():Number {
var maxValue:Number = 0;
for (var i:int = 0; i < content.length; i++) {
if(maxValue < content[i]["value"]) maxValue = content[i]["value"];
}
return maxValue;
}
//-----------------------------------------------------------------
}
}

That’s it, we are done. If you publish your application now, you should see something like this:

The chart shows monthly unemployment rate since 2000 from the U.S. Bureau of Labor Statistics.

We covered a very important concept in this tutorial. Following this pattern you should be able to build models that load data from a server and use the data to power your views. Next time we will go over how to add interactions to your view. We will also cover a very important design pattern called Singleton.

Eddy is the new Twitter aggregation platform from Stamen

Vu Nguyen — Fri, 14 May 2010 17:30:01 +0000

From the product page:

Eddy is a media aggregation platform built for the public display of up-to-the-minute activity on realtime services like Twitter. It offers three primary features: rapid collection and curation of what people are saying about an event, moderation of acceptable material, and speedy, reliable republishing of these conversational streams. Setup of the application is fast and easy, and made specifically for use by interactive media designers. Eddy makes data available in formats specifically designed for publishing on the web, allowing developers to quickly iterate design concepts with real world data and to launch without fuss.

World Cup twitter visualization from the Guardian

Visualization of HTML5 & CSS3 readiness on different browsers

Vu Nguyen — Fri, 14 May 2010 16:30:35 +0000

Click on image to view the site

This visualization is compact and pretty. I like the idea behind it, but it is not necessarily the best way to present this kind of information. You can’t quickly scan the information since you have to mouse over each bar to see what feature it represents. The color coded bars are stacking toward the center instead of remaining in their own circle, which makes it harder to follow. I think a regular matrix table would be nicer.

via infosthetics

Why Flash is still relevant in the HTML5 world

Vu Nguyen — Mon, 10 May 2010 17:00:01 +0000

Gonzalo Rubio gives a few very good reasons about why we shouldn’t ditch Flash quite yet. Being a Flash developer, I admit to having my own biases, but I am also impressed by what HTML5 can do. I have been digging around the web for the last few days trying to figure out if at its current stage, HTML5 is capable enough to do heavy interactive data visualization work. The short answer is no. There are, of course, a lot of Javascript charting engines out there, but for performance-heavy things like maps, Flash is still better. As to the Flash vs HTML5 argument, I think a few of us only see black and white. Gonzalo seems to think that each tool has its own place in the future of web development. I agree. Below is the summary of the points he talks about in his article. Head over to his blog to read the complete post.

The HTML5 spec won’t be ready for consumption for at least another 2 years.
Flash is a mature platform, HTML5 is just in its initial implementation phase.
Flash is made by a single vendor, HTML5 sees duplicate efforts by at least 5 different companies on at least 4 different platforms.
Flash is built as a multimedia and animation platform, HTML5 is a progressive enhancement over a content centric and descriptive language
Flash is good at what Flash does, HTML5 is good at what HTML does
The Flash vs. HTML5 argument will implode after every Flash feature is ported into an HTML5/Canvas equivalent

When can I use HTML5?

Vu Nguyen — Wed, 05 May 2010 21:36:37 +0000

Click on image to go to the guide

Ready to move your site to HTML5? Better check this browsers compatibility guide out before you call the shot.

Cooking an MVC framework for data visualization: Views part 1

Vu Nguyen — Tue, 04 May 2010 15:00:53 +0000

In this second tutorial on MVC we will learn how to create a simple bar chart view. We will also cover a new concept called composite view. It is an important concept in the MVC world that allows a view to contain other views. It will let you build complex views out of small interchangeable pieces. When your application grows, it is crucial to write code that is reusable, so your application remains maintainable. Breaking views into small reusable chunks of code is one way to do that. Below is the result of what we are going to build in this tutorial.

The chart shows monthly unemployment rate since 2005 from the U.S. Bureau of Labor Statistics.

Preparation

Here is an overview of what we are going to build in this tutorial. If you followed the last tutorial, you should have the Model and the View class ready. If not, you can download the whole project from here. We will write the SimpleModel class that is used to feed data to the chart. The SimpleBarChart class and the Bar class are parts of the bar chart view. We will talk about the relationship between them in the next section.

Building a composite view

To make the composite view work, we have to make sure that all of its pieces work together. That means they have to speak a common language. We have been doing that all along with our base View class. Essentially every view that inherits from the View class will have a render(content:Object) method. We don’t care about the specific implementation of that method, all we care about is that we can call it. Below is a diagram that explains this concept.

The application contains myView, an instance of the ParentView class, and communicates with it through the render() method. The parent view then calls render() on its child view. The application doesn’t know or care about the child view nor the other way around. This makes it easy to swap the child view when needed. Note that in this system, the parent view also doesn’t know how the child view operates, it only knows that the child view expects a data object. Below is the code that will put this concept to practice.

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
33
34
35
36
37
38
39

// Bar.as
//-----------------------------------------------------------------
package views.barchart {
import flash.display.*;
import flash.events.*;
import flash.text.*;
import views.View;

public class Bar extends View {
//-----------------------------------------------------------------
// CONSTANTS
//-----------------------------------------------------------------
private static const DEFAULT_COLOR:int = 0x000000;
private static const DEFAULT_ALPHA:Number = 0.2;
//-----------------------------------------------------------------
// CONSTRUCTOR
//-----------------------------------------------------------------
public function Bar() {
}
//-----------------------------------------------------------------
// API
//-----------------------------------------------------------------
// Render the view
public override function render(content:Object):void {
// A call to the base View's render() method
// to store the content
super.render(content);
// draw the bar
this.graphics.beginFill(DEFAULT_COLOR,DEFAULT_ALPHA);
this.graphics.drawRect(
0,
0,
this.content.width,
this.content.height
);
}
//-----------------------------------------------------------------
}
}

The render() method of the Bar class doesn’t do anything complex. It takes an object that has width and height properties and draws itself on the stage.

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

// SimpleBarChart.as
//-----------------------------------------------------------------
package views.barchart {
import flash.display.*;
import flash.events.*;
import flash.text.*;
import views.View;
import views.barchart.*;

public class SimpleBarChart extends View {
//-----------------------------------------------------------------
// CONSTANTS
//-----------------------------------------------------------------
// Padding between bars
private static const PADDING:int = 10;
// Default sizes for the chart
private static const DEFAULT_WIDTH:int = 430;
private static const DEFAULT_HEIGHT:int = 200;
//-----------------------------------------------------------------
// GLOBAL VARIABLES
//-----------------------------------------------------------------
// store references to all bars on stage
private var bars:Array = [];
//-----------------------------------------------------------------
// CONSTRUCTOR
//-----------------------------------------------------------------
public function SimpleBarChart() {
}
//-----------------------------------------------------------------
// API
//-----------------------------------------------------------------
// Render the view
public override function render(content:Object):void {
super.render(content);
// create the bars and add them to the stage
var maxValue = getMaxValue();
var maxBarWidth:Number = DEFAULT_WIDTH/content.length - PADDING;
for (var i:int = 0; i < content.length; i++) {
var data:Object = new Object();
// data that each bar will need to render itself
data.height = content[i]/maxValue*DEFAULT_HEIGHT;
data.width = maxBarWidth;
// Create and render a bar
bars[i] = new Bar();
bars[i].render(data);
// position the bar
bars[i].x = (maxBarWidth + PADDING)*i;
bars[i].y = DEFAULT_HEIGHT - bars[i].height;
addChild(bars[i]);
}
}
//-----------------------------------------------------------------
// PRIVATE METHODS
//-----------------------------------------------------------------
private function getMaxValue():Number {
var maxValue:Number = 0;
for (var i:int = 0; i < content.length; i++) {
if(maxValue < content[i]) maxValue = content[i];
}
return maxValue;
}
//-----------------------------------------------------------------
}
}

The SimpleBarChart class contains the most code we have written so far, but most of it is pretty straight forward. The render() method takes an array of numbers, loops through it to find the max value, calculates the bar width and creates instances of the Bar class. Line 37 to 40 is where the magic happens. We create the content object for the Bar class there.

Now that we have the bar chart view ready, let’s feed it data to see how it works.

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

// SimpleModel.as
//-----------------------------------------------------------------
package models {
import flash.display.*;
import flash.events.*;
import flash.text.*;
import models.Model;

public class SimpleModel extends Model {
//-----------------------------------------------------------------
// CONSTRUCTOR
//-----------------------------------------------------------------
public function SimpleModel() {
}
//-----------------------------------------------------------------
// API
//-----------------------------------------------------------------
public override function getData():Object {
return [
5.3, 5.4, 5.2, 5.2, 5.1, 5.0, 5.0, 4.9, 5.0, 5.0,
5.0, 4.9, 4.7, 4.8, 4.7, 4.7, 4.6, 4.6, 4.7, 4.7,
4.5, 4.4, 4.5, 4.4, 4.6, 4.5, 4.4, 4.5, 4.4, 4.6,
4.6, 4.6, 4.7, 4.7, 4.7, 5.0, 5.0, 4.8, 5.1, 5.0,
5.4, 5.5, 5.8, 6.1, 6.2, 6.6, 6.9, 7.4, 7.7, 8.2,
8.6, 8.9, 9.4, 9.5, 9.4, 9.7, 9.8, 10.1, 10.0,
10.0, 9.7, 9.7, 9.7
];
}
//-----------------------------------------------------------------
}
}

The SimpleModel class just returns an array of numbers. All we have left is the Main class that puts everything together.

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
33

// Main.as
//-----------------------------------------------------------------
package {
import flash.display.*;
import flash.events.*;
import flash.text.*;
import models.*;
import views.*;
import views.barchart.*;

public class Main extends MovieClip {
//-----------------------------------------------------------------
// CONSTRUCTOR
//-----------------------------------------------------------------
public function Main() {
createSimpleBarChart();
}
//-----------------------------------------------------------------
// PRIVATE METHODS
//-----------------------------------------------------------------
private function createSimpleBarChart():void {
// Get data from simple model
var myModel:Model = new SimpleModel();
// Create a chart view
var myChart:SimpleBarChart = new SimpleBarChart();
// Send data to chart
myChart.render( myModel.getData() );
// Add to stage
addChild(myChart);
}
//-----------------------------------------------------------------
}
}

Voilà! If you have typed everything correctly, you should see something like this.

We have gone over a very important concept today. Please spend some time playing around with this and let me know if you have any questions. Next time we will learn how to create a model class that can parse data from a CSV file, so we don’t have to type all the data manually.

Cooking an MVC framework for data visualization: Hello World!

Vu Nguyen — Tue, 27 Apr 2010 15:00:59 +0000

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.

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.