Extending Button with Custom Events

Click here and follow my SAP UI5/FIORI snippets and information Page

I have created custom button i.e "vikas.m.customButton" by extending "sap.m.Button".I have added new event(custom event) to button i.e "newHover".If user hover on button then newHover event will be executed.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="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 "vikas.m.customButton".... 
sap.m.Button.extend("vikas.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 vikas.m.customButton({
text: "Hover the Button",
newHover:[this.buttonOver,this]

});

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

},

// When user hover on button then this method will call....
buttonOver:function(evt) {
alert("Button "+ evt.getSource().getText() + " was hovered.");
}
});

Result

  When user hover on button then custom event will fire....