Bir bloğun anatomisi

Bu belgede, bir bloğun farklı bölümleri ele alınmaktadır.

Bağlantılar

Bağlantılar, blokların nereye ve ne tür bloklara bağlanabileceğini tanımlar.

Dört tür bağlantı vardır:

Bağlantı türü Resim
Çıkış bağlantısı çıkış bağlantısı
Giriş bağlantısı giriş bağlantısı
Önceki bağlantı önceki bir bağlantı
Sonraki bağlantı bir sonraki bağlantı

Çıkış bağlantıları ve giriş bağlantıları birbirine bağlanabilir. Ayrıca sonraki bağlantılar ve önceki bağlantılar da birbirine bağlanabilir. Bağlantı kontrolleri ile bağlantıları daha da kısıtlayabilirsiniz.

Özel bir oluşturucu kullanarak bağlantıların şekillerini özelleştirebilirsiniz.

Üst düzey bağlantılar

Bloklarda, kullanımı isteğe bağlı olan üç bağlantı bulunur.

Bir blokta, blokun ön kenarında erkek yapboz bağlayıcı olarak gösterilen tek bir çıkış bağlantısı olabilir. Çıkış bağlantısı, bir bloğun değerini (ifade) başka bir bloğa aktarır. Çıkış bağlantısı olan bir bloğa değer bloğu denir.

Bir math_number bloğu.

Bir blok, üst kısmında önceki bağlantıyı (çentik olarak gösterilir) ve alt kısmında sonraki bağlantıyı (sekme olarak gösterilir) içerebilir. Bu bloklar, bir ifade dizisini temsil edecek şekilde dikey olarak üst üste yerleştirilebilir. Çıkış bağlantısı olmayan bir bloğa ifade bloğu denir ve genellikle hem önceki hem de sonraki bağlantıları vardır.

A variables_set block.

Daha fazla bilgi için Üst düzey bağlantılar başlıklı makaleyi inceleyin.

Alanlar

Alanlar, bir bloktaki kullanıcı arayüzü öğelerinin çoğunu tanımlar. Bunlar arasında dizeler ve sayılar gibi değişmez veriler için dize etiketleri, açılır listeler, onay kutuları, resimler ve girişler yer alır. Örneğin, bu döngü bloğunda etiket alanları, bir açılır liste alanı ve sayı alanları kullanılmaktadır.

Birden fazla alan içeren bir blok.

Blockly, metin girişleri, renk seçiciler ve resimler gibi çeşitli yerleşik alanlar sağlar. Kendi alanlarınızı da oluşturabilirsiniz.

Daha fazla bilgi için Alanlar konusuna bakın.

Girişler

Girişler, alanlar ve bağlantılar için kapsayıcılardır. Bloklar, girişleri tuğla gibi bir veya daha fazla satırda oluşturularak oluşturulur.

Dört farklı giriş türü vardır. Bunların tümü alan (etiketler dahil) içerebilir ve ikisi tek bir bağlantı içerir. Ayrıca, özel oluşturmayı destekleyen özel girişler de oluşturabilirsiniz.

Giriş türü Bağlantı türü Resim
Sahte giriş Yok sahte giriş
Satır sonu girişi Yok satır sonu girişi
Değer girişi Giriş bağlantısı değer girişi
Ekstre girişi Sonraki bağlantı ifade girişi

Bu girişleri bir dizi örnekle açıklayacağız. Bir bloğu oluşturan girişleri, bağlantıları ve alanları tanımlama hakkında bilgi edinmek için JSON'da blok yapısı ve JavaScript'te blok yapısı başlıklı makaleleri inceleyin.

Sahte girişler

Doldurma girişi yalnızca alanların kapsayıcısıdır ve bağlantısı yoktur. Örneğin, aşağıdaki sayı bloğunda tek bir sayı alanı içeren tek bir sahte giriş vardır.

Bir sahte giriş ve bir sayı alanı içeren sayı bloğu.

Daha karmaşık bir örnek olarak, iki sayıyı toplayan bir bloğu ele alalım. Bu, üç alanlı (sayı, etiket, sayı) tek bir sahte girişten oluşturulabilir:

Üç alanlı sahte bir girişle oluşturulmuş ekleme bloğu.

veya her biri tek bir alan içeren üç sahte giriş:

Her biri tek bir alan içeren üç sahte girişten oluşturulmuş bir toplama bloğu.

Satır sonu girişleri

Blockly, tüm girişleri tek bir satırda mı yoksa her girişi kendi satırında mı oluşturacağına karar vermek için sezgisel yöntemler kullanır. Bir girişin yeni bir satır başlatmasını istiyorsanız önceki giriş olarak satır sonu girişi kullanın.

Sahte girişler gibi, satır sonu girişleri de alan içerebilir ancak bağlantısı yoktur. Örneğin, burada iki alanlı bir satır sonu girişi ve bir alanlı bir sahte girişten oluşturulmuş toplama bloğu yer almaktadır. Satır sonu girişi, sahte girişin yeni bir satırda oluşturulmasını zorlar.

Satır sonu girişiyle iki satıra bölünmüş bir toplama bloğu.

Değer girişleri

Alanlar, kabul edebilecekleri değerler açısından sınırlıdır. Örneğin, sayı alanlarına yalnızca sayı girilebilir. Peki iki değişkeni birlikte eklemek isterseniz ne yapmanız gerekir? Veya bir prosedür çağrısının sonucunu farklı bir hesaplamanın sonucuna mı eklemek istiyorsunuz? Bu sorunu çözmek için alanlar yerine giriş bağlantılarını kullanın. Bu sayede kullanıcılar, değer bloklarını giriş değeri olarak kullanabilir.

Değer girişi, sıfır veya daha fazla alan içerir ve giriş bağlantısıyla sona erer. Aşağıdaki blok, toplama bloğundaki sayı alanlarını giriş bağlantılarıyla değiştirir. İki değer girişinden oluşturulur. Birincisi herhangi bir alan içermez, ikincisi ise bir etiket alanı içerir. Her ikisi de giriş bağlantılarıyla sonlanır.

İki değer girişi olan bir toplama bloğu.

Ekstre girişleri

Son giriş türü, sıfır veya daha fazla alan içeren ve bir sonraki bağlantıyla sona eren ifade girişidir. Bir sonraki bağlantı, ifade bloklarından oluşan bir yığını bloğunuzun içine yerleştirmenize olanak tanır. Örneğin, aşağıdaki tekrar bloğunu ele alalım. Bu bloğun ikinci satırı, tek etiket alanına ve sonraki bağlantıya sahip bir ifade girişinden oluşur.

Tekrarlanan ifadeleri yerleştirmek için ifade girişi içeren bir tekrar bloğu.

İfade girişleri her zaman kendi satırlarında oluşturulur. Bunu, ilk satırında değer girişi, sonraki iki satırında ise ifade girişleri bulunan aşağıdaki if-then-else bloğunda görebilirsiniz.

Then ve else ifadeleri için ayrı ifade girişleri içeren bir if-then-else bloğu.

Satır içi ve harici girişler

Girişler satır içi veya harici olarak oluşturulabilir. Bu, değer girişleri için bağlayıcıların blok içinde (satır içi) mi yoksa dış kenarda (harici) mi oluşturulacağını ve girişlerin aynı satırda mı yoksa farklı satırlarda mı oluşturulacağını kontrol eder.

Aynı blok bir kez satır içi girişlerle, bir kez de harici girişlerle oluşturulur.

Özel bir blok oluşturduğunuzda hangisini kullanacağınızı belirtebilir veya Blockly'nin sizin için karar vermesine izin verebilirsiniz. Daha fazla bilgi için Satır içi ve harici girişler başlıklı makaleyi inceleyin.

Oynamaya başlayın.

Girişler, alanlar ve bağlantılar hakkında bilgi edinmenin en iyi yolu, Blockly Geliştirici Araçları'nda bloklar oluşturmak ve inputs açılır listesi için farklı ayarlar seçmektir (automatic, external, inline).

Simgeler

Girişler, bağlantılar ve alanlara ek olarak bloklar bir veya daha fazla simgeye sahip olabilir. Bunlar, uyarıları gösterme, blok düzeyinde yorumlar girme veya mutasyon aracı kullanıcı arayüzünü gösterme gibi çeşitli amaçlarla kullanılır. Örneğin, burada yorum simgesi ve ilişkili düzenleyicisi olan bir blok gösterilmektedir.

Yorum simgesi ve açık yorum düzenleyicisi içeren bir blok.

Daha fazla bilgi için Icons konusuna bakın.

Bloklar ve JavaScript nesneleri

Bloklar, girişler, bağlantılar, alanlar ve simgeler JavaScript nesneleridir.

Blockly bileşeni Temel sınıf Alt sınıflar
Engelle Block BlockSvg
Giriş Input DummyInput
EndRowInput
ValueInput
StatementInput
özel giriş
Bağlantı Connection RenderedConnection
Alan Field FieldTextInput
FieldNumber
FieldLabel
özel alan
vb.
Simge Icon CommentIcon
MutatorIcon
WarningIcon
özel simge

Bir bloktaki nesneler, ağaç şekilli bir nesne oluşturur. Bir bloğun grafiksel gösteriminin bu ağaca nasıl karşılık geldiğini anlamak, blokları programatik olarak değiştirmek için kod yazarken faydalıdır. Örneğin, bir controls_for bloğu:

Değişken alanı, başlangıç, bitiş ve artış için değer girişleri ve tekrarlanan ifadeler için ifade girişi içeren bir döngü bloğu.

JavaScript nesnelerinin aşağıdaki ağacına karşılık gelir.

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