Ta strona została przetłumaczona przez Cloud Translation API.

Budowa bloku

W tym dokumencie omówimy różne części bloku.

Połączenia

Połączenia określają, gdzie bloki mogą się łączyć i z jakimi blokami mogą się łączyć.

Dostępne są 4 typy połączeń:

Typ połączenia	Obraz
Połączenie wyjściowe
Połączenie wejściowe
Poprzednie połączenie
Następne połączenie

Połączenia wyjściowe i wejściowe mogą się łączyć, a połączenia następne i poprzednie mogą się łączyć. Możesz dodatkowo ograniczyć połączenia za pomocą sprawdzania połączeń.

Możesz dostosować kształty połączeń za pomocą niestandardowego modułu renderującego.

Połączenia najwyższego poziomu

Bloki mają 3 połączenia, których użycie jest opcjonalne.

Blok może mieć jedno połączenie wyjściowe, które jest reprezentowane przez złącze męskie w kształcie puzzla na przedniej krawędzi bloku. Połączenie wyjściowe przekazuje wartość bloku (wyrażenie) do innego bloku. Blok z połączeniem wyjściowym jest nazywany blokiem wartości.

Blok math_number.

Blok może mieć u góry poprzednie połączenie (reprezentowane przez wycięcie), a u dołu następne połączenie (reprezentowane przez wypustkę). Umożliwiają one układanie bloków w pionie, co reprezentuje sekwencję instrukcji. Blok bez połączenia wyjściowego to blok instrukcji, który zwykle ma połączenia poprzednie i następne.

Blok variables_set.

Więcej informacji znajdziesz w artykule Połączenia najwyższego poziomu.

Pola

Pola definiują większość elementów interfejsu w bloku. Obejmują one etykiety tekstowe, menu, pola wyboru, obrazy i pola wprowadzania danych dosłownych, takich jak ciągi znaków i liczby. Na przykład ten blok pętli używa pól etykiet, pola menu i pól liczbowych.

Blok z kilkoma polami.

Blockly udostępnia wiele wbudowanych pól, w tym pola wprowadzania tekstu, selektory kolorów i obrazy. Możesz też tworzyć własne pola.

Więcej informacji znajdziesz w sekcji Pola.

Wejścia

Dane wejściowe to kontenery pól i połączeń. Blok jest tworzony przez renderowanie jego danych wejściowych w co najmniej 1 wierszu, podobnie jak cegieł.

Istnieją 4 różne typy danych wejściowych. Wszystkie mogą zawierać pola (w tym etykiety), a 2 z nich zawierają pojedyncze połączenie. Możesz też tworzyć niestandardowe dane wejściowe, które obsługują niestandardowe renderowanie.

Typ kolumny wejściowej	Typ połączenia	Obraz
Przykładowe dane wejściowe	Brak
Wpisywanie na końcu wiersza	Brak
Pole do wpisania wartości	Połączenie wejściowe
Wprowadzanie wyciągu	Następne połączenie

Przedstawimy je na kilku przykładach. Informacje o definiowaniu danych wejściowych, połączeń i pól, które składają się na blok, znajdziesz w sekcjach Struktura bloku w JSON i Struktura bloku w JavaScript.

Przykładowe dane wejściowe

Przykładowe dane wejściowe to tylko kontener pól – nie ma połączenia. Na przykład ten blok liczb zawiera 1 przykładowe pole wejściowe z 1 polem liczbowym.

Blok liczbowy z fikcyjnym wejściem i polem liczbowym.

Bardziej złożony przykład to blok, który dodaje do siebie 2 liczby. Można ją utworzyć na podstawie 1 przykładowego wejścia z 3 polami (liczba, etykieta, liczba):

Blok dodawania utworzony na podstawie przykładowego wejścia z 3 polami.

lub 3 przykładowe dane wejściowe, z których każde zawiera 1 pole:

Blok dodawania utworzony z 3 przykładowych danych wejściowych, z których każda zawiera jedno pole.

Dane wejściowe na końcu wiersza

Blockly używa heurystyki, aby zdecydować, czy renderować wszystkie dane wejściowe w jednym wierszu, czy w osobnych wierszach. Jeśli chcesz mieć pewność, że dane wejściowe rozpoczną nowy wiersz, użyj jako poprzednich danych wejściowych danych wejściowych końca wiersza.

Podobnie jak wejścia fikcyjne, wejścia końca wiersza mogą zawierać pola, ale nie mają połączenia. Oto na przykład blok dodawania utworzony na podstawie danych wejściowych typu end-of-row z 2 polami i danych wejściowych typu dummy z 1 polem. Dane wejściowe na końcu wiersza wymuszają renderowanie danych wejściowych zastępczych w nowym wierszu.

Blok dodawania podzielony na 2 wiersze przez znak końca wiersza.

Wartości wejściowe

Pola mają ograniczenia dotyczące tego, co mogą akceptować. Na przykład w polach liczbowych można wpisywać tylko liczby. A co, jeśli chcesz dodać do siebie 2 zmienne? Czy można dodać wynik wywołania procedury do wyniku innego obliczenia? Aby rozwiązać ten problem, użyj połączeń wejściowych zamiast pól. Umożliwia to użytkownikom używanie bloków wartości jako wartości wejściowych.

Wejście wartości zawiera co najmniej 1 pole i kończy się połączeniem wejściowym. Poniższy blok zastępuje pola liczbowe w bloku dodawania połączeniami wejściowymi. Składa się z 2 wartości wejściowych – pierwsza nie zawiera żadnych pól, a druga zawiera pole etykiety. Oba kończą się połączeniami wejściowymi.

Blok dodawania z 2 wartościami wejściowymi.

Dane wejściowe wyciągu

Ostatnim typem danych wejściowych jest dane wejściowe instrukcji, które zawierają co najmniej 1 pole i kończą się następnym połączeniem. Następne połączenie umożliwia zagnieżdżenie w bloku stosu bloków instrukcji. Rozważmy na przykład ten blok powtarzania. Drugi wiersz tego bloku składa się z wejścia instrukcji z jednym polem etykiety i następnym połączeniem.

Blok powtarzania z danymi wejściowymi instrukcji do zagnieżdżania powtarzanych instrukcji.

Dane wejściowe instrukcji są zawsze renderowane w osobnym wierszu. Możesz to zobaczyć w tym bloku warunkowym, który w pierwszym wierszu ma dane wejściowe wartości, a w kolejnych dwóch wierszach – dane wejściowe instrukcji.

Blok if-then-else z osobnymi polami danych wejściowych dla instrukcji then i else.

Dane wejściowe wbudowane i zewnętrzne

Dane wejściowe mogą być renderowane w treści lub zewnętrznie. Określa, czy złącza wejść wartości są renderowane wewnątrz bloku (w linii) czy na zewnętrznej krawędzi (zewnętrznej), a także czy wejścia są renderowane w tym samym czy w różnych wierszach.

Ten sam blok renderowany raz z danymi wejściowymi wbudowanymi i raz z danymi wejściowymi zewnętrznymi.

Podczas tworzenia bloku niestandardowego możesz określić, którego z nich chcesz użyć, lub pozwolić, aby Blockly zrobił to za Ciebie. Więcej informacji znajdziesz w artykule Dane wejściowe wbudowane i zewnętrzne.

Miłej zabawy!

Najlepszym sposobem na poznanie wejść, pól i połączeń jest tworzenie bloków w narzędziach dla deweloperów Blockly i wybieranie różnych ustawień w menu inputs (automatic, external, inline).

Ikony

Oprócz wejść, połączeń i pól bloki mogą mieć co najmniej 1 ikonę. Mają one różne zastosowania, np. wyświetlanie ostrzeżeń, wprowadzanie komentarzy na poziomie bloku lub wyświetlanie interfejsu mutatora. Na przykład ten blok zawiera ikonę komentarza i powiązany z nią edytor.

Więcej informacji znajdziesz w sekcji Icons.

Bloki i obiekty JavaScript

Bloki, dane wejściowe, połączenia, pola i ikony to obiekty JavaScript.

Komponent Blockly	Klasa bazowa	Podklasy
Zablokuj	`Block`	`BlockSvg`
Dane wejściowe	`Input`	`DummyInput`
		`EndRowInput`
		`ValueInput`
		`StatementInput`
		dane niestandardowe,
Połączenie	`Connection`	`RenderedConnection`
Pole	`Field`	`FieldTextInput`
		`FieldNumber`
		`FieldLabel`
		pole niestandardowe,
		itd.
Ikona	`Icon`	`CommentIcon`
		`MutatorIcon`
		`WarningIcon`
		ikona niestandardowa,

Obiekty w bloku tworzą obiekt w kształcie drzewa. Zrozumienie, jak graficzna reprezentacja bloku odpowiada temu drzewu, jest przydatne podczas pisania kodu do programowego manipulowania blokami. Na przykład blok controls_for:

Blok pętli z polem zmiennej, polami wartości dla „do”, „od” i „co” oraz polem instrukcji dla powtarzanych instrukcji.

odpowiada następującemu drzewu obiektów JavaScript.

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