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 apporta una modifica.

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

Importa un generatore di codici di lingua

Per generare il codice, è necessario un generatore di codici lingua. Puoi importare i generatori di codice 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 di codice è un'operazione rapida, pertanto l'impatto sulle prestazioni è ridotto. Questo viene fatto 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 codice di preambolo o postscript

Dopo aver generato il codice, puoi includere facoltativamente del 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 solitamente utilizzato per chiamare funzioni per avviare il comportamento alla fine del codice.

Se il codice generato è eseguibile così com'è, non è necessario includere un preambulo o un post scriptum.

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 Genera ed esegui JavaScript. Questo articolo illustra alcune funzionalità speciali del generatore di codice JavaScript, nonché JSInterpreter, che il team di Blockly consiglia come metodo per eseguire JavaScript in sicurezza.

Per altre lingue sono necessari altri strumenti.