Basic Controller Programming

In a typical Web 1.0 view with JavaScript customization, the Controller is implemented as a set of JavaScript functions:

//...variables go here...
var requiresParking = true;

function user_form_onload() {
//...application initialization code goes here...
}
function onNext() {
//...event handling code goes here...
}

These functions are attached to the user interface controls in an AXVW file:

<action id="next">
<title>Next</title> <command type="callFunction" functionName="onNext"/> </action>

This coding style is easy to learn and convenient if you need to add two or three simple JavaScript event handlers to the view, and it is fully supported in View 2.0 Format. However, for any sizable application this style tends to result in a large amount of unstructured JavaScript code that makes the application difficult to maintain or extend. The following issues are typical:

All variables and functions are defined in the global scope, which can lead to naming conflicts when multiple JavaScript files are used. This also makes JavaScript debugging more difficult because it may be unclear who is setting which variable or which variables are shown in the debugger.
There is no clean separation between the code that calls server-side workflow rules and processes the data values, code that displays data using UI controls, and code that handles user actions.
There is a considerable amount of code that obtains panel references (var employeeForm = Ab.view.View.getControl('', 'em_form');) before anything can be done with these panels.
All event handler functions have to be explicitly specified in AXVW files using commands.

To provide a better code organization we recommend using a controller object. The general template for the controller is shown below:

var addEmployeeController = View.createController('addEmployee', {
//...variables go here... requiresParking: true, afterViewLoad: function() { this.inherit(); ...application initialization code goes here... }, employeeForm_next_onClick: function() { ...event handling code goes here... } });

Note that the controller code uses JavaScript object syntax:

Variables are declared as [name: value] instead of [var name = value]
Functions are declared as [f: function(params) {...}] instead of [function f(params) {...}]
Every variable and function, except the last one, is separated from the next with a comma
Variables defined within the Controller are referenced using the this keyword: this.variableName.

Once created, the controller works in concert with the Web Central view. The view will automatically call the afterViewLoad function when its loading process is complete, giving the controller a chance to do something useful � for example:

afterViewLoad: function() {
    this.inherit();

    // application-specific code called on view load
    View.panels.get('employeeForm').newRecord = true;
}