طراحی اپلیکیشن

هنگام طراحی برنامه ای که از Blockly استفاده می کند، چندین پارادایم وجود دارد که می توانید از بین آنها انتخاب کنید. در نظر گرفتن این انتخاب ها باید زودتر انجام شود، زیرا آنها بر بلوک های مورد نیاز کاربر تأثیر می گذارند.

پیکربندی

بسیاری از برنامه های Blockly به جای برنامه های اجرایی برای توصیف تنظیمات استفاده می شوند. برنامه های پیکربندی معمولاً با مقداردهی اولیه یک بلوک سطح ریشه در فضای کاری شروع می شوند. یک مثال خوب، تب Block Factory از ابزارهای توسعه دهنده Blockly است:

Blockly.Blocks['factory_base'] = {
  init: function() {
    this.setDeletable(false);
    this.setMovable(false);
    this.setEditable(false);
    // etc...
  }
}

Blockly.serialization.blocks.append({'type': 'factory_base'}, workspace);

این یک بلوک غیرقابل حذف و غیرقابل جابجایی ایجاد می کند که تمام تنظیمات کاربر را در خود نگه می دارد. برای تعیین پیکربندی فعلی، ممکن است فضای کاری در هر زمانی سریال شود.

چنین برنامه هایی ممکن است بخواهند به طور خودکار هر بلوکی را که به بلوک ریشه متصل نیست غیرفعال کنند. این را می توان با یک خط انجام داد:

workspace.addChangeListener(Blockly.Events.disableOrphans);

برنامه سریال

اکثر برنامه های Blockly برای ایجاد برنامه های سریال طراحی شده اند. کاربران بلوک هایی را که به ترتیب اجرا می شوند در کنار هم قرار می دهند.

هر بلوک (غیر غیرفعال) در فضای کاری بخشی از برنامه را تشکیل می دهد. اگر چندین پشته از بلوک ها وجود داشته باشد، ابتدا دسته های بالاتر اجرا می شوند. (اگر ارتفاع دو پشته تقریباً یکسان باشد، پشته های سمت چپ (راست در حالت RTL) اولویت دارند.)

فضای کاری ممکن است در هر زمان به کد اجرایی صادر شود. این کد ممکن است در سمت کلاینت در جاوا اسکریپت (با استفاده از eval یا JS Interpreter) یا سمت سرور به هر زبانی اجرا شود.

import {javascriptGenerator} from 'blockly/javascript';

var code = javascriptGenerator.workspaceToCode(workspace);

برنامه موازی

برخی از برنامه های Blockly تصمیم می گیرند که همه پشته های بلوک ها را به صورت موازی و نه سریال اجرا کنند. یک مثال می تواند یک برنامه موسیقی باشد که در آن یک حلقه درام همزمان با یک ملودی اجرا می شود.

یکی از راه‌های اجرای اجرای موازی، تولید کد برای هر بلوک به صورت جداگانه است:

import {javascriptGenerator} from 'blockly/javascript';

var json = Blockly.serialization.workspaces.save(workspace);

// Store top blocks separately, and remove them from the JSON.
var blocks = json['blocks']['blocks'];
var topBlocks = blocks.slice();  // Create shallow copy.
blocks.length = 0;

// Load each block into the workspace individually and generate code.
var allCode = [];
var headless = new Blockly.Workspace();
for (var i = 0; block < topBlocks.length; i++) {
  var block = topBlocks[i];
  blocks.push(block);
  Blockly.serialization.workspaces.load(json, headless);
  allCode.push(javascriptGenerator.workspaceToCode(headless));
  blocks.length = 0;
}

اگر زبان مقصد جاوا اسکریپت باشد، آرایه allCode ممکن است برای ایجاد چندین مفسر JS برای اجرای همزمان استفاده شود. اگر زبان مقصد چیزی شبیه پایتون باشد، آرایه allCode ممکن است در یک برنامه واحد که از یک ماژول رشته استفاده می کند، جمع شود.

مانند هر برنامه موازی، تصمیمات دقیقی باید در مورد هر گونه منابع مشترک مانند متغیرها و توابع اتخاذ شود.

برنامه رویداد محور

کنترل کننده های رویداد فقط توابعی هستند که توسط سیستم فراخوانی می شوند نه توسط برنامه. این بلوک‌ها می‌توانند پشته بلوک‌هایی را که قرار است اجرا شوند، محصور کنند یا ممکن است سرصفحه‌هایی باشند که در بالای دسته‌ای از بلوک‌ها قرار دارند.

برخی از توسعه دهندگان دوست دارند یک "کلاه" به بالای بلوک های رویداد اضافه کنند تا از سایر بلوک ها متمایز به نظر برسند. این ظاهر پیش‌فرض برای Blockly نیست، اما ممکن است با نادیده گرفتن ثابت ارائه‌دهنده ADD_START_HATS به true ( تصویرکننده‌های سفارشی کد - ثابت‌های لغو ) اضافه شود. یا با افزودن یک تم و تنظیم گزینه کلاه روی استایل بلوک. برای اطلاعات بیشتر درباره تنظیم کلاه روی بلوک‌ها به عنوان بخشی از طرح‌های زمینه، به «سبک بلوک» در مستندات مضامین مراجعه کنید.

در یک مدل رویداد محور، ممکن است منطقی باشد که یک کنترل کننده برای شروع برنامه نیز ایجاد شود. تحت این مدل، هر بلوکی در فضای کاری که به کنترل کننده رویداد متصل نباشد نادیده گرفته می شود و اجرا نمی شود.

هنگام طراحی سیستمی که از رویدادها استفاده می کند، در نظر بگیرید که آیا پشتیبانی از چندین نمونه از یک کنترل کننده رویداد ممکن است یا مطلوب.

چیدمان فضای کاری

دو راه منطقی برای چیدمان صفحه نمایش از چپ به راست وجود دارد. یک راه با نوار ابزار در سمت چپ، فضای کاری در وسط، و تجسم خروجی در سمت راست شروع می شود. این طرح توسط نسخه 1 اسکرچ و همچنین ساخته شده با کد استفاده می شود.

راه دیگر با تجسم خروجی در سمت چپ، نوار ابزار در وسط و فضای کاری در سمت راست شروع می شود. این طرح توسط نسخه 2 اسکرچ و همچنین اکثر برنامه های Blockly استفاده می شود.

در هر صورت، فضای کاری باید به اندازه صفحه نمایش در دسترس باشد - کاربران به اندازه‌ای که می‌توانند برای برنامه‌نویسی نیاز دارند. همانطور که در اسکرین شات های بالا مشاهده می شود، طرح اول در صفحه های گسترده ضعیف عمل می کند زیرا کد کاربر و تجسم خروجی از هم جدا شده اند. در حالی که طرح دوم اجازه می دهد تا فضای اضافی برای برنامه های بزرگتر وجود داشته باشد در حالی که همچنان هر سه بخش را نزدیک به هم نگه می دارد.

همچنین منطقی است که کاربران ابتدا مشکلی را که سعی در حل آن دارند در نظر بگیرند، سپس به ابزارهای ارائه شده نگاه کنند و تنها پس از آن شروع به برنامه نویسی کنند.

البته کل سفارش باید برای ترجمه های عربی و عبری تغییر داده شود.

در برخی موارد، مانند هنگام استفاده از تعداد کمی بلوک ساده، ممکن است منطقی باشد که جعبه ابزار در بالا یا پایین فضای کاری قرار گیرد. Blockly از اسکرول افقی در جعبه ابزار برای این موارد پشتیبانی می کند، اما باید با احتیاط از آن استفاده کرد.

توصیه: تجسم برنامه را در کنار نوار ابزار قرار دهید.