Générer et exécuter du code

Votre application peut générer du code à tout moment. Par exemple, il peut générer du code lorsque l'utilisateur final clique sur un bouton ou chaque fois qu'il apporte une modification.

Pour en savoir plus sur la génération de code, consultez Génération de code.

Importer un générateur de codes de langue

Pour générer du code, vous avez besoin d'un générateur de code de langue. Vous pouvez importer des générateurs de code de langage à 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';

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

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>

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

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>

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

Générer du code

Pour générer du code, utilisez la fonction workspaceToCode du générateur.

const code = javascriptGenerator.workspaceToCode(workspace);

Mises à jour continues

Les mises à jour continues vous permettent d'afficher ou d'exécuter le code chaque fois que l'utilisateur apporte une modification. La génération de code est une opération rapide. Par conséquent, elle 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);

Ajouter un code de préambule ou postscript

Une fois le code généré, vous pouvez éventuellement inclure du code avant le début ou après la fin du code généré.

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;

Le code de 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 afin de lancer le comportement à la fin du code.

Si le code généré est exécutable tel quel, il n'est pas nécessaire d'inclure de préambule ni de postscript.

Exécuter du code

Une fois le code généré, vous devez trouver un moyen de l'exécuter. La manière de l'exécuter est très spécifique à l'application et n'entre pas dans le champ d'application de Blockly.

Si vous souhaitez exécuter du code JavaScript, consultez Générer et exécuter du code JavaScript. Cet article présente certaines fonctionnalités spéciales du générateur de code JavaScript, ainsi que JSInterpreter, que l'équipe Blockly recommande pour exécuter JavaScript de manière sécurisée.

D'autres langues nécessitent d'autres outils.