Generowanie kodu

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

Generowanie kodu jest niezwykle ważne, ponieważ umożliwia blokom wykonywać działania, np. oceniać wyrażenia arytmetyczne, przesuwać znak przez labirynt albo utwórz sklep internetowy.

Nie możesz „biegać” i blokady. Zamiast tego musisz wygenerować ciągi tekstowe, jak je zrealizować.

Generatory kodu

Aby wygenerować kod, musisz wybrać język tekstowy, który chcesz co możesz wygenerować.

Generator kodu to klasa, która obsługuje reguły generowania kodu, które są charakterystyczne dla danego języka, ale nie dotyczą jego konkretnych blokad. Dla: obsługuje na przykład formatowanie komentarzy, dodawanie wcięć cudzysłowy.

// 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
• Rzutki 2
• PHP 7

Generatory możesz importować i używać ich, korzystając z jednej z poniższych 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 dołączeniu 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.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 dołączeniu 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.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 utwórz też generator niestandardowego kodu.

Generatory kodu blokowego

Druga część tworzenia kodu to określenie, które fragmenty kodu mają być blokowane co możesz wygenerować. Trzeba to zrobić w przypadku każdego bloku i języka, 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:

• Blokady z danymi wyjściowymi
• Blokady bez danych wyjściowych

Wymagają one jednak zbierania wartości z pól, zbieraj wewnętrzne bloki” , a następnie łącząc tych strun.

Generacja

Wygenerowanie można przeprowadzić, gdy użytkownik o to poprosi (na przykład kliknięcie przycisku) lub w trybie ciągłym.

Ciągłe aktualizacje umożliwiają wyświetlanie lub uruchamianie kodu za każdym razem, gdy użytkownik . Generowanie kodu to szybka operacja, więc nie ma zbyt wielu możliwości wpływ na to, jak się to robi. Służy 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);

Preambuła lub kod pocztowy

Po wygenerowaniu kodu możesz dołączyć (opcjonalnie) wprowadzenie lub 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`;

W kodzie wstępu zwykle na początku dołączane są zewnętrzne definicje kodu. Kod PostScript jest zwykle używany do wywoływania funkcji inicjujących na końcu kodu.

Jeśli wygenerowany kod można uruchomić w takim stanie, w jakim jest, nie musisz dodawać linku wstęp czy postscript.

Wykonanie

Po wygenerowaniu kodu musisz się zastanowić, jak go wykonać. Decyzja o tym, jak ją wdrożyć, zależy od konkretnej aplikacji i poza nią. z Blockly.

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