UI5按钮渲染原理

To debug how is a button rendered in UI5 I created a project by using SAPUI5 application template via Web IDE. And add a button in View1.view.xml as below:

Then I added a breakpoint in ButtonRender.js to check how a Button is rendered in UI5. In below picture we can see the render sequence of the controls: UIArea -> Shell -> UIComponent -> XMLView -> NavContainer -> PageRender -> ButtonRender After we execute code of line 198, the button’s text is not displayed on the page, so we know that we need to debug further.

In writeEscape() function, we can see the button’s text has been pushed in a buffer.

And UI5 not calls DOM native method to draw controls one by one, UI5’s strategy is rendering a batch of controls in one UIArea one time.

UI5 concatenates html elements which need to be drawn in a long String.

And then call append() function to draw these html elements.

jTarget is a JQuery object.

In append() function call DOM native function appendChild() to draw html elements.

As appendChild() is DOM native function we no need to jump into it, just step over line 10612, we can see that the button is displayed.

But the layout is strange, it is not display as we expected. we need to debug further. I continue to debug and step over many line’s of code, the html elements’ CSS style are still not change until I go to line 9184:

And I enter the two parameters of jQuery.event.dispatch.apply() in console, we can see that the two parameters are like below:

If we set breakpoint in EventProvider.prototype.fireEvent() function, the code doesn’t go there, that is to say this event is not a UI5 event. In other words it will fire DOM native “load” event on DOM element “body”. And after that we can see the all the DOM elements’ including the button element’s CSS style is correct as we expected. To here, I think I have made clear of how is a button rendered in UI5.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SAP UI5控件ID的生成逻辑原理解析

    We know that when we create a new UI5 control instance, we can explicitly pass a...

    Jerry Wang
  • 如何让你的SAP CRM应用支持附件上传

    This article is using a new CRM application developed in CRM7.0 EHP3 - Social me...

    Jerry Wang
  • SAP WebClient UI的白屏问题分析

    Once product hyperlink in sales order line item is clicked, it is expected that ...

    Jerry Wang
  • 如何让你的SAP CRM应用支持附件上传

    This article is using a new CRM application developed in CRM7.0 EHP3 - Social me...

    Jerry Wang
  • SAP WebClient UI的白屏问题分析

    Once product hyperlink in sales order line item is clicked, it is expected that ...

    Jerry Wang
  • SAP UI5应用白屏的原因分析

    Today I am working on another incident and I get to know another kind of reason ...

    Jerry Wang
  • SAP CRM和Cloud for Customer的Excel导出功能比较

    Excel export is supported in both CRM and C4C. This blog gives a short introduct...

    Jerry Wang
  • 在S/4HANA扩展字段的Available Fields列表里,看不到自己创建的扩展字段该怎么办

    I have created one extension field on Business context “Product Master General” ...

    Jerry Wang
  • 使用OData服务将SAP C4C自定义BO的TextCollection暴露给外部消费者

    In the last part of my blog Step by step to enable Text Collection for your cust...

    Jerry Wang
  • 生成类似人类的运动:基于环境特征的两种方法的比较(CS)

    模拟中逼真的人类行为是一个持续的挑战,它存在于社会科学、哲学和人工智能等几个领域之间。人类运动是一种特殊的行为类型,由意图(如购买杂货)和周围环境(例如好奇地看...

    zstt8054929

扫码关注云+社区

领取腾讯云代金券