Anatomie eines Blocks

In diesem Dokument werden die verschiedenen Teile eines Blocks beschrieben.

Verbindungen

Mit Verbindungen wird festgelegt, wo Blöcke verbunden werden können und mit welchen Arten von Blöcken sie verbunden werden können.

Es gibt vier Arten von Verbindungen:

Verbindungstyp Bild
Ausgangsanschluss eine Ausgabeverbindung
Eingangsanschluss eine Eingabeverbindung
Vorherige Verbindung eine vorherige Verbindung
Nächste Verbindung eine nächste Verbindung

Ausgabe- und Eingabeverbindungen sowie nächste und vorherige Verbindungen können miteinander verbunden werden. Sie können Verbindungen mit Verbindungsprüfungen weiter einschränken.

Mit einem benutzerdefinierten Renderer können Sie die Formen von Verbindungen anpassen.

Verbindungen der obersten Ebene

Blöcke haben drei Anschlüsse, deren Verwendung optional ist.

Ein Block kann eine einzelne Ausgabeverbindung haben, die als männlicher Steckverbinder an der Vorderkante eines Blocks dargestellt wird. Über eine Ausgabeverbindung wird der Wert (Ausdruck) eines Blocks an einen anderen Block übergeben. Ein Block mit einer Ausgabeverbindung wird als Wertblock bezeichnet.

Ein math_number-Block.

Ein Block kann oben eine vorherige Verbindung (als Kerbe dargestellt) und unten eine nächste Verbindung (als Tab dargestellt) haben. So können Blöcke vertikal gestapelt werden, um eine Abfolge von Anweisungen darzustellen. Ein Block ohne Ausgabeverbindung wird als Anweisungsblock bezeichnet und hat in der Regel sowohl vorherige als auch nächste Verbindungen.

Ein „variables_set“-Block.

Weitere Informationen finden Sie unter Verbindungen auf oberster Ebene.

Felder

Felder definieren die meisten UI-Elemente in einem Block. Dazu gehören die String-Labels, Drop-down-Menüs, Kästchen, Bilder und Eingaben für Literal-Daten wie Strings und Zahlen. Dieser Schleifenblock verwendet beispielsweise Beschriftungsfelder, ein Drop-down-Feld und Zahlenfelder.

Ein Block mit mehreren Feldern.

Blockly bietet eine Reihe von integrierten Feldern, darunter Texteingaben, Farbauswahlen und Bilder. Sie können auch eigene Felder erstellen.

Weitere Informationen finden Sie unter Felder.

Eingaben

Eingaben sind Container für Felder und Verbindungen. Ein Block wird erstellt, indem seine Eingaben in einer oder mehreren Zeilen wie Ziegelsteine gerendert werden.

Es gibt vier verschiedene Arten von Eingaben, die alle Felder (einschließlich Labels) enthalten können. Zwei davon enthalten eine einzelne Verbindung. Sie können auch benutzerdefinierte Eingaben erstellen, die benutzerdefiniertes Rendering unterstützen.

Eingabetyp Verbindungstyp Bild
Dummy-Eingabe Keine Dummy-Eingabe
Eingabe am Ende der Zeile Keine Eingabe am Zeilenende
Werteingabe Eingangsanschluss Werteingabe
Abrechnungseingabe Nächste Verbindung Anweisungseingabe

Wir stellen diese Eingaben anhand von Beispielen vor. Informationen zum Definieren der Eingaben, Verbindungen und Felder, aus denen ein Block besteht, finden Sie unter Blockstruktur in JSON und Blockstruktur in JavaScript.

Dummy-Eingaben

Eine Dummy-Eingabe ist nur ein Container für Felder – sie hat keine Verbindung. Der folgende Zahlenblock hat beispielsweise eine einzelne Dummy-Eingabe, die ein einzelnes Zahlenfeld enthält.

Ein Zahlenblock mit einer Dummy-Eingabe und einem Zahlenfeld.

Ein komplexeres Beispiel ist ein Block, mit dem zwei Zahlen addiert werden. Sie könnte aus einer einzelnen Dummy-Eingabe mit drei Feldern (Zahl, Label, Zahl) bestehen:

Ein Additionsblock, der aus einer Dummy-Eingabe mit drei Feldern erstellt wurde.

oder drei Dummy-Eingaben mit jeweils einem Feld:

Ein Additionsblock, der aus drei Dummy-Eingaben mit jeweils einem Feld besteht.

Eingaben am Ende der Zeile

Blockly verwendet Heuristiken, um zu entscheiden, ob alle Eingaben in einer einzelnen Zeile oder jede Eingabe in einer eigenen Zeile gerendert werden soll. Wenn Sie sichergehen möchten, dass mit einer Eingabe eine neue Zeile begonnen wird, verwenden Sie als vorherige Eingabe eine Eingabe für das Zeilenende.

Wie Dummy-Eingaben können auch End-of-Row-Eingaben Felder enthalten, haben aber keine Verbindung. Hier sehen Sie beispielsweise den Additionsblock, der aus einer Eingabe am Ende der Zeile mit zwei Feldern und einer Dummy-Eingabe mit einem Feld erstellt wurde. Durch die Eingabe für das Zeilenende wird die Dummy-Eingabe in einer neuen Zeile gerendert.

Ein Additionsblock, der durch eine Eingabe für das Zeilenende in zwei Zeilen aufgeteilt wird.

Werteingaben

Felder sind in dem, was sie akzeptieren können, eingeschränkt. In Zahlenfelder können beispielsweise nur Zahlen eingegeben werden. Was aber, wenn Sie zwei Variablen addieren möchten? Oder das Ergebnis eines Prozeduraufrufs zum Ergebnis einer anderen Berechnung hinzufügen? Um dieses Problem zu beheben, verwenden Sie Eingabeverbindungen anstelle von Feldern. So können Nutzer Wertblöcke als Eingabewerte verwenden.

Eine Werteingabe enthält null oder mehr Felder und endet in einer Eingabeverbindung. Im folgenden Block werden die Zahlenfelder im Additionsblock durch Eingabeverbindungen ersetzt. Er wird aus zwei Werteingaben erstellt: Die erste enthält keine Felder und die zweite ein Label-Feld. Beide enden in Eingabeverbindungen.

Ein Additionsblock mit zwei Werteingaben.

Anweisungseingaben

Die letzte Art von Eingabe ist eine Anweisungseingabe, die null oder mehr Felder enthält und mit einer nächsten Verbindung endet. Mit der nächsten Verbindung können Sie einen Stapel von Anweisungsblöcken in Ihren Block einfügen. Betrachten Sie beispielsweise den folgenden Wiederholungsblock. Die zweite Zeile dieses Blocks besteht aus einer Anweisungseingabe mit einem einzelnen Label-Feld und einer „Weiter“-Verbindung.

Ein Wiederholungsblock mit einer Anweisungseingabe zum Verschachteln wiederholter Anweisungen.

Anweisungseingaben werden immer in einer eigenen Zeile gerendert. Das sehen Sie im folgenden If-Then-Else-Block, der in der ersten Zeile eine Werteingabe und in den nächsten beiden Zeilen Anweisungseingaben hat.

Ein „if-then-else“-Block mit separaten Anweisungseingaben für „then“- und „else“-Anweisungen.

Inline- im Vergleich zu externen Eingaben

Eingaben können inline oder extern gerendert werden. Damit wird gesteuert, ob die Verbindungen für Werteingaben innerhalb des Blocks (inline) oder am äußeren Rand (extern) gerendert werden und ob Eingaben in derselben oder in verschiedenen Zeilen gerendert werden.

Derselbe Block wird einmal mit Inline-Eingaben und einmal mit externen Eingaben gerendert.

Wenn Sie einen benutzerdefinierten Block erstellen, können Sie angeben, welcher verwendet werden soll, oder Blockly die Entscheidung überlassen. Weitere Informationen finden Sie unter Inline- vs. externe Eingaben.

Viel Spaß!

Am besten lernen Sie mehr über Eingaben, Felder und Verbindungen, indem Sie Blöcke in den Blockly-Entwicklertools erstellen und verschiedene Einstellungen für das Drop-down-Menü inputs (automatic, external, inline) auswählen.

Symbole

Neben Eingaben, Verbindungen und Feldern können Blöcke auch ein oder mehrere Symbole haben. Sie haben verschiedene Verwendungszwecke, z. B. zum Anzeigen von Warnungen, zum Eingeben von Kommentaren auf Blockebene oder zum Anzeigen der Mutator-Benutzeroberfläche. Hier sehen Sie beispielsweise einen Block mit einem Kommentarsymbol und dem zugehörigen Editor.

Ein Block mit einem Kommentarsymbol und einem geöffneten Kommentarfeld.

Weitere Informationen finden Sie unter Icons.

Blöcke und JavaScript-Objekte

Blöcke, Eingaben, Verbindungen, Felder und Symbole sind alles JavaScript-Objekte.

Blockly-Komponente Basisklasse Abgeleitete Klassen
Blockieren Block BlockSvg
Eingabe Input DummyInput
EndRowInput
ValueInput
StatementInput
Benutzerdefinierte Eingabe
Verbindung Connection RenderedConnection
Feld Field FieldTextInput
FieldNumber
FieldLabel
Benutzerdefiniertes Feld
usw.
Symbol Icon CommentIcon
MutatorIcon
WarningIcon
benutzerdefiniertes Symbol

Die Objekte in einem Block bilden ein baumförmiges Objekt. Es ist hilfreich zu wissen, wie die grafische Darstellung eines Blocks diesem Baum entspricht, wenn Sie Code schreiben, um Blöcke programmatisch zu bearbeiten. Beispiel für einen controls_for-Block:

Ein Schleifenblock mit einem Variablenfeld, Werteingaben für „bis“, „von“ und „um“ sowie einer Anweisungseingabe für wiederholte Anweisungen.

entspricht dem folgenden Baum von JavaScript-Objekten.

// <Object> means an instance of an Object.
{                                   // Block
  nextConnection: <Connection>,     // ConnectionType NEXT_STATEMENT
  outputConnection: null,
  previousConnection: <Connection>, // ConnectionType PREVIOUS_STATEMENT
  inputList: [                      // Array of Inputs in block
    {                               // ValueInput
      connection: <Connection>,     // ConnectionType INPUT_VALUE
      fieldRow: [                   // Array of fields in Input
        <FieldLabel>,               // 'count with'
        <FieldVariable>,            // i
        <FieldLabel>,               // 'from'
      ],
    },
    {                               // ValueInput
      connection: <Connection>,     // ConnectionType INPUT_VALUE
      fieldRow: [
        <FieldLabel>,               // 'to'
      ],
    },
    {                               // ValueInput
      connection: <Connection>,     // ConnectionType INPUT_VALUE
      fieldRow: [
        <FieldLabel>,               // 'by'
      ],
    },
    {                               // StatementInput
      connection: <Connection>,     // ConnectionType NEXT_STATEMENT
      fieldRow: [
        <FieldLabel>,               // 'do'
      ],
    },
  ]
}