本博客将简要介绍C4C的UI框架是如何工作的，以及C4C的呈现过程是什么
我们知道SAP C4C的前台客户端是基于SAP UI5构建的，但实际上C4C使用UI5与其他应用程序有一些不同
对于几乎所有基于UI5的Fiori应用程序来说，我们可以通过chrome开发工具发现所有的客户端源代码都在一个特定的文件夹中，CRM Fiori中"My opportunity"应用程序的客户端源代码位于文件夹CRM\u Opportty:
文件夹customers webapp中客户主数据的源代码：
但是我们在C4C中找不到任何类似的文件夹：
这是C4C与其他UI5应用程序完全不同的地方。用户在浏览器中看到的其实是由几个部分组成的巨大模板，每个部分在UI上的位置和组件来绘制这些部分，如：
如右上角的一些粉色标签，我们在技术上称之为导航栏，实际上它是在导航栏.js位于命名空间下sap.ui.ux3.
那么这些部件是由什么开发的呢？我们知道xml视图和JavaScript视图是UI5中最常用的视图。但几乎C4C用户界面不是由这两个视图构建的，而是由用户界面设计者开发的，这些视图的源代码以xml的形式存储在abapnetweaver服务器中类型。打开运行时，这些视图将通过http请求发送给客户端，客户端将通过生成的HTML源代码呈现这些视图，我们将在下面介绍这个过程：
下面的红色区域是opportunity的详细信息，技术名称是：
/BYD\U COD/SalesOnDemand/opportunity/UI/COD\U opportunity_TI.TI.ui组件
我们可以用这个技术名称在UI设计器中打开：
下面是一些关于C4C渲染和源代码分析的细节如上所述，我们在UI设计器中绘制视图后，在运行时，C4C UI框架将通过HTML源代码呈现我们在浏览器中绘制的内容，该过程如何运行？
以Account work center视图为例，
首先，秒单客返利机器人，我们知道在UI Designer中绘制屏幕后，返利是什么，xml文件将生成并存储在ABAP后端。同时，我们也可以在UI设计器中看到这个xml文件：
我们可以在上面的截图中看到红色部分，有一个标签嵌入了Components，targetComponentID有一个Object to a Work List（OWL），数据和大数据的区别，这就是我们在屏幕上看到的如下内容：
那么这个xml文件在运行时是如何呈现的呢？
实际上有一个JavaScript对象打开窗口，这个对象的实现是mWindows管理器.js. 我们可以在这里设置断点，可以看到open方法触发了整个页面的呈现过程。当我们点击Account work center view时，它会将视图路径传递给这个方法。
让我们看看后面发生了什么，企业应用平台，这里程序会请求后端根据资源路径（我们前面提到的视图路径）得到一个JSON模型，贵阳大数据，然后执行回调函数。
然后让我们看看回调函数做了什么：
看到来自后端的HTTP响应，这是JSON模型，包含了这个页面的所有组件信息。我们可以将这个模型映射回前面提到的xml上面。那么程序将获得这些组件的呈现管理器并呈现页面。
我的同事Sean Li提到C4C有3种UI类型，Silverlight、HTML5和RUI。HTML5和RUI都基于UI5。那么什么时候呈现HTML5组件，什么时候呈现RUI组件呢？实际上每个UI组件都有自己的呈现器，那么哪个呈现器负责生成HTML源代码呢？这是由下面的方法getRenderName决定的：
例如，下面的调用栈是程序在RUI中呈现工具栏时，
下面的调用栈是程序在HTML5页面中呈现红色部分时，
但是，并不是所有的C4C UI都是由UI设计器开发的。仍然有一些传统的UI5 xml视图。
例如，工作中心视图"访问"，从facet survey打开一个调查：
这个详细页面是由UI5 xml视图实现的：
所以问题是这个超链接（包含在UI设计器中开发的视图中）是如何指向UI5 xml视图的？
首先我们发现了on click event–OnSurveyPreview的功能：
在这里我们可以发现有三种路径来处理这个事件，前面我们已经提到C4C有三种类型的UI，虽然这三种类型的UI在UI设计器中共享一个开发视图，但是点击超链接后的逻辑有些不同，这就是为什么会有三种处理OnSurveyPreview的路径。红色部分代码是处理RUI逻辑的路径
点击上面截图中的红色部分，我们发现该路径的实现函数是：OnOpenResponsiveSurvey
该函数将打开一个CutomControl:
该CustomControl的JavaScript实现在UI设计器中维护：
在运行时，这个CustomControl的实现将创建xml视图实例，正如我们在下面第127行看到的，xml视图的构造函数将被调用：
这就是为什么我们可以看到main.view.xml点击超链接后加载文件。
