Demonstration of a simple set of Controllers
(using multiple-inheritance version of micro MVC)

Using grvMicroMVCm.js and grvMicroMVCx1.js and grvObjects.js

Area inside <span id="clrBtn"></span> put clear button here	Area inside <span id="imgBtn"></span> put other button here
Area inside <span id="txtBtn"></span> put clear button here	Area inside <span id="edtFld"></span> put edit field here

The source code...

// MODEL: simple scalar model
var gXYZ = new ScalarModel();

// VIEW: view of XYZ scalar model
View.Add( "xyzView", new ScalarView( gXYZ ) );

// CONTROLLER:       button to invoke "clear XYZ scalar model" event
// CONTROLLER: image button to invoke  "edit XYZ scalar model" event
// CONTROLLER:  text button to invoke "touch XYZ scalar model" event
// CONTROLLER:  text edit field connected to XYZ scalar model
View.Add( "clrBtn", new    ButtonController( "Clear XYZ",      "onClearBtnPressed" ) );
View.Add( "imgBtn", new ImgButtonController( "image/edit.gif", "onOtherBtnPressed" ) );
View.Add( "txtBtn", new TxtButtonController( gXYZ,             "onTouchBtnPressed" ) );
View.Add( "edtFld", new FieldEditController( gXYZ, 15, 20 ) );

// EVENT HANDLERS...
function onClearBtnPressed(){ gXYZ.setValue("cleared"          ); }
function onOtherBtnPressed(){ gXYZ.setValue("edited!"          ); }
function onTouchBtnPressed(){ gXYZ.setValue("I touched myself."); }

function onLoadPage(){
  gXYZ.setValue("I am the initial value of XYZ");
  document.getElementById("OutputArea").innerHTML = gXYZ.getValue();
}