Generowanie kodu

Generowanie kodu to proces przekształcania bloków w obszarze roboczym w ciąg kodu, który można wykonać.

Generowanie kodu jest niezwykle ważne, ponieważ to od niego bloki mogą wykonywać różne czynności, np. oceniać wyrażenia arytmetyczne, przesuwać postać przez labirynt czy konfigurować sklep internetowy.

Bloków nie można „uruchamiać” bezpośrednio. Zamiast tego trzeba wygenerować ciągi kodu, a potem je wykonać.

Generatory kodu

Aby wygenerować kod, musisz wybrać język tekstu, który chcesz wygenerować.

Generator kodu to klasa obsługująca reguły generowania kodu, który odnosi się do danego języka, ale nie jest przypisany do konkretnego bloku. Pozwala na przykład formatować komentarze, instrukcję wcięcia i ciągi znaków w cudzysłowie.

// javascriptGenerator is a code generator that makes javascript strings.
import {javascriptGenerator} from 'blockly/javascript';

const code = javascriptGenerator.workspaceToCode(myWorkspace);

Blockly udostępnia 5 wbudowanych generatorów kodu:

  • JavaScript ES5
  • Python 3
  • Lua 5.1
  • Rzutka 2
  • 7 PHP

Możesz zaimportować generatory i korzystać z nich w jeden z poniższych sposobów.

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

Unpaż

Po dodaniu Blockly musisz dołączyć 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.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);

Skrypty lokalne

Po dodaniu Blockly musisz dołączyć 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.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);

Jeśli lista nie zawiera języka, dla którego chcesz wygenerować kod, możesz też utworzyć generator kodu niestandardowego.

Generatory kodów blokowych

Druga część kodu to określenie, jakie elementy będą generować poszczególne bloki kodu. Należy to zrobić w przypadku poszczególnych bloków i języków, które chcesz wygenerować.

javascriptGenerator.forBlock['my_custom_block'] = function(block, generator) { /* ... */ }

Sposób działania generatorów kodu różni się w zależności od typu bloków:

Wszystkie wymagają jednak zbierania wartości z pól, zbierania kodu wewnętrznych bloków, a potem łączenia tych ciągów.

Generowanie

Generowanie może być wykonywane, gdy o to poprosi użytkownik (np. gdy kliknie przycisk) lub w sposób ciągły.

Ciągłe aktualizacje pozwalają wyświetlać lub uruchamiać kod, gdy użytkownik wprowadzi zmianę. Generowanie kodu to szybki proces, więc nie ma on większego wpływu na wydajność. Służą do tego detektor zdarzeń.

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

Wstęp lub kod postscriptowy

Po wygenerowaniu kodu możesz umieścić (opcjonalnie) wstęp lub kod na początku lub na końcu wygenerowanego kodu.

let code = javascriptGenerator.workspaceToCode(workspace);
// Add a preamble and a postscript to the code.
code = `const def = 'some value';\n${code}\nkickOffSomeFunction();\n`;

Kod wstępu służy zwykle do umieszczania zewnętrznych definicji na początku kodu. Kod PostScript jest zwykle używany do wywoływania funkcji w celu uruchomienia działania na końcu kodu.

Jeśli wygenerowany kod jest wykonywany w obecnej postaci, nie musisz dodawać wstępu ani postskryptu.

Realizacja

Po wygenerowaniu kodu musisz określić, jak go wykonać. Decyzja o tym, jak go wykonać, zależy od aplikacji i jest spoza zakresu Blockly.

W przypadku kodu JavaScript zespół Blockly zaleca użycie narzędzia JSInterpreter. Inne języki wymagają innych narzędzi.