Code-Generatoren

Bei den meisten Anwendungen von Blockly muss das Programm des Nutzers in eine Programmiersprache übersetzt werden. Diese Aktion wird clientseitig von Blockly ausgeführt.

Code wird generiert

Fügen Sie zuerst den Generator für die betreffende Sprache hinzu. Blockly enthält die folgenden Generatoren:

• JavaScript
• Python
• PHP
• Lua
• Dart

Sie können die Generatoren mit einer der folgenden Methoden importieren und verwenden.

Module

import {javascriptGenerator} from 'blockly/javascript';
import {pythonGenerator} from 'blockly/python';
import {phpGenerator} from 'blockly/php';
import {luaGenerator} from 'blockly/lua';
import {dartGenerator} from 'blockly/dart';

const jsCode = javascriptGenerator.workspaceToCode(workspace);
const pythonCode = pythonGenerator.workspaceToCode(workspace);
const phpCode = phpGenerator.workspaceToCode(workspace);
const luaCode = luaGenerator.workspaceToCode(workspace);
const dartCode = dartGenerator.workspaceToCode(workspace);

Entpacken

Nach der Einbindung von Blockly musst du den Generator hinzufügen.

<script src="https://unpkg.com/blockly"></script>
<script src="https://unpkg.com/blockly/javascript_compressed"></script>
<script src="https://unpkg.com/blockly/python_compressed"></script>
<script src="https://unpkg.com/blockly/php_compressed"></script>
<script src="https://unpkg.com/blockly/lua_compressed"></script>
<script src="https://unpkg.com/blockly/dart_compressed"></script>

const jsCode = javascript.workspaceToCode(workspace);
const pythonCode = python.workspaceToCode(workspace);
const phpCode = php.workspaceToCode(workspace);
const luaCode = luna.workspaceToCode(workspace);
const dartCode = dart.workspaceToCode(workspace);

Lokale Skripts

Nach der Einbindung von Blockly musst du den Generator hinzufügen.

<script src="blockly_compressed.js"></script>
<script src="javascript_compressed.js"></script>
<script src="python_compressed.js"></script>
<script src="php_compressed.js"></script>
<script src="lua_compressed.js"></script>
<script src="dart_compressed.js"></script>

const jsCode = javascript.workspaceToCode(workspace);
const pythonCode = python.workspaceToCode(workspace);
const phpCode = php.workspaceToCode(workspace);
const luaCode = lua.workspaceToCode(workspace);
const dartCode = dart.workspaceToCode(workspace);

Echtzeiterstellung

Das Generieren von Code ist ein extrem schneller Vorgang, sodass ein häufiges Aufrufen dieser Funktion nicht schadet. Eine gängige Strategie besteht darin, Code in Echtzeit zu generieren und anzuzeigen, indem Sie dem Änderungsereignis von Blockly einen Listener hinzufügen:

import {javascriptGenerator} from 'blockly/javascript';
function updateCode(event) {
  const code = javascriptGenerator.workspaceToCode(workspace);
  document.getElementById('textarea').value = code;
}
workspace.addChangeListener(updateCode);

Weitere Informationen finden Sie unter Ereignisse.