Araştırma Anketi: Blockly deneyiminizden bahsedin

Bu sayfa, Cloud Translation API ile çevrilmiştir.

Bir bloğun anatomisi

Bu dokümanda, bir bloğun farklı bölümleri incelenmektedir.

Bağlantılar

Bağlantılar, blokların nerelere 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ı
Giriş bağlantısı
Önceki bağlantı
Sonraki bağlantı

Çıkış bağlantıları ve giriş bağlantıları birbirine bağlanabilir. Sonraki bağlantılar ve önceki bağlantılar da birbirine bağlanabilir. Bağlantı kontrolleriyle bağlantıları daha da kısıtlayabilirsiniz.

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

Üst düzey bağlantılar

Blokların kullanımı isteğe bağlı olan üç bağlantısı vardır.

Bir bloğun ön kenarında erkek jigsaw konnektörü olarak gösterilen tek bir çıkış bağlantısı olabilir. Çıkış bağlantısı, bir bloğun değerini (ifadesini) başka bir bloğa iletir. Çıkış bağlantısı olan bir bloğa değer bloğu denir.

math_number bloğu.

Bir bloğun üst kısmında önceki bağlantı (çentik olarak gösterilir) ve alt kısmında sonraki bağlantı (sekme olarak gösterilir) olabilir. Bu sayede bloklar, bir ifade dizisini temsil edecek şekilde dikey olarak yığılabilir. Çıkış bağlantısı olmayan bir bloğa ifade bloğu denir ve genellikle hem önceki hem de sonraki bağlantılara sahiptir.

Bir variables_set bloğu.

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

Alanlar

Alanlar, bir bloktaki kullanıcı arayüzü öğelerinin çoğunu tanımlar. Dize etiketleri, açılır listeler, onay kutuları, resimler ve dize ve sayı gibi değer verileri için girişler buna dahildir. Örneğin, bu döngü bloğunda etiket alanları, açılır liste alanı ve sayı alanları kullanılmaktadır.

Birden fazla alan içeren bir blok.

Blockly, metin girişleri, renk seçicileri ve resimler dahil olmak üzere çeşitli yerleşik alanlar sağlar. Kendi alanlarınızı da oluşturabilirsiniz.

Daha fazla bilgi için Alanlar bölümüne bakın.

Girişler

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

Dört farklı giriş türü vardır. Bunların tümü alanlar (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
Önizleme girişi	Yok
Satır sonu girişi	Yok
Değer girişi	Giriş bağlantısı
Açıklama girişi	Sonraki bağlantı

Bu girişleri bir dizi örnekle tanıtacağı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.

Öğesiz girişler

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

Öğe girişi ve sayı alanı içeren bir sayı bloğu.

Daha karmaşık bir örnek olarak, iki sayıyı toplayan bir blok düşünelim. Bu, üç alan (sayı, etiket, sayı) içeren tek bir örnek girişten oluşturulabilir:

Üç alan içeren bir boş girişten oluşturulan bir toplama bloğu.

veya her biri tek bir alana sahip üç tane sanal giriş:

Her biri tek bir alana sahip üç sanal girişten oluşturulmuş bir toplama bloğu.

Satır sonu girişleri

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

Sanal girişler gibi satır sonu girişleri de alanlar içerebilir ancak bağlantıları yoktur. Örneğin, iki alanı olan bir satır sonu girişinden ve bir alanı olan bir sanal girişten oluşturulan toplama bloğu aşağıda verilmiştir. Satır sonu girişi, sözde girişin yeni bir satırda oluşturulmasını zorunlu kılar.

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

Değer girişleri

Alanlar, kabul edebilecekleri içeriklerle sınırlıdır. Örneğin, sayı alanları yalnızca sayı kabul eder. Peki iki değişkeni birlikte eklemek isterseniz ne olur? Yoksa 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ı kullanın. Bu sayede kullanıcılar, değer bloklarını giriş değerleri 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 blokta, toplama bloğundaki sayı alanları giriş bağlantılarıyla değiştirilmiştir. İki değer girişinden oluşur. Bunlardan ilki alan içermez, ikincisi ise bir etiket alanı içerir. Her ikisi de giriş bağlantılarıyla sona erer.

İ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 biten ifade girişidir. Sonraki bağlantı, blokunuzun içine bir ifade bloğu yığını yerleştirmenize olanak tanır. Örneğin, aşağıdaki tekrar bloğunu ele alalım. Bu bloğun ikinci satırı, tek bir etiket alanı ve bir sonraki bağlantı içeren bir ifade girişinden oluşur.

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

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

"o zaman" ve "aksi takdirde" ifadeleri için ayrı ifade girişleri içeren bir "eğer-o zaman-aksi takdirde" 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şlerine ait bağlayıcıların blok içinde (satır içi) mi yoksa dış kenarda (harici) mi oluşturulacağının yanı sıra girişlerin aynı satırda mı yoksa farklı satırlarda mı oluşturulacağını kontrol eder.

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

Özel bir blok oluşturduğunuzda hangi blokun kullanılacağını 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 blok oluşturmak ve inputs açılır menüsü için farklı ayarlar (automatic, external, inline) seçmektir.

Simgeler

Bloklar, girişlere, bağlantılara ve alanlara ek olarak bir veya daha fazla simgeye sahip olabilir. Bu öğelerin uyarı görüntüleme, blok düzeyinde yorum girme veya değiştirici kullanıcı arayüzünü görüntüleme gibi çeşitli kullanım alanları vardır. Örneğin, yorum simgesi ve ilişkili düzenleyicisi olan bir blok aşağıda gösterilmektedir.

Daha fazla bilgi için Simgeler bölümüne bakın.

Bloklar ve JavaScript nesneleri

Bloklar, girişler, bağlantılar, alanlar ve simgelerin tümü 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ç şeklinde bir nesne oluşturur. Bir bloğun görsel temsilinin bu ağaca nasıl karşılık geldiğini anlamak, blokları programatik olarak işlemek için kod yazarken faydalıdır. Örneğin, controls_for bloğu:

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

aşağıdaki JavaScript nesnesi 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'
      ],
    },
  ]
}