ABAP开发环境语法高亮的那些事儿

Posted sap-jerry

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ABAP开发环境语法高亮的那些事儿相关的知识,希望对你有一定的参考价值。

关于SAP ABAP开发环境,Jerry之前写过几篇公众号文章:

  • 那些年我用过的SAP IDE
  • 不喜欢SAP GUI?那试试用Eclipse进行ABAP开发吧
  • 使用Visual Studio Code编写和激活ABAP代码

本文从另一个角度出发,单独聊聊ABAP开发环境里的语法高亮话题。

俗话说,佛靠金装,人靠衣装。咱们程序员虽然平日上班都穿千篇一律的职业装:

技术图片
程序员专用的格子伞:

技术图片
Jerry衣柜里最不缺这种衣服:

技术图片

但幸好我们的开发环境还是能够进行各种个性化设置,所以虽然大家都穿着一样的格子衫,但面对的却是色彩各异的开发环境。比如SAPGUI的Options选项,给ABAP开发人员提供了种类丰富的ABAP编辑器UI元素风格的自定义设置,诸如背景色,关键字高亮颜色,注释高亮颜色,断点高亮颜色等等。

技术图片
我们点了Save按钮后,这些个性化设置保存在本地某处。那么以ABAP编辑器为例,当我们用它来编写代码时,ABAP语言里的语法元素是如何根据不同的类型,进行对应的颜色高亮显示呢?

在SAPGUI设置选项里,进入Traces->Session Traces, 点击Enable按钮打开ABAP Editor的trace开关,回到ABAP编辑器,随便做一些操作,比如加一段注释,几个空格,激活代码之类。

技术图片
然后打开生成的trace文件:
C:Users<user name>AppDataLocalSAPSAP GUITracessapfewdll_01_0001_00_4272_2800.trc

能看到大段大段的CStyleCache::OnLinesChanged和CAbapFgLexer::InternalLexer这种C++里类的方法调用。

  • 189行:InvalidateLineStyle - 准备重绘ABAP代码第43883行的语法高亮
  • 190~191行:FindBeginOfStatement + FindEndOfStatement:找到这一行ABAP语句的起始和结束位置。
  • 193行:synchronous syntactical analysis started - 开始同步模式的语法分析
  • 195行:调用C++实现的编译器方法m_parser->run, 来完成ABAP语句的语法解析,总共花了89微秒。
  • 196行:分析结束。
  • 197行:根据编译器的分析结果,调用ISyncStyleCache::SetStylesSync进行对应元素的语法高亮显示。

技术图片

从trace文件不难看出,这个ABAP语句语法分析和语法高亮渲染的同步过程会逐行处理语句,大家平时几乎感觉不到任何时延,是因为编辑的ABAP代码行数较少。

技术图片

当Jerry在本地编辑ABAP git这个开源项目时,因为report源代码有将近五万行,所以当修改完代码激活之后,会感觉到长达好几秒钟的时延,在这几秒钟内,SAPGUI里的C++实现的编译器在忙碌地进行ABAP语句解析和语法高亮的工作。 在这些工作未完成之间,ABAP编辑器里将不会有语法高亮效果显示:?

技术图片

如果不考虑cache的情况,在Jerry手上用的Thinkpad P50电脑上,假设按每行解析花费89微秒来计算,ABAP Git的语法高亮大概会消耗4秒钟的时间。

技术图片
技术图片

说完了SAPGUI,再来看看其他ABAP开发环境。虽然SAP WebIDE还不能做ABAP开发,但是在S/4HANA里,我们也能在浏览器里用ABAP编写Custom Logic了,并且支持语法高亮。

技术图片

你也许会问,ABAP的语法高亮是如何在浏览器里显示的?自己动手,丰衣足食。

下面跟Jerry一起来通过调试的方式,自己找到问题的答案。

(1) 在浏览器里敲个ABAP的关键字,比如data。发现被高亮显示了。通过Chrome开发工具发现高亮是通过一个叫ace_keyword的css类实现的。

技术图片

在Chrome开发工具里以关键字".ace_keyword"搜索: 发现这个css类是硬编码在theme-sap-cumulus.js里的。

技术图片

(2) 现在需要找到浏览器里进行ABAP代码编辑的编辑器的实现。在Chrome开发工具里Network tab里输入“.xml”作为过滤条件,于是找到编辑器的Fiori实现: Editor.view.xml

具体的编辑器是实现在命名空间reuse的ABAPWrapper标签里。

技术图片

根据这个命名空间找到实现ABAP编辑器的UI5应用,如下图: nw_aps_ext_lib.

技术图片
技术图片

打开ABAPWrapper-dbg.js, 在第68行设置断点。这个函数负责从ABAP后台取PAD文件,该文件和语法高亮有关。

技术图片

刷新ABAP编辑器页面,断点触发,在调试器里观察PAD文件的内容:

技术图片

所有的ABAP关键字都列在该PAD文件里,这样UI5就知道编辑器里哪些字符串应该做高亮显示。

技术图片
技术图片

(3) 最后一个问题就是,比如当我敲了一个ABAP关键字"new"之后,UI5应用具体哪行代码将对应的css类加到这个字符串对应的DOM节点上?

如下图,一旦我敲了一个字符w之后,字符串new作为一个关键字需要被高亮:

技术图片

具体逻辑如下图:一旦敲入字符"w"后,onInput作为事件处理函数触发:

技术图片
函数$renderLine负责生成对应的html源代码。输入字符"new"被传入函数getLineTokens来计算该字符串是关键字还是普通变量。

技术图片

在文件AceRndTokenizer.js里, ABAP解析器按照我们期望的将“new”解析成关键字,因为解析器拥有PAD文件的引用,因此它知道哪些字符串是关键字,哪些是普通变量。

技术图片

(4) DOM节点的源代码在此处生成,"ace"和“keyword"做连接操作,生成最后我们在Chrome开发工具里看到的完整css类ace_keyword.

技术图片

谜底就这样揭晓了。

至于其他工具,比如Visual Studio Code,Sublime Text之类,严格意义上讲不能算作ABAP的开发环境,只能看成是ABAP代码的查看工具,其ABAP语法高亮的实现,咱们下次再聊,感谢阅读。

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

以上是关于ABAP开发环境语法高亮的那些事儿的主要内容,如果未能解决你的问题,请参考以下文章

开发那些事儿:前端开发环境报错“[vuex]unknown action type”如何解决?

开发那些事儿:前端开发环境sockjs-node报错跨域问题,该如何解决?

android环境搭建中的那些事儿

rocketmq那些事儿之集群环境搭建

关于开发入门的那些事儿2

sublime +react+es6开发环境