Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
JerryWang
Product and Topic Expert
Product and Topic Expert
1,807

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