SAP成都研究院C4C光明左使:SAP Cloud for Customer 使用SAP UI5的独特之处

简介: 大家好,今天的文章来自我的同事,Yang Joey。 2017年7月,SAP成都研究院C4C开发团队刚刚建立。某个周一早晨的Scrum meeting,新出现一位眉清目秀的小伙子,向大家自我介绍:“大家好,我叫杨xiao”。

大家好,今天的文章来自我的同事,Yang Joey。

2017年7月,SAP成都研究院C4C开发团队刚刚建立。某个周一早晨的Scrum meeting,新出现一位眉清目秀的小伙子,向大家自我介绍:“大家好,我叫杨xiao”。

我一听,哇塞,和明教光明左使杨逍同名。对于八零后武侠爱好者来说,94版倚天屠龙记中孙兴饰演的杨左使潇洒飘逸,孤傲自负且颜值爆表。连金庸看了之后都评价“孙兴的杨逍源于原著,但胜于原著”。相信杨逍是很多少女的梦中情人。

杨逍年轻时的武功,金庸通过灭绝师太和周芷若的对话透露给我们:

    • *

“你师伯孤鸿子和魔教中的一个少年高手结下了梁子,约定比武,双方单打独斗,不许邀人相助。你师伯知道对手年纪甚轻,武功却极厉害,于是向我将倚天剑借了去。”只听灭绝师太续道:“那场比试,你师伯武功并不输于对手,却给那魔头连施诡计,终于胸口中了一掌,倚天剑还未出鞘,便给那魔头夺了去。”那魔头连声冷笑,说道:“倚天剑好大的名气!在我眼中,却如废铜废铁一般!”随手将倚天剑抛在地下,扬长而去。

    • *

明教的杨左使年轻时候就有这么高的修为,毕业才3年的SAP成都C4C团队的杨左使也不遑多让。2017年7月加入SAP成都研究院之前,Joey还未使用过JavaScript,然而在今年3月SAP C4C内部举办的以JavaScript为技术栈的编程大赛上,Joey获得了二等奖。短短几个月,Joey的学习速度惊人啊,有SAP C4C三位大佬亲笔签名的奖状为证:

由于英文名Joey的发音,C4C组内女同事更喜欢用另一个昵称:阿娇。虽然听起来有点女性化,实际上Joey也和成都C4C小李探花周帅一样,有坚持健身的习惯。块头虽然不如SAP成都体育节的传奇人物日总那么彪悍,但身上的肌肉也是错落有致。

明教杨左使的最高光时刻,无疑是作为明教三巨头之一挑战少林三渡时的表演:

    • *

杨逍却是忽柔忽刚,变化无方。这六人之中,以杨逍的武功最为好看,两枚圣火令在他手中盘旋飞舞,忽而成剑,忽而为刀,忽而作短枪刺、打、缠、拍,忽而当判官笔点、戳、捺、挑,更有时左手匕首,右手水刺,忽地又变成右手钢鞭,左手铁尺,百忙中尚自双令互击,发出哑哑之声以扰乱敌人心神。相斗未及四百招,已连变了二十二般兵刃,每般兵刃均是两套招式,一共四十四套招式。

空智于少林派七十二绝艺得其十一,范遥自负于天下武学无所不窥,但此刻见杨逍神技一至于斯,都不由得暗自叹服。

    • *

而Joey加入成都C4C团队还不满一年,相信将来会有更大的空间让Joey能够像明教杨左使一样,在C4C领域里尽情施展他的才华。

下面是Joey的正文。

    • *

大家好,我叫杨枭,英文名叫Joey,这个名字是出自于老友记里面的Joey,我非常喜欢他,所以选了这个名字,目前我在SAP成都研究院担任开发工程师。

我来SAP刚好半年多一点,之前在一家美国公司Synnex做公司系统做了2年多,主要是做Java开发工作。说起来学习Java也是一件很机缘巧合的事情,现在已经在程序员的路上走了3年多了。

个人的爱好呢其实比较广泛,比较喜欢看美剧,打羽毛球,玩桌游,玩游戏,看书等等,我喜欢一切可以带给我新鲜感的东西,对很多东西都很好奇,所以呢一直以来都比较喜欢去尝试新事物,我觉得这是一件对生活工作都很好的事情。

在Jerry的公众号文章SAP UI和Salesforce UI开发漫谈里曾经埋下一个伏笔:虽然SAP C4C也基于SAP UI5,但是其使用UI5的方式和SAP其他产品,如S/4HANA, SAP Revenue Cloud, SAP Engagement Center等相比还有所不同。

大多数基于UI5开发的Fiori应用,使用Chrome开发者工具观察,能发现每个应用的前端源代码都位于一个专属的文件夹下。

比如CRM Fiori的My Opportunity应用的前端源代码,位于文件夹crm_opprtnty下 :

Revenue Cloud的客户主数据管理应用的前端源代码,位于文件夹customers-webapp下:

而C4C,在Chrome开发者工具里找不到这样的专属文件夹。

这就是C4C的UI5实现和SAP其他产品的不同之处。用户在浏览器里看到的UI实际上是一个巨大的模板,由若干区域组成,每个区域在UI上的位置和绘制这些区域的UI5控件如下图所示。

比如右上方粉色的一系列可以点击的标签,技术上称为NavigationBar, 其实现位于命名空间sap.ui.ux3下的NavigationBar.js文件中。

上面介绍的这些区域是用什么工具开发的?我们知道SAP UI5最常用的两种视图是XML视图和JavaScript视图。然而大部分的C4C UI并没有使用这两种视图来实现,而是使用一种通过UI Designer开发而成的视图来实现,这种视图的源代码以XML格式存储在ABAP后台的Netweaver服务器上。运行时视图内容通过HTTP请求发送给前端,通过下面即将介绍的renderer渲染,生成HTML源代码。

下图红色区域即Opportunity的明细页面在UI模板上显示的位置,及该明细页面的技术名称:

/BYD_COD/SalesOnDemand/Opportunity/UI/COD_Opportunity_TI.TI.uicomponent

通过技术名称里包含的路径即可在UI Designer里打开该UI模型。

下面是C4C UI渲染的一些技术细节和源代码剖析。

    • *

我们在UI Designer里面画出视图界面之后,C4C前端框架会根据我们画的视图页面在浏览器里将原生的HTML源代码渲染出来,那么这个渲染流程是怎样的呢?带着这样的疑问,我做了一些调查。

下面就以Account这个工作中心视图页面为例来看。

首先,我们知道在UI Designer里面画好了页面后,会生成对应的XML文件存储在ABAP后台。同时,我们在UI Designer里面也可以看到生成的XML文件:

我们可以看到上图红色区域标注的标签EmbeddedComponents,里面的targetComponentID指向一个Object Work List(OWL)。这个OWL也就是我们在Account工作视图上看到的OWL, 如下图。

那么在运行时这些XML文件是如何被渲染出来的呢?

运行时有一个JavaScript对象来打开窗口,该对象的实现位于文件MWindowManager.js。我们在这里打断点可以看出_open方法触发了整个页面的渲染。当我们点击Account工作中心视图的时候,会把视图所在路径传入此方法。

进入后续的处理逻辑,这里会根据resource path(也就是之前提到的视图所在地址)去向后台发送一个请求,取回一个JSON model,然后执行回调函数。

接下来我们去看回调里面做了什么。

观察从后台返回的HTTP响应,发现是一个JSON模型,包含了这个页面具体的组件信息。这里就可以跟前面我们看到的XML对应上了。接着程序会去取这些组件的render manager,并执行render(渲染)操作。

我的同事,SAP成都研究院小李探花周帅,在他的文章浅谈Fiori Design Guidelines里曾经提到,C4C有三套UI,Silverlight,HTML5和RUI。其中HTML5和RUI都基于SAP UI5。那么什么时候去渲染HTML5的控件,什么时候又去渲染RUI的控件呢?实际上每一个UI控件都有其对应的renderer,那具体是哪一个render来负责生成HTML5源代码,就是由下面getRendererName里面的逻辑来取出对应的renderer。

比如下图是正在渲染RUI端的Tool Bar:

比如下图所示正在渲染HTML5页面上的红框区域:

然而并不是所有的C4C UI都是通过UI Designer开发而成。C4C仍然存在部分UI5传统的XML视图。

以Visit工作中心为示例,选择某个survey打开:

打开的Survey明细页面却是通过UI5 XML视图实现的:

那么问题来了,UI Designer开发的视图里包含的超链接,如何能够指向一个UI5 XML视图?

首先找到这个超链接点击的OnClick处理函数OnSurveyPreview:

OnSurveyPreview的处理有三个分支,这不难理解。因为前面说过C4C有三套UI,SilverLight,HTML5和RUI。尽管这三套UI共享同一个UI Designer的开发视图,然而点击超链接后的跳转逻辑略微有差异,因此在OnClick处理函数OnSurveyPreview里分三个分支处理。下图中间红色区域的分支代码在RUI里点击超链接的跳转实现。

点击上图中间的红色分支,发现RUI的超链接点击跳转实现的函数为:OnOpenResponsiveSurvey

该函数最后会打开一个CustomControl:

这个CustomControl的路径,即对应JavaScript的实现,维护在UI Designer里:

在运行时,该Custom Control的JavaScript实现会使用JavaScript代码创建XML视图实例,如下图第127行,XML视图的构造函数被调用,

这就是为什么点了超链接之后,从Chrome开发者工具里能看到main.view.xml文件的加载:

希望大家看了这篇文章后,对于SAP C4C使用UI5的独特之处能有个最基本的了解。感谢阅读。

更多阅读

相关文章
|
5月前
|
存储 安全 测试技术
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
|
5月前
|
UED
什么是 SAP Commerce Cloud SmartEdit Product Carousel Component Editor
什么是 SAP Commerce Cloud SmartEdit Product Carousel Component Editor
|
5月前
|
机器学习/深度学习 搜索推荐 UED
SAP Commerce Cloud Context Driven Services 概述
SAP Commerce Cloud Context Driven Services 概述
|
5月前
|
监控 搜索推荐 安全
SAP Commerce Cloud Context Driven Services 里 profile-tag.js 的作用介绍
SAP Commerce Cloud Context Driven Services 里 profile-tag.js 的作用介绍
|
5月前
|
存储 消息中间件 搜索推荐
SAP Commerce Cloud Context Driven Services 的 clickStreamEvents HTTP 请求
SAP Commerce Cloud Context Driven Services 的 clickStreamEvents HTTP 请求
|
5月前
|
机器学习/深度学习 人工智能 搜索推荐
SAP Commerce Cloud 智能销售服务 (Intelligent Selling Services)概述
SAP Commerce Cloud 智能销售服务 (Intelligent Selling Services)概述
|
5月前
|
安全 UED 开发者
SAP Commerce Cloud 配置项 refreshWithLock=false 的作用介绍
SAP Commerce Cloud 配置项 refreshWithLock=false 的作用介绍
|
5月前
|
Java BI API
SAP Cloud for Customer 里如何通过 ABSL 二次开发方式消费 SAP S/4HANA 系统的 API
SAP Cloud for Customer 里如何通过 ABSL 二次开发方式消费 SAP S/4HANA 系统的 API
|
5月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
5月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍