Model-View-Controller: Documentclass

The Documentclass

The Documentclass can be called the initiator of the application. Here all the individual classes are instantiated and listeners for the Model are collected. Actions or element creations, for which we don't want to write a separate class, are here. Below there is the code for the canvas, which is the background for the application. Since this is not changing, we put it here.

*================= Documentclass ===============================================
This we call the 'Documentclass', because it is the central class containing the
definitions for views, the instantiation of all the classes and the eventlisteners,
which are executed in the Model class. The order of all items is important. 
=================================================================================*/

var Documentclass = function ()
{

/*================== Creating canvas as background ============================*/

	var can1 = document.getElementById("paint");
	var ctx = can1.getContext("2d");

// Create gradient

	var grd = ctx.createLinearGradient(0,0,400,400);
	grd.addColorStop(0,"grey");
	grd.addColorStop(1,"black");

// Fill with gradient

	ctx.fillStyle = grd;
	ctx.fillRect(0,0,300,280);
	

Next we create variables for the individual views and place them in an array. Then we make a function, which allows to hide or show a particular view. This function is public and can be accessed over an instance of the Documentclass (see Controller). Depending on the event type the visibility of views is changed.

/*===============================================================================*/
/*==================== Creating vars for the HTML views ==========================
We also create an array to hold the views, because visibility will be changed using
the array as shown in the for loop below. However, we exclude the view1, because that 
will be visible at the beginning.
==================================================================================*/

	var objView1 = document.getElementById("view1");
	var objView2 = document.getElementById("view2");
	var objView3 = document.getElementById("view3");
	var objViews = new Array (objView1, objView2, objView3);
	
/*==========================================
Function regulates the visibility of views. 
*/

	Documentclass.prototype.showView = function (evt)
	{
		var eType = evt;
		for (var i = 0; i < objViews.length; i++)
		{
			objViews[i].style.visibility = "hidden";
		}
		
		switch (eType)
		{
			case "initView":
				objView1.style.visibility = "visible";
			break;
			case "hideView1":
				objView2.style.visibility = "visible";
			break;
			case "hideView2":
				objView1.style.visibility = "visible";
			break;
			case "resultForm":
				objView3.style.visibility = "visible";
			break;
		}
	}
	this.showView ("initView");
	

Then we instantiate the Model, the Controller and the View classes. For the Model and Controller we create interfaces, which are implemented by these classes. Especially the Model class has a set of methods, which can be accessed by the Controller or the views. However, we do not want certain methods to be accessed but only those from the interface.

/*
Instantiation of the Model
We declare interfaces for the Model and Controller classes to include all functions.
*/

	var m = new Model();
	var iModel = new Interface('iModel', ['Mymessage', 'Myevent', 'Myobject', 'fillImg', 
	'selectView2', 'cancelOrder', 'submitOrder', 'afterForm']);
	iModel.ensureImplements(m, iModel);

// Instantiation of the Controller

	var c = new Controller(m);
	var iController = new Interface('iController', []);
	iController.ensureImplements(c, iController);

// Instantiation of the views

	var myView1 = new Myview1 (m, c);

	var myView2 = new Myview2 (m, c);

	var myView3 = new Myview3 (m, c);
	

We also have a collection of the event listeners in the Documentclass, which initiate the update function of views. We have s piece of code following, which is not shown here but in the next section. Then the Documentclass is instantiated.

/*===========================================================================
In this script all listener functions are collected, which update the individual views. 
The events are dispatched from the Model class. Listener is also the Model class.
=============================================================================*/

// This is to get data from the Model class for the images, which come from the XML file.

	EventBus.addEventListener("initView", myView1.update, m);

// all other listeners.
	
	EventBus.addEventListener("filledImg", myView1.update, m);
	EventBus.addEventListener("selView", myView2.update, m);
	EventBus.addEventListener("submitOrder", myView2.update, m);
	EventBus.addEventListener("cancelOrder", myView1.update, m);
	EventBus.addEventListener("resultForm", myView3.update, m);
	

After the listeners we add some code, which is important, when the PHP file was processed. This code will be shown in the next section. Then the Documentclass is instantiated.

}
var doc = new Documentclass ();
	

In the next section I show the code for the PHP file and how it is processed.