Legacy Blockly Developer Tools

Legacy Blockly Developer Tools یک ابزار توسعه‌دهنده مبتنی بر وب است که بخش‌هایی از فرآیند پیکربندی Blockly، از جمله ایجاد بلوک‌های سفارشی، ساخت جعبه ابزار شما و پیکربندی فضای کاری Blockly را خودکار می‌کند.

فرآیند توسعه دهنده Blockly با استفاده از ابزار شامل سه بخش است:

  • بلوک های سفارشی را با استفاده از Block Factory و Block Exporter ایجاد کنید.
  • با استفاده از Workspace Factory یک جعبه ابزار و فضای کاری پیش فرض بسازید.
  • فضای کاری خود را با استفاده از Workspace Factory (در حال حاضر یک ویژگی فقط وب) پیکربندی کنید.

Block Factory Tab

تب Block Factory به شما کمک می کند تا تعریف بلوک و تولید کننده کد بلوک برای بلوک های سفارشی ایجاد کنید. در این برگه می توانید به راحتی بلوک های سفارشی را ایجاد، اصلاح و ذخیره کنید.

تعریف بلوک

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

مدیریت کتابخانه

بلوک ها با نام خود ارجاع داده می شوند، بنابراین هر بلوکی که می خواهید ایجاد کنید باید یک نام منحصر به فرد داشته باشد. UI این را اعمال می کند و هنگامی که یک بلوک جدید را ذخیره می کنید یا یک بلوک موجود را "به روز می کنید" روشن می کند.

تب Block Factory با دکمه های ذخیره و حذف که شامل بلوک می شود نامتب Block Factory با Update و دکمه های حذف که شامل بلوک هستند نام

می‌توانید بین بلوک‌هایی که قبلاً ذخیره کرده‌اید جابه‌جا شوید یا با کلیک کردن روی دکمه کتابخانه، یک بلوک خالی جدید ایجاد کنید. تغییر نام یک بلوک موجود راه دیگری برای ایجاد سریع بلوک های متعدد با تعاریف مشابه است.

فهرست کشویی Block Library با چهار ورودی: "Create New Block" و نام‌های آن سه بلوک قبلا ایجاد شده است.

صادرات و واردات یک کتابخانه

بلوک ها در حافظه محلی مرورگر ذخیره می شوند. پاک کردن حافظه محلی مرورگر، بلوک های شما را حذف می کند. برای ذخیره بلوک های خود به طور نامحدود، باید کتابخانه خود را دانلود کنید. کتابخانه بلوک شما به‌عنوان یک فایل XML دانلود می‌شود که می‌توان آن را وارد کرد تا کتابخانه بلوک شما را به وضعیتی که هنگام دانلود فایل بود تنظیم کنید. توجه داشته باشید که وارد کردن یک Block Library جایگزین کتابخانه فعلی شما می شود، بنابراین ممکن است بخواهید ابتدا آن را صادر کنید.

ویژگی های واردات و صادرات نیز روش توصیه شده برای نگهداری و اشتراک گذاری مجموعه های مختلف بلوک های سفارشی است.

The Clear Library، Import Block Library و Download Block Library دکمه ها

برگه صادرکننده مسدود کنید

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

هر بلوک ذخیره شده در کتابخانه بلوک شما در انتخابگر بلوک نشان داده می شود. روی بلوک to کلیک کنید تا آن را برای صادرات انتخاب کرده یا از حالت انتخاب خارج کنید. اگر می خواهید تمام بلوک های موجود در کتابخانه خود را انتخاب کنید، از گزینه "انتخاب" → "همه ذخیره شده در کتابخانه بلوک" استفاده کنید. اگر جعبه ابزار خود را ساخته‌اید یا فضای کاری خود را با استفاده از برگه Workspace Factory پیکربندی کرده‌اید، می‌توانید همه بلوک‌هایی را که استفاده کرده‌اید با کلیک کردن روی "انتخاب" → "همه موارد استفاده در کارخانه فضای کاری" انتخاب کنید.

ناحیه Block Selector تب Block Exporter. این یک دکمه انتخاب دارد تمام بلوک‌های موجود در کتابخانه بلوک را انتخاب کنید یا همه بلوک‌های مورد استفاده در را انتخاب کنید Workspace Factory، یک دکمه Clear Selected، و لیستی از بلوک هایی که می توانند باشند به صورت جداگانه انتخاب شده است.

تنظیمات صادرات به شما این امکان را می‌دهد که انتخاب کنید کدام زبان تولید شده را هدف قرار دهید و آیا می‌خواهید تعاریف، خرد مولد یا هر دو را برای بلوک‌های انتخابی بخواهید. هنگامی که این موارد را انتخاب کردید، برای دانلود فایل های خود، روی "صادر کردن" کلیک کنید.

کل برگه Block Exporter. این یک منطقه انتخابگر بلوک، یک صادرات دارد منطقه تنظیمات و پیش‌نمایش صادرات منطقه

برگه Workspace Factory

Workspace Factory پیکربندی جعبه ابزار و مجموعه پیش‌فرض بلوک‌ها در یک فضای کاری را آسان می‌کند. می‌توانید با دکمه‌های «جعبه ابزار» و «فضای کاری» بین ویرایش جعبه ابزار و فضای کاری شروع تغییر کنید.

دکمه های Toolbox و Workspace.

ساخت جعبه ابزار

این تب به ساخت XML برای جعبه ابزار کمک می کند. فرض این مطلب آشنایی با ویژگی های جعبه ابزار است. اگر قبلاً XML برای جعبه ابزاری دارید که می‌خواهید در اینجا ویرایش کنید، می‌توانید آن را با کلیک کردن روی «بارگیری برای ویرایش» بارگیری کنید.

جعبه ابزار بدون دسته بندی

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

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

جعبه ابزار با دسته ها

اگر می‌خواهید بلوک‌های نمایش در دسته‌ها را داشته باشید، روی دکمه «+» کلیک کنید و مورد کشویی را برای دسته جدید انتخاب کنید. با این کار یک دسته به لیست دسته بندی شما اضافه می شود که می توانید آن را انتخاب و ویرایش کنید. برای افزودن یک دسته بندی استاندارد Blockly (منطق، حلقه ها، و غیره) "Standard Category" را انتخاب کنید، یا "Standard Toolbox" را برای افزودن همه دسته های استاندارد Blockly انتخاب کنید. از دکمه های جهت دار برای مرتب کردن مجدد دسته ها استفاده کنید.

ناحیه دسته ها در برگه Workspace Factory. این لیست فعلی را نشان می دهد دسته ها و دکمه هایی برای افزودن و حذف دسته ها و حرکت آنها به بالا و پایین در لیست دکمه + برای افزودن a انتخاب شده است دسته بندی

برای تغییر نام یا رنگ دسته انتخابی از منوی کشویی "ویرایش دسته" استفاده کنید. کشیدن یک بلوک به فضای کاری آن را به دسته انتخابی اضافه می کند.

کشویی Edit Category با فیلدهایی برای تغییر نام یک دسته و رنگ

بلوک های پیشرفته

به طور پیش فرض، می توانید هر یک از بلوک های استاندارد یا هر بلوک موجود در کتابخانه خود را به جعبه ابزار اضافه کنید. اگر بلوک‌های تعریف‌شده در JSON دارید که در کتابخانه شما نیستند، می‌توانید با استفاده از دکمه «وارد کردن بلوک‌های سفارشی» آن‌ها را وارد کنید.

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

اگر یک متغیر یا بلوک تابع را در جعبه ابزار خود قرار می دهید، یک دسته "متغیرها" یا "توابع" را در جعبه ابزار خود بگنجانید تا کاربران بتوانند به طور کامل از بلوک استفاده کنند. درباره دسته‌های «متغیرها» یا «توابع» بیشتر بیاموزید.

پیکربندی یک فضای کاری

برای پیکربندی قسمت‌های مختلف فضای کاری خود، به برگه «Workspace Factory» بروید و «Workspace» را انتخاب کنید.

گزینه های Workspace را انتخاب کنید

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

تب Workspace Factory با دکمه Workspace انتخاب شده است. دسته ها منطقه با لیستی از گزینه های فضای کاری برای انتخاب جایگزین شده است از.

بلوک های از پیش بارگذاری شده را به فضای کاری اضافه کنید

این اختیاری است اما اگر می‌خواهید مجموعه‌ای از بلوک‌ها را در فضای کاری نمایش دهید ممکن است ضروری باشد:

  • هنگامی که برنامه بارگذاری می شود.
  • هنگامی که یک رویداد (پیشبرد یک سطح، کلیک کردن روی دکمه راهنما و غیره) فعال می شود.

بلوک ها را به فضای ویرایش بکشید تا آنها را در فضای کاری خود در پیش نمایش ببینید. می‌توانید گروه‌های بلوک ایجاد کنید، بلوک‌ها را غیرفعال کنید، و وقتی بلوک‌های خاصی را انتخاب می‌کنید، بلوک‌های سایه را ایجاد کنید.

تب Workspace Factory با دکمه Workspace انتخاب شده است. بلوک بوده است به فضای کاری ویرایشگر Blockly در سمت چپ کشیده می شود. اینها به صورت نشان داده شده اند بلوک های از پیش بارگذاری شده در فضای کاری ویرایشگر Blockly در درست است.

می توانید این بلوک ها را به صورت XML صادر کنید (به زیر مراجعه کنید). بلافاصله پس از ایجاد فضای کاری خود، آنها را با Blockly.Xml.domToWorkspace به فضای کاری خود اضافه کنید:

var xmlText = '<xml xmlns="https://developers.google.com/blockly/xml">' +
    '<block type="math_number"></block></xml>';
Blockly.Xml.domToWorkspace(Blockly.utils.xml.textToDom(xmlText), workspace);

این کد نمونه یک بلوک math_number را به فضای کاری اضافه می کند.

صادرات

Workspace Factory گزینه های صادراتی زیر را در اختیار شما قرار می دهد:

کشویی Export در بالای برگه Workspace Factory، با گزینه هایی برای کد شروع، جعبه ابزار، بلوک های فضای کاری از پیش بارگذاری شده یا همه موارد را صادر کنید اینها

  • کد شروع: html شروع و جاوا اسکریپت را برای تزریق فضای کاری Blockly سفارشی شما تولید می کند.
  • جعبه ابزار: XML را برای تعیین جعبه ابزار شما تولید می کند.
  • بلوک های فضای کاری: XML را تولید می کند که می تواند در یک فضای کاری بارگذاری شود.