Die Blockly Developer Tools
sind ein webbasiertes Entwicklertool, das Teile des Blockly-Konfigurationsprozesses automatisiert, darunter das Erstellen benutzerdefinierter Blöcke, das Erstellen Ihrer Toolbox und das Konfigurieren des Blockly-Webarbeitsbereichs.
Der Blockly-Entwicklungsprozess mit dem Tool besteht aus drei Teilen:
- Erstellen Sie benutzerdefinierte Blöcke mit Block Factory und Block Exporter.
- Toolbox und Standardarbeitsbereich mit Workspace Factory erstellen
- Konfigurieren Sie den Arbeitsbereich mit Workspace Factory (derzeit ein reines Webfeature).
Tab „Factory“ blockieren
Auf dem Tab „Block Factory“ können Sie Blockdefinitionen und Blockcode-Generatoren für benutzerdefinierte Blöcke erstellen. Auf diesem Tab können Sie benutzerdefinierte Blöcke ganz einfach erstellen, ändern und speichern.
Block definieren
In diesem Video wird die Definition eines Blocks im Detail beschrieben. Die Benutzeroberfläche ist veraltet, aber die hervorgehobenen Blockfunktionen sind immer noch korrekt.
Bibliothek verwalten
Blöcke werden mit ihrem Namen referenziert. Daher muss jeder Block, den Sie erstellen möchten, einen eindeutigen Namen haben. Die Benutzeroberfläche erzwingt dies und macht deutlich, wenn Sie einen neuen Block speichern oder einen vorhandenen Block "aktualisieren".
Sie können zwischen zuvor gespeicherten Blöcken wechseln oder einen neuen leeren Block erstellen, indem Sie auf die Schaltfläche "Bibliothek" klicken. Das Ändern des Namens eines vorhandenen Blocks ist eine weitere Möglichkeit, schnell mehrere Blöcke mit ähnlichen Definitionen zu erstellen.
Bibliothek exportieren und importieren
Blöcke werden im lokalen Speicher des Browsers gespeichert. Wenn Sie den lokalen Speicher des Browsers löschen, werden Ihre Blöcke gelöscht. Laden Sie die Bibliothek herunter, um die Blöcke auf unbestimmte Zeit zu speichern. Die Blockbibliothek wird als XML-Datei heruntergeladen, die importiert werden kann, um die Blockbibliothek auf den Status zu versetzen, in dem sie sich beim Download der Datei befand. Wenn Sie eine Blockbibliothek importieren, wird Ihre aktuelle ersetzt. Daher empfiehlt es sich, die Bibliothek zuerst zu exportieren.
Die Import- und Exportfunktionen sind auch die empfohlene Methode, um verschiedene Gruppen von benutzerdefinierten Blöcken zu verwalten und freizugeben.
Tab „Exporter blockieren“
Sobald Sie Ihre Blöcke entworfen haben, müssen Sie die Blockdefinitionen und Generator-Stubs exportieren, um sie in einer Anwendung zu verwenden. Dies erfolgt auf dem Tab Block-Exporter.
Jeder in Ihrer Blockbibliothek gespeicherte Block wird in der Blockauswahl angezeigt. Klicken Sie auf den Block, um ihn für den Export auszuwählen oder die Auswahl aufzuheben. Wenn Sie alle Blöcke in Ihrer Bibliothek auswählen möchten, verwenden Sie die Option „Auswählen“ → „Alle in der Blockbibliothek gespeicherten Blöcke“. Wenn Sie Ihre Toolbox erstellt oder Ihren Arbeitsbereich über den Tab Workspace Factory konfiguriert haben, können Sie auch alle verwendeten Blöcke auswählen. Klicken Sie dazu auf „Select“ (Auswählen) → „All used in Workspace Factory“.
In den Exporteinstellungen können Sie auswählen, auf welche generierte Sprache ausgerichtet werden soll und ob die Definitionen, die Generator-Stubs oder beides für die ausgewählten Blöcke verwendet werden sollen. Nachdem Sie diese ausgewählt haben, klicken Sie auf „Exportieren“, um Ihre Dateien herunterzuladen.
Tab „Workspace Factory“
Mit Workspace Factory können Sie ganz einfach eine Toolbox und den Standardsatz von Blöcken in einem Arbeitsbereich konfigurieren. Mit den Schaltflächen „Toolbox“ und „Arbeitsbereich“ können Sie zwischen der Bearbeitung der Toolbox und dem Startbereich wechseln.
Eine Toolbox erstellen
Dieser Tab hilft beim Erstellen des XML-Codes für eine Toolbox. Dabei wird davon ausgegangen, dass Sie mit den Funktionen der Toolbox vertraut sind. Wenn Sie bereits XML für eine Toolbox haben, die Sie hier bearbeiten möchten, können Sie es laden, indem Sie auf „Zum Bearbeiten laden“ klicken.
Toolbox ohne Kategorien
Wenn Sie einige Blöcke ohne Kategorien anzeigen möchten, ziehen Sie sie einfach in den Arbeitsbereich. Die Blöcke werden dann in der Toolbox in der Vorschau angezeigt.
Toolbox mit Kategorien
Wenn Sie Anzeigeblöcke in Kategorien anzeigen möchten, klicken Sie auf die Schaltfläche „+“ und wählen Sie das Drop-down-Menü für eine neue Kategorie aus. Dadurch wird eine Kategorie zu Ihrer Kategorieliste hinzugefügt, die Sie auswählen und bearbeiten können. Wählen Sie „Standardkategorie“ aus, um eine einzelne Standard-Blockly-Kategorie (Logik, Schleifen usw.) hinzuzufügen, oder „Standard Toolbox“, um alle Standard-Blockly-Kategorien hinzuzufügen. Verwenden Sie die Pfeiltasten, um die Kategorien neu anzuordnen.
Über das Drop-down-Menü „Kategorie bearbeiten“ können Sie den Namen oder die Farbe der ausgewählten Kategorie ändern. Wenn Sie einen Block in den Arbeitsbereich ziehen, wird er der ausgewählten Kategorie hinzugefügt.
Erweiterte Bausteine
Standardmäßig können Sie der Toolbox beliebige Standardblöcke oder beliebige Blöcke aus Ihrer Bibliothek hinzufügen. Wenn Sie in JSON definierte Blöcke haben, die sich nicht in Ihrer Bibliothek befinden, können Sie sie über die Schaltfläche „Benutzerdefinierte Bausteine importieren“ importieren.
Einige Blöcke sollten zusammen verwendet werden oder Standardblöcke enthalten. Dazu werden Gruppen und Schatten verwendet. Alle Blöcke, die im Editor verbunden sind, werden der Toolbox als Gruppe hinzugefügt. Blöcke, die mit einem anderen Block verbunden sind, können auch in Schattenblöcke geändert werden. Wählen Sie dazu den untergeordneten Block aus und klicken Sie auf die Schaltfläche "Schatten erzeugen". Hinweis: Nur untergeordnete Blöcke, die keine Variable enthalten, können in Schattenblöcke geändert werden.
Wenn Sie eine Variable oder einen Funktionsblock in die Toolbox aufnehmen, geben Sie die Kategorie „Variablen“ oder „Funktionen“ in die Toolbox ein, damit Nutzer den Block vollständig verwenden können. Weitere Informationen zu den Kategorien „Variablen“ und „Funktionen“
Arbeitsbereich konfigurieren (für das Web Blockly)
Rufen Sie den Tab „Workspace Factory“ auf und wählen Sie „Workspace“ aus, um verschiedene Teile Ihres Arbeitsbereichs zu konfigurieren.
Workspace-Optionen auswählen
Legen Sie verschiedene Werte für Konfigurationsoptionen fest. Das Ergebnis wird im Vorschaubereich angezeigt. Wenn Sie das Raster oder das Zoomen aktivieren, werden weitere Konfigurationsoptionen angezeigt. Außerdem erfordert der Wechsel zur Verwendung von Kategorien in der Regel einen komplexeren Arbeitsbereich. Ein Papierkorb und Bildlaufleisten werden automatisch beim Hinzufügen der ersten Kategorie hinzugefügt.
Vorinstallierte Blocks zum Arbeitsbereich hinzufügen
Dies ist optional, kann aber erforderlich sein, wenn Sie eine Reihe von Blöcken im Arbeitsbereich anzeigen möchten:
- Beim Laden der Anwendung
- Wenn ein Ereignis ausgelöst wird (z. B. das Aufrufen eines Levels oder das Klicken auf eine Hilfeschaltfläche).
Ziehen Sie Blöcke in den Bearbeitungsbereich, damit sie in der Vorschau im Arbeitsbereich zu sehen sind. Sie können Blockgruppen erstellen, Blöcke deaktivieren und bestimmte Blöcke als Schattenblöcke festlegen, wenn Sie sie auswählen.
Sie können diese Blöcke als XML exportieren (siehe unten). Fügen Sie sie direkt nach dem Erstellen des Arbeitsbereichs mit Blockly.Xml.domToWorkspace dem Arbeitsbereich hinzu:
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);
Mit diesem Beispielcode wird dem Arbeitsbereich ein einzelner math_number-Block hinzugefügt.
Wird exportiert
Workspace Factory bietet Ihnen die folgenden Exportoptionen:
- Startcode: Erzeugt Start-HTML und JavaScript, um den benutzerdefinierten Blockly-Arbeitsbereich einzufügen.
- Toolbox: Erzeugt XML zur Angabe Ihrer Toolbox.
- Arbeitsbereichsblöcke: Erzeugt XML, die in einen Arbeitsbereich geladen werden können.