Blockly Developer Tools
to internetowe narzędzie dla programistów, które automatyzuje niektóre elementy procesu konfiguracji Blockly, w tym tworzenie bloków niestandardowych, tworzenie zestawu narzędzi i konfigurowanie internetowego obszaru roboczego Blockly.
Proces dla programistów Blockly za pomocą narzędzia składa się z 3 części:
- Tworzenie niestandardowych bloków za pomocą Block Factory i Block Exporter.
- Utwórz zestaw narzędzi i domyślny obszar roboczy za pomocą Workspace Factory.
- Skonfiguruj obszar roboczy za pomocą Workspace Factory (obecnie funkcji dostępnej tylko w internecie).
Zablokuj kartę Fabryka
Na karcie Block Factory możesz tworzyć definicje bloków i generatory kodu bloków do bloków niestandardowych. Na tej karcie możesz łatwo tworzyć, modyfikować i zapisywać niestandardowe blokady.
Definiowanie bloku
W tym filmie szczegółowo omówiono proces definiowania bloków. Interfejs jest nieaktualny, ale podświetlane w nim funkcje blokowania są nadal aktualne.
Zarządzanie biblioteką
Bloki mają odwołania do nazw, więc każdy blok, który chcesz utworzyć, musi mieć unikalną nazwę. Interfejs egzekwuje te zasady i jasno informuje, kiedy „zapiszesz” nowy blok lub „aktualizujesz” istniejący.
Możesz przełączać się między zapisanymi wcześniej blokami lub utworzyć nowy, pusty blok, klikając przycisk Biblioteka. Zmiana nazwy istniejącego bloku to kolejny sposób na szybkie tworzenie wielu bloków o podobnych definicjach.
Eksportowanie i importowanie biblioteki
Blokady są zapisywane w pamięci lokalnej przeglądarki. Wyczyszczenie pamięci lokalnej przeglądarki usunie blokady. Aby zapisywać bloki bezterminowo, musisz pobrać bibliotekę. Biblioteka Block Library jest pobierana w postaci pliku XML, który można zaimportować, by zmienić jej stan w momencie pobrania. Pamiętaj, że zaimportowanie biblioteki bloków zastępuje bieżącą, więc warto najpierw ją wyeksportować.
Funkcje importu i eksportu to także zalecany sposób obsługi i udostępniania różnych zestawów bloków niestandardowych.
Karta Blokuj eksporter
Po zaprojektowaniu bloków musisz wyeksportować definicje bloków i nagłówki generatorów, aby używać ich w aplikacji.
Każdy blok zapisany w bibliotece bloków będzie widoczny w selektorze blokad. Kliknij bryłę, aby ją zaznaczyć lub odznaczyć do wyeksportowania. Jeśli chcesz zaznaczyć wszystkie bloki w bibliotece, użyj opcji „Wybierz” → „Wszystkie zapisane w bibliotece bloku”. Jeśli masz zestaw narzędzi utworzony na karcie Workspace Factory lub skonfigurowany obszar roboczy, możesz wybrać wszystkie użyte bloki, klikając „Wybierz” → „All used in Workspace Factory”.
Ustawienia eksportu pozwalają wybrać wygenerowany język, na który chcesz kierować reklamy, oraz określić, czy w przypadku wybranych bloków mają być dostarczone definicje, wycinki generatora czy oba te elementy. Po ich wybraniu kliknij „Eksportuj”, aby pobrać pliki.
Karta Workspace Factory
Workspace Factory ułatwia skonfigurowanie zestawu narzędzi i domyślnego zestawu bloków w obszarze roboczym. Możesz przełączać się między edycją zestawu narzędzi a początkowym obszarem roboczym za pomocą przycisków „Pasek narzędzi” i „Obszar roboczy”.
Tworzenie zestawu narzędzi
Ta karta pomaga utworzyć kod XML dla zestawu narzędzi. Zakładamy w nim, że znasz funkcje Zestawu narzędzi. Jeśli masz już kod XML dla zestawu narzędzi, który chcesz tutaj edytować, możesz go wczytać, klikając „Wczytaj do edycji”.
Zestaw narzędzi bez kategorii
Jeśli chcesz wyświetlić kilka bloków bez kategorii, wystarczy przeciągnąć je do obszaru roboczego, a pojawią się one w przyborniku na podglądzie.
Zestaw narzędzi z kategoriami
Jeśli chcesz wyświetlić bloki w kategoriach, kliknij przycisk „+” i wybierz menu nowej kategorii. Spowoduje to dodanie do listy kategorii, które możesz wybrać i edytować. Wybierz „Standardowa kategoria”, by dodać pojedynczą standardową kategorię Blockly (Logic, Loops itp.), lub „Standard Toolbox”, aby dodać wszystkie standardowe kategorie Blockly. Aby zmienić kolejność kategorii, użyj przycisków strzałek.
Aby zmienić nazwę lub kolor wybranej kategorii, użyj menu „Edytuj kategorię”. Przeciągnięcie bryły do obszaru roboczego spowoduje dodanie jej do wybranej kategorii.
Zaawansowane blokady
Domyślnie do zestawu narzędzi możesz dodać dowolne standardowe bloki i bloki z biblioteki. Jeśli w pliku JSON masz zdefiniowane bloki, których nie ma w Twojej bibliotece, możesz je zaimportować, klikając przycisk „Importuj bloki niestandardowe”.
Niektóre bloki powinny być używane razem lub zawierać ustawienia domyślne. Użyjesz do tego grup i cieni. Wszystkie bloki połączone w edytorze zostaną dodane do zestawu narzędzi jako grupa. Bloki dołączone do innej bryły można też zmienić w bloki cienia, wybierając blok podrzędny i klikając przycisk „Zbuduj cień”. Uwaga: na bloki cienia można zmienić tylko bloki podrzędne, które nie zawierają zmiennych.
Jeśli w ich zestawie narzędzi umieścisz blok zmiennych lub funkcji, dodaj do niego kategorię „Zmienne” lub „Funkcje”, aby użytkownicy mogli w pełni wykorzystać blok. Dowiedz się więcej o kategoriach „Zmienne” i „Funkcje”.
Konfigurowanie obszaru roboczego (w przypadku Web Blockly)
Aby skonfigurować różne części obszaru roboczego, otwórz kartę „Fabryka obszaru roboczego” i wybierz „Obszar roboczy”.
Wybierz opcje obszaru roboczego
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. Przełączanie się na kategorie zwykle wymaga bardziej złożonego obszaru roboczego. Kosz i paski przewijania są dodawane automatycznie po dodaniu pierwszej kategorii.
Dodaj wstępnie załadowane bloki do obszaru roboczego
Jest to opcjonalne, ale może być konieczne, jeśli chcesz wyświetlić zestaw bloków w obszarze roboczym:
- Podczas wczytywania aplikacji.
- Gdy zostanie wywołane zdarzenie (przejście na kolejny poziom, kliknięcie przycisku pomocy itp.).
Przeciągnij bloki do obszaru edycji, aby zobaczyć je w obszarze roboczym na podglądzie. Możesz tworzyć grupy bloków i wyłączać bryły, a także stosować wybrane bloki cienia.
Możesz wyeksportować te bloki do pliku XML (patrz poniżej). Dodaj je do obszaru roboczego w Blockly.Xml.domToWorkspace od razu po jego utworzeniu:
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 udostępnia te opcje eksportu:
- Kod startowy: generuje początkowy kod HTML i JavaScript, aby wstrzyknąć niestandardowy obszar roboczy Blockly.
- Zestaw narzędzi: generuje kod XML określający zestaw narzędzi.
- Bloki obszaru roboczego: generowany jest plik XML, który można wczytać do obszaru roboczego.