SAP中使用SAPUI5的独特之处是什么-创新互联

本篇内容介绍了“SAP中使用SAP UI5的独特之处是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

从策划到设计制作,每一步都追求做到细腻,制作可持续发展的企业网站。为客户提供网站建设、做网站、网站策划、网页设计、域名注册、虚拟空间、网络营销、VI设计、 网站改版、漏洞修补等服务。为客户提供更好的一站式互联网解决方案,以客户的口碑塑造优易品牌,携手广大客户,共同发展进步。

下面就以Account这个工作中心视图页面为例来看。

首先,我们知道在UI Designer里面画好了页面后,会生成对应的XML文件存储在ABAP后台。同时,我们在UI Designer里面也可以看到生成的XML文件:

SAP中使用SAP UI5的独特之处是什么

SAP中使用SAP UI5的独特之处是什么

SAP中使用SAP UI5的独特之处是什么

我们可以看到上图红色区域标注的标签EmbeddedComponents,里面的targetComponentID指向一个Object Work List(OWL)。这个OWL也就是我们在Account工作视图上看到的OWL, 如下图。

SAP中使用SAP UI5的独特之处是什么

那么在运行时这些XML文件是如何被渲染出来的呢?

运行时有一个JavaScript对象来打开窗口,该对象的实现位于文件MWindowManager.js。我们在这里打断点可以看出_open方法触发了整个页面的渲染。当我们点击Account工作中心视图的时候,会把视图所在路径传入此方法。

SAP中使用SAP UI5的独特之处是什么

进入后续的处理逻辑,这里会根据resource path(也就是之前提到的视图所在地址)去向后台发送一个请求,取回一个JSON model,然后执行回调函数。

SAP中使用SAP UI5的独特之处是什么

接下来我们去看回调里面做了什么。

SAP中使用SAP UI5的独特之处是什么

观察从后台返回的HTTP响应,发现是一个JSON模型,包含了这个页面具体的组件信息。这里就可以跟前面我们看到的XML对应上了。接着程序会去取这些组件的render manager,并执行render(渲染)操作。

我的同事,SAP成都研究院小李探花周帅,在他的文章浅谈Fiori Design Guidelines里曾经提到,C4C有三套UI,Silverlight,HTML5和RUI。其中HTML5和RUI都基于SAP UI5。那么什么时候去渲染HTML5的控件,什么时候又去渲染RUI的控件呢?实际上每一个UI控件都有其对应的renderer,那具体是哪一个render来负责生成HTML5源代码,就是由下面getRendererName里面的逻辑来取出对应的renderer。

SAP中使用SAP UI5的独特之处是什么

比如下图是正在渲染RUI端的Tool Bar:

SAP中使用SAP UI5的独特之处是什么

比如下图所示正在渲染HTML5页面上的红框区域:

SAP中使用SAP UI5的独特之处是什么

SAP中使用SAP UI5的独特之处是什么

SAP中使用SAP UI5的独特之处是什么

然而并不是所有的C4C UI都是通过UI Designer开发而成。C4C仍然存在部分UI5传统的XML视图。

以Visit工作中心为示例,选择某个survey打开:

SAP中使用SAP UI5的独特之处是什么

打开的Survey明细页面却是通过UI5 XML视图实现的:

SAP中使用SAP UI5的独特之处是什么

那么问题来了,UI Designer开发的视图里包含的超链接,如何能够指向一个UI5 XML视图?

首先找到这个超链接点击的OnClick处理函数OnSurveyPreview:

SAP中使用SAP UI5的独特之处是什么

OnSurveyPreview的处理有三个分支,这不难理解。因为前面说过C4C有三套UI,SilverLight,HTML5和RUI。尽管这三套UI共享同一个UI Designer的开发视图,然而点击超链接后的跳转逻辑略微有差异,因此在OnClick处理函数OnSurveyPreview里分三个分支处理。下图中间红色区域的分支代码在RUI里点击超链接的跳转实现。

SAP中使用SAP UI5的独特之处是什么

点击上图中间的红色分支,发现RUI的超链接点击跳转实现的函数为:OnOpenResponsiveSurvey

SAP中使用SAP UI5的独特之处是什么

该函数最后会打开一个CustomControl:

SAP中使用SAP UI5的独特之处是什么

这个CustomControl的路径,即对应JavaScript的实现,维护在UI Designer里:

SAP中使用SAP UI5的独特之处是什么

在运行时,该Custom Control的JavaScript实现会使用JavaScript代码创建XML视图实例,如下图第127行,XML视图的构造函数被调用,

SAP中使用SAP UI5的独特之处是什么

这就是为什么点了超链接之后,从Chrome开发者工具里能看到main.view.xml文件的加载:

SAP中使用SAP UI5的独特之处是什么

“SAP中使用SAP UI5的独特之处是什么”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!


当前名称:SAP中使用SAPUI5的独特之处是什么-创新互联
分享URL:http://ybzwz.com/article/djhpih.html