Blockly Geliştirici Araçları ile blokları kullanarak özel bloklar oluşturabilirsiniz. Temel Blockly ile gelen alanların yanı sıra eklenti olarak yayınlanan alanları da destekler. Özel bir alan oluşturduysanız bu kılavuzu izleyerek Blok Fabrikası'na özel alan desteği ekleyebilirsiniz. Özel alan için destek ekleyebilmeniz için önce npm'de yayınlanması gerekir. Ayrıca, Blockly'deki değişikliklere ayak uydurmak için alanınızı güncellemeyi kabul etmeniz gerekir. Aksi takdirde, gelecekte bu alanı Blok Fabrikası'ndan kaldırmamız gerekebilir.
Blok Fabrikası'nda geliştirme
Blok Fabrikası'nın kaynak kodu, examples/developer-tools dizinindeki blockly-samples
deposu içinde yer alır.
blockly-samples'daki Geliştirici Araçları'nda değişiklik göndermek için blockly-samples'da geliştirme yapmayla ilgili standart adımları uygulamanız gerekir. Ancak eklentilerle çalışmanın aksine, npm
install dosyasını blockly-samples'ın kök düzeyinde değil, doğrudan examples/developer-tools dizininden çalıştırmanız gerekir.
Eklentiyi yükleme
Blok Fabrikası'nın özel alanınızı önizlemede göstermesi için özel alanın yüklenmesi gerekir. Alanınızı developer-tools'un npm bağımlılığı olarak ekleyin. Ardından, cihazı kaydedin veya developer-tools/src/blocks/index.ts'da gerekli diğer kurulum işlemlerini yapın.
Alan için bir blok oluşturma
Blok Fabrikası, özel bloklar oluşturmak için blokları kullandığından özel alanınızı temsil eden bir bloğa ihtiyacınız vardır.
Blok tanımını oluşturma
Alanınız için bloğu tasarlamanız gerekir. İsterseniz Block Factory'yi kullanarak da tasarlayabilirsiniz. Blok, kullanıcının alanınızın gerektirdiği kurulumu (ör. varsayılan değerler ve ad) yapılandırmasına olanak tanımalıdır. Bu blok tanımını developer-tools/src/blocks/fields.ts'a ekleyin ve developer-tools/src/blocks/index.ts'a aktarın.
Araç kutusuna blok ekleme
Ardından, bu bloğu araç kutusu tanımına ekleyerek kullanıcıların erişebilmesini sağlamanız gerekir. Araç kutusu tanımı developer-tools/src/toolbox.ts konumundadır. Bloğunuz "Alanlar" kategorisine eklenmelidir.
Kod Üreticiler
Blok Fabrikası, Blockly'den zaten bildiğiniz Kod Oluşturucu sistemini kullanarak çalışır. Her blokta, Blok Fabrikası tarafından oluşturulan her çıkış türü için bir blok kodu oluşturucu bulunur. Üst bloklar, alt blokların kodunu doğru çıkışta birleştirir. Özel alan desteği eklemek için CodeGenerator sınıflarının her biri için blok kodu oluşturucu işlevler eklemeniz gerekir.
output-generators/fields dizininde alan engellemeniz için bir dosya oluşturun. Bu dosyaya aşağıdaki her bir Oluşturucu için blok kodu oluşturucularını ekleyeceksiniz. Blok kodu oluşturucu işlevlerinin uygulamaya yüklenmesi için bu dosyayı blocks/index.ts dosyasına aktarın.
JavaScript tanımı
javascriptDefinitionGenerator, özel alanınızı içeren bir blok için JavaScript tanımına dahil edilecek kodu oluşturur. Genellikle bu, blok kodu oluşturucunun .appendField(new YourFieldConstructor(arg1, arg2), 'userSpecifiedName') gibi bir kod satırı döndürmesi gerektiği anlamına gelir. Birden fazla alan içeren bir giriş, appendField ile birbirine bağlanmış birkaç çağrıya sahip olacağından bu kod satırının noktalı virgül içermediğini unutmayın. Oluşturucudaki bağımsız değişkenler, kullanıcının alan bloğunda ayarladığı değerlerden alınır. FieldAngle için bu blok kodu oluşturma aracının bir örneğini aşağıda görebilirsiniz:
javascriptDefinitionGenerator.forBlock['field_angle'] = function (
block: Blockly.Block,
generator: JavascriptDefinitionGenerator,
): string {
const name = generator.quote_(block.getFieldValue('FIELDNAME'));
const angle = block.getFieldValue('ANGLE');
return `.appendField(new FieldAngle(${angle}), ${name})`;
};
Kullanıcının Block Factory araç kutusunun "Alanlar" kategorisinden sürüklediği açı bloğunda iki alan bulunur:
FIELDNAME: Kullanıcı, özel yapı taşındaki alanın adını ayarlayabilir.ANGLE: Kullanıcı, varsayılan açı değerini ayarlayabilir.
Bu blok kodu oluşturucuda, varsayılan açı değerini alır ve FieldAngle oluşturucusuna tek bağımsız değişken olarak iletiriz. Alan adı her zaman appendField işlevine ikinci bağımsız değişken olarak iletilir.
JSON tanımı
jsonDefinitionGenerator benzerdir ancak bu, JSON blok tanımının alanınıza karşılık gelen kısmını verir. Bu kod genellikle aşağıdakileri içeren bir JSON nesnesidir:
type: Blockly alan kaydındaki alanınızın adıyla eşleşir.name: Kullanıcı, özel yapı taşındaki alanın adını ayarlayabilir.- Alanınızın JSON başlatma yöntemi için gereken diğer tüm özel özellikler.
FieldAngle ile ilgili başka bir örneği aşağıda görebilirsiniz:
jsonDefinitionGenerator.forBlock['field_angle'] = function (
block: Blockly.Block,
generator: JsonDefinitionGenerator,
): string {
const code = {
type: 'field_angle',
name: block.getFieldValue('FIELDNAME'),
angle: block.getFieldValue('ANGLE'),
};
return JSON.stringify(code);
};
Kod başlıkları
Kod Başlığı Oluşturucu, BlockFactory'de gösterilen Kod Başlıkları çıkışını oluşturur. Bu çıkış, kullanıcının kodu yükleme şekline bağlı olarak esmodule içe aktarmaları ve komut dosyası etiketleri arasında değiştirilebilir. Bu nedenle, her durum için bir tane olmak üzere iki farklı oluşturucu örneği vardır. Her biri için bir blok kodu oluşturucu eklemeniz gerekir. FieldAngle için bir örnek:
importHeaderGenerator.forBlock['field_angle'] = function (
block: Blockly.Block,
generator: CodeHeaderGenerator,
): string {
generator.addHeaderLine(
`import {registerFieldAngle, FieldAngle} from '@blockly/field-angle';`,
);
generator.addHeaderLine(`registerFieldAngle();`);
return '';
};
scriptHeaderGenerator.forBlock['field_angle'] = function (
block: Blockly.Block,
generator: CodeHeaderGenerator,
): string {
generator.addHeaderLine(
`<script src="https://unpkg.com/@blockly/field-angle"></script>`,
);
generator.addHeaderLine(`registerFieldAngle();`);
return '';
};
Bu oluşturucularda, alanınız kodda kullanılmadan önce çağrılması gereken bir kod satırı belirtmenize olanak tanıyan addHeaderLine adlı bir yöntem bulunur. Genellikle bu işlem, alanı içe aktarma veya bir komut dosyası etiketi aracılığıyla yükleme ve belki de alanı Blockly'nin alan kaydına kaydedecek bir işlevi çağırma gibi çalışmaları içerir.
Bu iki blok kodu oluşturucu için tüm kod, addHeaderLine çağrıları aracılığıyla eklenmelidir. Bu işlev, özel alan bloğunuz bir özel blokta birden fazla kez kullanılsa bile her başlık satırının yalnızca bir kez gösterilmesini sağlar. Blok kodu oluşturucu, boş dize döndürmelidir.
Jeneratör saplaması
Son olarak, alan için jeneratör sapı oluşturan jeneratörümüz var. Bu blok kodu oluşturucuda, kullanıcının kod oluşturmasına yardımcı olan kodlar oluşturan kodlar yazacaksınız. Kafanız karıştı mı? Göründüğünden daha kolaydır.
Özel blok için oluşturucu sapı, bloktaki her alanı temsil eden önceden oluşturulmuş bir değişken içerir. Ardından, kullanıcının özel bloğunun döndüreceği son kod dizesinde tüm bu değişkenleri bir araya getirmek için TODO gerekir. Bu nedenle, blok kodu oluşturucunuzun genellikle yapması gereken tek şey bu özel değişkeni oluşturan satırı döndürmektir. Kullanıcının tuvaline güneş ışınları ekleyecek özel bir blok oluşturduğunu varsayalım. Bloka bir açı alanı ekleyip "SUN_DIRECTION" olarak adlandırır. Bu blok için oluşturulan
saplama, const angle_sun_direction =
block.getFieldValue("SUN_DIRECTION"); satırını içerir. Açı alanı için blok kodu oluşturucumuzun döndürmesi gereken kod satırı şudur:
generatorStubGenerator.forBlock['field_angle'] = function (
block: Blockly.Block,
generator: GeneratorStubGenerator,
): string {
const name = block.getFieldValue('FIELDNAME');
const fieldVar = generator.createVariableName('angle', name);
return `const ${fieldVar} = block.getFieldValue(${generator.quote_(
name,
)});\n`;
};
Değişken için standartlaştırılmış bir ad almak üzere generator.createVariableName işlevini çağırabilir ve alanınızın türünü (ör. angle, number vb.) kullanıcının alanına verdiği adla birlikte iletebilirsiniz.
Test etme
Bu parçaların hepsini yazdıktan sonra, npm start komutunu blockly-samples/examples/developer-tools dizininde çalıştırarak BlockFactory'yi başlatabilirsiniz. Blokunuzu alan kategorisinden sürükleyip bir bloktaki girişe ekleyebilir ve çıkışın değişmesini izleyebilirsiniz. Bloğun önizlemesinin doğru göründüğünü ve çıkış bölümlerinin her birine ait kodun doğru olduğunu kontrol edin.