Anatomi blok

Dokumen ini membahas berbagai bagian blok.

Koneksi

Koneksi menentukan tempat blok dapat terhubung dan jenis blok yang dapat terhubung.

Ada empat jenis koneksi:

Jenis koneksi Gambar
Koneksi output koneksi output
Koneksi input koneksi input
Koneksi sebelumnya koneksi sebelumnya
Koneksi berikutnya koneksi berikutnya

Koneksi output dan koneksi input dapat terhubung bersama, dan koneksi berikutnya dan koneksi sebelumnya dapat terhubung bersama. Anda dapat membatasi koneksi lebih lanjut dengan pemeriksaan koneksi.

Anda dapat menyesuaikan bentuk koneksi menggunakan perender kustom.

Koneksi tingkat teratas

Blok memiliki tiga koneksi yang penggunaannya bersifat opsional.

Blok dapat memiliki satu koneksi output, yang ditampilkan sebagai konektor jigsaw jantan di tepi depan blok. Koneksi output meneruskan nilai (ekspresi) blok ke blok lain. Blok dengan koneksi output disebut blok nilai.

Blok math_number.

Blok dapat memiliki koneksi sebelumnya di bagian atasnya (diwakili sebagai takik) dan koneksi berikutnya di bagian bawahnya (diwakili sebagai tab). Blok ini memungkinkan blok disusun secara vertikal, yang merepresentasikan urutan pernyataan. Blok tanpa koneksi output disebut blok pernyataan dan biasanya memiliki koneksi sebelumnya dan berikutnya.

Blok variables_set.

Untuk mengetahui informasi selengkapnya, lihat Koneksi tingkat teratas.

Kolom

Kolom menentukan sebagian besar elemen UI dalam blok. Hal ini mencakup label string, dropdown, kotak centang, gambar, dan input untuk data literal seperti string dan angka. Misalnya, blok loop ini menggunakan kolom label, kolom dropdown, dan kolom angka.

Blok dengan beberapa kolom.

Blockly menyediakan sejumlah kolom bawaan, termasuk input teks, pemilih warna, dan gambar. Anda juga dapat membuat kolom sendiri.

Untuk mengetahui informasi selengkapnya, lihat Kolom.

Input

Input adalah penampung untuk kolom dan koneksi. Blok dibuat dengan merender inputnya dalam satu atau beberapa baris seperti batu bata.

Ada empat jenis input yang berbeda, yang semuanya dapat berisi kolom (termasuk label) dan dua di antaranya berisi satu koneksi. Anda juga dapat membuat input kustom, yang mendukung rendering kustom.

Jenis input Jenis koneksi Gambar
Input tiruan Tidak ada input tiruan
Input akhir baris Tidak ada input akhir baris
Input nilai Koneksi input input nilai
Input pernyataan Koneksi berikutnya input pernyataan

Kita akan memperkenalkan input ini melalui serangkaian contoh. Untuk mengetahui informasi tentang cara menentukan input, koneksi, dan kolom yang membentuk blok, lihat Struktur blok dalam JSON dan Struktur blok dalam JavaScript.

Input contoh

Input dummy hanyalah penampung untuk kolom -- tidak memiliki koneksi. Misalnya, blok angka berikut memiliki satu input dummy yang berisi satu kolom angka.

Blok angka dengan input dummy dan kolom angka

Sebagai contoh yang lebih kompleks, pertimbangkan blok yang menambahkan dua angka bersama-sama. Objek ini dapat dibuat dari satu input tiruan dengan tiga kolom (angka, label, angka):

Blok penambahan yang dibuat dari input dummy dengan tiga kolom.

atau tiga input dummy, masing-masing dengan satu kolom:

Blok penambahan yang dibuat dari tiga input dummy, masing-masing dengan satu kolom.

Input akhir baris

Blockly menggunakan heuristik untuk memutuskan apakah akan merender semua input dalam satu baris atau merender setiap input dalam barisnya sendiri. Jika Anda ingin memastikan bahwa input memulai baris baru, gunakan input akhir baris sebagai input sebelumnya.

Seperti input dummy, input akhir baris dapat berisi kolom, tetapi tidak memiliki koneksi. Misalnya, berikut adalah blok penambahan yang dibuat dari input akhir baris dengan dua kolom dan input dummy dengan satu kolom. Input akhir baris memaksa input dummy dirender di baris baru.

Blok tambahan dibagi menjadi dua baris oleh input akhir baris.

Input nilai

Kolom memiliki batasan terkait apa yang dapat diterima. Misalnya, kolom angka hanya menerima angka. Namun, bagaimana jika Anda ingin menambahkan dua variabel? Atau, menambahkan hasil panggilan prosedur ke hasil perhitungan yang berbeda? Untuk mengatasi masalah ini, gunakan koneksi input, bukan kolom. Hal ini memungkinkan pengguna menggunakan blok nilai sebagai nilai input.

Input nilai berisi nol atau lebih kolom dan berakhir di koneksi input. Blok berikut menggantikan kolom angka di blok penambahan dengan koneksi input. Objek ini dibuat dari dua input nilai -- yang pertama tidak berisi kolom apa pun dan yang kedua berisi kolom label. Keduanya berakhir di koneksi input.

Blok penambahan dengan dua input nilai.

Input pernyataan

Jenis input terakhir adalah input pernyataan, yang berisi nol atau lebih kolom dan diakhiri dengan koneksi berikutnya. Koneksi berikutnya memungkinkan Anda menyusun tumpukan blok pernyataan di dalam blok. Misalnya, perhatikan blok pengulangan berikut. Baris kedua blok ini terdiri dari input pernyataan dengan satu kolom label dan koneksi berikutnya.

Blok pengulangan dengan input pernyataan untuk menyusun pernyataan berulang.

Input pernyataan selalu dirender di barisnya sendiri. Anda dapat melihatnya di blok if-then-else berikut, yang memiliki input nilai di baris pertamanya dan input pernyataan di dua baris berikutnya.

Blok if-then-else dengan input pernyataan terpisah untuk pernyataan then dan else.

Input inline versus eksternal

Input dapat dirender secara inline atau secara eksternal. Setelan ini mengontrol apakah konektor untuk input nilai dirender di dalam blok (inline) atau di tepi luar (eksternal), serta apakah input dirender di baris yang sama atau berbeda.

Blok yang sama dirender sekali dengan input inline dan sekali dengan input eksternal.

Saat membuat blok kustom, Anda dapat menentukan blok mana yang akan digunakan atau membiarkan Blockly menentukannya untuk Anda. Untuk mengetahui informasi selengkapnya, lihat Input inline vs. eksternal.

Ayo bermain!

Cara terbaik untuk mempelajari input, kolom, dan koneksi adalah dengan membuat blok di Alat Developer Blockly dan memilih setelan yang berbeda untuk dropdown inputs (automatic, external, inline).

Ikon

Selain input, koneksi, dan kolom, blok dapat memiliki satu atau beberapa ikon. Hal ini memiliki berbagai kegunaan, seperti menampilkan peringatan, memasukkan komentar tingkat blok, atau menampilkan UI mutator. Misalnya, berikut adalah blok dengan ikon komentar dan editor terkaitnya.

Blok dengan ikon komentar dan editor komentar terbuka.

Untuk mengetahui informasi selengkapnya, lihat Icons.

Blok dan objek JavaScript

Blok, input, koneksi, kolom, dan ikon semuanya adalah objek JavaScript.

Komponen Blockly Class dasar Subclass
Blokir Block BlockSvg
Input Input DummyInput
EndRowInput
ValueInput
StatementInput
input kustom
Koneksi Connection RenderedConnection
Kolom Field FieldTextInput
FieldNumber
FieldLabel
kolom kustom
dll.
Ikon Icon CommentIcon
MutatorIcon
WarningIcon
ikon khusus

Objek dalam blok membentuk objek berbentuk pohon. Memahami cara korespondensi representasi grafis blok dengan hierarki ini akan membantu saat Anda menulis kode untuk memanipulasi blok secara terprogram. Misalnya, blok controls_for:

Blok loop dengan kolom variabel, input nilai untuk ke, dari, dan menurut, serta input pernyataan untuk pernyataan berulang.

sesuai dengan hierarki objek JavaScript berikut.

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