ABAP的語法高亮是如何在瀏覽器裡顯示的
這篇文章的原文我發表在SAP官方社群上:https://blogs.sap.com/2018/03/09/how-abap-syntax-highlight-is-implemented-in-webide-launched-via-browser/
在S/4HANA裡,我們現在能在瀏覽器裡寫ABAP了,並且支援語法高亮。
你也許會問,ABAP的語法高亮是如何在瀏覽器裡顯示的?下面跟我一起來通過除錯的方式自己找到問題的答案。
(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.
謎底就這樣揭曉了。
要獲取更多Jerry的原創技術文章,請關注公眾號"汪子熙"或者掃描下面二維碼:
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/24475491/viewspace-2151954/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- FLASH PLAYER 谷歌瀏覽器瀏覽網站無法正常顯示的問題谷歌瀏覽器網站
- 在ABAP Webdynpro裡顯示PDF的一種辦法Web
- ABAP Development Tools的語法高亮實現原理dev
- 如何在 SAPGUI 裡顯示上傳到 ABAP 伺服器的 PDF 檔案試讀版GUI伺服器
- ABAP開發環境語法高亮的那些事兒開發環境
- IE瀏覽器不能自動顯示PDF檔案的解決辦法瀏覽器
- chrome瀏覽器不能顯示本地圖片辦法解決(圖片預覽)Chrome瀏覽器地圖
- chrome瀏覽器-Toolbar工具條不顯示Chrome瀏覽器
- linux vim顯示行號、語法高亮、自動縮排的設定Linux
- 如何在瀏覽器裡執行 SAPGUI 的事務試讀版瀏覽器GUI
- ABAP 740裡的新語法 - LET表示式
- Web瀏覽器裡的那些事Web瀏覽器
- 瀏覽器模擬顯示器不同解析度瀏覽器
- JavaScript瀏覽器歷史的語法小問題JavaScript瀏覽器
- 為什麼vue列印的物件在瀏覽器中顯示...Vue物件瀏覽器
- 谷歌瀏覽器控制檯顯示shadow DOM谷歌瀏覽器
- 小技巧:瀏覽器裡顯示成星號的密碼,忘記了該怎麼辦?瀏覽器密碼
- 瀏覽器更新HTTP伺服器圖片並顯示瀏覽器HTTP伺服器
- 瀏覽器是如何渲染網頁的《學如逆水行舟,不進則退》瀏覽器網頁
- ANTLR:在瀏覽器中玩語法解析瀏覽器
- 從瀏覽器位址列到顯示頁面的步驟瀏覽器
- 設定vim C/C++語法高亮顯示和自動縮排C++
- 在瀏覽器裡使用SAPGUI裡的SE80瀏覽器GUI
- 如何在瀏覽器端加密瀏覽器加密
- Win10系統搜狗瀏覽器無法顯示圖片如何解決Win10瀏覽器
- 谷歌瀏覽器翻譯在哪裡開啟 谷歌瀏覽器的線上翻譯在哪裡設定谷歌瀏覽器
- Linux系統裡讓vim支援markdown格式的語法高亮Linux
- win10瀏覽器上沒有主頁圖示怎麼找回_win10瀏覽器主頁圖示如何顯示Win10瀏覽器
- 如何讓瀏覽器支援 import 和export語法瀏覽器ImportExport
- 設定vimrc檔案例如:顯示行號,語法高亮,自動縮排
- webkit核心瀏覽器的CSS寫法WebKit瀏覽器CSS
- ES和kibana docker啟動成功後瀏覽器卻顯示無法訪問Docker瀏覽器
- 在瀏覽器裡使用SAPGUI瀏覽器GUI
- edge是什麼瀏覽器 microsoft edge是ie瀏覽器嗎瀏覽器ROS
- ultraedit高亮顯示pl/sqlSQL
- 基於Chromium的瀏覽器已上線通用“顯示密碼”按鈕瀏覽器密碼
- 瀏覽器是如何解析html的?瀏覽器HTML
- webRTC——瀏覽器裡的音視訊通話Web瀏覽器