Starsze narzędzia dla programistów Blockly

Starsze narzędzia deweloperskie Blockly to internetowe narzędzie deweloperskie, które automatyzuje części procesu konfigurowania Blockly, w tym tworzenie niestandardowych bloków, budowanie przybornika i konfigurowanie obszaru roboczego Blockly.

Proces tworzenia aplikacji w Blockly za pomocą tego narzędzia składa się z 3 części:

  • Twórz bloki niestandardowe za pomocą narzędzi Block Factory i Block Exporter.
  • Utwórz przybornik i domyślny obszar roboczy za pomocą narzędzia Workspace Factory.
  • Skonfiguruj obszar roboczy za pomocą Workspace Factory (obecnie funkcja dostępna tylko w internecie).

Karta Fabryka bloków

Karta Fabryka bloków pomaga tworzyć definicje bloków i generatory kodu blokowego dla bloków niestandardowych. Na tej karcie możesz łatwo tworzyć, modyfikować i zapisywać bloki niestandardowe.

Definiowanie bloku

Ten film szczegółowo omawia poszczególne etapy definiowania bloku. Interfejs jest nieaktualny, ale wyróżnione w nim funkcje blokowania są nadal dostępne.

Zarządzanie biblioteką

Bloki są przywoływane za pomocą nazwy, więc każdy blok, który chcesz utworzyć, musi mieć unikalną nazwę. Interfejs użytkownika wymusza to zachowanie i wyraźnie informuje, czy „zapisujesz” nowy blok, czy „aktualizujesz” istniejący.

Karta Fabryka bloków z przyciskami Zapisz i Usuń, które zawierają nazwę bloku. Karta Fabryka bloków z przyciskami Aktualizuj i Usuń, które zawierają nazwę bloku.

Możesz przełączać się między wcześniej zapisanymi blokami lub utworzyć nowy pusty blok, klikając przycisk Biblioteka. Zmiana nazwy istniejącego bloku to kolejny sposób na szybkie utworzenie wielu bloków o podobnych definicjach.

Menu Blok z 4 opcjami: „Utwórz nowy blok” i nazwy 3 wcześniej utworzonych bloków.

Eksportowanie i importowanie biblioteki

Bloki są zapisywane w pamięci lokalnej przeglądarki. Wyczyszczenie lokalnej pamięci przeglądarki spowoduje usunięcie blokad. Aby zapisać bloki na stałe, musisz pobrać bibliotekę. Biblioteka bloków zostanie pobrana jako plik XML, który można zaimportować, aby przywrócić jej stan z momentu pobrania pliku. Pamiętaj, że importowanie biblioteki bloków zastępuje obecną bibliotekę, więc warto najpierw wyeksportować obecną bibliotekę.

Funkcje importowania i eksportowania to również zalecany sposób na utrzymywanie i udostępnianie różnych zestawów bloków niestandardowych.

Przyciski Wyczyść bibliotekę, Importuj bibliotekę bloków i Pobierz bibliotekę bloków.

Karta Blokuj eksportera

Po zaprojektowaniu bloków musisz wyeksportować definicje bloków i szablony generatora, aby używać ich w aplikacji. Możesz to zrobić na karcie Eksportowanie bloków.

Każdy blok zapisany w Bibliotece bloków będzie widoczny w selektorze bloków. Kliknij blok, aby go zaznaczyć lub odznaczyć na potrzeby eksportu. Jeśli chcesz wybrać wszystkie bloki w bibliotece, kliknij „Wybierz” → „Wszystkie zapisane w bibliotece bloków”. Jeśli narzędzia zostały utworzone lub skonfigurowane w karcie Fabryka obszaru roboczego, możesz też wybrać wszystkie użyte bloki, klikając „Wybierz” → „Wszystkie użyte w Fabryce obszaru roboczego”.

Obszar selektora bloków na karcie Eksportowanie bloków. Znajduje się tu przycisk Wybierz, który umożliwia wybranie wszystkich bloków w bibliotece bloków lub wszystkich bloków używanych w Workspace Factory, przycisk Wyczyść wybrane oraz lista bloków, które można wybrać pojedynczo.

Ustawienia eksportu umożliwiają wybór języka, na który chcesz kierować reklamy, oraz tego, czy chcesz eksportować definicje, szablony generatora czy oba te elementy dla wybranych bloków. Po wybraniu tych opcji kliknij „Eksportuj”, aby pobrać pliki.

Cała karta Eksportowanie bloków. Znajdują się na niej obszary Wybór bloków, Ustawienia eksportu i Podgląd eksportu.

Karta Fabryka obszarów roboczych

Fabryka obszarów roboczych ułatwia konfigurowanie przybornika i domyślnego zestawu bloków w obszarze roboczym. Możesz przełączać się między edycją przybornika a obszarem roboczym początkowym za pomocą przycisków „Przybornik” i „Obszar roboczy”.

Przyciski Przybornik i Workspace.

Budowanie skrzynki narzędziowej

Ta karta pomaga tworzyć kod XML dla przybornika. Zakładamy, że użytkownik zna funkcje Toolboxa. Jeśli masz już kod XML skrzynki narzędziowej, którą chcesz tutaj edytować, możesz go wczytać, klikając „Wczytaj do edycji”.

Zestaw narzędzi bez kategorii

Jeśli masz kilka bloków i chcesz je wyświetlić bez kategorii, po prostu przeciągnij je do obszaru roboczego. W podglądzie zobaczysz bloki w przyborniku.

Karta Fabryka obszarów roboczych z wybranym przyciskiem Przybornik. Po lewej stronie znajduje się edytor Blockly, w którym możesz wybierać bloki z przybornika. Pośrodku jest obszar kategorii, w którym możesz dodawać kategorie do przybornika, a po prawej stronie znajduje się obszar podglądu, w którym możesz zobaczyć utworzony przybornik. Trzy bloki zostały przeciągnięte do obszaru roboczego po lewej stronie. Spowoduje to utworzenie wysuwanego przybornika, który pojawi się po prawej stronie.

Zestaw narzędzi z kategoriami

Jeśli chcesz wyświetlać bloki reklamowe w kategoriach, kliknij przycisk „+” i wybierz z menu pozycję nowej kategorii. Spowoduje to dodanie kategorii do listy kategorii, którą możesz wybrać i edytować. Wybierz „Standardowa kategoria”, aby dodać pojedynczą standardową kategorię Blockly (Logika, Pętle itp.), lub „Standardowy przybornik”, aby dodać wszystkie standardowe kategorie Blockly. Aby zmienić kolejność kategorii, użyj przycisków strzałek.

Obszar kategorii na karcie Fabryka obszarów roboczych. Wyświetla to bieżącą listę kategorii oraz przyciski dodawania i usuwania kategorii oraz przenoszenia ich w górę i w dół listy. Wybrano przycisk +, aby dodać kategorię.

Aby zmienić nazwę lub kolor wybranej kategorii, użyj menu „Edytuj kategorię”. Przeciągnięcie bloku do obszaru roboczego spowoduje dodanie go do wybranej kategorii.

Menu Edytuj kategorię z polami do zmiany nazwy i koloru kategorii.

Bloki zaawansowane

Domyślnie możesz dodać do przybornika dowolny z bloków standardowych lub dowolny blok z biblioteki. Jeśli masz bloki zdefiniowane w pliku JSON, których nie ma w bibliotece, możesz je zaimportować za pomocą przycisku „Importuj bloki niestandardowe”.

Niektóre bloki należy stosować razem lub uwzględniać w nich wartości domyślne. Służą do tego grupy i cienie. Wszystkie połączone w edytorze bloki zostaną dodane do przybornika jako grupa. Bloki dołączone do innego bloku można też zmienić na bloki cienia, wybierając blok podrzędny i klikając przycisk „Make Shadow” (Utwórz blok cienia). Uwaga: na bloki cienia można zmienić tylko bloki podrzędne, które nie zawierają zmiennej.

Jeśli w przyborniku umieścisz blok zmiennej lub funkcji, dodaj do niego kategorię „Zmienne” lub „Funkcje”, aby umożliwić użytkownikom pełne wykorzystanie bloku. Dowiedz się więcej o kategoriach „Zmienne” lub „Funkcje”.

Konfigurowanie obszaru roboczego

Aby skonfigurować różne części obszaru roboczego, otwórz kartę „Fabryka obszarów roboczych” i kliknij „Obszar roboczy”.

Wybieranie opcji Workspace

Ustaw różne wartości opcji konfiguracji i sprawdź wynik w obszarze podglądu. Włączenie siatki lub powiększenia powoduje wyświetlenie większej liczby opcji konfiguracji. Przejście na kategorie zwykle wymaga bardziej złożonego obszaru roboczego. Po dodaniu pierwszej kategorii automatycznie pojawiają się kosz i paski przewijania.

Karta Fabryka obszarów roboczych z wybranym przyciskiem Obszar roboczy. Obszar kategorii został zastąpiony listą opcji obszaru roboczego do wyboru.

Dodawanie wstępnie załadowanych bloków do obszaru roboczego

Jest to opcjonalne, ale może być konieczne, jeśli chcesz wyświetlić zestaw bloków w obszarze roboczym:

  • Gdy aplikacja się wczytuje.
  • Gdy zostanie wywołane zdarzenie (np. przejście na wyższy poziom lub kliknięcie przycisku pomocy).

Przeciągnij bloki do obszaru edycji, aby zobaczyć je w obszarze roboczym w podglądzie. Po wybraniu bloków możesz tworzyć grupy bloków, wyłączać bloki i przekształcać niektóre z nich w bloki cieniowe.

Karta Fabryka obszarów roboczych z wybranym przyciskiem Obszar roboczy. Bloki zostały przeciągnięte do obszaru roboczego edytora Blockly po lewej stronie. Są one wyświetlane jako wstępnie załadowane bloki w obszarze roboczym edytora Blockly po prawej stronie.

Możesz wyeksportować te bloki jako pliki XML (patrz poniżej). Dodaj je do obszaru roboczego za pomocą Blockly.Xml.domToWorkspace, natychmiast po utworzeniu obszaru roboczego:

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);

Ten przykładowy kod dodaje do obszaru roboczego pojedynczy blok math_number.

Eksportuję

Workspace Factory oferuje te opcje eksportowania:

Menu Eksportuj u góry karty Fabryka obszarów roboczych z opcjami eksportowania kodu początkowego, przybornika, wstępnie załadowanych bloków obszaru roboczego lub wszystkich tych elementów.

  • Kod początkowy: generuje początkowy kod HTML i JavaScript do wstrzykiwania dostosowanego obszaru roboczego Blockly.
  • Zestaw narzędzi: generuje plik XML, aby określić zestaw narzędzi.
  • Bloki Workspace: generuje kod XML, który można wczytać do obszaru roboczego.