Клавиатурная навигация

В этом руководстве основное внимание уделяется тому, как использовать навигацию с помощью клавиатуры по умолчанию, как она в настоящее время реализована в Blockly.

Использование навигации с помощью клавиатуры

Для успешной навигации с помощью клавиатуры пользователь должен иметь возможность выполнять следующие задачи:

  • Перемещайтесь по рабочему пространству
  • Соедините блоки в рабочей области
  • Добавьте блок в рабочую область
  • Отсоединить блоки
  • Навигация по набору инструментов
  • Навигация по всплывающему меню
  • Вставка блоков из всплывающего меню

Ниже объясняется, как стандартная клавиатурная навигация Blockly выполняет эти задачи.

Включение навигации с помощью клавиатуры

Пользователь может включать и отключать навигацию с помощью клавиатуры, нажав Shift + Ctrl + k . При первом включении навигации с помощью клавиатуры в рабочей области появляется мигающая красная линия. Это курсор. Он показывает текущее местоположение пользователя и обновления по мере его перемещения по рабочей области.
Когда пользователь нажимает кнопку переключения k, на экране появляется мигающая красная линия. Это курсор.

При нажатии Enter в текущем месте создается синяя линия, обозначающая маркер пользователя. Маркер отображает целевое местоположение для вставки блока. Он не обновляется при перемещении курсора по рабочей области.
Когда пользователь нажимает Enter, на экране появляется синяя линия. Это маркер.

Использование курсора по умолчанию

Рабочая область состоит из входных данных, полей, соединений, блоков и координат рабочей области. Курсор по умолчанию перемещается по рабочему пространству, разделяя все компоненты на разные уровни.

Для перемещения между уровнями используйте клавиши A и D. Для перемещения по уровню используйте клавиши W и S.

Уровень рабочей области

Войдите в режим навигации с помощью клавиатуры, нажав Shift + Ctrl + k . При этом курсор помещается в рабочую область или в первый блок рабочей области. Если курсор находится на блоке, переместите его на уровень рабочей области, дважды нажав A. Для перемещения курсора по рабочей области используйте Shift + WASD . Для перехода на уровень стека используйте клавишу D.
Курсор в блочном рабочем пространстве перемещается, когда пользователь нажимает клавиши Shift и WASD. Когда пользователь нажимает d, курсор появляется в виде прямоугольника вокруг первой стопки блоков.

Уровень стека

На уровне стека вы можете перемещаться между стопками блоков в рабочей области с помощью клавиш W и S. На этом уровне курсор представлен сплошным красным прямоугольником вокруг всех блоков в стопке. Чтобы перейти к первому блоку в выбранной стопке, используйте клавишу D.
Когда пользователь нажимает s, курсор перемещается к следующей стопке блоков. Когда пользователь нажимает d, курсор появляется в виде мигающей красной линии над первым блоком в выбранной стопке.

Уровень блоков и соединений

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

Когда пользователь нажимает d, курсор перемещается из красного прямоугольника вокруг стопки блоков в половину прямоугольника, окружающего первый блок в стопке.

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

На уровне блока и соединения вы можете перемещаться по внешним соединениям с помощью клавиш W и S. На этом уровне курсор представлен мигающим красным контуром текущего соединения. Чтобы перейти к первому полю или вводу в блоке, нажмите D.
Когда пользователь нажимает клавишу S, курсор появляется в виде красной мигающей линии при следующем соединении блока. Когда пользователь нажимает клавишу d, курсор появляется в виде красного прямоугольника вокруг первого поля блока.

Поля и уровень ввода

Этот уровень содержит все поля и входные данные, которые есть в блоке. Примеры того, как выглядят поля и входные данные, показаны ниже.
Красный прямоугольник выделяет примеры входных данных и полей в блоке.
На этом уровне вы можете перемещаться по редактируемым полям и вводам текущего блока с помощью W и S. Для поля курсор представляет собой сплошной красный прямоугольник. Для ввода курсор представляет собой мигающий красный кусочек головоломки. Когда курсор находится на входе, нажмите D , чтобы перейти к подключенному блоку.

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

Когда курсор находится на поле, нажмите Enter , чтобы отредактировать его.

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

Соединение блоков в рабочей области

  1. Перейдите к целевому соединению с помощью клавиш WASD.
  2. Отметьте соединение с помощью клавиши Enter
  3. Перейдите к допустимой точке подключения с помощью клавиш WASD.
  4. Соедините два блока, используя клавишу I (для вставки)

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

Перемещение блока в рабочей области

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

  1. Перейдите к позиции на рабочем пространстве с помощью клавиш Shift + WASD.
  2. Отметьте это место в рабочей области с помощью клавиши Enter.
  3. Перейдите к блоку, который хотите переместить, с помощью клавиш WASD .
  4. Переместите блок в отмеченное место с помощью клавиши I.

Курсор отображается в блочном рабочем пространстве. Когда пользователь нажимает Enter, он отмечает свое местоположение, и в этом месте появляется синяя линия. С помощью клавиш WASD перемещают курсор на внешнее соединение блока. Когда пользователь нажимает i, блок перемещается в отмеченное место.

Отсоединение блоков

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

  1. Перейдите к соединению, которое хотите разорвать, с помощью клавиш WASD .
  2. Разорвите связь с X

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

Вставка блока из панели инструментов

  1. Нажмите клавишу T , чтобы открыть панель инструментов.
  2. Используйте клавиши W и S для перемещения по категориям.
  3. Нажмите клавишу D , чтобы перейти к блокам во всплывающем меню.
  4. Перемещайтесь по блокам с помощью клавиш W и S.
  5. Нажмите клавишу Enter , чтобы вставить блок из всплывающего меню.

Когда пользователь нажимает t, открывается панель инструментов, показывающая различные категории блоков. Нажатие s позволяет перемещаться по различным категориям. Когда пользователь нажимает d, выделяется первый блок в категории. Нажатие Enter помещает блок в рабочую область и закрывает панель инструментов.

Экспериментирование

Мы считаем, что есть четыре основные области, в которых людям может быть интересно поэкспериментировать:

  1. Сопоставление клавиш : какие клавиши должны соответствовать каким действиям.
  2. Текст для программ чтения с экрана/Журналирование/Предупреждения : как программа чтения с экрана должна считывать расположение курсоров, а также любые ошибки или предупреждения.
  3. Навигация в рабочей области : как пользователь перемещается по различным блокам, полям, вводам и соединениям в рабочей области.
  4. Внешний вид курсора : как должны выглядеть курсор и маркер.

Дополнительную информацию о том, как использовать эти API, см. в лаборатории кода Blockly Keyboard Navigation .

Если у вас есть другие области, с которыми вы хотите поэкспериментировать и с которыми мы могли бы помочь, заполните форму .

Часто задаваемые вопросы

Вопрос: Почему вы не использовали клавиши со стрелками для навигации по клавиатуре?
О: Программы чтения с экрана обычно используют клавиши со стрелками. Мы не хотели в это вмешиваться и поэтому решили использовать клавиши WASD .
Однако мы понимаем, что у всех разные потребности, поэтому настоятельно рекомендуем создать простой способ изменения сопоставления клавиш .

Вопрос: Это кажется довольно сложным, зачем нам нужны разные слои?
О: Размышляя о навигации с помощью клавиатуры, нам нужен был структурированный способ перемещения по различным блокам, соединениям, полям, вводам и координатам рабочей области.
Внутренне мы представляем это с помощью абстрактного синтаксического дерева (AST). Реализация курсора по умолчанию не сильно отклоняется от этой модели. Это сделано намеренно, чтобы дать разработчикам лучшее понимание базовой архитектуры. Существуют и другие курсоры , которые могут быть проще для понимания конечному пользователю.

Ограничения

Мы пока не поддерживаем переход к неблочным компонентам (например, корзине, кнопкам масштабирования и всплывающим кнопкам). Дополнительную информацию об ограничениях см. в списке ошибок навигации при открытой клавиатуре.