Generatory kodu

Większość aplikacji Blockly wymaga tłumaczenia programu użytkownika na język programowania. To działanie jest wykonywane po stronie klienta przez Blockly.

Generowanie kodu

Pierwszym krokiem jest dołączenie generatora dla żądanego języka. Blockly obejmuje te generatory:

  • JavaScript
  • Python
  • PHP
  • Lua
  • Dart

Możesz zaimportować generatory i używać ich, korzystając z jednej z tych metod.

Moduły

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

Unpkg

Po dodaniu Blockly musisz dodać generator.

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

Skrypty lokalne

Po dodaniu Blockly musisz dodać generator.

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

Generowanie w czasie rzeczywistym

Generowanie kodu to bardzo szybka operacja, więc częste wywoływanie tej funkcji nie sprawia problemów. Typową strategią jest generowanie i wyświetlanie kodu w czasie rzeczywistym przez dodanie detektora do zdarzenia zmiany Blockly:

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

Więcej informacji znajdziesz w artykule Zdarzenia.