Class Inheritance

To illustrate class inheritance I'll continue with the above example of the Person class. This time however there will be a Parent class from which the "Person" class inherits from.

Parent Class

sap.ui.define([
  "sap/ui/base/Object",
  "sap/ui/model/json/JSONModel"
], function(Object,JSONModel) {
  "use strict";
    return Object.extend("some.Namespace.Folder.BaseObject", {
        constructor: function() {
            this.model = new JSONModel();
            this.model.setData(this);
        },
        getModel: function(){
            return this.model;
        }
    });
});

In order to use the above mentioned class as Parent class for other classes we will have to extend this (BaseObject) class instead of "sap.ui.base.Object". Besides extending the Parent class we'll also have to call the constructor of the Parent class within the child class.

We do this like so:

    nameOfParentClass.call(this);

Short explanation .bind, .call and .apply

To learn more about the JavaScript keywords: .bind, .call and .apply head over to this article.

Another great resource for getting more in-depth knowledge on JS: Exploring JS.

Keyword	Description
.bind	permanent binding of the this context to a function/method
.call & .apply	one time execution of a function/method with bound this context
.call	(c) - c omma separated transfer of arguments like .call(this, args, ...)
.apply	(a) - a rray separated transfer of arguments like .apply(this, [args, args]

Child Class

sap.ui.define([
    "some/Namespace/Folder/BaseObject"
], function(BaseObject) {
  "use strict";
    return BaseObject.extend("some.Namespace.Folder.Person", {
        constructor: function(data) {
            BaseObject.call(this);
            if(data){
                this.firstname = data.firstname;
                this.lastname  = data.lastname;
                this.fullname  = this.getFullName();
            }
        },
        getFullName: function(){
            return this.firstname+" "+this.lastname;
        }
    });
});

There is no need to have the creation and retrieval of the model within the constructor of the Person class. This is now done within the parent of Person. When creating an object of the Person class, it will also have the functions of the Parent class.

Code in View-Controller

onInit:function(){
     this.p = new Person({firstname:"Wouter",lastname:"Lemaire"});
     this.getView().setModel(this.p.getModel(),"person");
}

All the properties of the object can be used within the view. It is possible to bind the above mentioned model "person" to the XML-View.

XML-View Example

<Input value="{person>/firstname}" editable="false"></Input>
<Input value="{person>/lastname}"  editable="false"></Input>
<Input value="{person>/fullname}"  editable="false"></Input>

• Note:

  When using class inheritance when working with view-controllers you most likely create a so called 'BaseController' that implements basic (often used) functionality which other view-controllers can inherit from. The 'BaseController' is an abstract controller which won't be instantiated by a view. The methods declared and implemented within the 'BaseController' can be directly used within XML-views that have their respective controllers inherit from the 'BaseController'.

Example project for inheritance on Plnkr (forked from Wouter)