本文分享笔者工作多年使用 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 结构，希望对使用这个工具并且期望学习其工作原理的开发者有所帮助。