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的原創技術文章，請關注公衆號"汪子熙"或者掃描下面二維碼: