Chinaunix首页 | 论坛 | 博客
  • 博客访问: 1475547
  • 博文数量: 931
  • 博客积分: 10
  • 博客等级: 民兵
  • 技术积分: 10198
  • 用 户 组: 普通用户
  • 注册时间: 2011-07-08 12:28
个人简介

测试

文章分类

全部博文(931)

文章存档

2020年(134)

2019年(792)

2018年(5)

我的朋友

分类: 架构设计与优化

2019-12-02 15:42:27

关于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\AppData\Local\SAP\SAP GUI\Traces\sapfewdll_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"后,onIn put作为事件处理函数触发:

函数$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的原创文章,请关注公众号"汪子熙":

阅读(1032) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~