Generare ed eseguire codice

La tua applicazione può generare codice in qualsiasi momento. Ad esempio, potrebbe generare codice quando l'utente finale fa clic su un pulsante o ogni volta che l'utente apporta una modifica.

Per una panoramica della generazione di codice, consulta la sezione Generazione di codice.

Importare un generatore di codici di lingua

Per generare il codice, hai bisogno di un generatore di codici di lingua. Puoi importare i generatori di codici di lingua con 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';

// 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

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>

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

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>

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

Genera codice

Per generare il codice, utilizza la funzione workspaceToCode del generatore.

const code = javascriptGenerator.workspaceToCode(workspace);

Aggiornamenti continui

Gli aggiornamenti continui ti consentono di mostrare o eseguire il codice ogni volta che l'utente apporta una modifica. La generazione del codice è un'operazione rapida, quindi l'impatto sulle prestazioni è minimo. Questa operazione viene eseguita utilizzando 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);

Aggiungere il codice del preambolo o del postscript

Dopo aver generato il codice, puoi includere facoltativamente codice prima dell'inizio o dopo la fine del codice generato.

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;

Il codice del preambolo viene solitamente utilizzato per includere definizioni esterne all'inizio del codice. Il codice PostScript viene in genere utilizzato per chiamare funzioni per avviare il comportamento alla fine del codice.

Se il codice generato è eseguibile così com'è, non è necessario includere un preambolo o un postscript.

Esegui codice

Dopo aver generato il codice, devi capire come eseguirlo. Decidere come eseguirlo è molto specifico per l'applicazione e non rientra nell'ambito di Blockly.

Se vuoi eseguire codice JavaScript, consulta Generare ed eseguire JavaScript. In questa sezione vengono illustrate alcune funzionalità speciali del generatore di codice JavaScript, nonché JSInterpreter, che il team di Blockly consiglia come modo per eseguire JavaScript in modo sicuro.

Per le altre lingue sono necessari altri strumenti.