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
Ausgabeverbindung eine Ausgabeverbindung
Eingangsverbindung eine Eingabeverbindung
Vorherige Verbindung eine vorherige Verbindung
Nächste Verbindung eine nächste Verbindung

Ausgabe- und Eingabeverbindungen können miteinander verbunden werden, ebenso wie nächste und vorherige Verbindungen. Mit Verbindungsüberprüfungen können Sie Verbindungen weiter einschränken.

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

Verbindungen der obersten Ebene

Blöcke haben drei Verbindungen, deren Verwendung optional ist.

Ein Block kann eine einzelne Ausgabeverbindung haben, die als männlicher Jigsaw-Anschluss 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.

Einen 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 nachfolgende Verbindungen.

Einen variables_set-Block.

Weitere Informationen finden Sie unter Verbindungen der obersten Ebene.

Felder

Felder definieren die meisten UI-Elemente in einem Block. Dazu gehören Stringlabels, Drop-down-Menüs, Kästchen, Bilder und Eingaben für Literaldaten wie Strings und Zahlen. In diesem Schleifenblock werden beispielsweise Labelfelder, ein Drop-down-Feld und Zahlenfelder verwendet.

Ein Block mit mehreren Feldern.

Blockly bietet eine Reihe von vordefinierten Feldern, darunter Textfelder, 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 Ziegel 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 das benutzerdefinierte Rendering unterstützen.

Eingabetyp Verbindungstyp Bild
Dummy-Eingabe Keine Dummy-Eingabe
Eingabe für Endzeile Keine Eingabe für Endzeile
Eingabe von Werten Eingangsverbindung Eingabe von Werten
Eingabe von Erklärungen Nächste Verbindung statement input

Wir stellen diese Eingaben anhand einer Reihe 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 und hat keine Verbindung. Der folgende Zahlenblock enthält 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, der zwei Zahlen addiert. Dies könnte aus einer einzelnen Dummy-Eingabe mit drei Feldern (Nummer, Label, Nummer) erstellt werden:

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

oder drei Dummy-Eingabefelder mit jeweils einem Feld:

Ein Additionsblock aus drei Dummy-Eingängen, die jeweils ein einzelnes Feld enthalten.

Eingaben am Ende von Zeilen

Blockly verwendet Heuristiken, um zu entscheiden, ob alle Eingaben in einer einzigen Zeile oder jede Eingabe in einer eigenen Zeile gerendert werden sollen. Wenn Sie sicher sein möchten, dass eine Eingabe mit einer neuen Zeile beginnt, verwenden Sie als vorherige Eingabe eine Eingabe für das Ende der Zeile.

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

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

Eingaben von Werten

Felder sind in Bezug auf die zulässigen Eingaben eingeschränkt. In Zahlenfeldern können beispielsweise nur Zahlen eingegeben werden. Was aber, wenn Sie zwei Variablen addieren möchten? Oder das Ergebnis eines Verfahrensaufrufs zum Ergebnis einer anderen Berechnung addieren? Verwenden Sie zum Beheben dieses Problems Eingabeverbindungen anstelle von Feldern. So können Nutzer Werteblöcke als Eingabewerte verwenden.

Eine Werteingabe enthält null oder mehr Felder und endet mit einer Eingabeverbindung. Im folgenden Block werden die Zahlenfelder im Additionsblock durch Eingabeverbindungen ersetzt. Sie besteht aus zwei Wertinputs: Der erste enthält keine Felder und der zweite ein Labelfeld. Beide enden in Eingabeverbindungen.

Ein Additionsblock mit zwei Werten als Eingabe.

Eingaben für die Erklärung

Der letzte Eingabetyp 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 Ihrem Block verschachteln. Betrachten Sie beispielsweise den folgenden Wiederholungsblock. Die zweite Zeile dieses Blocks besteht aus einer Anweisungseingabe mit einem einzelnen Labelfeld und einer nächsten Verbindung.

Ein Wiederholungsblock mit einer Anweisungseingabe zum Verschachteln wiederholter Anweisungen.

Anweisungseingaben werden immer in einer eigenen Zeile gerendert. Das sehen Sie im folgenden Wenn-Dann-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 die Then- und Else-Anweisungen.

Inline-Eingabe im Vergleich zu externer Eingabe

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

Derselbe Block wird einmal mit Inline-Eingängen 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- und externe Eingaben.

Viel Spaß!

Am besten lernen Sie Eingaben, Felder und Verbindungen kennen, 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 ein oder mehrere Symbole haben. Sie können beispielsweise Warnungen anzeigen, Kommentare auf Blockebene eingeben oder die Benutzeroberfläche des Mutatators anzeigen. Hier ist beispielsweise ein Block mit einem Kommentarsymbol und dem zugehörigen Editor zu sehen.

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

Weitere Informationen finden Sie unter Symbole.

Blöcke und JavaScript-Objekte

Blöcke, Eingaben, Verbindungen, Felder und Symbole sind alle 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 strukturelles 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, Werten für „bis“, „von“ und „bis zu“ sowie einer Anweisungseingabe für wiederholte Anweisungen.

entspricht dem folgenden JavaScript-Objektbaum.

// <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'
      ],
    },
  ]
}