New Custom Control

Click here and follow my SAP UI5/FIORI snippets and information Page
I have created new custom control i.e "customcontroll.First" by extending sap.ui.core.Control. Go through it and please let me know in case of any issue/doubt.

Application Structure

View Part

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

controllerName="customcontrol.S1" xmlns:html="http://www.w3.org/1999/xhtml">

<Page title="Creating a Simple Control" id="pId">

<content>

</content>

</Page>

</core:View>

Controller Part

sap.ui.controller("customcontrol.S1", {

onInit:function(){

//Taking page id....

var pageId=this.byId("pId");

//Call the new Control "customcontroll.First".... 

sap.ui.core.Control.extend("customcontroll.First",{

metadata:{

properties:{

"name1":"string"  //Setter and Getter are created behind the scene....

}

},

renderer:function(oRm,oControll){ //The part creating the HTML....

oRm.write("<span>Hello ");

oRm.writeEscaped(oControll.getName1());//Write the Control property 'name1', with XSS protection....

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

}

});

var control=new customcontroll.First({name1:"First Custom Control"});

control.setName1("Custom Control");

//Adding control to page....

pageId.addContent(control);

}

});

Result