Blockly Developer Tools ist ein webbasiertes Entwicklertools, mit dem Sie benutzerdefinierte Bausteine erstellen und in Ihre Anwendung einbinden können.
Block definieren
Der Arbeitsbereich „Block Factory“ beginnt mit einem leeren Konfigurationsblock. Sie können dem Block Eingaben und Felder hinzufügen, indem Sie Blöcke aus den entsprechenden Kategorien in der Toolbox ziehen. Sie können auch den Kurzinfotext, die Hilfe-URL, die Farbe und die Verbindungsprüfung(en) für den Block festlegen, indem Sie den Konfigurationsblock ändern.
Mit der Block Factory kann jeweils nur ein Blocktyp erstellt werden. Wenn Sie mehrere Blöcke entwerfen möchten, die miteinander verbunden sind, müssen Sie die Blöcke separat entwerfen und in der Toolbox-Definition verbinden. Darüber hinaus können Blöcke erweiterte Features wie Mutatoren haben. Diese erweiterten Features können jedoch nicht in der Factory erstellt werden. Sie müssen die Blockdefinition gemäß der Dokumentation ändern, nachdem Sie die Grundform des Blocks erstellt haben.
Wenn Sie den Konfigurationsblock im Arbeitsbereich ändern, wird die Vorschau für den Block automatisch aktualisiert. Der Code, den Sie Ihrer Anwendung hinzufügen müssen, wird ebenfalls automatisch aktualisiert.
Ausgabekonfiguration
Blockly unterstützt verschiedene Methoden zum Definieren von Blöcken und zum Laden von Blockly selbst. Außerdem verfügt Blockly über mehrere integrierte Codegeneratorsprachen. Die Art und Weise, wie Sie Ihre Blöcke und Blockcode-Generatoren definieren, hängt von diesen Faktoren ab. Sie können sie also in der Block Factory festlegen, um die Codeausgabe zu ändern.
Blockly-Importformat
Sie können Blockly über <script>-Tags in HTML laden oder import-Anweisungen verwenden, wenn Sie ein Build-Tool mit Ihrer Anwendung verwenden. Diese Auswahl wirkt sich darauf aus, wie Sie auf bestimmte Teile der Blockly API verweisen. Weitere Informationen zur Auswahl findest du in der Dokumentation zum Laden von Blockly.
Unabhängig von der verwendeten Methode müssen Sie die entsprechende Auswahl in der Block Factory auswählen, damit der Code, den Sie Ihrer Anwendung hinzufügen, für Ihre Anwendung korrekt ist.
Format der Blockdefinition
Blockly unterstützt die Definition von Blöcken in JSON oder JavaScript. Das JSON-Format ist vorzuziehen, aber wenn Sie erweiterte Features wie Mutatoren hinzufügen möchten, können Sie das JavaScript-Format verwenden.
Sprache des Codegenerators
Blockly wird in mehreren Sprachen für Codegeneratoren ausgeliefert. Wählen Sie die Sprache(n) aus, die Ihre Anwendung benötigt, um den entsprechenden Blockcode-Generator-Stub anzuzeigen. Wenn Sie einen benutzerdefinierten Sprachgenerator verwenden, können Sie den Namen Ihrer benutzerdefinierten CodeGenerator-Klasse ändern, nachdem Sie den Code in Ihre Anwendung kopiert haben.
Code-Ausgabe
In den nächsten Abschnitten der Block Factory sehen Sie den Code, den Sie in Ihre Anwendung kopieren müssen, um den von Ihnen erstellten Block zu laden. Wo Sie den Code kopieren, hängt davon ab, wie Sie Ihre Anwendung strukturiert haben. In der Regel müssen Sie jedoch die Codeheader vor dem Definitions- und Blockcode-Generator, die Blockdefinitionen vor der Verwendung in einer Toolbox und die Blockcode-Generatoren ausführen, bevor Sie Code für einen Arbeitsbereich generieren. Für jeden Abschnitt können Sie mit der Schaltfläche „Kopieren“ den gesamten Codeblock für diesen Abschnitt kopieren.
Wenn Sie immer noch unsicher sind, wie Sie die Codeausgabe verwenden sollen, könnte die Beispiel-App von Interesse sein. Sie enthält Beispiele für benutzerdefinierte Blöcke und Blockcode-Generatoren.
Code-Header
Im Abschnitt „Code-Header“ wird der Code angezeigt, den Sie zum Laden der Blockly-Hauptbibliothek und des ausgewählten Sprachgenerators benötigen. Es kann auch andere Konfigurationen geben, z. B. stammen einige Felder, die Sie in einen Block aufnehmen, aus Blockly-Plug-ins. Diese Plug-ins haben eigene Importanweisungen und möglicherweise anderen Code, den Sie ausführen müssen, um das Feld zu initialisieren. Dieser Code sollte vor den folgenden Codeabschnitten eingefügt werden.
Block definition
Über die Blockdefinition geben Sie Blockly die Form Ihres Blocks an, z. B. welche Felder und Eingaben er enthält, welche Farbe er hat und mehr. Nachdem Sie diesen Code ausgeführt haben, weiß Blockly, wie er einen Block nur anhand seiner type erstellt.
Wenn Sie die Beispiel-App verwenden, können Sie diesen Code in eine Datei im Verzeichnis blocks/ einfügen. Wenn Sie eine eigene Anwendungsstruktur haben, fügen Sie diesen Code ein, bevor Sie versuchen, anhand des Namens auf einen Block zu verweisen, z. B. in einer Toolbox-Definition. Achten Sie in jedem Fall darauf, dass die Code-Header in der Datei vorhanden sind, in die Sie den Code einfügen.
Generator-Stub
Mit dem Blockcode-Generator beschreiben Sie den Code, der für einen Block generiert werden soll. Der von der Block Factory erstellte Generator-Stub gibt Ihnen den grundlegenden Code zum Abrufen der Werte von Eingaben und Feldern in Ihrem Block. Es liegt an Ihnen, diese Werte zu dem endgültigen Code zu kombinieren, der generiert wird.
Wenn Sie die Beispiel-App verwenden, können Sie diesen Code in eine Datei im Verzeichnis generators/ einfügen. Wenn Sie eine eigene Anwendungsstruktur haben, fügen Sie diesen Code hinzu, bevor Sie versuchen, Code für einen Arbeitsbereich zu generieren, der Ihre benutzerdefinierten Blöcke enthält. Achten Sie in jedem Fall darauf, dass die Code-Header
in der Datei vorhanden sind, in die Sie den Code einfügen.
Videorundgang
Dieses Video führt Sie im Detail durch die Schritte zum Definieren eines Blocks. Die Benutzeroberfläche ist veraltet, aber die hervorgehobenen Blockfunktionen sind noch mehr oder weniger genau.
Mediathek blockieren
Blöcke werden jedes Mal automatisch im lokalen Speicher des Browsers gespeichert, wenn Sie eine Änderung am Block vornehmen. Sie können einen neuen Block erstellen oder einen vorhandenen Block aus Ihrem lokalen Speicher laden, indem Sie auf die entsprechenden Schaltflächen in der oberen Symbolleiste klicken.
Aus alter Block Factory importieren
Wenn Sie die alte Block Factory verwendet haben und Ihre vorhandenen Blockdefinitionen in das neue Tool migrieren möchten, können Sie dies so tun:
Klicken Sie in der alten Block Factory in der Symbolleiste auf die Schaltfläche
Export Block Library. Dadurch wird eine Datei mit allen Blockdefinitionen heruntergeladen.
Klicken Sie in der neuen Block Factory in der Symbolleiste auf die Schaltfläche
Load block.Wählen Sie im Menü die Option „Aus Block Factory importieren“ aus.
Laden Sie die Datei hoch, die Sie in Schritt 1 heruntergeladen haben.
Ihre Blockdefinitionen sollten automatisch in das neue Format konvertiert werden und sind jetzt über das Menü
Load blockverfügbar. Blöcke können umbenannt worden sein, wenn es Konflikte mit vorhandenen Blöcken gab.Wenn beim Parsen Ihrer Blöcke Fehler aufgetreten sind, können sie nicht geladen werden. Sie können uns helfen, indem Sie anhand von Blockly-Samples einen Fehler melden und die Datei hinzufügen, die nicht geparst werden kann.