Hi, I provide training in SAP UI5. Also feel free to checkout my new web page https://saptechblog.com
SAP UI5

Custom Control in SAP UI5

In this tutorial, I am going to explain how to create a simple Custom Control. Custom controls are controls that are developed by us for catering our specific needs where the framework doesn’t provide option for that.

For more information on the custom control visit the document:
https://sapui5.hana.ondemand.com/#docs/guide/d12d2ee6a5454d799358d425f9e7c4db.html

There are couple of ways in which the custom controls can be created.

1. Inheriting from a base control class ( sap.ui.core.Control)
2. Inheriting from an existing control which almost suits your need and you want to further enhance it to cater your needs. (e.g sap.m.Button – inheriting from button class and creating a new control )
So depends on your need, you can either create a control from scratch using sap.ui.core.Control or from existing control.

Following is a step you need to follow to create a custom Control.
1. Define a Class for Custom Control
2. Provide the metadata for the controls (i.e Properties, Aggregations and Events) that forms the control
3. Implement the logic to render the control to HTML.

Step 1: Create an Application project and Define a Component.

Enter the name for the component and click on Finish.

clip_image002

Create a Component Class and Implement the logic.

clip_image004

clip_image006

Instantiate the component in the index file and place it on the content region.

clip_image008

Now if you execute the application, the component will be invoked and the display would be empty as we have not returned any control instance in the create Content function.
We will now implement a custom control and then use it in the component create function to display the custom control.

As a part of this tutorial I am also going to cover the topic of Custom Data types which I will later use to define the data type for the properties of the custom Control.

Step 2: Create a custom data types.

Create a new folder in the web content folder with the name data types.

clip_image010

Create a Java script file in the datatypes folder to create a class for custom datatype.

clip_image012

clip_image014

Step 3: Define a Class for Custom Control.

In the Web Content folder, create a new folder called controls where we will define the custom controls.

clip_image016

In the controls folder, create a JavaScript file to implement the class for custom control.

clip_image018

clip_image020

Define the metadata section of the custom control as below. Load the required data type classes using require module.

I have specified the properties of the control with the type definition, and I have created an aggregation for the controls where the aggregation supported is of type Button controls.

clip_image022

This metadata declared here specifies the behavior of the control as what it can accept and define a control. The metadata defined for the standard controls can be found in their API Documentation.

clip_image024

Invoke the Init function for the control class which will be triggered when the control is instantiated.

clip_image025

Now whenever we instantiate the controls we pass the following two parameters, where the ID is the id of the control and In Settings we pass the Properties, Aggregations and Events of the controls. This will be passed on to the Init function of the control class where you can interpret the values and adjust your controls with default values in case the properties are not passed.
Note: The Setters and Getters methods are by default created for the controls.
e.g getProperty, setProperty, getAggregation , attach/detach functions.

Invoke the renderer function of the component where you specify how the control has to be converted into HTML during the rendering process. To Specify this you use the render class and define how the control should be rendered.

clip_image027

The API for the render manager can be found here:
https://sapui5.hana.ondemand.com/#docs/api/symbols/sap.ui.core.RenderManager.html

Interpretation of Above code.
Header Tag:


// Header
oRm.write("<div");
oRm.writeControlData(oControl);
// Style
oRm.addStyle("width", oControl.getWidth());
oRm.addStyle("height", oControl.getHeight());
oRm.writeStyles()
oRm.write(">");

This is to create a HTML Tag as Below.
clip_image029

Here I have asked the render manger to write the HTML code by creating a div tag using method write. And in the starting tag of div I have asked to write the control data using writeControlData method and then added the style for the control using the addStyle method by passing the values from the control respectively.
Note: The getter and setter methods for the property are created by default.
Then I have created a new Div tag to list out the values of property in HTML.

// Property
oRm.write("<div>");
oRm.write("<div>Title: "+oControl.getTitle() +"</div>");
oRm.write("<div>Author: "+oControl.getAuthor()+"</div>");
oRm.write("<div>Description:"+oControl.getDescription()+"</div>"); 
oRm.write("<div>Price: "+oControl.getPrice().toFixed(2)+" "+oControl.getCurrencyCode() +"</div>");

clip_image031

Note: The Closing tag for the Header DIV tag is yet to be formed.

Then render the aggregation of the control.

oRm.renderControl(oControl.getAggregation("_buyButton")[0]);

Since we are using a standard button control as an Aggregation method, using renderControl method I am asking the framework to render the button control where it will invoke the renderer of the button control as specified by standard and render it on the screen with values passed to it.

clip_image033

And finally close the header div tag with an end tag.

oRm.write("</div>");

The Result HTML Should look like this.
clip_image035

Step 4: Create the instance of the control and display the control as output.
In create content function of the component, instantiate the custom control and return it as output.

clip_image037

Since I have specified the button aggregation type as sap.ui.commons.Button, add the commons library in index.html page.

clip_image039

Execute the application.

clip_image040

In the elements section of developer tool you can see the HTML Code generated as specified in the rendering logic.

clip_image042


About Arun

0 Comments:

Post a Comment

Powered by Blogger.