大家好，今天的文章來自我的同事，Yang Joey。

2017年7月，SAP成都研究院C4C開發(fā)團隊剛剛建立。某個周一早晨的Scrum meeting，新出現(xiàn)一位眉清目秀的小伙子，向大家自我介紹：“大家好，我叫楊xiao”。

我一聽，哇塞，和明教光明左使楊逍同名。對于八零后武俠愛好者來說，94版倚天屠龍記中孫興飾演的楊左使瀟灑飄逸，孤傲自負且顏值爆表。連金庸看了之后都評價“孫興的楊逍源于原著，但勝于原著”。相信楊逍是很多少女的夢中情人。

楊逍年輕時的武功，金庸通過滅絕師太和周芷若的對話透露給我們：

---

“你師伯孤鴻子和魔教中的一個少年高手*結下了梁子，約定比武，雙方單打獨斗，不許邀人相助。你師伯知道對手年紀甚輕，武功卻極厲害，于是向我將倚天劍借了去。”只聽滅絕師太續(xù)道：“那場比試，你師伯武功并不輸于對手，卻給那魔頭連施詭計，終于胸口中了一掌，倚天劍還未出鞘，便給那魔頭奪了去。”那魔頭連聲冷笑，說道：“****倚天劍好大的名氣！在我眼中，卻如廢銅廢鐵一般！”***隨手將倚天劍拋在地下，揚長而去。

---

明教的楊左使年輕時候就有這么高的修為，畢業(yè)才3年的SAP成都C4C團隊的楊左使也不遑多讓。2017年7月加入SAP成都研究院之前，Joey還未使用過JavaScript，然而在今年3月SAP C4C內部舉辦的以JavaScript為技術棧的編程大賽上，Joey獲得了二等獎。短短幾個月，Joey的學習速度驚人啊，有SAP C4C三位大佬親筆簽名的獎狀為證：

由于英文名Joey的發(fā)音，C4C組內女同事更喜歡用另一個昵稱：阿嬌。雖然聽起來有點女性化，實際上Joey也和成都C4C小李探花周帥一樣，有堅持健身的習慣。塊頭雖然不如SAP成都體育節(jié)的傳奇人物日總那么彪悍，但身上的肌肉也是錯落有致。

明教楊左使的最高光時刻，無疑是作為明教三巨頭之一挑戰(zhàn)少林三渡時的表演：

---

楊逍卻是忽柔忽剛，變化無方。這六人之中，以楊逍的武功最為好看，兩枚圣火令在他手中盤旋飛舞，忽而成劍，忽而為刀，忽而作短槍刺、打、纏、拍，忽而當判官筆點、戳、捺、挑，更有時左手匕首，右手水刺，忽地又變成右手鋼鞭，左手鐵尺，百忙中尚自雙令互擊，發(fā)出啞啞之聲以擾亂敵人心神。相斗未及**四百招，已連變了二十二般兵刃，每般兵刃均是兩套招式，一共四十四套招式。

*空智于少**林派七十二絕藝得其十一，范遙自負于天下武學無所不窺，但此刻見楊逍神技一至于斯，*都不由得暗自嘆服。

---

而Joey加入成都C4C團隊還不滿一年，相信將來會有更大的空間讓Joey能夠像明教楊左使一樣，在C4C領域里盡情施展他的才華。

下面是Joey的正文。

---

大家好，我叫楊梟，英文名叫Joey，這個名字是出自于老友記里面的Joey，我非常喜歡他，所以選了這個名字，目前我在SAP成都研究院擔任開發(fā)工程師。

我來SAP剛好半年多一點，之前在一家美國公司Synnex做公司系統(tǒng)做了2年多，主要是做Java開發(fā)工作。說起來學習Java也是一件很機緣巧合的事情，現(xiàn)在已經(jīng)在程序員的路上走了3年多了。

個人的愛好呢其實比較廣泛，比較喜歡看美劇，打羽毛球，玩桌游，玩游戲，看書等等，我喜歡一切可以帶給我新鮮感的東西，對很多東西都很好奇，所以呢一直以來都比較喜歡去嘗試新事物，我覺得這是一件對生活工作都很好的事情。

在Jerry的公眾號文章SAP UI和Salesforce UI開發(fā)漫談里曾經(jīng)埋下一個伏筆：雖然SAP C4C也基于SAP UI5，但是其使用UI5的方式和SAP其他產(chǎn)品，如S/4HANA, SAP Revenue Cloud， SAP Engagement Center等相比還有所不同。

大多數(shù)基于UI5開發(fā)的Fiori應用，使用Chrome開發(fā)者工具觀察，能發(fā)現(xiàn)每個應用的前端源代碼都位于一個專屬的文件夾下。

比如CRM Fiori的My Opportunity應用的前端源代碼，位于文件夾crm_opprtnty下 ：

Revenue Cloud的客戶主數(shù)據(jù)管理應用的前端源代碼，位于文件夾customers-webapp下：

而C4C，在Chrome開發(fā)者工具里找不到這樣的專屬文件夾。

這就是C4C的UI5實現(xiàn)和SAP其他產(chǎn)品的不同之處。用戶在瀏覽器里看到的UI實際上是一個巨大的模板，由若干區(qū)域組成，每個區(qū)域在UI上的位置和繪制這些區(qū)域的UI5控件如下圖所示。

比如右上方粉色的一系列可以點擊的標簽，技術上稱為NavigationBar, 其實現(xiàn)位于命名空間sap.ui.ux3下的NavigationBar.js文件中。

上面介紹的這些區(qū)域是用什么工具開發(fā)的？我們知道SAP UI5最常用的兩種視圖是XML視圖和JavaScript視圖。然而大部分的C4C UI并沒有使用這兩種視圖來實現(xiàn)，而是使用一種通過UI Designer開發(fā)而成的視圖來實現(xiàn)，這種視圖的源代碼以XML格式存儲在ABAP后臺的Netweaver服務器上。運行時視圖內容通過HTTP請求發(fā)送給前端，通過下面即將介紹的renderer渲染，生成HTML源代碼。

下圖紅色區(qū)域即Opportunity的明細頁面在UI模板上顯示的位置，及該明細頁面的技術名稱：

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

通過技術名稱里包含的路徑即可在UI Designer里打開該UI模型。

下面是C4C UI渲染的一些技術細節(jié)和源代碼剖析。

---

我們在UI Designer里面畫出視圖界面之后，C4C前端框架會根據(jù)我們畫的視圖頁面在瀏覽器里將原生的HTML源代碼渲染出來，那么這個渲染流程是怎樣的呢？帶著這樣的疑問，我做了一些調查。

下面就以Account這個工作中心視圖頁面為例來看。

首先，我們知道在UI Designer里面畫好了頁面后，會生成對應的XML文件存儲在ABAP后臺。同時，我們在UI Designer里面也可以看到生成的XML文件：

我們可以看到上圖紅色區(qū)域標注的標簽EmbeddedComponents，里面的targetComponentID指向一個Object Work List(OWL)。這個OWL也就是我們在Account工作視圖上看到的OWL, 如下圖。

那么在運行時這些XML文件是如何被渲染出來的呢?

運行時有一個JavaScript對象來打開窗口，該對象的實現(xiàn)位于文件MWindowManager.js。我們在這里打斷點可以看出_open方法觸發(fā)了整個頁面的渲染。當我們點擊Account工作中心視圖的時候，會把視圖所在路徑傳入此方法。

進入后續(xù)的處理邏輯，這里會根據(jù)resource path（也就是之前提到的視圖所在地址）去向后臺發(fā)送一個請求，取回一個JSON model，然后執(zhí)行回調函數(shù)。

接下來我們去看回調里面做了什么。

觀察從后臺返回的HTTP響應，發(fā)現(xiàn)是一個JSON模型，包含了這個頁面具體的組件信息。這里就可以跟前面我們看到的XML對應上了。接著程序會去取這些組件的render manager，并執(zhí)行render（渲染）操作。

我的同事，SAP成都研究院小李探花周帥，在他的文章淺談Fiori Design Guidelines里曾經(jīng)提到，C4C有三套UI，Silverlight，HTML5和RUI。其中HTML5和RUI都基于SAP UI5。那么什么時候去渲染HTML5的控件，什么時候又去渲染RUI的控件呢？實際上每一個UI控件都有其對應的renderer，那具體是哪一個render來負責生成HTML5源代碼，就是由下面getRendererName里面的邏輯來取出對應的renderer。

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

比如下圖所示正在渲染HTML5頁面上的紅框區(qū)域：

然而并不是所有的C4C UI都是通過UI Designer開發(fā)而成。C4C仍然存在部分UI5傳統(tǒng)的XML視圖。

以Visit工作中心為示例，選擇某個survey打開:

打開的Survey明細頁面卻是通過UI5 XML視圖實現(xiàn)的：

那么問題來了，UI Designer開發(fā)的視圖里包含的超鏈接，如何能夠指向一個UI5 XML視圖？

首先找到這個超鏈接點擊的OnClick處理函數(shù)OnSurveyPreview：

OnSurveyPreview的處理有三個分支，這不難理解。因為前面說過C4C有三套UI，SilverLight，HTML5和RUI。盡管這三套UI共享同一個UI Designer的開發(fā)視圖，然而點擊超鏈接后的跳轉邏輯略微有差異，因此在OnClick處理函數(shù)OnSurveyPreview里分三個分支處理。下圖中間紅色區(qū)域的分支代碼在RUI里點擊超鏈接的跳轉實現(xiàn)。

點擊上圖中間的紅色分支，發(fā)現(xiàn)RUI的超鏈接點擊跳轉實現(xiàn)的函數(shù)為：OnOpenResponsiveSurvey

該函數(shù)最后會打開一個CustomControl：

這個CustomControl的路徑，即對應JavaScript的實現(xiàn)，維護在UI Designer里：

在運行時，該Custom Control的JavaScript實現(xiàn)會使用JavaScript代碼創(chuàng)建XML視圖實例，如下圖第127行，XML視圖的構造函數(shù)被調用，

這就是為什么點了超鏈接之后，從Chrome開發(fā)者工具里能看到main.view.xml文件的加載：

希望大家看了這篇文章后，對于SAP C4C使用UI5的獨特之處能有個最基本的了解。感謝閱讀。

更多閱讀

• SAP成都C4C小李探花：淺談Fiori Design Guidelines

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

• SAP UI和Salesforce UI開發(fā)漫談

• Jerry和您聊聊Chrome開發(fā)者工具

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

要獲取更多Jerry的原創(chuàng)技術文章，請關注公眾號"汪子熙"或者掃描下面二維碼:

總結

以上是生活随笔為你收集整理的SAP成都研究院C4C光明左使：SAP Cloud for Customer 使用SAP UI5的独特之处的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。