UI5 Classes and Objects - Putting it all together

Dear UI5 Developers,

In my blogs about Classes and Objects, I've explained how you can use this in UI5:

UI5 Classes and objects

UI5 Classes and objects - Inheritance

But why and when should you use classes? I mostly use OData model to fetch the data from the backend system. If you bind the OData model to your view, it will automatically do an AJAX request to the backend.  But the two-way binding of the OData model is still experimetnal: OData Write Support - UI Development Toolkit for HTML5 (SAPUI5) - SAP Library . This means that we still can't use the model for input fields. This is why I choose to use JSON models and classes. With the JSON model I can use the two-way binding. The classes can be used to create objects and set default values from the backend. The objects can be changed by the input fields.

I've created an example where I store multiple values from input fields in a table. I've use an object Person which has one or more Skills. In my example you can add Skills to a Person.

We'll use a parent class to create a JSON model.

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

The Person class will inherit from the Parent class. It will also have a function to add skills to the Person Object. After adding a skill, it will have to update the model with the refresh function:

sap.ui.define([    "be/wl/objects/model/BaseObject"
], function(BaseObject) {  "use strict";  return BaseObject.extend("be.wl.objects.model.Person", {      constructor: function(data) {   BaseObject.call(this);        if(data){          this.firstname = data.firstname;          this.lastname = data.lastname;          this.fullname = this.getFullName();        }        this.skills = [];      },      getFullName:function(){        return this.firstname+" "+this.lastname;      },      addSkill:function(skill){        this.skills.push(skill);        this.model.refresh();      }    });
});

The class Skill will just contain a name of the skill and a value. It will also inherit from the parent class.

sap.ui.define([    "be/wl/objects/model/BaseObject"
], function(BaseObject) {  "use strict";  return BaseObject.extend("be.wl.objects.model.Skill", {      constructor: function(data) {        BaseObject.call(this);        if(data){          this.name = data.name;          this.value = data.value;        }      }    });
});

I can now use this model in my view. Therefore I've to bind this in my controller. I bind my Person object "this.p" to the view as "person" model and an empty object of the Skill class to the "skill" model. I also store this empty skill object in my controller as "this.s".

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

Besides the init function, I have created a addSkill function. This is used to add a Skill to the Person object and set a new init object as "skill" model.

      addSkill: function() {        this.p.addSkill(this.s);        this.s = new Skill({name:"name",value:"value"});        this.getView().setModel(this.s.getModel(),"skill");      }

Without setting the "person" model again, it will update the tabel! We only have to set this once!

The result will look like this:

You can find all the code on plunker:

http://plnkr.co/edit/mBEk9uBfJxRvRUxGAc2I?p=preview

Kind regards,

Wouter