Blockly iş alanı, Blockly'nin en üst düzey bileşenidir. Bloklarla programlama yapmak için kullandığınız kullanıcı arayüzüdür.
Çalışma alanı ve alt bileşenleri hakkında daha fazla bilgi için görsel sözlüğe bakın.
Enjeksiyon div'i
Bir Blockly çalışma alanı, "injection
div" adı verilen bir <div> içine yerleştirilmelidir.
Ekleme div, statik veya dinamik olarak boyutlandırılabilir. div içindeki Blockly öğeleri, pencere yeniden boyutlandırıldığında boyutlarını günceller.
Aşağıdaki kod snippet'inde, statik olarak boyutlandırılmış bir yerleştirmenin HTML'si gösterilmektedir
div:
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
Enjeksiyon
Ekleme, bir çalışma alanının kullanıcı arayüzünü oluşturan tüm HTML alt öğelerini oluşturur. Ayrıca, çalışma alanının kullanıma hazır hale getirilmesi için gereken tüm başlatma işlemlerini de yapar.
Ekleme işlevi, eklemenin kimliğini div veya eklemenin kendisini div alabilir:
// Passes the ID.
const workspace = Blockly.inject('blocklyDiv', { /* config */ });
// Passes the injection div.
const workspace = Blockly.inject(
document.getElementById('blocklyDiv'), { /* config */ });
Yapılandırma
Çalışma alanı, yerleştirme sırasında düzen ve stil gibi birçok seçenekle yapılandırılabilir.
Yapılandırma seçenekleri hakkında daha fazla bilgi için Yapılandırma seçenekleri başlıklı makaleyi inceleyin.