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