Nawigacja za pomocą klawiatury

W tym przewodniku skupiamy się na domyślnym poruszaniu się po interfejsie za pomocą klawiatury, które jest obecnie stosowane w Blockly.

.

Korzystanie z nawigacji za pomocą klawiatury

Aby nawigacja za pomocą klawiatury była skuteczna, użytkownik musi mieć możliwość wykonania tych czynności:

  • Poruszanie się po obszarze roboczym
  • Łączenie bloków w obszarze roboczym
  • Dodawanie bloku do obszaru roboczego
  • Odłączanie bloków
  • Poruszanie się po sekcji narzędzi
  • Poruszanie się po menu
  • Wstawianie bloków z menu

Poniżej wyjaśniamy, jak domyślna nawigacja za pomocą klawiatury w Blockly wykonuje te czynności.

Włączanie nawigacji przy użyciu klawiatury

Użytkownik może włączać i wyłączać nawigację za pomocą klawiatury, naciskając Shift + Ctrl + K. Gdy po raz pierwszy włączysz nawigację za pomocą klawiatury, na przestrzeni roboczej pojawi się migająca czerwona linia. To jest kursor. Pokazuje ona aktualną lokalizację użytkownika i aktualizuje się, gdy użytkownik porusza się po miejscu pracy.
Gdy użytkownik naciśnie klawisz Shift+Control+K, na ekranie pojawi się migająca czerwona linia. To jest kursor.

Naciśnięcie Enter powoduje wyświetlenie niebieskiej linii w bieżącej lokalizacji, która przedstawia znacznik użytkownika. Znacznik wskazuje miejsce docelowe wstawiania bloku. Nie aktualizuje się, gdy przenosisz kursor po obszarze roboczym.
Gdy użytkownik naciśnie klawisz Enter, na ekranie pojawi się niebieska linia. To jest znacznik.

Używanie domyślnego kursora

Obszar roboczy składa się z danych wejściowych, pól, połączeń, bloków i koordynatów obszaru roboczego. Domyślny kursor porusza się po obszarze roboczym, dzieląc wszystkie komponenty na różne poziomy.

Do poruszania się między poziomami używaj klawiszy A i D. Aby poruszać się w obrębie poziomu, użyj klawiszy W i S.

Poziom obszaru roboczego

Aby przejść do trybu sterowania za pomocą klawiatury, naciśnij Shift + Ctrl + K. Spowoduje to umieszczenie kursora w obszarze roboczym lub na pierwszym bloku w tym obszarze. Jeśli kursor znajduje się na bloku, przeniesienie go do poziomu obszaru roboczego można wykonać dwukrotnie naciskając A. Aby przesunąć kursor w obszarze roboczym, użyj klawiszy Shift + WASD. Aby przejść do poziomu zasobów, użyj klawisza D.
Kursor na pulpicie Blockly porusza się, gdy użytkownik naciska klawisze Shift i W A S D. Gdy użytkownik naciśnie d, kursor pojawi się w postaci prostokąta wokół pierwszego zbioru klocków

Poziom stosu

Na poziomie grupy możesz poruszać się między grupami bloków w Workspace za pomocą klawiszy W i S. Na tym poziomie kursor jest reprezentowany przez czerwony prostokąt wokół wszystkich bloków w stosie. Aby przejść do pierwszego bloku w wybranym stosie, użyj klawisza D.
Gdy użytkownik naciśnie S, kursor przesunie się do następnego stosu bloków. Gdy użytkownik naciśnie d, kursor pojawi się jako migająca czerwona linia nad pierwszym blokiem w wybranym zbiorze.

Blokowanie i poziom połączeń

Ten poziom zawiera blok i wszystkie połączenia zewnętrzne bloku. Kursor domyślnie pomija blok, jeśli istnieje połączenie wyjściowe lub poprzednie. Jeśli nie ma ani jednego ani drugiego, kursor przejdzie do bloku, jak pokazano poniżej.

Gdy użytkownik naciśnie d, kursor zmieni się z czerwonego prostokąta otaczającego stos bloków na połowę prostokąta otaczającego pierwszy blok w stosie.

Poniżej znajdziesz 3 możliwe połączenia zewnętrzne.
Czerwona linia wskazuje 3 możliwe połączenia zewnętrzne. Są to połączenia poprzednie, następne i wyjściowe bloku.

Na poziomie bloku i połączenia możesz poruszać się po zewnętrznych połączeniach za pomocą klawiszy W i S. Na tym poziomie kursor jest reprezentowany przez migający czerwony kontur bieżącego połączenia. Aby przejść do pierwszego pola lub pola wprowadzania w bloku, naciśnij D.
Gdy użytkownik naciśnie klawisz S, kursor pojawi się jako czerwona migająca linia na następnym połączeniu bloku. Gdy użytkownik naciśnie klawisz d, kursor pojawi się jako czerwony prostokąt wokół pierwszego pola w bloku.

Pola i poziom danych wejściowych

Ten poziom zawiera wszystkie pola i dane wejściowe, które znajdują się w bloku. Poniżej znajdziesz przykłady pól i danych wejściowych.
Czerwony prostokąt wskazuje przykłady danych wejściowych i pól w bloku.
Na tym poziomie możesz poruszać się po polach i wejściach bieżącego bloku, które można edytować, za pomocą klawiszy W i S. Kursor w polu ma postać czerwonego prostokąta. W przypadku danych wejściowych kursor ma postać migającego czerwonego elementu układanki. Gdy kursor znajduje się na elemencie wejściowym, naciśnij D, aby przejść do połączonego bloku.

Gdy użytkownik naciśnie klawisz S, kursor przejdzie przez pola i pola wejściowe bloku. Gdy użytkownik naciśnie D, gdy znajduje się w bloku z połączonym elementem, kursor pojawi się jako migająca czerwona linia na górze połączonego bloku.

Gdy kursor znajduje się na polu, naciśnij Enter, aby je edytować.

Kursor jest wyświetlany jako czerwony prostokąt wokół pola. Gdy użytkownik naciśnie klawisz Enter, otworzy się menu. Użytkownik naciska klawisz S, aby wybrać wartość w menu, a potem naciska klawisz Enter, aby zamknąć menu.

Łączenie bloków w Workspace

  1. Przechodzenie do docelowego połączenia za pomocą klawiszy WASD
  2. Zaznacz połączenie, naciskając klawisz Enter.
  3. Przejdź do prawidłowego punktu połączenia za pomocą klawiszy WASD.
  4. Połącz 2 bloki za pomocą klucza I (do wkładania).

Połączenie wejściowe jest oznaczone niebieskim punktem. Gdy użytkownik kliknie i na prawidłowym połączeniu, blok przesunie się do zaznaczonego punktu połączenia.

Przenoszenie bloku na obszarze roboczym

W Blockly przenosisz blok na obszar roboczy, podnosząc go, przeciągając go w wybrane miejsce i puszczając. Za pomocą skrótów klawiszowych zaznacz miejsce docelowe, przejdź do bloku, który chcesz przenieść, a następnie powiedz mu, aby się poruszył.

  1. Przechodzenie do pozycji w obszarze roboczym za pomocą klawiszy Shift + WASD.
  2. Zaznacz tę lokalizację na obszarze roboczym, używając klawisza Enter.
  3. Użyj klawiszy WASD, aby przejść do bloku, który chcesz przenieść.
  4. Przesuń blok do zaznaczonego miejsca za pomocą klawisza I.

Kursor na obszarze roboczym Blockly. Gdy użytkownik naciśnie klawisz Enter, zaznaczy swoją lokalizację, a w tym miejscu pojawi się niebieska linia. Za pomocą klawiszy WASD przenoszą kursor na zewnętrzne połączenie bloku. Gdy użytkownik kliknie i, blok przesuwa się do zaznaczonego miejsca.

Odłączanie bloków

W Blockly zwykle odłączasz 2 bloki, podnosząc niższy blok i przeciągając go od bloku nadrzędnego. Dzięki skrótom klawiszowym możesz odłączać bloki, naciskając X kursorem na połączeniu, które chcesz przerwać.

  1. Użyj klawiszy WASD, aby przejść do połączenia, które chcesz przerwać.
  2. Rozłączanie z X

Na ekranie widać 2 bloki połączone kursorem. Gdy użytkownik naciśnie klawisz X, bloki zostaną odłączone.

Wstawianie bloku z zestawu narzędzi

  1. Naciśnij klawisz T, aby otworzyć okno narzędzi
  2. Aby poruszać się po kategoriach, używaj klawiszy W i S.
  3. Aby przejść do bloków w wysuwanym menu, naciśnij klawisz D.
  4. Przechodzenie między blokami za pomocą klawiszy W i S
  5. Aby wstawić blok z wyskakującego okienka, naciśnij klawisz Enter.

Gdy użytkownik naciśnie T, otworzy się panel narzędzi z różnymi kategoriami klocków. Naciśnięcie S powoduje przejście do innej kategorii. Gdy użytkownik kliknie d, pierwszy blok w kategorii zostanie wyróżniony. Naciśnięcie klawisza Enter spowoduje umieszczenie bloku na obszarze roboczym i zamknięcie panelu narzędzi.

Eksperymenty

Uważamy, że są 4 główne obszary, w których użytkownicy mogą chcieć eksperymentować:

  1. Mapowania klawiszy: jakie klawisze mają być mapowane na jakie działania.
  2. Tekst dla czytników ekranu/Rejestrowanie/Ostrzeżenia: sposób odczytywania przez czytnik ekranu lokalizacji kursorów oraz błędów i ostrzeżeń.
  3. Nawigacja po Workspace: sposób, w jaki użytkownik porusza się po różnych blokach, polach, danych wejściowych i połączeniach w Workspace.
  4. Wygląd kursora: jak powinien wyglądać kursor i znacznik.

Więcej informacji o korzystaniu z tych interfejsów API znajdziesz w laboratorium kodu Blockly Keyboard Navigation.

Jeśli chcesz przetestować inne funkcje, w których przypadku możemy Ci pomóc, wypełnij ten formularz.

Najczęstsze pytania

Pytanie: dlaczego nie korzystasz z klawiszy strzałek do poruszania się po interfejsie za pomocą klawiatury?
Odp.: czytniki ekranu zwykle korzystają z klawiszy strzałek. Nie chcieliśmy zakłócać tego procesu, dlatego zdecydowaliśmy się użyć klawiszy WASD.
Zdajemy sobie sprawę, że każdy ma inne potrzeby, dlatego zdecydowanie zalecamy stworzenie łatwego sposobu zmiany przypisania klawiszy.

P: To wygląda na dość skomplikowane. Po co nam te różne warstwy?
Odp.: podczas projektowania nawigacji za pomocą klawiatury potrzebowaliśmy uporządkowanego sposobu poruszania się po różnych blokach, połączeniach, polach, danych wejściowych i koordynatach w pracy.
Wewnątrz reprezentujemy to za pomocą abstrakcyjnego drzewa składni (AST). Domyślna implementacja kursora nie odbiega zbytnio od tego modelu.Jest to celowe działanie, które ma pomóc deweloperom lepiej zrozumieć podstawową architekturę. Istnieją też inne wskaźniki, które mogą być łatwiejsze do zrozumienia dla użytkownika.

Ograniczenia

Nie obsługujemy jeszcze przechodzenia do komponentów nieblokujących (np. kosza, przycisków powiększania i wysuwanych przycisków). Więcej informacji o ograniczeniach znajdziesz na liście otwartych błędów związanych z poruszaniem się po interfejsie za pomocą klawiatury.