Code generieren und ausführen

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

Eine Übersicht zur Codegenerierung finden Sie unter Code generation.

Code-Generator importieren

Zum Generieren von Code benötigen Sie einen Code-Generator. Sie können Sprachcodegeneratoren mit einer der folgenden Methoden 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 Einbinden 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 Skripts

Sie müssen den Generator nach dem Einbinden 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 die Funktion workspaceToCode des Generators, um Code zu generieren.

const code = javascriptGenerator.workspaceToCode(workspace);

Kontinuierliche Updates

Mit kontinuierlichen Updates können Sie den Code anzeigen oder ausführen, wenn der Nutzer eine Änderung vornimmt. Das Generieren von Code ist ein schneller Vorgang, sodass die Leistung kaum beeinträchtigt wird. Dies erfolgt über einen Event-Listener.

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 Postskriptcode hinzufügen

Nachdem Sie den Code generiert haben, können Sie optional Code vor dem Beginn 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. Postskriptcode wird in der Regel verwendet, um Funktionen aufzurufen, um am Ende des Codes ein Verhalten auszulösen.

Wenn der generierte Code sofort ausgeführt werden kann, ist es nicht erforderlich, eine Präambel oder ein Postskript einzufügen.

Code ausführen

Nachdem Sie den Code generiert haben, müssen Sie herausfinden, wie Sie ihn ausführen. Die Entscheidung, wie der Code ausgeführt werden soll, ist sehr anwendungsspezifisch und liegt außerhalb des Umfangs von Blockly.

Wenn Sie JavaScript-Code ausführen möchten, lesen Sie JavaScript generieren und ausführen. Dort werden einige Besonderheiten des JavaScript-Code-Generators sowie JSInterpretererläutert, das vom Blockly-Team als Möglichkeit zur sicheren Ausführung von JavaScript empfohlen wird.

Für andere Sprachen sind andere Tools erforderlich.