- SAP Managed Tags:
- Tutorial Index - how I do self study on the following topics
- Part1 - UI5 Module lazy load mechanism
- Part2 - Control renderer
- Part3 - Html native event VS UI5 semantic event
- Part4 - Control metadata
- Part5 - Control instance data - how are setXXX and getXXX implemented
- Part6 - Control data binding under the hood
- Part7 - Implementations for different binding mode: OneWay, TwoWay, OneTime
- Part8 - Control ID
- Part9 - Control internationalization support
- Part10 - Button control in XML view
- Part11 - this blog
- Content of this blog
- simple application setup
- lifecycle of button control and its underlying DOM
- What we can achieve by using the underlying DOM
Tutorial Index - how I do self study on the following topics
Part1 - UI5 Module lazy load mechanism
Part2 - Control renderer
Part3 - Html native event VS UI5 semantic event
Part4 - Control metadata
Part5 - Control instance data - how are setXXX and getXXX implemented
Part6 - Control data binding under the hood
Part7 - Implementations for different binding mode: OneWay, TwoWay, OneTime
Part8 - Control ID
Part9 - Control internationalization support
Part10 - Button control in XML view
Part11 - this blog
Content of this blog
In the part 5 of this tutorial, we use the below code to perform a delayedCall: the function setText of oButton1 is expected to be called with parameter "Jerry" with 2 seconds' delay. The purpose of this 2 seconds is to ensure the setText is called after the button instance is rendered in UI. ( Using what we have learned in part 2, we use this 2 seconds delay to ensure the setText() call occurs AFTER the render() function of Button renderer is called ).
var oButton1 = new sap.ui.commons.Button({
text:"Button" });
oButton1.placeAt("content");
jQuery.sap.delayedCall(2000, oButton1, "setText", ["Jerry"]);In the production code it definitely does not make sense to use this hard code delay. Again I prepare a most simple application for our goal of this blog: research button control and its underlying DOM.
simple application setup
The simple application has the following structure:
-- buttontutorial
|- view
|- simple.controller.js
|- simple.view.xml
-- index.html
content of simple.controller.js:
sap.ui.controller("buttontutorial.view.simple", {
onInit : function() {
var oButton = this.getButtonReference();
var oDom = oButton.getDomRef();
debugger;
},
onBeforeRendering: function() {
var oButton = this.getButtonReference();
var oDom = oButton.getDomRef();
debugger;
},
onAfterRendering: function() {
var oButton = this.getButtonReference();
var oDom = oButton.getDomRef();
debugger;
},
getButtonReference: function() {
return this.getView().byId("jerryButton");
}
});content of simple.view.xml:
<core:View xmlns:core="sap.ui.core" xmlns:common="sap.ui.commons" controllerName="buttontutorial.view.simple">
<common:Button text="Jerry" id="jerryButton"/>
</core:View>content of index.html:
lifecycle of button control and its underlying DOM
In the source code of simple.controller.js, I have already set three breakpoints using debugger statement there. Please also set the render function of Button renderer introduced in part 2. Then through debugging, the breakpoints are triggered four times, with sequence:
onInit() -> onBeforeRendering() -> render() -> onAfterRendering()
The DOM of UI5 control is generated by Button renderer's render function so it will only be available within onAfterRendering, as displayed below:
What we can achieve by using the underlying DOM
My favorite way to explore how to make use of some API is to check how UI5 framework does. Search via keyword "getDomRef" and just check the hit from another control, sap.m.Button.
Here, we know that the setText of this control is implemented by filling the text value into the attribute innerHTML of the DOM node.
So we can do similar stuff. For example, you could like to change the text color and background color of button control, however you could not find any setter function like setColor or setBackgroundColor. Fortunately we can follow the idea of setText implementation of sap.m.Button control:
Change source code of onAfterRendering() function as below:
onAfterRendering: function() {
var oButton = this.getButtonReference();
var oDom = oButton.getDomRef();
jQuery.sap.require("sap.ui.core.theming.Parameters");
oDom.style.color = sap.ui.core.theming.Parameters.get("sapUiAccent2");
oDom.style.backgroundColor = sap.ui.core.theming.Parameters.get("sapUiErrorBG");
debugger;
},The detail color of sapUiAccent2 and sapUiErrorBG could be found here
Final result:
1 Comment
