Блочные инструменты разработчика

Инструменты блочного разработчика — это веб-инструмент разработчика, который автоматизирует части процесса настройки Blockly, включая создание пользовательских блоков, создание набора инструментов и настройку рабочего веб-пространства Blockly.

Процесс разработчика Blockly с использованием инструмента состоит из трех частей:

  • Создавайте собственные блоки с помощью Block Factory и Block Exporter.
  • Создайте набор инструментов и рабочее пространство по умолчанию с помощью Workspace Factory.
  • Настройте свое рабочее пространство с помощью Workspace Factory (в настоящее время функция доступна только через Интернет).

Вкладка «Фабрика блоков»

Вкладка «Фабрика блоков» помогает создавать определения блоков и генераторы блочного кода для пользовательских блоков. На этой вкладке вы можете легко создавать, изменять и сохранять пользовательские блоки.

Определение блока

В этом видео подробно рассматриваются этапы определения блока. Пользовательский интерфейс устарел, но функции блока, которые он выделяет, по-прежнему точны.

Управление библиотекой

На блоки ссылаются по их имени, поэтому каждый блок, который вы хотите создать, должен иметь уникальное имя. Пользовательский интерфейс обеспечивает это и дает понять, когда вы «сохраняете» новый блок или «обновляете» существующий блок.

Вы можете переключаться между ранее сохраненными блоками или создавать новый пустой блок, нажав кнопку «Библиотека». Изменение имени существующего блока — это еще один способ быстро создать несколько блоков со схожими определениями.

Экспорт и импорт библиотеки

Блоки сохраняются в локальном хранилище браузера. Очистка локального хранилища браузера приведет к удалению ваших блоков. Чтобы сохранять блоки на неопределенный срок, вам необходимо загрузить библиотеку. Ваша библиотека блоков загружается в виде XML-файла, который можно импортировать, чтобы привести библиотеку блоков в то состояние, в котором вы загрузили файл. Обратите внимание, что импорт библиотеки блоков заменяет вашу текущую, поэтому вы можете сначала экспортировать ее.

Функции импорта и экспорта также являются рекомендуемым способом поддержки и совместного использования различных наборов пользовательских блоков.

Вкладка «Блокировать экспортер»

После того как вы спроектировали блоки, вам нужно будет экспортировать определения блоков и заглушки генератора, чтобы использовать их в приложении. Это делается на вкладке Block Exporter.

Каждый блок, хранящийся в вашей библиотеке блоков, будет показан в селекторе блоков. Нажмите на блок, чтобы выбрать или отменить его выбор для экспорта. Если вы хотите выбрать все блоки в вашей библиотеке, используйте опцию «Выбрать» → «Все сохранены в библиотеке блоков». Если вы создали свой набор инструментов или настроили свое рабочее пространство с помощью вкладки Workspace Factory, вы также можете выбрать все используемые вами блоки, нажав «Выбрать» → «Все использованные в Workspace Factory».

Настройки экспорта позволяют вам выбрать, какой сгенерированный язык вы хотите использовать, и хотите ли вы использовать определения, заглушки генератора или и то, и другое для выбранных блоков. Выбрав их, нажмите «Экспорт», чтобы загрузить файлы.

Вкладка «Фабрика рабочего пространства»

Workspace Factory позволяет легко настроить набор инструментов и набор блоков по умолчанию в рабочей области. Переключаться между редактированием набора инструментов и стартовой рабочей областью можно с помощью кнопок «Панель инструментов» и «Рабочая область».

Создание набора инструментов

Эта вкладка помогает создать XML для Toolbox. Материал предполагает знакомство с особенностями Toolbox . Если у вас уже есть XML для набора инструментов, который вы хотите редактировать здесь, вы можете загрузить его, нажав «Загрузить для редактирования».

Панель инструментов без категорий

Если у вас есть несколько блоков и вы хотите отображать их без каких-либо категорий, просто перетащите их в рабочую область, и вы увидите, что ваши блоки появятся на панели инструментов в предварительном просмотре.

Панель инструментов с категориями

Если вы хотите отображать блоки по категориям, нажмите кнопку «+» и выберите раскрывающийся список для новой категории. В список категорий будет добавлена ​​категория, которую вы сможете выбирать и редактировать. Выберите «Стандартная категория», чтобы добавить отдельную стандартную категорию Blockly (Логика, Циклы и т. д.), или «Стандартная панель инструментов», чтобы добавить все стандартные категории Blockly. Используйте кнопки со стрелками, чтобы изменить порядок категорий.

Чтобы изменить название или цвет выбранной категории, используйте раскрывающийся список «Редактировать категорию». Перетаскивание блока в рабочую область добавит его в выбранную категорию.

Расширенные блоки

По умолчанию вы можете добавить на панель инструментов любой стандартный блок или любой блок из вашей библиотеки. Если у вас есть блоки, определенные в JSON, которых нет в вашей библиотеке, вы можете импортировать их с помощью кнопки «Импортировать пользовательские блоки».

Некоторые блоки следует использовать вместе или включать значения по умолчанию. Это делается с помощью групп и теней . Любые блоки, подключенные в редакторе, будут добавлены на панель инструментов как группа. Блоки, прикрепленные к другому блоку, также можно превратить в теневые блоки, выбрав дочерний блок и нажав кнопку «Создать тень». Примечание. Только дочерние блоки, не содержащие переменных, могут быть изменены на теневые блоки.

Если вы включаете переменную или функциональный блок в их набор инструментов, включите в свой набор инструментов категорию «Переменные» или «Функции», чтобы пользователи могли полностью использовать этот блок. Узнайте больше о категориях «Переменные» и «Функции» .

Настройка рабочего пространства (для веб-версии 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 предоставляет следующие параметры экспорта:

  • Стартовый код: создает стартовый HTML и JavaScript для внедрения вашего индивидуального рабочего пространства Blockly.
  • Панель инструментов: создает XML для указания вашего набора инструментов.
  • Блоки рабочей области: создают XML, который можно загрузить в рабочую область.