اکثر برنامه های Blockly نیاز دارند که برنامه کاربر به یک زبان برنامه نویسی ترجمه شود. این عمل در سمت کلاینت توسط Blockly انجام می شود.
تولید کد
اولین قدم شامل کردن مولد زبان مورد نظر است. Blockly شامل ژنراتورهای زیر است:
- جاوا اسکریپت
- پایتون
- PHP
- لوا
- دارت
با استفاده از یکی از روش های زیر می توانید ژنراتورها را وارد و استفاده کنید.
ماژول ها
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);
Unpkg
بعد از اینکه 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);
اسکریپت های محلی
بعد از اینکه 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);
نسل بیدرنگ
تولید کد یک عملیات بسیار سریع است، بنابراین تماس مکرر این تابع ضرری ندارد. یک استراتژی رایج این است که با افزودن یک شنونده به رویداد تغییر Blockly، کد را در زمان واقعی تولید و نمایش دهید:
import {javascriptGenerator} from 'blockly/javascript';
function updateCode(event) {
const code = javascriptGenerator.workspaceToCode(workspace);
document.getElementById('textarea').value = code;
}
workspace.addChangeListener(updateCode);
برای اطلاعات بیشتر به رویدادها مراجعه کنید.