بنية القسم

يتناول هذا المستند الأجزاء المختلفة للكتلة.

الاتصالات

تحدِّد عمليات الربط مواضع ربط الكتل وأنواع الكتل التي يمكن ربطها بها.

هناك أربعة أنواع من عمليات الربط:

نوع الاتصال صورة
اتصال الإخراج اتصال إخراج
اتصال الإدخال اتصال الإدخال
الاتصال السابق اتصال سابق
عملية الربط التالية عملية اتصال تالية

يمكن ربط عمليات الربط الخاصة بالمخرجات بعمليات الربط الخاصة بالمدخلات، ويمكن ربط عمليات الربط التالية بعمليات الربط السابقة. يمكنك تقييد عمليات الربط بشكلٍ أكبر باستخدام عمليات التحقّق من الربط.

يمكنك تخصيص أشكال عمليات الربط باستخدام أداة عرض مخصّصة.

عمليات الربط على مستوى أعلى

تحتوي الكتل على ثلاثة اتصالات يكون استخدامها اختياريًا.

قد يتضمّن المربّع اتصالاً واحدًا للمخرج، يتم تمثيله كموصّل ذكر لقطع الصور المجمعة على الحافة الأمامية للمربّع. ينقل اتصال الإخراج قيمة (تعبير) أحد الكتل إلى كتلة أخرى. يُطلق على المربّع الذي يتضمّن اتصالاً بالمخرج اسم مربّع قيمة.

وحدة math_number

قد يتضمّن المربّع اتصالاً سابقًا في أعلىه (يُمثَّل بعلامة) و اتصالاً لاحقًا في أسفله (يُمثَّل بعلامة تبويب). تسمح هذه العناصر بتثبيت القوالب عموديًا، ما يمثّل تسلسلًا من العبارات. يُطلق على الكتلة التي لا تحتوي على اتصال بالمخرج اسم كتلة عبارة، وعادةً ما تحتوي على كل من الوصلات السابقين والتاليين.

عنصر variables_set

لمزيد من المعلومات، يُرجى الاطّلاع على عمليات الربط على مستوى القمة.

الحقول

تحدِّد الحقول معظم عناصر واجهة المستخدم ضمن أيّ عنصر. وتشمل هذه العناصر تصنيفات السلاسل والمنافذ المنسدلة ومربّعات الاختيار والصور ومدخلات البيانات الحرفية مثل السلاسل والأرقام. على سبيل المثال، يستخدم قالب السلسلة هذا حقول التصنيفات، وحقل القائمة المنسدلة، وحقول الأرقام.

كتلة تحتوي على حقول متعددة

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

لمزيد من المعلومات، يُرجى الاطّلاع على الحقول.

مدخلات

المدخلات هي حاويات للحقول وعمليات الربط. يتم إنشاء الكتلة من خلال عرض مدخلاتها في صف واحد أو أكثر مثل الطوب.

هناك أربعة أنواع مختلفة من الإدخالات، ويمكن أن تحتوي جميعها على حقول (بما في ذلك التصنيفات)، ويحتوي نوعان منها على اتصال واحد. يمكنك أيضًا إنشاء inputs مخصّصة، التي تتيح render مخصّص.

نوع الإدخال نوع الاتصال صورة
إدخال وهمي بدون إدخال وهمي
إدخال نهاية الصف بدون إدخال نهاية الصف
إدخال القيمة اتصال الإدخال إدخال القيمة
إدخال العبارة عملية الربط التالية إدخال العبارة

سنقدّم هذه المدخلات من خلال سلسلة من الأمثلة. للحصول على معلومات حول تحديد المدخلات والوصلات والحقول التي تشكّل كتلة، اطّلِع على بنية الكتلة في JSON وبنية الكتلة في JavaScript.

الإدخالات الوهمية

إدخال وهمي هو مجرد حاوية للحقول، وليس لها اتصال. على سبيل المثال، يحتوي قالب الأرقام التالي على إدخال وهمي واحد يحتوي على حقل رقم واحد.

مجموعة أرقام تتضمّن حقل إدخال وهميًا وحقل أرقام

في ما يلي مثال أكثر تعقيدًا: وحدة تضيف رقمَين معًا. يمكن إنشاء هذه السلسلة من إدخال وهمي واحد يتضمّن ثلاثة حقول (رقم، تصنيف، رقم):

كتلة إضافة تم إنشاؤها من إدخال وهمي يحتوي على ثلاثة حقول

أو ثلاث مدخلات وهمية، يتضمّن كلّ منها حقلًا واحدًا:

وحدة إضافة تم إنشاؤها من ثلاث مدخلات وهمية، ولكل منها حقل واحد

مدخلات نهاية الصف

تستخدِم Blockly أساليب استقرائية لتحديد ما إذا كان سيتم عرض جميع المدخلات في صف واحد أو عرض كل مدخلة في صفها الخاص. إذا كنت تريد التأكّد من أنّ إدخالًا معيّنًا يبدأ بصف جديد، استخدِم إدخال نهاية صف كإدخال سابق.

مثل الإدخالات الوهمية، يمكن أن تحتوي إدخالات نهاية الصف على حقول، ولكن ليس لها اتصال. على سبيل المثال، إليك وحدة الإضافة التي تم إنشاؤها من إدخال نهاية صف يحتوي على حقلين وإدخال وهمي يحتوي على حقل واحد. تفرض إدخال نهاية الصف عرض الإدخال الوهمي في صف جديد.

كتلة إضافة مُقسَّمة إلى صفَّين من خلال إدخال نهاية صف

مدخلات القيمة

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

يحتوي إدخال القيمة على حقل واحد أو أكثر وينتهي بربط إدخال. تستبدل المجموعة التالية حقول الأرقام في مجموعة الإضافة بعمليات input connections. يتم إنشاؤه من مدخلتَي قيمة، الأولى لا تحتوي على أي حقول، والثانية تحتوي على حقل تصنيف. وينتهي كلاهما بوصلات إدخال.

كتلة إضافة تحتوي على قيمتَين مدخلتَين

إدخالات كشف الحساب

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

كتلة تكرار تتضمّن إدخال عبارة لتضمين عبارات repeated متكرّرة

يتم عرض مدخلات العبارة دائمًا في صفها الخاص. يمكنك الاطّلاع على ذلك في العبارة التالية if-then-else التي تحتوي على إدخال قيمة في الصف الأول و inputsعبارة في الصفَّين التاليَين.

مجموعة if-then-else تتضمّن مدخلات عبارة منفصلة لعبارة then وعبارة else

مصادر الإدخال المضمّنة في مقابل مصادر الإدخال الخارجية

يمكن عرض الإدخالات مضمّنة أو خارجيًا. يتحكّم هذا الخيار في ما إذا كان سيتم عرض موصّلات إدخال القيم داخل الكتلة (مضمّنة) أو على الحافة الخارجية (خارجية)، بالإضافة إلى ما إذا كان سيتم عرض الإدخالات في الصفوف نفسها أو المختلفة.

تم عرض الكتلة نفسها مرة واحدة باستخدام مدخلات مضمّنة ومرة واحدة باستخدام مدخلات خارجية.

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

طاب يومك.

إنّ أفضل طريقة للتعرّف على المدخلات والحقول والوصلات هي إنشاء وحدات في أدوات مطوّري Blockly واختيار إعدادات مختلفة للقائمة المنسدلة inputs (automatic وexternal وinline).

الرموز

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

عنصر يتضمّن رمز تعليق ومحرِّر مفتوحًا لإضافة تعليق

لمزيد من المعلومات، يُرجى الاطّلاع على الرموز.

الكتل وكائنات JavaScript

إنّ الكتل والمدخلات والوصلات والحقول والأيقونات كلها عناصر JavaScript.

مكوّن Blockly الفئة الأساسية الفئات الفرعية
حظر Block BlockSvg
الإدخال Input DummyInput
EndRowInput
ValueInput
StatementInput
إدخال مخصّص
الاتصال Connection RenderedConnection
الحقل Field FieldTextInput
FieldNumber
FieldLabel
حقل مخصّص
إلخ
الرمز Icon CommentIcon
MutatorIcon
WarningIcon
رمز مخصّص

تشكل العناصر في المربّع عنصرًا على شكل شجرة. من المفيد معرفة كيفية تطابق التمثيل البياني للوحدة مع هذه الشجرة عند كتابة رمز برمجي لمعالجة الوحدات. على سبيل المثال، controls_for الحظر:

كتلة حلقة تحتوي على حقل متغيّر وإدخالات قيم لكل من "إلى" و"من" و"حسب"، وإدخال عبارة لتكرار العبارة

تتوافق مع الشجرة التالية لكائنات JavaScript.

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