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

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