Устаревшие инструменты разработчика Blockly

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

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

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

Вкладка «Блочная фабрика»

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

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

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

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

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

Вкладка «Фабрика блоков» с кнопками «Сохранить» и «Удалить», включающими имя блока.Вкладка «Фабрика блоков» с кнопками «Обновить» и «Удалить», которые содержат имя блока.

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

Раскрывающийся список «Библиотека блоков» с четырьмя пунктами: «Создать новый блок» и названиями трех ранее созданных блоков.

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

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

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

Кнопки «Очистить библиотеку», «Импортировать библиотеку блоков» и «Загрузить библиотеку блоков».

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

После разработки блоков вам необходимо экспортировать их определения и заглушки генераторов для использования в приложении. Это можно сделать на вкладке «Экспортёр блоков».

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

Область «Выбор блоков» на вкладке «Экспортёр блоков». Здесь есть кнопка «Выбрать» для выбора всех блоков в библиотеке блоков или всех блоков, используемых в Workspace Factory, кнопка «Очистить выбранное» и список блоков, которые можно выбрать по отдельности.

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

Вся вкладка «Экспортёр блоков». Здесь есть область выбора блоков, область настроек экспорта и область предварительного просмотра экспорта.

Вкладка Workspace Factory

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

Кнопки «Панель инструментов» и «Рабочее пространство».

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

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

Ящик с инструментами без категорий

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

Вкладка «Workspace Factory» с выбранной кнопкой «Toolbox». Слева находится редактор Blockly для выбора блоков в панели инструментов, в центре — область категорий для добавления категорий в панель инструментов, а справа — область предварительного просмотра, чтобы отобразить созданную вами панель инструментов. Три блока были перетащены на рабочее пространство слева. Это создаёт выпадающую панель инструментов, которая показана справа.

Набор инструментов с категориями

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

Область категорий на вкладке Workspace Factory. Здесь отображается текущий список категорий и кнопки для добавления и удаления категорий, а также для их перемещения вверх и вниз в списке. Кнопка «+» выбрана для добавления категории.

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

Раскрывающийся список «Изменить категорию» с полями для изменения названия и цвета категории.

Продвинутые блоки

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

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

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

Настройка рабочего пространства

Чтобы настроить различные части вашего рабочего пространства, перейдите на вкладку «Workspace Factory» и выберите «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 предоставляет вам следующие возможности экспорта:

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

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