You will learn
You will learn how to extend controls in your application. In the below tutorial you will create a controller to generate and validate text-based captcha for your Login Preview App.
By Akshen
Part 3 of 4. In this tutorial you will learn how to create a simple UI5 Control.
You will learn how to extend controls in your application. In the below tutorial you will create a controller to generate and validate text-based captcha for your Login Preview App.
You have to add a new control for the text-based captcha. This controller will help you create a new control and extend it in your application, in your index.html
file between the scripts tag below your previously extended controls add the following
sap.ui.core.Control.extend()
This line will allow you to extend the Control from the ui.core
library.
You must define the extended Control by adding metadata to it. Control metadata consist of properties, events, as well as aggregations and associations. Also under the metadata are the init
and renderer
functions for initializing and rendering elements. In this step you will just declare what you are going to use. In the same index.html
inside the sap.ui.core.Control.extend()
.
sap.ui.core.Control.extend("extendController",{
metadata: {
properties:{},
aggregations : {},
events: {}
},
init : function()
{},
renderer: function(oRm,oControl){}
});
properties
are used to give the control title
, height
, width
and is defined by a name and type. aggregations
are defined by name and their configuration object. events
consist of the name of your event which you are going to call. The init
function is used to declare the initial elements to be loaded.
The renderer
defines the HTML structure that will be added to the DOM tree of your application whenever the control is instantiates in a view. It is usually called initially by the core of SAPUI5 and whenever a property of the control is changed. But in this step you will leave it empty.
Now you will create an object of the extended control and place the object created in your content. Do this below the defined control. Remember you are going to place this in a new div
so after you add the object also add the new div with id="content_3"
in the body tag.
var oo = new extendController({});
oo.placeAt("content_3");
<div id="content_3" style="padding-left:5px"></div>
Add the following fields just above your div content_3
in the body tag.
<input type="text" id="mainCaptcha"/>
<input type="text" id="textInput"/>
<br><br>
These are the InputFields
which you are going to use along with your controllers.
Your final code will look like this
Now to run the code, right-click on the project file and select run as Web App Preview.
In the next Tutorial you will define all the functions to extend and add logic to your program.
Updated 12/12/2017
Contributors Provide Feedback
10 Min.
TextField
, PasswordField
and Button
Controls with events