4.4. Expanding Controllers

Expanding Controllers

Expand an existing controller

Expanding an existing controller means to add some new methods (actions) to its JS code. For example you can add a remove_user method to the application controller to remove an existing user from your database as follows:

Application.prototype.remove_user = function(data){
  var user_name = data.user_name;
  //write your code here
}

data is a well-formatted JSON object which contains the information (parameters) that you would like to send to this method (in this case the user_name). To call this method from other controllers or scripts in your application you first need to define the data object and then call the method through ControllerManager as below:

var data = $.parseJSON('{"user_name":"MAX"}');
mobileDS.ControllerManager.getInstance().performAction(
  'Application','remove_user', data
);

Add new controllers

Let us make a Calendar controller with an action of create appointment, which will create a new appointment for the user. To do this:

1. In Eclipse, navigate to www/controllers.

2. In controllers folder create a new file and name it calendar.js.

3. Copy the following code into calendar.js

//application namespace var mobileDS = window.mobileDS || {};

//controller's constructor
var Calendar = function(){ this.name = "Calendar"; }

//This method will be called before rendering the views of this controller. Calendar.prototype.on_page_load = function(){ }

   <img align="left" height="20%" src="https://raw.githubusercontent.com/wiki/dfki-flpe/sandbox-test/images/image008.png" alt="attention">
   > This is the basic skeleton of each controller. You can use this code each time you would add a new controller to your application. You just have to replace Calendar with the name of your controller.

4. Add the following method to the calendar controller:

   ```javascript
Calendar.prototype.create_appointment = function (ctrl, data){
  var container_id = data.container_id;
  var container = $("#" + container_id);
  var subject = $("#subject", container).val();
  
  var enteredDate = $("#app-date", container).datebox('getTheDate');
  var year = enteredDate.getFullYear();
  var month = enteredDate.getMonth() + 1;
  var day = enteredDate.getDate();
  
  var startTime = $("#start-time", container).datebox('getTheDate');
  var start_h = startTime.getHours();
  var start_m = startTime.getMinutes();
  
  var endTime = $("#end-time", container).datebox('getTheDate');
  var end_h = endTime.getHours();
  var end_m = endTime.getMinutes(); 
  var note = $("#note", container).val();
  if(typeof note !== 'string'){
   note = '';
  }
  else {
   note = note.escapeDoubleQuotes()
     .replaceAll('\r\n','\\r\\n').replaceAll('\n','\\n');
  }
  
  var eventData = '{"subject":"' + subject + '","year":"' + year + 
                  '","month":"' + month+'","day":"' + day + 
                  '","start_hours":"' + start_h +
                  '","start_minutes":"' + start_m +
                  '","end_hours":"' + end_h+'","end_minutes":"' + end_m +
                  '","note":"' + note + '"}';
      
  var jData = jQuery.parseJSON(eventData);
  var cb_func = function(){
    alert("STUB: appointment successfully created!\n\n"
+JSON.stringify(jData, null, 2)
    );
  };
  mobileDS.CalendarModel.getInstance().save_appointment(jData, cb_func);
};