how to make specific area is clickable of tile in sapui5
Hi,
My Requirement is,
To Make bottom area of tile is clickable only.
I used Custom tile, but whole area is clickable.
now i'm trying make to custom control for same.
i used onclick event but same results happen.
here i share some code:
Controller.js:
jQuery.sap.require("sap.ui.core.mvc.Controller");
jQuery.sap.declare("NewControl.util.myNewControl.js");
sap.ui.core.mvc.Controller.extend("NewControl.view.Im", {
onInit: function() {
var props= new util.myNewControl({
name: "Click on Red Zone",
color : "#c691cc"
});
var page=this.getView().byId("pageid");
page.addContent(props);
},
});
Custom Control js :
sap.ui.core.Control.extend("util.myNewControl", {
metadata : {
properties : {
name : {
type : "string"
},
text : {
type : "string"
},
size : {
type : "sap.ui.core.CSSSize", defaultValue: "200px"
},
innerwidth :{
type : "sap.ui.core.CSSSize", defaultValue: "200px"
},
innerheight :{
type : "sap.ui.core.CSSSize", defaultValue: "50px"
},
color :{
type : "string"
},
image :{
type : "string"
}
},
},
renderer : function(oRenderManager, oControl){
oRenderManager.write("<div");
oRenderManager.writeControlData(oControl);
oRenderManager.addStyle("width", oControl.getSize());
oRenderManager.addStyle("height", oControl.getSize());
oRenderManager.writeStyles();
oRenderManager.addClass("mySquare");
oRenderManager.writeClasses();
oRenderManager.write(">");
oRenderManager.write("<img");
oRenderManager.addStyle("src", oControl.getImage());
oRenderManager.write(">");
oRenderManager.write("</img>");
oRenderManager.write("<div");
oRenderManager.writeControlData(oControl);
oRenderManager.addStyle("width", oControl.getInnerwidth());
oRenderManager.addStyle("height", oControl.getInnerheight());
oRenderManager.addStyle("background-color", oControl.getColor());
oRenderManager.writeStyles();
oRenderManager.addClass("mySquareInner");
oRenderManager.writeClasses();
oRenderManager.write(">");
oRenderManager.write(oControl.getName());
oRenderManager.write("</div>");
},
onclick : function(){
alert("Hi Rohit");
}
});
Hope you understand my requirement.
waiting for solution.
Thanks,
Rohit.
