Blockly Developer Tools — это веб-инструмент разработчика, который поможет вам создавать собственные блоки и включать их в ваше приложение.
Определить блок
Рабочая область Block Factory начнется с пустого блока конфигурации. Вы можете добавлять входные данные и поля в блок, перетаскивая блоки из соответствующих категорий на панели инструментов. Вы также можете установить текст всплывающей подсказки, URL-адрес справки, цвет и проверку соединения для блока, изменив блок конфигурации.
Фабрика блоков может одновременно создавать блоки только одного типа. Если вы хотите спроектировать несколько блоков, соединенных вместе, вам придется спроектировать блоки отдельно и соединить их в определении панели инструментов . Кроме того, блоки могут иметь расширенные функции, такие как мутаторы , но эти расширенные функции не могут быть созданы в Factory. Вам придется изменить определение блока в соответствии с документацией после того, как вы построите базовую форму блока.
Когда вы изменяете блок конфигурации в рабочей области, предварительный просмотр блока будет обновляться автоматически. Код, который вам нужно будет добавить в приложение, также обновится автоматически.
Конфигурация выхода
Blockly поддерживает различные методы определения блоков и загрузки самого Blockly, а также наличие нескольких встроенных языков генератора кода. То, как вы определяете свои блоки и генераторы блочного кода, зависит от этих факторов, поэтому вы можете установить их в Block Factory, чтобы изменить вывод кода.
Блочный формат импорта
Вы можете загрузить Blockly через теги <script> в HTML или с помощью операторов import , если вы используете инструмент сборки со своим приложением. Этот выбор влияет на то, как вы ссылаетесь на определенные части Blockly API. Подробнее о том, что выбрать, смотрите в документации по загрузке Blockly . Какой бы метод вы ни использовали, обязательно выберите соответствующий вариант в Block Factory, чтобы код, который вы добавите в свое приложение, соответствовал вашему приложению.
Формат определения блока
Blockly поддерживает определение блоков в JSON или JavaScript . Формат JSON является предпочтительным, но если вы собираетесь добавлять дополнительные функции, такие как мутаторы, вы можете использовать формат JavaScript.
Язык генератора кода
Blockly поставляется с несколькими языками генератора кода . Выберите язык(и), которые нужны вашему приложению, чтобы отобразить соответствующую заглушку генератора блочного кода. Если вы используете собственный языковой генератор, вы можете изменить имя своего собственного класса CodeGenerator после копирования кода в свое приложение.
Вывод кода
В следующих разделах Block Factory показан код, который вам нужно будет скопировать в ваше приложение, чтобы загрузить созданный вами блок . Место копирования кода будет зависеть от того, как вы структурировали свое приложение, но обычно вам необходимо запускать заголовки кода перед определением и генератором блочного кода, определения блоков перед попыткой использовать их в наборе инструментов и генераторы блочного кода, прежде чем пытаться сгенерировать код для рабочей области. Для каждого из разделов вы можете использовать кнопку копирования, чтобы скопировать весь блок кода для этого раздела.
Если вы все еще не знаете, как использовать выходные данные кода, вас может заинтересовать пример приложения , в котором есть примеры пользовательских блоков и генераторов блочного кода.
Заголовки кода
В разделе «Заголовки кода» показан код, необходимый для загрузки основной библиотеки Blockly и выбранного вами языкового генератора. Здесь может быть и другая конфигурация; например, некоторые поля, которые вы можете включить в блок, взяты из плагинов Blockly. Эти плагины будут иметь свои собственные операторы импорта и, возможно, другой код, который вам придется запустить для инициализации поля. Этот код следует включать перед любым из следующих разделов кода.
Определение блока
Определение блока — это то, как вы сообщаете Blockly форму вашего блока, например, какие поля и входные данные он имеет, цвет и многое другое. После того, как вы запустите этот код, Blockly будет знать, как создать блок только на основе его type .
Если вы используете пример приложения , вы можете включить этот код в файл в каталоге blocks/ . Если у вас есть собственная структура приложения, обязательно включите этот код, прежде чем пытаться ссылаться на блок по имени, например, в определении панели инструментов. В любом случае убедитесь, что заголовки кода присутствуют в файле, куда вы включаете этот код.
Заглушка генератора
Генератор блочного кода — это то, как вы описываете код, который должен быть сгенерирован для блока. Заглушка генератора, созданная Block Factory, предоставляет вам базовый код для получения значений входных данных и полей, находящихся в вашем блоке. Вам предстоит объединить эти значения в окончательный сгенерированный код!
Если вы используете пример приложения , вы можете включить этот код в файл в generators/ . Если у вас есть собственная структура приложения, обязательно включите этот код, прежде чем пытаться сгенерировать код для рабочей области, включающей ваши пользовательские блоки. В любом случае убедитесь, что заголовки кода присутствуют в файле, куда вы включаете этот код.
Видео прохождение
В этом видео подробно рассматриваются этапы определения блока. Пользовательский интерфейс устарел, но функции блока, которые он выделяет, по-прежнему более или менее точны.
Библиотека блоков
Блоки автоматически сохраняются в локальном хранилище браузера каждый раз, когда вы вносите в блок изменения. Вы можете создать новый блок или загрузить существующий блок из локального хранилища, нажав соответствующие кнопки на верхней панели инструментов.
Импорт из устаревшей Block Factory
Если вы использовали устаревшую фабрику блоков и хотите перенести существующие определения блоков в новый инструмент, вы можете сделать это, выполнив следующие действия:
В устаревшей версии Block Factory нажмите кнопку
Export Block Libraryна панели инструментов. Это загрузит файл со всеми вашими определениями блоков.
В новой Фабрике блоков нажмите кнопку
Load blockна панели инструментов.Выберите в меню опцию «Импортировать из фабрики блоков».
Загрузите файл, скачанный на шаге 1.
Определения ваших блоков должны быть автоматически преобразованы в новый формат и теперь будут доступны в меню
Load block. Блоки могли быть переименованы, если были конфликты с существующими блоками.Если при разборе любого из ваших блоков возникли ошибки, мы не сможем их загрузить. Вы можете помочь нам, сообщив об ошибке в блочных образцах и включив файл, который не анализируется.