SAP CRM WebClient UI 和 Hybris backoffice UI 开发的相同点

CRM WebClient 和 Hybris backoffice 的 UI 开发都不需要开发人员手写原生的 html 代码。
CRM WebClient UI
在 CRM WebUI workbench 里,开发人员需要写下图这些 SAP 封装的 tag:

这些 Tag 能在事物码 SE80 里找到:

Hybris backoffice UI
比如我通过 backoffice 左边倒 L 形的工作中心列表查看优惠券列表,这个列表实际上是一棵树,根节点是 Marketing。

上图界面是通过在 XML 文件里定义 Hybris 封装的 tag 来实现的,原理和 CRM WebClient UI 类似。

按照第 15 行的注释,这种开发方式可以理解成"Configuration-based development"。第 17 行定义了一个类型为 explorer-tree 的控件。
第 19 行用 navigation-node 定义 marketing 这个根节点,id 为这个节点的属性。
Hybris wiki 上有这些 Hybris 封装的 tag 的详细用法:

类似的,下面这个表格包含了 6 列:

该表格是用 listview 这个 tag 实现的,下图即是 6 列对应的定义:

Simple search 的界面:

XML 文件里显示 Simple search 实际执行时基于 couponId 和 name 两个字段进行搜索:

要获取更多 Jerry 的原创技术文章,请关注公众号"汪子熙":

版权声明: 本文为 InfoQ 作者【Jerry Wang】的原创文章。
原文链接:【http://xie.infoq.cn/article/f59a734cfa391a870936a9c43】。
本文遵守【CC-BY 4.0】协议,转载请保留原文出处及本版权声明。
评论