La generazione di codice è il processo di trasformazione dei blocchi su un'area di lavoro in una stringa di codice eseguibile.
La generazione del codice è estremamente importante perché consente ai blocchi di svolgere attività, ad esempio valutare espressioni aritmetiche, spostare un personaggio in un labirinto o configurare un negozio online.
Non puoi "eseguire" i blocchi direttamente. Generi le stringhe di codice e le esegui.
Generatori di codice
Per generare il codice, devi scegliere quale linguaggio basato su testo vuoi generare.
Un generatore di codice è una classe che gestisce le regole per la generazione di codice specifiche per un determinato linguaggio, ma non specifiche per un singolo blocco. Ad esempio, gestisce elementi come la formattazione dei commenti, il rientro delle dichiarazioni e le stringhe di citazione.
// javascriptGenerator is a code generator that makes javascript strings.
import {javascriptGenerator} from 'blockly/javascript';
const code = javascriptGenerator.workspaceToCode(myWorkspace);
Blockly fornisce 5 generatori di codice integrati:
- JavaScript ES5
- Python 3
- Lua 5.1
- Dart 2
- PHP 7
Puoi importare e utilizzare i generatori utilizzando uno dei seguenti metodi.
Moduli
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);
Senza imballaggio
Devi includere il generatore dopo aver incluso Blockly.
<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);
Script locali
Devi includere il generatore dopo aver incluso Blockly.
<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);
Se questo elenco non include la lingua per cui vuoi generare il codice, puoi anche creare un generatore di codice personalizzato.
Generatori di codici a blocchi
La seconda parte della generazione del codice definisce il codice generato dai singoli blocchi. Questa operazione deve essere eseguita per ogni blocco, per ogni lingua che vuoi generare.
javascriptGenerator.forBlock['my_custom_block'] = function(block, generator) { /* ... */ }
Il funzionamento dei generatori di codice varia a seconda del tipo di blocco:
Tutti però richiedono di raccogliere i valori dai campi, raccogliere il codice dei blocchi interni e poi concatenare le stringhe.
Generazione
La generazione può essere eseguita quando l'utente finale la richiede (ad esempio, quando fa clic su un pulsante) oppure continuativamente.
Gli aggiornamenti continui consentono di mostrare o eseguire il codice ogni volta che l'utente apporta una modifica. La generazione del codice è rapida, quindi l'impatto sulle prestazioni è ridotto. Per eseguire questa operazione, utilizza un Listener di eventi.
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);
Codice preambolo o postscript
Dopo aver generato il codice, puoi includere (facoltativo) un codice di preambolo o preambolo all'inizio o alla fine del codice generato.
let code = javascriptGenerator.workspaceToCode(workspace);
// Add a preamble and a postscript to the code.
code = `const def = 'some value';\n${code}\nkickOffSomeFunction();\n`;
Il codice del preambolo viene solitamente utilizzato per includere definizioni esterne all'inizio del codice. Il codice PostScript viene solitamente utilizzato per chiamare funzioni per avviare il comportamento alla fine del codice.
Se il codice generato può essere eseguito così com'è, non è necessario includere un preambolo o un postscript.
Attuazione
Dopo aver generato il codice, devi capire come eseguirlo. La decisione di eseguirla è molto specifica per l'applicazione ed esula dall'ambito di Blockly.
Per il codice JavaScript, il team di Blockly consiglia di utilizzare JSInterpreter. In altre lingue sono necessari altri strumenti.