La génération de code consiste à transformer les blocs d'un espace de travail en une chaîne de code pouvant être exécutée.
La génération de code est extrêmement importante, car c'est elle qui permet à vos blocs d'effectuer des actions, comme évaluer des expressions arithmétiques, déplacer un personnage dans un labyrinthe ou configurer une boutique en ligne.
Vous ne pouvez pas "exécuter" des blocs directement. À la place, vous générez des chaînes de code, puis vous les exécutez.
Générateurs de code
Pour générer du code, vous devez choisir le langage textuel que vous souhaitez générer.
Un générateur de code est une classe qui gère les règles de génération de code propres à un langage donné, mais pas à un bloc individuel. Par exemple, il gère des éléments tels que la mise en forme des commentaires, la mise en retrait des instructions et l'ajout de guillemets à des chaînes.
// javascriptGenerator is a code generator that makes javascript strings.
import {javascriptGenerator} from 'blockly/javascript';
const code = javascriptGenerator.workspaceToCode(myWorkspace);
Blockly fournit cinq générateurs de code intégrés:
- JavaScript ES5
- Python 3
- Lua 5.1
- Dart 2
- PHP 7
Vous pouvez importer et utiliser les générateurs à l'aide de l'une des méthodes suivantes.
Modules
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);
Déballer
Vous devez inclure le générateur après avoir inclus 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);
Scripts locaux
Vous devez inclure le générateur après avoir inclus 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);
Si cette liste n'inclut pas le langage pour lequel vous souhaitez générer du code, vous pouvez également créer un générateur de code personnalisé.
Générateurs de code en bloc
La deuxième partie de la génération de code consiste à définir le code que chaque bloc génère. Cette opération doit être effectuée pour chaque bloc et pour chaque langage individuel que vous souhaitez générer.
javascriptGenerator.forBlock['my_custom_block'] = function(block, generator) { /* ... */ }
Le fonctionnement des générateurs de code diffère selon les types de blocs:
Cependant, ils nécessitent tous de collecter les valeurs des champs, de collecter le code des blocs internes, puis de concaténer ces chaînes.
Génération
La génération peut être effectuée lorsque l'utilisateur final la demande (par exemple, lorsqu'il clique sur un bouton) ou en continu.
Les mises à jour continues vous permettent d'afficher ou d'exécuter le code chaque fois que l'utilisateur apporte une modification. Comme la génération de code est une opération rapide, cela a peu d'impact sur les performances. Pour ce faire, utilisez un écouteur d'événements.
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);
Préambule ou code postscript
Une fois le code généré, vous pouvez y inclure un préambule ou un préambule (facultatif) au début ou à la fin.
let code = javascriptGenerator.workspaceToCode(workspace);
// Add a preamble and a postscript to the code.
code = `const def = 'some value';\n${code}\nkickOffSomeFunction();\n`;
Le code du préambule est généralement utilisé pour inclure des définitions externes au début du code. Le code Postscript est généralement utilisé pour appeler des fonctions visant à déclencher un comportement à la fin du code.
Si le code généré peut être exécuté tel quel, il n'est pas nécessaire d'inclure un préambule ou un postscript.
Exécution
Une fois le code généré, vous devez déterminer comment l'exécuter. Le choix de la manière de l'exécuter est très spécifique à l'application et sort du champ d'application de Blockly.
Pour le code JavaScript, l'équipe Blockly recommande d'utiliser JSInterpreter. D'autres langages nécessitent d'autres outils.