Skip to Content

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:

/wp-content/uploads/2015/12/voorbeeld_857323.png


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

To report this post you need to login first.

7 Comments

You must be Logged on to comment or reply to a post.

    1. Wouter Lemaire Post author

      Yes! That’s what I do for complex projects. I fetch the the data using an OData model using the read function. After that, I create objects from the result and put it in a JSON model.

       

      (0) 
  1. pas longo

    hello Wouter,

    found your blog on classes. very helpfull to me!

    i am working on a large project and you have helped me move some code from a big big controller to a bunch of smaller objects.

    thank you very much.

    i have small problem that you may be able to assist …

    i have a view that has several controls on it. i want to move the event handlers to an object.

    i am struggling to get this to work.

    do you have any thoughts/suggestions?

    cheers

    pas longo

    (1) 
    1. Wouter Lemaire Post author

      Hi Pas longo,

      I would keep your event handlers in the controller of your view. You can move the logic from the event handler to your object but still have to call the function in your object in the event handler. Event handlers are part of the UI, so it would not make sense to replace them.

      Greetings,

      Wouter

      (0) 

Leave a Reply