Speech Recognition Custom Control

Custom Control in sap ui5

In this blog, I will be taking about what is a Custom control in sapui5, how to develop it and how to use it once its implemented. The idea is simple, we will create a simple custom control apart from what already exists in sapui5 framework.

SapUi5 offers us many built in controls like table, list, and different kinds of forms and so on, which helps to develop almost any type of required application. What if we have a requirement, apart from what already exist in sapui5? The best probable solution might be to create a custom control.

How a Custom Control works

Basically, the parent class of all the sap ui5 control is sap.ui.core which extends from sap.ui.core.Element. A control defines appearance and behavior.

Take a look at the structure of a control:

Properties. Allows define its appearance and behavior on initialization.
Aggregations. It lets group controls, variables, etc. It lets define some kind of containers inside a control. For example sap.m.ListBase has different aggregations items, swipeContent, headerToolBar etc.
Associations. Controls can be associated with others that are not part of them. For example if we want to render a collection with next/prev functionality we could develop a previousItem / nextItem associations.
Events. Control events should be related to higher level events more than standard DOM events (click, mouseover, etc). For example sap.m.ListBase has some events like select, delete, swipe etc.
Appearance. Definition of our control in screen area. Every control has a render method in order to be rendered in HTML code.

This might give a better understanding if you have come across with sap.m.ListBase control.

So this was the basic understanding of what a custom control is. Now, with an example let’s just try to implement a custom control.

Requirement – Speech Recognition Custom Control

Sapui5 doesn’t offer us any control, which can be used for speech recognition. Here, I will create an inputControl and a button. The inputControl will be our custom control. So just lets start:

First, create a project in eclipse:

Here, I have made the project structure. Have a look at the project structure tutorial in my blog here: http://www.sapui5tutors.com/2016/03/sapui5-application-project-structuring.html

This project structuring is according to the best practices, so I would suggest to follow this.

In the view folder create a view named CustomControlView. Now, the Best practice would suggest that there should be a separate folder for controller, but for the sake of simplicity, I have collected both view and controller in the same folder itself.

In the view, define the inputControl and the button

CustomControlView.view.xml

<core:View xmlns:custom="custom.controls.demo.control"

xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"

controllerName="custom.controls.demo.view.CustomControlView">

<Page navButtonPress="onNavBack" showNavButton="false"

title="Cordova Speech recognition custom control (SAPUI5)" id="thisPage">

<Button text="Add Speech recognition control" id="__button0"

icon="sap-icon://add" type="Emphasized" press="onButtonPress" width="100%" />

<custom:SpeechRecognitionInputControl

width="70%" id="spoken1"></custom:SpeechRecognitionInputControl>

</content>

</Page>

</core:View>

CustomControlView.controller.js

sap.ui.localResources('control');

jQuery.sap.require("control.SpeechRecognitionInputControl");

sap.ui.controller("custom.controls.demo.view.CustomControlView", {

onButtonPress: function(evt){

var x = new control.SpeechRecognitionInputControl();

var oLayout = this.getView().byId("thisPage");

oLayout.addContent(x);

}

});

Now Create a new folder in the webcontent named as control and create a new js file. You can name it accordingly, here I have named it SpeechRecognitionInputControl.js.

This is the main file, where the coding is to be done

SpeechRecognitionInputControl.js

jQuery.sap.declare("custom.controls.demo.control.SpeechRecognitionInputControl");

jQuery.sap.require("sap.m.Button");

jQuery.sap.require("sap.ui.core.Icon");

sap.m.Input.extend("custom.controls.demo.control.SpeechRecognitionInputControl", { //inherit Input definition

metadata: {

properties:{

width: {type : "string", defaultValue: "70%"}, /// setting default width

value: {type : "string", defaultValue: ""},

recognition: { type:"any" } //// for Cordova plug-in recognition object

aggregations : {

_buyButton : {type : "sap.m.Button", multiple : false, visibility: "hidden"} // Agregate button

}

init : function(){ /// init the control

var oControl = this;

var oBuyBtn = new sap.m.Button({

text:"", width:"40px", icon:"sap-icon://microphone", type:"Default",

press: function (oEvent) { //////// Handle press event

if ( oControl.recognition !== undefined){

oControl.recognition.start(); //// Start recognition

var _oBuyBtn = oControl.getAggregation("_buyButton");

_oBuyBtn.setType(sap.m.ButtonType.Emphasized); /// Change button color

}

});

this.setAggregation("_buyButton", oBuyBtn); /// Add aggregation control

if (sap.hybrid !== undefined ){ ///// hybrid library defined ?

var isCompanionApp = sap.hybrid.getUrlParameterName("companionbuster");

if (window.cordova || sap.hybrid.Cordova || isCompanionApp) { //// Verifying if it is a Cordova app

document.addEventListener("deviceready", function() {

// load odata library

oControl.recognition = new SpeechRecognition(); /// Load Speech recognition librar

oControl.recognition.onnomatch = function(event) { /// Add event handlers

var _oBuyBtn = oControl.getAggregation("_buyButton");

_oBuyBtn.setType(sap.m.ButtonType.Default);

};

oControl.recognition.onerror = function(event) { /// Add event handlers

var _oBuyBtn = oControl.getAggregation("_buyButton");

_oBuyBtn.setType(sap.m.ButtonType.Default);

};

oControl.recognition.onresult = function(event) { /// Add event handlers for result

if (event.results.length > 0) { /// If there is a success

oControl.setValue(this.value = event.results[0][0].transcript); /// Set value with voice recognition

}

var _oBuyBtn = oControl.getAggregation("_buyButton");

_oBuyBtn.setType(sap.m.ButtonType.Default); /// Get back the button to original state

};

}, false);

}else{

oBuyBtn.setType(sap.m.ButtonType.Default);

oBuyBtn.setEnabled(false); //// Disable button if there is no cordova app

}

}else{

/////////////// hybrid not defined

oBuyBtn.setType(sap.m.ButtonType.Default);

oBuyBtn.setEnabled(false); //// Disable button if there is no cordova app

}

renderer : {

render : function(oRm, oControl) { /////// Render the control

oRm.write("<div");

oRm.writeControlData(oControl); ////// Render control data

oRm.writeStyles();

oRm.write(">");

sap.m.InputRenderer.render(oRm, oControl); //// pass the control to base renderer

oRm.renderControl(oControl.getAggregation("_buyButton")); /// pass aggregated control for rendering

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

}

});

Output would look like something like this:

Even though the speech functionality wont work, unless cordova plugin is installed and https://github.com/macdonst/SpeechRecognitionPlugin.git is integrated into the eclipse.Still, we learned how to implement custom control in sap ui5 application.

That’s all for now, Stay tuned for next post!!!

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.