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.