برامج العرض

يتحكّم عارض المحتوى في تطبيق Blockly في شكل الكتلة، بما في ذلك الارتفاع والمساحة المتروكة وسُمك الحدود وشكل الاتصال.

برامج العرض المخصّصة

إذا كنت تريد تخصيص شكل القوالب، ستحتاج إلى إنشاء عارض مخصّص. يمكنك الاطّلاع على المزيد من المعلومات حول هذه العملية من خلال إكمال الدرس التطبيقي حول الترميز أو قراءة المستندات المرجعية. قد يكون من المفيد قراءة الرمز البرمجي لأي عارضات مدمجة في Blockly لفهم طريقة عملها.

لإنشاء عارض مخصص، يجب تنفيذ ما يلي:

1. تحديد عارض جديد. يمكنك تصنيف فئة فرعية إما فئة العارض الأساسي أو أي فئة من برامج العرض الحالية بناءً على المكان الذي ترغب في البدء منه.
2. تجاوز الأجزاء التي تريد تغييرها.
   1. على سبيل المثال، لإضافة المزيد من المساحة المتروكة إلى قوالب الرموز، يمكنك تصنيف ConstantProvider بشكل فرعيّ (مجددًا، إما القاعدة الأساسية أو أي عارض حالي)، وإلغاء الثابت ذي الصلة. ستظل جميع القيم الأخرى هي نفسها مثل الفئة الأساسية التي اخترتها.
   2. في الصف الفرعي المخصّص "Renderer"، عليك الربط بالصف ConstantProvider الجديد. يمكنك إلغاء الدالة makeConstants_ لعرض مثيل جديد من ConstantProvider المخصص بدلاً من الفئة الأساسية.
   3. اتّبِع العملية نفسها عند إلغاء فئات أخرى مثل PathObject أو Drawer.

3. تسجيل العارض:

   Blockly.blockRendering.register('custom_renderer', CustomRenderer);
   

4. استخدام العارض في تطبيقك:

   Blockly.inject('blocklyDiv', {
     renderer: 'custom_renderer'
   });
   

أجهزة العرض المدمجة

يوفّر تطبيق Blockly العديد من برامج العرض المُنشأة مسبقًا. يمكنك استخدام هذه العناصر كما هي أو استخدامها كأساس لبرنامج عرض مخصّص.

• geras (تلقائي)
• thrasos (أسلوب أكثر حداثة على geras)
• zelos (يشبه Scratch)
• minimalist (فئات العارض الأساسي)

لاستخدام أحد برامج العرض هذه، أدخِل الاسم في خيارات الحقن:

Blockly.inject('blocklyDiv', {
  renderer: 'thrasos'
});

لتصنيفها إلى فئات فرعية، قم بتوسيع الفئات المناسبة:

class CustomRenderer extends Blockly.geras.Renderer {}
class CustomConstantProvider extends Blockly.geras.ConstantProvider {}