Code generieren und ausführen

Ihre Anwendung kann jederzeit Code generieren. So kann beispielsweise Code generiert werden, wenn der Endnutzer auf eine Schaltfläche klickt oder jedes Mal, wenn er eine Änderung vornimmt.

Eine Übersicht über die Codegenerierung finden Sie unter Codegenerierung.

Sprachcodegenerator importieren

Zum Generieren von Code benötigen Sie einen Sprachcodegenerator. Sie haben folgende Möglichkeiten, Sprachcodegeneratoren zu importieren:

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';

// Generate code for all the blocks in the workspace.
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);

Unpkg

Sie müssen den Generator nach dem Einfügen von Blockly einfü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>

// Generate code for all the blocks in the workspace.
const jsCode = javascript.javascriptGenerator.workspaceToCode(workspace);
const pythonCode = python.pythonGenerator.workspaceToCode(workspace);
const phpCode = php.phpGenerator.workspaceToCode(workspace);
const luaCode = lua.luaGenerator.workspaceToCode(workspace);
const dartCode = dart.dartGenerator.workspaceToCode(workspace);

Lokale Scripts

Sie müssen den Generator nach dem Einfügen von Blockly einfü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>

// Generate code for all the blocks in the workspace.
const jsCode = javascript.javascriptGenerator.workspaceToCode(workspace);
const pythonCode = python.pythonGenerator.workspaceToCode(workspace);
const phpCode = php.phpGenerator.workspaceToCode(workspace);
const luaCode = lua.luaGenerator.workspaceToCode(workspace);
const dartCode = dart.dartGenerator.workspaceToCode(workspace);

Code generieren

Verwenden Sie zum Generieren von Code die Funktion workspaceToCode des Generators.

const code = javascriptGenerator.workspaceToCode(workspace);

Kontinuierliche Updates

Durch kontinuierliche Updates können Sie den Code jedes Mal anzeigen oder ausführen, wenn der Nutzer eine Änderung vornimmt. Das Generieren von Code ist ein schneller Vorgang, der nur geringe Auswirkungen auf die Leistung hat. Dazu wird ein Event-Listener verwendet.

const supportedEvents = new Set([
  Blockly.Events.BLOCK_CHANGE,
  Blockly.Events.BLOCK_CREATE,
  Blockly.Events.BLOCK_DELETE,
  Blockly.Events.BLOCK_MOVE,
]);

function updateCode(event) {
  if (workspace.isDragging()) return; // Don't update while changes are happening.
  if (!supportedEvents.has(event.type)) return;

  const code = javascriptGenerator.workspaceToCode(workspace);
  document.getElementById('textarea').value = code;
}

workspace.addChangeListener(updateCode);

Präambel- oder Postscript-Code hinzufügen

Nachdem Sie den Code generiert haben, können Sie optional Code vor dem Anfang oder nach dem Ende des generierten Codes einfügen.

let code = javascriptGenerator.workspaceToCode(workspace);
// Add a preamble and a postscript to the code.
const preamble = 'import {MyLibrary} from \'/path/to/my/library\';\n'
const postscript = 'MyLibrary.myKickoffFunction();\n';
code = preamble + code + postscript;

Präambelcode wird in der Regel verwendet, um externe Definitionen am Anfang des Codes einzufügen. Postscript-Code wird in der Regel verwendet, um Funktionen aufzurufen, die am Ende des Codes ausgeführt werden sollen.

Wenn der generierte Code direkt ausführbar ist, müssen Sie keine Präambel oder Postscript einfügen.

Code ausführen

Nachdem Sie den Code generiert haben, müssen Sie herausfinden, wie Sie ihn ausführen. Die Entscheidung, wie die Ausführung erfolgen soll, ist sehr anwendungsspezifisch und fällt nicht in den Zuständigkeitsbereich von Blockly.

Wenn Sie JavaScript-Code ausführen möchten, lesen Sie den Hilfeartikel JavaScript generieren und ausführen. Dort werden einige spezielle Funktionen des JavaScript-Codegenerators sowie JSInterpreter beschrieben, den das Blockly-Team zur sicheren Ausführung von JavaScript empfiehlt.

Für andere Sprachen sind andere Tools erforderlich.