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"}');
mmir.ctrl.perform(
  '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 mmir = window.mmir || {};
    
       //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(){
    }
   

   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:

      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)
        );
      };
      mmir.model.get('CalendarModel')
      					.getInstance().save_appointment(jData, cb_func);
    };
   

---

< previous: "Building-MMIR-StarterKit" | next: "Expanding Views" >