Extending Buttons with Custom Events

I have created custom button i.e "rohit.m.customButton" by extending "sap.m.Button",I have added new event(custom event) to button i.e "newHover".If user hover the button then newHover event will execute.

Application Structure

View Part

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="extdbtnnswithadditionalevtcustomcontrol.S1" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Extending Buttons with Additional Events" id="pageId">
<content>
</content>
</Page>
</core:View>

Controller Part

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

onInit:function()
{
//call the new Control "rohit.m.customButton".... 
sap.m.Button.extend("rohit.m.customButton",{
metadata:{
events:{
"newHover":{} // newHover event....
}
},

// the newHover event handler....
onmouseover : function(evt) {   // is called when the Button is hovered - no event registration required....
this.fireNewHover();
},
renderer: {}
});
var myControlButton = new rohit.m.customButton({
text: "Hover the Button",
newHover:[this.buttonOver,this]

});

// adding  "myControlButton" to page.... 
this.byId("pageId").addContent(myControlButton);

},

// when user hover the button then this method will call....

buttonOver:function(evt) {
alert("Button "+ evt.getSource().getText() + " was hovered.");

}
});