Demonstration of a simple set of (css-styled) Controllers

(same as graveyControllerDemo.html but with .css specified)

Using grvMVC.js and gravey.css

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 MVCScalarModel("XYZ"); 

// VIEW: view of XYZ scalar model 
gMVCRootView.addSubView( "xyzView", new MVCScalarView( gXYZ ) ); 

// CONTROLLER: plain 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
gMVCRootView.addSubView( "clrBtn", new MVCFormButtonController( "Clear XYZ", "click me", "onClearBtnPressed" ) );
gMVCRootView.addSubView( "imgBtn", new  MVCImgButtonController( "edit.gif",  "edit XYZ", "onOtherBtnPressed" ) );
gMVCRootView.addSubView( "txtBtn", new  MVCTxtButtonController( gXYZ,       "touch XYZ", "onTouchBtnPressed" ) );
gMVCRootView.addSubView( "edtFld", new  MVCFieldEditController( gXYZ, 15, 20 ) );


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

function onLoadPage() 
{ 
  gMVCRootView.enable(); 
  gXYZ.setValue("I am the initial value of XYZ"); 
  var s = "gXYZ:("+gXYZ.name+")[" + gXYZ.getValue() + "]{br/}"; 
  document.getElementById("OutputArea").innerHTML = s; 
}