UI5 Classes and objects

[WouterLemaire]

Dear UI5 Developers,

As you all know, UI5 is a JavaScript-based HTML5 framework for building desktop and mobile applications. JavaScript is a very flexible object-oriented language when it comes to syntax. But Objects in JavaScript are class-free. There is no constraint on the names of new properties or on the values of properties. Objects are useful for collecting and organizing data. Objects can contain other objects, so they can easily represent tree or graph structures.You can read more about JavaScript Objects in the book "JavaScript: The Good Parts".

JavaScript is class-free, but you can somewhat simulate classes. There are multiple ways to simulate classes and so has UI5 his own way to simulate classes.

In this blog I'll show you how you can create a class and how to create an object of this class. I'll also show you how you can use this objects in your JSON model.

We start with creating a class by extending the component/class: "sap.ui.base.Object" . 

The extended class has a constructor. This has the same functionality as in ABAP or Java. It will be called when you create an object of your class.

With the "this" object you can refer to the object itself and store properties like firstname, lastname, ...

Like every other language, you can also create function in your class. But it's not possible to create private, protected or public functions. SAP defines protected function by starting a function with a underscore, for example _privetFunction:function(){}.

An example of a basic UI5 class with properties, functions and a constructor:

sap.ui.define([

  "sap/ui/base/Object",

  "sap/ui/model/json/JSONModel"

], function(Object, JSONModel) {

  "use strict";

  return Object.extend("be.wl.objects.model.Person", {

    constructor: function(data) {

      if (data) {

        this.firstname = data.firstname;

        this.lastname = data.lastname;

        this.fullname = this.getFullName();

      }

      this.model = new JSONModel();

      this.model.setData(this);

    },

    getFullName: function() {

      return this.firstname + " " + this.lastname;

    },

    getModel: function() {

      return this.model;

    }

  });

});

Now you can create an object of your class in the controller of your view like this:

this.p = new Person({firstname:"Wouter",lastname:"Lemaire"});

The constructor of my class already creates a JSON model for every object. This means I can just use my function getModel() to get the created model of the object "p":

this.getView().setModel(this.p.getModel(),"person");

After setting the model of the view with the object "p", we can access all the properties of the object in our view:

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

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

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

This will look like this:

Working this way seperates your model from your view and controller. This will also reduce coding in the controller.

You can find the full example on Plunker:

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

Try using objects, it will make your code easier to read and accelerates your developements.

Next topic - Inheritance: UI5 Classes and objects - Inheritance

Find out how to use this in your UI5 project: UI5 Classes and Objects - Putting it all together

Kind regards,

Wouter