網絡上的ANTLR：為什么？

我開始在MS-DOS上編寫我的第一個程序。 因此，我非常習慣在計算機上安裝工具。 但是在2016年，網絡無處不在，因此那里也可能需要我們的語言。

可能的情況：

• ANTLR 也在網絡上：
  • 用戶可能還希望從網絡訪問DSL編寫的較小更改文件，并可能對其進行細微更改，同時繼續使用胖客戶端執行復雜任務。
• ANTLR 僅在網絡上：
  • 您正在與不愿安裝IDE的領域專家打交道，因此他們更喜歡使用一些Web應用程序編寫DSL程序。

在第一種情況下，您可以使用Java目標和 Javascript目標來生成ANTLR解析器，而在第二種情況下，您可以僅以JavaScript為目標

一個簡單的例子：待辦事項清單

在此示例中，我們將使用的DSL非常簡單：它將表示一個待辦事項列表，其中每個待辦事項都包含在單獨的行中，并以星號開頭。

有效輸入的示例：

* do this * do that* do something else after an empty line

這是我們的語法：

grammar todo;elements: (element|emptyLine)* EOF;element: '*' ( ' ' | '\t' )* CONTENT NL+;emptyLine: NL;NL: '\r' | '\n' ;CONTENT: [a-zA-Z0-9_][a-zA-Z0-9_ \t]*;

使用ANTLR Javascript目標

您將需要安裝ANTLR工具來為我們的解析器生成Javascript代碼。 您可以使用簡單的Gradle腳本來代替手動下載ANTLR及其依賴項。 更新所使用的ANTLR版本也非常簡單。

apply plugin: 'java'repositories {jcenter() }dependencies {runtime 'org.antlr:antlr4:4.5.2' }task generateParser(type:JavaExec) {main = 'org.antlr.v4.Tool'classpath = sourceSets.main.runtimeClasspathargs = ['-Dlanguage=JavaScript', 'todo.g4', '-o', 'static/generated-parser'] }

您現在可以通過運行以下命令來生成解析器：

gradle generateParser

好的，這很簡單。

調用解析器

不幸的是，僅打開本地文件時，我們使用的JS庫無法正常工作：這意味著對于我們的小示例，我們也需要使用HTTP。 我們的Web服務器只需要提供大量靜態文件即可。 為此，我選擇在flask中編寫一個超級簡單的應用程序。 提供靜態文件的替代方案有數百萬種，因此請選擇您喜歡的一種。 我不會在這里詳細說明如何通過flask提供靜態文件，但是GitHub上提供了代碼，如果您對此有疑問，可以在此帖子中添加評論以告知我。

我們的靜態文件將包括：

• 通過運行gradle generateParser得到的生成的解析器
• Antlr4 JS運行時
• JS庫require.js
• HTML和CSS

您可以從此處獲取Antlr4 JS運行時。 為了避免必須手動導入數十個文件，我們將使用require.js。 您可以從此處獲取我們需要的口味或require.js。

我們將添加一個文本區域和一個按鈕。 當用戶單擊按鈕時，我們將解析文本區域的內容。 簡單吧？

這是此設計杰作HTML代碼：

<div id="inputs"> <textarea id="code"> * play with antlr4 * write a tutorial </textarea> <br/> <button id="parse">Parse</button> </div>

首先，導入require.js：

<script type="text/javascript" src="lib/require.js"></script>

順便說一句，我們沒有使用jQuery，我知道這可能令人震驚。

好，現在我們必須調用解析器

<script type="text/javascript"> var antlr4 = require('antlr4/index'); var TodoLexer = require('generated-parser/todoLexer'); var TodoParser = require('generated-parser/todoParser'); document.getElementById("parse").addEventListener("click", function(){var input = document.getElementById("code").value;var chars = new antlr4.InputStream(input);var lexer = new TodoLexer.todoLexer(chars);var tokens = new antlr4.CommonTokenStream(lexer);var parser = new TodoParser.todoParser(tokens);parser.buildParseTrees = true;var tree = parser.elements();console.log("Parsed: "+ tree); }); </script>

太好了，現在我們的代碼已解析，但是我們不對其執行任何操作。 當然，我們可以在瀏覽器中啟動開發者控制臺，并打印有關樹的一些信息，以驗證樹是否正常工作并熟悉ANTLR返回的樹的結構。

顯示結果

如果我們正在構建某種TODO應用程序，我們可能希望以某種方式表示用戶通過DSL插入的信息。

讓我們得到這樣的東西：

為此，我們基本上需要添加函數updateTree來導航由ANTLR返回的樹，并構建一些DOM節點來表示其內容

<script type="text/javascript"> var updateTree = function(tree, ruleNames) {var container = document.getElementById("tree");while (container.hasChildNodes()) {container.removeChild(container.lastChild);}for (var i = 0; i < tree.children.length; i++) {var child = tree.children[i];var nodeType = ruleNames[child.ruleIndex];if (nodeType == "element") {var newElement = document.createElement("div");newElement.className = "todoElement";var newElementText = document.createTextNode(child.children[2].getText());newElement.appendChild(newElementText);container.appendChild(newElement);}} };var antlr4 = require('antlr4/index'); var TodoLexer = require('generated-parser/todoLexer'); var TodoParser = require('generated-parser/todoParser'); document.getElementById("parse").addEventListener("click", function(){var input = document.getElementById("code").value;var chars = new antlr4.InputStream(input);var lexer = new TodoLexer.todoLexer(chars);var tokens = new antlr4.CommonTokenStream(lexer);var parser = new TodoParser.todoParser(tokens);parser.buildParseTrees = true;var tree = parser.elements();console.log("Parsed: "+ tree);updateTree(tree, parser.ruleNames); }); </script>

干得好！

碼

如果這不是您第一次閱讀此博客，則可能會懷疑某些代碼即將到來。 和往常一樣，代碼在GitHub上： https ： //github.com/ftomassetti/antlr-web-example

下一步

下一步是執行錯誤處理：我們要捕獲錯誤并將其指向用戶。 然后，我們可能想通過使用ACE來添加語法突出顯示。 這似乎是一個很好的起點：

• https://github.com/antlr/antlr4/blob/master/doc/ace-javascript-target.md

我真的認為簡單的文本DSL可以幫助使多個應用程序更加強大。 但是，在網絡上創建良好的編輯體驗并非易事。 我想花更多時間玩這個。

翻譯自: https://www.javacodegeeks.com/2016/05/antlr-web-simple-example.html

總結

以上是生活随笔為你收集整理的ANTLR和网络：一个简单的例子的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。