- 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.
aggregations
appearance
associations
Custom Controls
events
properties
sap
sap web ide
sapui5
speech recognition
voice recognition
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:
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">
<content>
<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!!!
Next
« Prev Post
« Prev Post
Previous
Next Post »
Next Post »
Subscribe to:
Post Comments (Atom)
2 comments
Click here for commentsPlease will you help that how to integrate speech recognition custom control with cordova.Will you give detail description?
ReplyConversionConversion EmoticonEmoticon