Generatori di codice

La maggior parte delle applicazioni di Blockly richiede che il programma dell'utente sia tradotto in un linguaggio di programmazione. Questa azione viene eseguita sul lato client da Blockly.

Generazione del codice in corso...

Il primo passaggio consiste nell'includere il generatore per la lingua in questione. Blockly include i seguenti generatori:

  • JavaScript
  • Python
  • PHP
  • Lua
  • Dart

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.workspaceToCode(workspace);
const pythonCode = python.workspaceToCode(workspace);
const phpCode = php.workspaceToCode(workspace);
const luaCode = luna.workspaceToCode(workspace);
const dartCode = dart.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.workspaceToCode(workspace);
const pythonCode = python.workspaceToCode(workspace);
const phpCode = php.workspaceToCode(workspace);
const luaCode = lua.workspaceToCode(workspace);
const dartCode = dart.workspaceToCode(workspace);

Generazione in tempo reale

La generazione di codice è un'operazione estremamente veloce, quindi non c'è alcun danno nel chiamare spesso questa funzione. Una strategia comune consiste nel generare e visualizzare il codice in tempo reale aggiungendo un listener all'evento di modifica di Blockly:

import {javascriptGenerator} from 'blockly/javascript';
function updateCode(event) {
  const code = javascriptGenerator.workspaceToCode(workspace);
  document.getElementById('textarea').value = code;
}
workspace.addChangeListener(updateCode);

Per ulteriori informazioni, consulta la sezione Eventi.