CRM 全栈开发工具 WebClient UI Workbench 的设计细节介绍

本文分享笔者工作多年使用 WebClient UI Workbench 进行全栈开发时积累的一些使用经验，以及对这个工具设计上的理解。

通过 WebClient UI，SAP 提供了一个统一的在线用户界面。 WebClient UI 是为业务用户设计的，它提供了一个基于角色的工作区，包含一个易于使用的导航和用户界面。

SAP CRM 的前台界面基于 WebClient UI 技术，其框架架构基于不同的软件层。 

下图说明了 SAP CRM 框架架构及其不同的软件层：

不同的软件层彼此完全分离。这种分离允许业务应用程序通过业务对象层 (BOL) 和通用交互层 (genIL) ，连接到展现层。也方便第三方应用同 SAP CRM 系统进行集成。

这些软件设计层的作用逐层介绍如下：

展现层(Presentation Layer)

CRM WebClient UI 的表示层基于 CRM 用户界面框架 (CRM UIF)，它是在 Web 浏览器中运行的 HTML 页面的基础。

业务层(Business Layer)

CRM WebClient UI 的业务层由以下软件层组成：

• 业务对象层 (BOL)：业务对象层在 SAP CRM 会话运行时保存业务对象数据，例如销售订单。这一层保证了 CRM WebClient UI 和底层业务逻辑的分离。

• 通用交互层 (genIL)：通用交互层处理从业务对象层到底层业务引擎的应用程序编程接口 (API) 的数据传输。它是业务对象层和底层业务引擎之间的连接。

看一个具体的例子。

以下截图是 CRM 系统里 BSP_WD_CPMWB 这个事务码进入之后，任意打开一个上下文节点(Context Node)看到的信息：

STRUCT的含义？

在UI层的CRM BSP component的MVC设计里，Model，即Context node，绑定的是Business Object Layer的模型，因此Context node Attributes文件夹下面，以STRUCT开头的字段，意味着这个字段是绑定到BOL模型节点里的一个字段的，二者存在一一对应关系，如下图箭头所示。而下图蓝色字段LOCKED, 前面没有STRUCT前缀，说明这个字段并非来自BOL模型节点，而是开发者直接创建的，这种字段一般用于应用逻辑里存储临时状态，或是代表当前应用的某个标志位，没有对应的底层存储，在SAP很多产品里也称这种字段为transient field或者calculated field.

展开某个字段，看到的GET, GET_M, GET_I, GET_V, GET_P, GET_A是什么意思？

要回答这个问题，得从CRM WebClient UI页面的渲染方式说起。

如上图这种视图源代码，使用的标签页不是HTML支持的原生标签，浏览器是无法识别和解析的，因此需要有一个中间层，或者说转换器，将这些SAP封装过的标签转换成浏览器支持的原生HTML标签。

按照这个转换器所处位置的不同，分为服务器端渲染和浏览器端渲染两种方式。SAP CRM WebClient UI基于SAP BSP技术——Business Server Page，光听名字就知道是在服务器端渲染了。而SAP UI5，是典型的浏览器端渲染，我们在其XML视图里书写的那些标签同样无法直接被浏览器使用，需要每个标签对应的渲染器，在浏览器端用JavaScript代码生成对应原生的HTML标签。

回到CRM WebClient UI，对于Attributes里的这些STRUCT字段们，我们在渲染出的最终页面里，有的是一般的输入字段，有的是超链接，有的是下拉框，有的不可编辑，SAP开发的转换器怎么知道要将每个字段渲染成什么样呢？

奥妙就在这些GET方法里。这里有一个小小的设计模式的思路在内，即SAP CRM WebClient UI的框架代码，负责服务器端渲染80%的工作量，即把整个页面的框架搭出来，包括一个页面有多少字段，字段之间的相对位置等。剩下20%的工作量，比如每个字段的类型，外观等属性，这些信息框架不可能知道，也不应该知道，这些应该由应用程序提供接口(也可以理解成回调)，在接口里实现这些属性，然后由框架调用这些接口。我们可以把这个模式看成是设计模式里的一种——模板模式(Template Design Pattern).

看具体的例子。

双击进入CONFIG这个字段的GET_P方法里。P的意思是Property，属性。UI框架在渲染CONFIG这个字段时，会调用GET_P_CONFIG这个接口，询问应用：你想把CONFIG这个字段渲染成什么类型(下图第4行的fieldtype)？

应用程序通过第五行的field_type_checkbox回答框架：我想把CONFIG字段渲染成checkbox, 拜托了。

UI框架拿到这个信息后，就可以做对应的渲染工作了。

如果想研究UI拿到这个字段类型后如何渲染的细节，在GET_P方法里打断点，然后打开一个页面，单步调试记录：

GET_I: 如果应用逻辑里需要根据某种条件动态决定该字段是否可编辑，将逻辑写在这个接口里。

纯粹的GET_P方法：这里面奥妙很多，尤其是这个CONVERT_TO_STRING方法，将底层数据库表里对应的字段根据BOL模型里的字段类型渲染成最终对用户友好易读的字符串。比如底层数据库表里存储的是不含任何时区的时间戳(timestamp)， 那么这个方法会根据用户设置里的时区，自动转换成该时区的本地时间。

GET_V: 如果想实现自定义的F4 Value Help，在此实现。

GET_A: 如果某字段的启用与否，依赖于某个Business Switch的开与关，在此实现。在SFW开头的系列事务码里查看和操作Business Switch和Function.

EXT开头的字段，代表通过CRM增强工具Application Extension Tool(AET)创建的增强字段。

总结

本文首先介绍了 WebClient UI 的一般概念，以及 SAP CRM 系统基于 WebClient UI 的分层设计，接着进入系统，打开 WebClient UI Workbench 深入介绍了这个工具的 MVC 结构，希望对使用这个工具并且期望学习其工作原理的开发者有所帮助。