Générateurs de code

La plupart des applications de Blockly nécessitent que le programme de l'utilisateur soit traduit dans un langage de programmation. Cette action est effectuée côté client par Blockly.

Génération du code...

La première étape consiste à inclure le générateur pour la langue en question. Blockly inclut les générateurs suivants:

• JavaScript
• Python
• PHP
• Lua
• Dart

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

Retirer

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

Génération en temps réel

La génération du code étant une opération extrêmement rapide, appeler fréquemment cette fonction ne présente aucun danger. Une stratégie courante consiste à générer et à afficher du code en temps réel en ajoutant un écouteur à l'événement de modification de Blockly:

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

Pour en savoir plus, consultez la section Événements.