Anwendungsdesign

Bei der Entwicklung einer Anwendung, die Blockly verwendet, können Sie zwischen verschiedenen Paradigmen wählen. Diese Entscheidungen sollten frühzeitig getroffen werden, da sie sich auf die Blöcke auswirken, die der Nutzer benötigt.

Konfiguration

Viele Blockly-Anwendungen werden verwendet, um Konfigurationen zu beschreiben, nicht ausführbare Programme. Konfigurationsanwendungen beginnen in der Regel mit der Initialisierung eines Blocks auf Stammebene im Arbeitsbereich. Ein gutes Beispiel ist der Tab „Block Factory“ der Blockly-Entwicklertools:

Blockly.Blocks['factory_base'] = {
  init: function() {
    this.setDeletable(false);
    this.setMovable(false);
    this.setEditable(false);
    // etc...
  }
}

Blockly.serialization.blocks.append({'type': 'factory_base'}, workspace);

Dadurch wird ein nicht löschbarer und nicht verschiebbarer Block erstellt, der die gesamte Konfiguration des Nutzers enthält. Der Arbeitsbereich kann jederzeit serialisiert werden, um die aktuelle Konfiguration zu ermitteln.

Solche Anwendungen können alle Blöcke, die nicht mit dem Stammblock verbunden sind, automatisch deaktivieren. Dies kann mit einer Zeile erreicht werden:

workspace.addChangeListener(Blockly.Events.disableOrphans);

Serienprogramm

Die meisten Blockly-Anwendungen sind für die Erstellung von sequenziellen Programmen konzipiert. Nutzer stapeln Blöcke, die der Reihe nach ausgeführt werden.

Jeder (nicht deaktivierte) Block im Arbeitsbereich ist Teil des Programms. Wenn es mehrere Stapel von Blöcken gibt, werden die höheren zuerst ausgeführt. Wenn zwei Stapel ungefähr gleich hoch sind, haben Stapel auf der linken Seite (rechts im RTL-Modus) Vorrang.

Der Arbeitsbereich kann jederzeit in ausführbaren Code exportiert werden. Dieser Code kann clientseitig in JavaScript (mit eval oder dem JS-Interpreter) oder serverseitig in einer beliebigen Sprache ausgeführt werden.

import {javascriptGenerator} from 'blockly/javascript';

var code = javascriptGenerator.workspaceToCode(workspace);

Paralleles Programm

In einigen Blockly-Anwendungen werden alle Blockstapel parallel statt seriell ausgeführt. Ein Beispiel wäre eine Musik-App, in der ein Drum-Loop gleichzeitig mit einer Melodie läuft.

Eine Möglichkeit zur Implementierung der parallelen Ausführung besteht darin, den Code für jeden Block einzeln zu generieren:

import {javascriptGenerator} from 'blockly/javascript';

var json = Blockly.serialization.workspaces.save(workspace);

// Store top blocks separately, and remove them from the JSON.
var blocks = json['blocks']['blocks'];
var topBlocks = blocks.slice();  // Create shallow copy.
blocks.length = 0;

// Load each block into the workspace individually and generate code.
var allCode = [];
var headless = new Blockly.Workspace();
for (var i = 0; block < topBlocks.length; i++) {
  var block = topBlocks[i];
  blocks.push(block);
  Blockly.serialization.workspaces.load(json, headless);
  allCode.push(javascriptGenerator.workspaceToCode(headless));
  blocks.length = 0;
}

Wenn die Zielsprache JavaScript ist, kann das allCode-Array verwendet werden, um mehrere JS-Interpreter für die gleichzeitige Ausführung zu erstellen. Wenn die Zielsprache beispielsweise Python ist, kann das allCode-Array in ein einzelnes Programm umgewandelt werden, das ein Threading-Modul verwendet.

Wie bei jedem parallelen Programm müssen sorgfältige Entscheidungen in Bezug auf alle gemeinsam genutzten Ressourcen wie Variablen und Funktionen getroffen werden.

Ereignisgesteuertes Programm

Event-Handler sind nur Funktionen, die vom System und nicht vom Programm aufgerufen werden. Diese Blöcke können entweder den Stapel der auszuführenden Blöcke umschließen oder als Überschriften über einem Stapel von Blöcken stehen.

Einige Entwickler fügen Eventblöcken gern eine „Kappe“ hinzu, damit sie sich von anderen Blöcken unterscheiden. Dies ist nicht das Standarddesign für Blockly, kann aber hinzugefügt werden, indem die Renderer-Konstante ADD_START_HATS in true geändert wird (Custom Renderers Codelab – Override constants) oder indem ein Design hinzugefügt und die „Hat“-Option für den Blockstil festgelegt wird. Weitere Informationen zum Festlegen von Hats für Blöcke als Teil von Designs finden Sie in der Design-Dokumentation unter Blockstil.

In einem ereignisgesteuerten Modell kann es sinnvoll sein, auch einen Handler für den Programmstart zu erstellen. Bei diesem Modell wird jeder Block im Arbeitsbereich, der nicht mit einem Ereignishandler verbunden ist, ignoriert und nicht ausgeführt.

Wenn Sie ein System entwerfen, das Ereignisse verwendet, sollten Sie überlegen, ob es möglich oder wünschenswert ist, mehrere Instanzen desselben Ereignishandlers zu unterstützen.

Arbeitsbereichs-Layout

Es gibt zwei sinnvolle Möglichkeiten, einen Bildschirm von links nach rechts zu gestalten. Eine Möglichkeit beginnt mit der Symbolleiste auf der linken Seite, dem Arbeitsbereich in der Mitte und der Ausgabevisualisierung auf der rechten Seite. Dieses Layout wird von Version 1 von Scratch und von Made with Code verwendet.

Bei der anderen Methode befindet sich die Ausgabevisualisierung links, die Symbolleiste in der Mitte und der Arbeitsbereich rechts. Dieses Layout wird von Version 2 von Scratch sowie von den meisten Blockly-Anwendungen verwendet.

In beiden Fällen sollte der Arbeitsbereich die verfügbare Bildschirmgröße ausnutzen, da Nutzer so viel Platz wie möglich zum Programmieren benötigen. Wie in den Screenshots oben zu sehen ist, schneidet das erste Layout auf breiten Bildschirmen schlecht ab, da der Code des Nutzers und die Ausgabevisualisierung getrennt sind. Das zweite Layout bietet mehr Platz für größere Programme, während alle drei Bereiche weiterhin nah beieinander bleiben.

Es ist auch logisch, dass Nutzer zuerst das Problem betrachten, das sie lösen möchten, dann die bereitgestellten Tools ansehen und erst dann mit der Programmierung beginnen.

Bei Übersetzungen ins Arabische und Hebräische muss die gesamte Reihenfolge natürlich umgekehrt werden.

In einigen Fällen, z. B. wenn nur wenige einfache Blöcke verwendet werden, kann es sinnvoll sein, die Toolbox über oder unter dem Arbeitsbereich zu platzieren. Blockly unterstützt in diesen Fällen horizontales Scrollen in der Toolbox, aber es sollte mit Bedacht verwendet werden.

Empfehlung: Platzieren Sie die Programmdarstellung neben der Symbolleiste.