SAP成都研究院C4C光明左使：SAP Cloud for Customer 使用SAP UI5的独特之处

你们好，今天的文章来自个人同事，Yang Joey。

2017年7月，SAP成都研究院C4C开发团队刚刚创建。某个周一早晨的Scrum meeting，新出现一位眉清目秀的小伙子，向你们自我介绍：“你们好，我叫杨xiao”。

我一听，哇塞，和明教光明左使杨逍同名。对于八零后武侠爱好者来讲，94版倚天屠龙记中孙兴饰演的杨左使潇洒飘逸，孤傲自负且颜值爆表。连金庸看了以后都评价“孙兴的杨逍源于原著，但胜于原著”。相信杨逍是不少少女的梦中情人。

杨逍年轻时的武功，金庸经过灭绝师太和周芷若的对话透露给咱们：

---

“你师伯孤鸿子和魔教中的一个少年高手*结下了梁子，约定比武，双方单打独斗，不准邀人相助。你师伯知道对手年纪甚轻，武功却极厉害，因而向我将倚天剑借了去。”只听灭绝师太续道：“那场比试，你师伯武功并不输于对手，却给那魔头连施诡计，终于胸口中了一掌，倚天剑还未出鞘，便给那魔头夺了去。”那魔头连声冷笑，说道：“****倚天剑好大的名气！在我眼中，却如废铜废铁通常！”***随手将倚天剑抛在地下，扬长而去。

---

明教的杨左使年轻时候就有这么高的修为，毕业才3年的SAP成都C4C团队的杨左使也不遑多让。2017年7月加入SAP成都研究院以前，Joey还未使用过JavaScript，然而在今年3月SAP C4C内部举办的以JavaScript为技术栈的编程大赛上，Joey得到了二等奖。短短几个月，Joey的学习速度惊人啊，有SAP C4C三位大佬亲笔签名的奖状为证：

因为英文名Joey的发音，C4C组内女同事更喜欢用另外一个昵称：阿娇。虽然听起来有点女性化，实际上Joey也和成都C4C小李探花周帅同样，有坚持健身的习惯。块头虽然不如SAP成都体育节的传奇人物日总那么彪悍，但身上的肌肉也是错落有致。

明教杨左使的最高光时刻，无疑是做为明教三巨头之一挑战少林三渡时的表演：

---

杨逍倒是忽柔忽刚，变化无方。这六人之中，以杨逍的武功最为好看，两枚圣火令在他手中盘旋飞舞，忽而成剑，忽而为刀，忽而做短枪刺、打、缠、拍，忽而当判官笔点、戳、捺、挑，更有时左手匕首，右手水刺，忽地又变成右手钢鞭，左手铁尺，百忙中尚自双令互击，发出哑哑之声以扰乱敌人心神。相斗未及**四百招，已连变了二十二般兵刃，每般兵刃均是两套招式，一共四十四套招式。

*空智于少**林派七十二绝艺得其十一，范遥自负于天下武学无所不窥，但此刻见杨逍神技一至于斯，*都不禁得暗自叹服。

---

而Joey加入成都C4C团队还不满一年，相信未来会有更大的空间让Joey可以像明教杨左使同样，在C4C领域里尽情施展他的才华。

下面是Joey的正文。

---

你们好，我叫杨枭，英文名叫Joey，这个名字是出自于老友记里面的Joey，我很是喜欢他，因此选了这个名字，目前我在SAP成都研究院担任开发工程师。

我来SAP恰好半年多一点，以前在一家美国公司Synnex作公司系统作了2年多，主要是作Java开发工做。提及来学习Java也是一件很机缘巧合的事情，如今已经在程序员的路上走了3年多了。

我的的爱好呢其实比较普遍，比较喜欢看美剧，打羽毛球，玩桌游，玩游戏，看书等等，我喜欢一切能够带给我新鲜感的东西，对不少东西都很好奇，因此呢一直以来都比较喜欢去尝试新事物，我以为这是一件对生活工做都很好的事情。

在Jerry的公众号文章SAP UI和Salesforce UI开发漫谈里曾经埋下一个伏笔：虽然SAP C4C也基于SAP UI5，可是其使用UI5的方式和SAP其余产品，如S/4HANA, SAP Revenue Cloud， SAP Engagement Center等相比还有所不一样。

大多数基于UI5开发的Fiori应用，使用Chrome开发者工具观察，能发现每一个应用的前端源代码都位于一个专属的文件夹下。

好比CRM Fiori的My Opportunity应用的前端源代码，位于文件夹crm_opprtnty下 ：

Revenue Cloud的客户主数据管理应用的前端源代码，位于文件夹customers-webapp下：

而C4C，在Chrome开发者工具里找不到这样的专属文件夹。

这就是C4C的UI5实现和SAP其余产品的不一样之处。用户在浏览器里看到的UI其实是一个巨大的模板，由若干区域组成，每一个区域在UI上的位置和绘制这些区域的UI5控件以下图所示。

好比右上方粉色的一系列能够点击的标签，技术上称为NavigationBar, 其实现位于命名空间sap.ui.ux3下的NavigationBar.js文件中。

上面介绍的这些区域是用什么工具开发的？咱们知道SAP UI5最经常使用的两种视图是XML视图和JavaScript视图。然而大部分的C4C UI并无使用这两种视图来实现，而是使用一种经过UI Designer开发而成的视图来实现，这种视图的源代码以XML格式存储在ABAP后台的Netweaver服务器上。运行时视图内容经过HTTP请求发送给前端，经过下面即将介绍的renderer渲染，生成HTML源代码。

下图红色区域即Opportunity的明细页面在UI模板上显示的位置，及该明细页面的技术名称：

/BYD_COD/SalesOnDemand/Opportunity/UI/COD_Opportunity_TI.TI.uicomponent

经过技术名称里包含的路径便可在UI Designer里打开该UI模型。

下面是C4C UI渲染的一些技术细节和源代码剖析。

---

咱们在UI Designer里面画出视图界面以后，C4C前端框架会根据咱们画的视图页面在浏览器里将原生的HTML源代码渲染出来，那么这个渲染流程是怎样的呢？带着这样的疑问，我作了一些调查。

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

首先，咱们知道在UI Designer里面画好了页面后，会生成对应的XML文件存储在ABAP后台。同时，咱们在UI Designer里面也能够看到生成的XML文件：

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

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

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

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

接下来咱们去看回调里面作了什么。

观察从后台返回的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。

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

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

然而并非全部的C4C UI都是经过UI Designer开发而成。C4C仍然存在部分UI5传统的XML视图。

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

打开的Survey明细页面倒是经过UI5 XML视图实现的：

那么问题来了，UI Designer开发的视图里包含的超连接，如何可以指向一个UI5 XML视图？

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

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

点击上图中间的红色分支，发现RUI的超连接点击跳转实现的函数为：OnOpenResponsiveSurvey

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

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

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

这就是为何点了超连接以后，从Chrome开发者工具里能看到main.view.xml文件的加载：

但愿你们看了这篇文章后，对于SAP C4C使用UI5的独特之处能有个最基本的了解。感谢阅读。

更多阅读

• SAP成都C4C小李探花：浅谈Fiori Design Guidelines

• SAP S4CRM vs C4C, 诸葛亮和周瑜?

• SAP UI和Salesforce UI开发漫谈

• Jerry和您聊聊Chrome开发者工具

• SAP成都研究院的体育故事

要获取更多Jerry的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码: