In this blog, I am going to explain how we can integrate virtual keyboard into SAPUI5 application.
As per Wikipedia,
A virtual keyboard is a software component that allows a user to enter characters. A virtual keyboard can usually be operated with multiple input devices, which may include a touchscreen, an actual Computer keyboard and a computer mouse.
There are lots of advantages associated with virtual keyboard. Some of these are,
- Users can type with their own language on foreign keyboards
- Very much useful for disabled users as they can use mouse to type
- Virtual keyboards may be used in some cases to reduce the risk of keystroke logging
- Users can easily switch between different character sets
- On Application logon pages, for user id and password fields, we can provide virtual keyboard option to users to increase the security for authenticate users.
I was wondering how we can integrate virtual keyboard with SAPUI5 applications as it is one of the important feature considering all above mentioned advantages. While searching on internet, I came across Google API for virtual keyboard. Please refer https://developers.google.com/virtual-keyboard/
Based on this API documentation, I build simple application which looks as below,
Here I am using virtual keyboard with Hindi as input language.
Below is the screenshot with English language Keyboard.
In this demo application, I tried different UI controls which requires User inputs such as TextField, TextArea, PasswordField and Note Taker.
Now let's see the code of this demo application.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="resources/sap-ui-core.js" id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons, sap.suite.ui.commons"
data-sap-ui-theme="sap_goldreflection">
</script>
<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Google Onscreen Keyboard API
google.load("elements", "1", {
packages : "keyboard"
});
//Create a matrix layout with 2 columns
var oMatrix = new sap.ui.commons.layout.MatrixLayout({
layoutFixed : true,
width : '300px',
columns : 2
});
oMatrix.setWidths('100px', '300px');
//Create a header
var oCell = new sap.ui.commons.layout.MatrixLayoutCell({
colSpan : 4
});
oCell.addContent(new sap.ui.commons.TextView({
text : 'Virtual Keyboard on SAPUI5 App',
design : sap.ui.commons.TextViewDesign.H1
}));
oMatrix.createRow(oCell);
oLabel = new sap.ui.commons.Label({
text : 'First Name'
});
oInputField = new sap.ui.commons.TextField();
oLabel.setLabelFor(oInputField);
oMatrix.createRow(oLabel, oInputField);
oLabel = new sap.ui.commons.Label({
text : 'Last Name'
});
oInputField = new sap.ui.commons.TextField();
oLabel.setLabelFor(oInputField);
oMatrix.createRow(oLabel, oInputField);
oLabel = new sap.ui.commons.Label({
text : 'Password'
});
oInputField = new sap.ui.commons.PasswordField();
oLabel.setLabelFor(oInputField);
oMatrix.createRow(oLabel, oInputField);
oLabel = new sap.ui.commons.Label({
text : 'About'
});
oTextArea = new sap.ui.commons.TextArea({
cols : 30,
rows : 4,
});
oLabel.setLabelFor(oTextArea);
oMatrix.createRow(oLabel, oTextArea);
// Attach the layout to the page
oMatrix.placeAt("content");
var noteTaker = new sap.suite.ui.commons.NoteTaker({
id : "NT",
visibleNotes : 1
});
noteTaker.placeAt("content");
function onLoad() {
var kbd = new google.elements.keyboard.Keyboard(
[ google.elements.keyboard.LayoutCode.HINDI ]);
}
google.setOnLoadCallback(onLoad);
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
As per code, I am loading Google OnScreen Keyboard API and then creating keyboard instance by setting LayoutCode to language HINDI and later to ENGLISH.
As per API, keyboard instance takes 2 parameters as layouts and textfieldIds. Please see below information from documentation.
Keyboard(layouts, textfieldIds)creates a new Virtual Keyboard instance, where:
layoutsis an array of keyboard layouts to preload, specified in the form of theLayoutCodeenum (for example,google.elements.keyboard.LayoutCode.RUSSIAN). The first layout is the default. See theLayoutCodeenum for a complete list of supported scripts.
Note: The API throws an exception if you supply an invalid value for the
layoutsarray.
textfieldIdsis an optional array containing strings of text field IDs or element references allowing you to attach the keyboard to the UI. If you don't supply the optional array, the same keyboard instance applies to any input box or text area on your page.
In my application, I am not supplying any text field IDs and hence I am able to use it for all available input fields.
P.S.- as per documentation, this API got deprecated. But still we can use it.
This is one of the way we can integrate virtual keyboard. You may found other open source APIs by which you can integrate virtual keyboard with SAPUI5 application.
I hope you enjoyed reading this blog. Please share your thoughts and comments! :smile:
Live Demo - Click Here !
- SAP Managed Tags:
4 Comments
