Model-View-Controller: Abstractclass and Views

Abstractclass

In this section I show the views and the Abstractclass for the views. One part of the view we have seen already, since the HTML5 body part itself belongs to the views. Before we create the javascripted views, we create an Abstract- or Superclass for these views. This class has two parameters for the Model and the Controller, which have to be not null in the views. Further, this class defines a function, the update function, which is used in every view.

/*================ Creating Abstractclass =======================================
This class is a superclass for all views. It has one function, which is used by 
the views. Lacking this function in one of the classes will throw an error.
=================================================================================*/

var Abstractclass = function (aModel, aController)
{
	var model = aModel;
	var controller = aController;
	
	function IllegalOpError (message)
	{
		alert(message);
	}

	this.update = function (event)
	{
		throw new IllegalOpError ("This operation is not allowed.");
	}
}
	

The update function throws an error, when it is not overridden by a function with the same name. Overriding is done by adding the function and by making this function public meaning it can be accessed from outside over an instance of the views. If it were a private function available only within the views, an error would be thrown. The Abstractclass is a pure superclass and is not instantiated.

The initial view: View 1

One of the differences to Flash is, that we actually do not need to create functions to dispatch certain events like mouseclicks, since buttons for example when clicked automatically dispatch a "click" event. However, we don't use this effect, since event dispatching and listening comes from the document root. We, therefore, make use of a custom class, which I took from Krasimir (https://github.com/krasimir/EventBus). In the HTML page we have the individual views within div tags. By this way we can make each view hiding or visible as a whole, and we can manipulate the view by a javascript class file. We keep all files separated, which makes error hunting much easier. We also write a number of the properties of the elements of the views in the Javascript file instead of the HTML page. By this way we have more control and can easily manipulate the properties. The script for first part of view 1 is shown below. All other views are structured in the same way.

var Myview1 = function(aModel, aController)
{

// inheritance from the Abstractclass

	this.inheritFrom = Abstractclass;
  	this.inheritFrom(aModel, aController);
  	
  	var md = aModel;
  	var cd = aController;
	

The view functions have two parameters for the Model and the Controller instance. Then we add lines to inherit properties from the Abstractclass, which is the update function, which has bee explained above and to which we will come back. Next we create variables for all elements in view 1 and add properties like disabling buttons. We create an array for buttons with the same function like those getting images.

// Buttons to select different ad images

  	var imgBut1 = document.getElementById("iMG1");
  	var imgBut2 = document.getElementById("iMG2");
  	var imgBut3 = document.getElementById("iMG3");
  	
  	var imgButArray = new Array (imgBut1, imgBut2, imgBut3);
  	for (var j = 0; j < imgButArray.length; j++)
  	{
  		imgButArray[j].onclick = function (event)
  		{
  			EventBus.dispatch (event.type, cd, event);
  		}
  	}
  	
/* 
Button to go to the order form. The button is disabled as
long as no coffee kind was selected.
*/

  	var imgSel = document.getElementById("imgSelect");
  	imgSel.disabled = true;
  	imgSel.onclick = function (event)
  	{
  		EventBus.dispatch (event.type, cd, event);
  	}
  	
// Textfield for the coffee kind to be selected

  	var imgText = document.getElementById("imgSelectText");
  	imgText.disabled = true;
  	
// img holder for the ad images

  	var imgHolder = document.getElementById("selectIMG");
	

We also add eventhandler functions like onclick. But all we do here is dispatching an event originating from the Controller object, cd. All changes provoked by clicking buttons for example are handled by the Controller and Model class. The last part of the views is the update function, which has the event as a parameter. Data can be transfered by getters from the Model class. Then the views can be updated.

// update function overrides the function from the Abstractclass

	this.update = function (event)
	{
		evType = event.type;
		
// Here the view is initially updated to fill the images with data.

		if(evType == "initView")
		{
			for (var c = 0; c < md.mmes.getMes().length; c++)
			{
				imgButArray[c].innerHTML = md.mmes.getMes()[c];
				imgButArray[c].value = md.mobj.getObject()[c];
			}
		}
		
		if(evType == "filledImg")
		{
		
// When kind was selected, order button is enabled.

			if(imgSel.disabled)
			{
				imgSel.disabled = false;
				imgText.disabled = false;
			}
			
/* 
Depending on the button pressed, images are shown and text
is shown in the textfield.
*/

			for (var d = 0; d < imgButArray.length; d++)
			{
				if(md.mobj.getObject() == imgButArray[d].name)
				{
					imgSel.value = md.mmes.getMes()[d];
					imgText.value = md.mmes.getMes()[d];
					imgHolder.src = "assets/"+md.mmes.getMes()[d]+".png";
				}
			}
		}
		
// In case the order was canceled, a different event is triggered.

		if(evType == "cancelOrder")
		{
  			imgSel.disabled = true;
  			imgText.value = "";
  			imgText.disabled = true;
  			imgHolder.src = "";
		}
	}
}
	

The update function has one parameter, the event. Depending on the event type changes in the view occur. For example the "initView" event triggers adding values and text originating from the XML file to the image buttons.

View 2

View 2 is shown here. It is basically a form and once the submit button is pressed, a php form is triggered. The button events are dispatched and listened by the Controller. Again there is an update function, which gets its data from the Model.

View 3

View 3 is shown here. This form shows an image, a message and has a button to go back to view 1. Again the scheme is similar to the other views. I will show more details, when the Controller and Model classes are shown. In the next section the Controller class will be introduced.