目录

SAP UI

  • SAP GUI + Dynpro
  • Web Dynpro
  • BSP/CRM WebClient UI
  • SAP UI5/Fiori
  • UI5 in SAP Cloud for Customer
  • Hybris Enterprise Commerce Platform
    • *

Salesforce UI

  • Apex
  • Lightning Experience
  • Aura Framework
  • Lightning Component Framework
  • Visualforce

SAP GUI + Dynpro

用SAP GUI + Dynpro 开发利用的UI界面好像是石器时代的事件了。据我所知，至多在SAP成都研究院曾经没有团队仍旧应用这种古老的技术来开发UI了。尽管S/4HANA的后盾还有大量事务码可供终端用户应用，然而，借助SAP Internet Transaction Server(ITS)，这些基于SAP GUI的事务码能够间接运行在浏览器端，并且具备Fiori利用的外观。

也就是说，如果您的S/4HANA On Premise客户须要一些新的UI, 除了惯例的UI5开发方式之外，从技术上说，您齐全能够依然用SAP GUI开发一个Dynpro Screen, 而后封装成一个事务码，最初把这个事务码调配到S/4HANA Fiori launchpad的某个tile上。具体做法能够参考我的博客：Open your SAP GUI transaction in Fiori launchpad

https://blogs.sap.com/2016/12...

用浏览器拜访SAP GUI 事务码SE80的成果如下：

实际上，S/4HANA的很多规范利用也采纳了这种做法。以物料主数据管理利用为例，S/4HANA既存在采纳这种“障眼法”打造而成的伪Fiori利用（下图标注了事务码的3个tile），也存在下文要介绍的根正苗红的原生Fiori利用（下图蓝色tile所示）。

Web Dynpro

从实现语言上分为ABAP Web Dynpro和Java Web Dynpro。据我所知基于ABAP Web Dynpro开发的SAP规范利用比Java Web Dynpro多得多, 比方SAP SRM的规范UI就基于ABAP Web Dynpro。另外有很多属于SAP_BASIS software component的利用或框架，其UI也是应用ABAP Web Dynpro开发的，最驰名的莫过于BRF(Business Rule Framework) 。

作为Netweaver ABAP栈的一部分，BRF和其升级版BRF+在SAP许多产品里都施展了重要作用。典型的例子有SAP Solution Manager的Incident Management和SAP Cloud for Customer的Service Request利用场景里的Support Team Determination性能。通过BRF咱们能够配置一系列规定(rule)，这些规定基于Incident的component，system id, client id和priority等字段。BRF可能依据用户配置的这些规定，主动决定出哪个团队应该解决该Incident / Service Request。

再有就是SAP Document Builder，一款简单文档生成的解决方案。文档管理员负责配置符合实际业务中应用文档外观及格局的文档元素(element), 这些通过Word编辑的文档元素是最终生成文档的组成部分。用户拜访ABAP Web Dynpro UI，填写一些关键字段，最初一键生成PDF，Word，HTML或者XML格局的文档。

该技术尤其实用于局部国内客户，这些客户认为SAP规范UI导出而成的文档格局和客户素日应用的纸质文档（比方销售合同）的外观相去甚远。通过Document Builder，客户能够用Word设计合乎本人格局和外观要求的文档元素作为模板而后上传到零碎里，基于这些模板生成最终文档。

SAP Document Builder的ABAP Web Dynpro UI：

此外，ABAP Web Dynpro上手快，学习曲线绝对平缓，具备靠近所见即所得的UI编辑形式。作为一个MVC框架，ABAP Web Dynpro不须要像CRM WebClient UI那样必须开发一个真正意义上的Business Object(以下简称为BO)作为模型，而是能够间接在controller外面调用底层API。这种简略快捷的开发方式深受Partner的欢送。在我反对过的每一个On Premise我的项目的二次开发里简直都能看到ABAP Web Dynpro的身影。

只管ABAP Web Dynpro有这么多长处，但并不意味着它是一个万能的解决方案。因为无奈很好的适配挪动设施，在Fiori诞生之后，ABAP Web Dynpro逐步退出UI开发的历史舞台了。

须要揭示的一点:

如果一个SAP规范产品的UI不是应用ABAP Web Dynpro开发的，那么在您决定应用这个技术进行二次开发之前，请慎重考虑，因为您很可能会遇到这些坑：

  • 后退按钮的解决
  • 数据失落的检测和解决
  • 会话解决
  • 对UI可配置性(configurability)的反对
  • 音讯显示区域的解决
  • 对底层API不失当的调用

这些坑都是我以前反对国内客户我的项目时，发现大量ABAP Web Dynpro和CRM WebClient混合应用造成的。对于这些坑的更多细节，请参考我的博客

Issue lists of using ABAP Webdynpro in CRM UI

https://blogs.sap.com/2014/01...

BSP/CRM WebClient UI

SAP BSP是一项神奇而重要的技术。神奇，是因为它历史切实太悠久了，据我所知从上世纪90年代年起始终退役至今。而它重要的一面，临时卖个关子。

BSP和JSP的原理统一，能间接在前端HTML页面里通过<%和%>嵌入ABAP代码。

运行时这些ABAP代码在服务器端执行，而后被合并到页面源代码中去，最初服务器端将页面源代码发送给浏览器，显示给用户。

下图是一个BSP利用的例子。BSP的HTML里依然能触发一些事件，然而这些事件的响应函数不是JavaScript函数，而是由ABAP实现的代码片段，即下图右边的On结尾的一系列事件处理逻辑。

从下面的界面也能看出，BSP利用不足MVC反对，并且仅能在其框架反对的6个事件响应地位进行ABAP编程。用BSP开发一些小工具还行，如果拿来开发企业级利用则显得有些力不从心。正因为BSP的这个缺点, CRM WebClient UI 才有了用武之地。

CRM WebClient UI利用实质上也是一个BSP利用，同传统的BSP开发事务码SE80不同，CRM WebClient UI有一个新的开发事务码，该开发工具提供了应用BO作为MVC中模型层的原生反对，即开发人员能够在开发工具里将BO某个字段绑定到UI某个字段上。

WebClient UI和上面将要介绍的SAP UI5一样，也蕴含了很多开箱即用的规范控件，只不过咱们个别不必控件这个术语，而称为元素(Element)。利用开发人员只须要应用这些规范元素，就能疾速开发出高质量的UI界面。

举个例子，下图是一个典型的应用WebClient UI实现的搜寻页面，第2行和第3行申明了SAP规范元素库thtmlb和chtmlb的援用，而后在第11行应用了thtmlb库里的元素searchFrame。有SAP UI5开发教训的敌人能够把这种做法类别成在UI5的XML view里应用SAP规范的UI5控件，原理是雷同的。

短短29行代码，就绘制出了如下图的搜寻界面：不仅反对通过下拉菜单更换搜寻条件，也反对通过带有+和-的圆形按钮增加或者删除搜寻条件。

如此一来，应用程序开发人员无需再去编写原生的HTML代码和CSS。在运行期间，searchFrame元素对应的Render类会负责生成原生的HTML代码。

对于WebClient UI更多开发细节，请参考我的公众号文章Jerry的WebClient UI 42篇原创文章合集。

此外，CRM WebClient UI和ABAP Webdynpro相比，多了下图中红色方框所示的Business Object Layer和Generic Interaction Layer，有的敌人可能认为这两层会带来一些额定的运行时开销(runtime overhead),导致WebClient UI的性能不如ABAP Web Dynpro。

对于这个运行时额定开销的话题，我已经做过评测，后果证实：假如用WebClient UI和ABAP Web Dynpro实现同样的需要，WebClient UI引入BOL和GenIL层带来的运行时开销并不会导致其性能比ABAP Web Dynpro相差太多。底层API逻辑越简单，这个运行时开销越能够忽略不计。

下图就是我别离应用Social Post，Sales Order和Product三个利用测试进去的BOL和GenIL造成的运行时开销明细。对于我做的这个性能评测的更多细节，请参考我的博客

Webclient UI vs ABAP webdynpro: performance loss in BOL / Genil Layer discussion

https://blogs.sap.com/2014/01...

SAP UI5/Fiori

这对术语常常随同着彼此同时呈现，有的敌人对二者的区别和分割搞得不是太分明。Fiori是SAP官网的设计语言，代表一种UI的设计格调，我的共事周帅在他的微信文章 SAP成都C4C小李探花：浅谈Fiori Design Guidelines 里对SAP Fiori有着具体介绍。而SAP UI5是一种UI开发技术, 一个基于jQuery的UI开发框架和UI控件库。

目前S/4HANA, SAP Cloud for Customer, SAP Engagement Center, SAP Revenue Cloud这些产品的UI都基于SAP UI5。

为什么我后面介绍BSP时说这项技术如此重要呢？SAP的旗舰产品S/4HANA, 其Fiori利用仍是以BSP的形式存储在Netweaver上。

比方S/4HANA物料主数据管理的Fiori利用，其BSP利用名称：md_prod_mas_s1

该BSP利用在ABAP后盾关上如下所示：

开发人员能够用WebIDE, Eclipse, Webstorm，Atom, Sublime Text或任何喜爱的其余IDE/编辑器进行SAP UI5开发。开发实现后，这些UI5利用一旦部署到Netweaver，SAP框架会主动创立一个BSP利用，存储该UI5利用的全部内容。对于更多Fiori利用的部署细节，请参考我的公众号文章 SAP Fiori利用的三种部署形式。

SAP UI5反对不同的view类型，最罕用的是xml view和js view。对于xml view，在外面申明要应用哪些UI5控件。

在运行时，xml view被加载，内容被UI5框架的XMLTemplateProcessor解析成一颗DOM树，树上的每个叶节点对应xml view中一个UI5控件的申明。而后深度遍历这颗树，创立UI5控件运行时实例。因为是深度遍历，所以您能在下图调用栈里察看到很多handleChildren和createRegularControls的递归调用。

同xml view相比，js view里控件的实例化不是由XMLTemplateProcessor实现，而是开发人员在JavaScript代码里自行实现。

每个UI5控件都有一个对应的渲染器(renderer), 负责在运行时依据实例蕴含的各项属性渲染出对应的HTML原生代码。

然而有的S/4HANA Fiori利用，如果您依照我这篇文章 Jerry和您聊聊Chrome开发者工具 介绍的办法，用Chrome开发者工具关上它的实现，会发现这个利用既没有xml view，也没有js和其余类型的view。那么，咱们看到的Fiori UI到底是怎么画进去的呢？

举个例子，如果您依照我这篇博客的步骤，您能够在几分钟内，结构出一个反对Service Order增删改查的Fiori利用进去，并且不须要写一行JavaScript代码。

Create a CRM Service Order Fiori application within a couple of minutes

https://blogs.sap.com/2016/03...

奥秘就在于这里应用了一个叫做Smart Template的Fiori框架。应用这个框架，界面布局信息不再保护于xml或者js view里，而是定义在CDS view内。

下图是我博客里提到的Service Order利用应用到的某个CDS view在ABAP Studio里的显示。能够察看到有很多annotation(注解), 其中名称以@UI结尾的注解定义了一些元数据，形容了被注解的字段呈现在Fiori UI上的具体位置。

@UI.lineItem: 以一个column的外观呈现在UI的搜寻后果列表里，具体位置通过属性position指定。

@UI.selectionField: 申明该字段渲染成搜寻字段。

这些注解的具体定义在SAP help上能找到。这就是元数据驱动(metadata-drive development)的UI开发方式。这种形式理论将UI开发的大部分复杂度从利用开发人员身上转嫁到了Smart Template框架实现自身。应用这个框架，利用开发人员所须要做的就是专一于CDS view的开发，以及在view里定义UI注解。在运行时，由SAP UI5框架将这些元数据读取进去，而后负责生成原生的HTML代码。

这解释了为什么您在基于Smart Template的Fiori利用里找不到xml或者js view，因为UI布局压根就不再存储于这些前台资源里，而是保护在ABAP后盾的CDS view里。

下图是之前提到的Service Order Fiori利用应用到的CDS view的层级构造。每个view的具体代码在我的博客里。

对于Smart Template的更多介绍，请参考我的公众号文章 Jerry的通过CDS view + Smart Template 开发Fiori利用的blog合集 。

UI5 In SAP Cloud for Customer(C4C)

之所以要把C4C独自拿出来讲，是因为尽管C4C也基于SAP UI5，然而对SAP UI5的应用形式和SAP其余产品，如S/4HANA, SAP Revenue Cloud， SAP Engagement Center相比还有所不同。SAP成都研究院C4C开发团队的Yang Joey会在他的文章里介绍具体的差别。

Hybris Enterprise Commerce Platform(ECP)

依照应用场景可分为Storefront UI（前台电商页面）和Backoffice UI（后盾治理页面）。

Storefront UI布局和应用形式均和咱们每天用的淘宝京东等相似，采纳JSP开发。

同前文介绍的CRM WebClient UI应用的BSP技术一样，在Hybris Storefront UI的JSP开发中，Hybris也封装了很多规范的UI元素供开发人员应用。在Hybris里把这些规范UI元素称为Tag（标签）。

比方下图应用标签ycommerce:testId来分页显示产品搜寻后果：

这个标签的定义位于文件:

ext-template/yacceleratirstorefront/web/webroot/WEB-INF/common/tld/ycommercetags.tld

而标签的实现位于文件TestIdTag.java：

ext-template\yacceleratorstorefront\web\src\de\hybris\platform\yacceleratorstorefront\tags

同后面讲过的UI5控件的Renderer，WebClient UI元素的Renderer职责雷同，该Java类也能看作是JSP标签的Renderer，负责在运行时渲染JSP tag testId 对应的原生HTML代码。

上图正文还提到，为了确保id惟一，pageContext外部保护一个计数器，每次生成页面元素后计数器加1。该计数器产生的整数值作为最初生成原生HTML div标签id属性的后缀，确保每个div标签有全局惟一的id。

而Hybris JSP标签这套确保div id属性全局惟一的实现形式，和WebClient UI竟完全一致。从下图一个WebClient UI页面的原生HTML代码中咱们能轻易发现id属性值的整型后缀：

WebClient UI里id属性计数器的累加在下图第24行实现。

对于Hybris JSP标签的更多细节，请查看我的博客：

JSP attribute tag used in Hybris UI implementation and counterpart in ABAP BSP

https://blogs.sap.com/2018/02...

以上仅仅是Hybris ECP storefront UI开发宏观层面的形容。从宏观上来讲，这些JSP开发而成的界面如何组装起来最初造成用户看到的电商页面呢？相似SAP WebClient UI的Navigation Profile能够基于业务角色（Business Role）定义一系列UI以及其页面跳转关系，Hybris ECP也有相似的模块称为Web Content Management System（WCMS）：

在WCMS里能够定义一个页面的模板(Template), 模板里蕴含了不同的Page Slot，这些Slot里搁置具体的UI Component。比方下图的homepage模板，定义了电商首页的布局，咱们能察看到SiteLogoSlot位于TopHeaderSlot和ButtonHeaderSlot之间，蕴含了SiteLogoComponent，后者负责在电商页面上显示logo。

而UI component tag的渲染，分为渲染前，渲染中和渲染后三个阶段，别离对应renderItem办法中的三个子办法：

  • beforeItem
  • renderItem
  • afterItem

这三个办法别离对应了WebClient UI中的这三个子办法：

  • DO_AT_BEGINNING
  • RENDER
  • DO_AT_END

至于通过WCMS创立的template在运行时如何生成最终的HTML源代码，则是一个比较复杂的过程，这里限于篇幅不做具体介绍，大家能够参考Hybris官网上的帮忙文档。

Salesforce UI

谈起Salesforce UI，会遇到以下一些名词：

  • Apex
  • Lightning Experience
  • Aura Framework
  • Lightning Component Framework
  • Visualforce

Apex: Apex是Salesforce推出的一门强类型面向对象的编程语言，语法相似Java。Apex之于Salesforce等同于ABAP之于SAP。有意思的是，Apex也能像ABAP Open SQL那样，间接同Persistence Layer交互。

下图两行红色的高亮代码等价的ABAP Open SQL代码为：

DELETE FROM Account where name LIKE 'test%'.

Lightning Experience: Salesforce的设计语言(Design Language), 相当于SAP Fiori，也反对挪动设施拜访。

下图是在PC浏览器里关上的Salesforce Home页面：

下图是在手机上关上的业务机会(Opportunity)创立页面:

Aura Framework: 一个开源的Web利用开发框架，源代码在github上：

https://github.com/forcedotco...

Lightning Component Framework: 基于下面提到的开源框架Aura, 作为一个组件化前端框架，Salesforce用它开发可复用的UI Component。

下图是Account视图是如何由不同的UI Component形成的示意图，大家能够和前文介绍的SAP Hybris Storefront UI的WCMS相类比，思路其实都是统一的。再回顾一下：Hybris Storefront页面模板里蕴含若干个Page Slot，每个Slot搁置一个UI Component。

Visualforce: Salesforce应用的基于MVC的UI开发框架。界面开发相似SAP UI5的xml view。界面绑定的模型申明语法{}也和SAP UI5相似。界面绑定的Controller应用语言Apex开发。

同后面介绍的JSP和SAP BSP一样，Visualforce也是基于Server端渲染的技术。

心愿这篇文章能让大家对SAP不同产品的UI和Salesforce UI的开发技术有一些最根本的意识。

感激浏览。