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

i042416發表於2018-05-31

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

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

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

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

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

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

明教的楊左使年輕時候就有這麼高的修為，畢業才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裡點選超連結的跳轉實現。