يتناول هذا المستند الأجزاء المختلفة من البلوك.
الاتصالات
تحدِّد عمليات الربط الأماكن التي يمكن ربط الوحدات بها وأنواع الوحدات التي يمكن ربطها.
هناك أربعة أنواع من الاتصالات:
| نوع الاتصال | صورة |
|---|---|
| اتصال الإخراج |  |
| اتصال الإدخال |  |
| الاتصال السابق |  |
| الاتصال التالي |  |
يمكن ربط اتصالات الإخراج واتصالات الإدخال معًا، كما يمكن ربط الاتصالات التالية والاتصالات السابقة معًا. يمكنك فرض المزيد من القيود على عمليات الربط باستخدام عمليات التحقّق من الربط.
يمكنك تخصيص أشكال عمليات الربط باستخدام أداة عرض مخصّصة.
عمليات الربط على المستوى الأعلى
تحتوي الوحدات على ثلاثة عناصر ربط يكون استخدامها اختياريًا.
قد يحتوي المكوّن على وصلة إخراج واحدة، ويتم تمثيلها على شكل وصلة ذكرية من أحجية الصور المقطّعة على الحافة الأمامية للمكوّن. يمرّر اتصال الإخراج قيمة (تعبير) أحد المربّعات إلى مربّع آخر. يُطلق على المكوّن الذي يتضمّن اتصالاً بالناتج اسم مكوّن القيمة.
قد يحتوي المربّع على وصلة سابقة في الجزء العلوي (ممثّلة بفتحة) ووصلة تالية في الجزء السفلي (ممثّلة بلسان). تسمح هذه الفئات بتجميع اللبنات عموديًا، ما يمثّل تسلسل عبارات. يُطلق على الكتلة التي لا تتضمّن اتصالاً بالناتج اسم كتلة عبارة، وعادةً ما تتضمّن اتصالات سابقة وتالية.
لمزيد من المعلومات، اطّلِع على عمليات الربط ذات المستوى الأعلى.
الحقول
تحدّد الحقول معظم عناصر واجهة المستخدم داخل أحد الأقسام. وتشمل هذه العناصر تصنيفات السلاسل والقوائم المنسدلة ومربّعات الاختيار والصور وعناصر الإدخال الخاصة بالبيانات الحرفية، مثل السلاسل والأرقام. على سبيل المثال، تستخدم مجموعة الحلقات هذه حقول التصنيف وحقل القائمة المنسدلة وحقول الأرقام.
توفّر Blockly عددًا من الحقول المضمّنة، بما في ذلك إدخالات النصوص وأدوات اختيار الألوان والصور. يمكنك أيضًا إنشاء حقولك الخاصة.
لمزيد من المعلومات، يُرجى الاطّلاع على الحقول.
المدخلات
الإدخالات هي حاويات للحقول وعمليات الربط. يتم إنشاء الكتلة من خلال عرض مدخلاتها في صف واحد أو أكثر مثل الطوب.
هناك أربعة أنواع مختلفة من الإدخالات، يمكن أن يحتوي كل منها على حقول (بما في ذلك التصنيفات)، ويحتوي نوعان منها على عملية ربط واحدة. يمكنك أيضًا إنشاء مدخلات مخصّصة تتيح عرضًا مخصّصًا.
| نوع الإدخال | نوع الاتصال | صورة |
|---|---|---|
| إدخال وهمي | بدون |  |
| إدخال نهاية الصف | بدون | |
| إدخال القيمة | اتصال الإدخال | |
| إدخال عبارة | الاتصال التالي |  |
سنعرض هذه المدخلات من خلال سلسلة من الأمثلة. للحصول على معلومات حول تحديد المدخلات وعمليات الربط والحقول التي تشكّل أحد المربّعات، راجِع بنية المربّع في JSON وبنية المربّع في JavaScript.
إدخالات وهمية
الإدخال الوهمي هو مجرد حاوية للحقول، وليس له اتصال. على سبيل المثال، يحتوي حظر الأرقام التالي على إدخال وهمي واحد يتضمّن حقل أرقام واحدًا.
كمثال أكثر تعقيدًا، لنفترض أنّ هناك كتلة تجمع رقمَين معًا. يمكن إنشاء هذا النوع من إدخال واحد وهمي يتضمّن ثلاثة حقول (رقم، تصنيف، رقم):
أو ثلاث إدخالات وهمية، كل منها يحتوي على حقل واحد:
إدخالات نهاية الصف
تستخدم Blockly طرقًا تجريبية لتحديد ما إذا كان سيتم عرض جميع الإدخالات في صف واحد أو عرض كل إدخال في صف خاص به. إذا أردت التأكّد من أنّ إدخالاً معيّنًا يبدأ صفًا جديدًا، استخدِم إدخال نهاية الصف كإدخال سابق.
مثل المدخلات الوهمية، يمكن أن تحتوي مدخلات نهاية الصف على حقول ولكن ليس لديها اتصال. على سبيل المثال، إليك كتلة الإضافة التي تم إنشاؤها من إدخال نهاية الصف مع حقلَين وإدخال وهمي مع حقل واحد. يؤدي إدخال نهاية الصف إلى عرض الإدخال الوهمي في صف جديد.
إدخالات القيم
تكون الحقول محدودة في ما يمكنها قبوله. على سبيل المثال، لا تقبل حقول الأرقام سوى الأرقام. ولكن ماذا لو أردت إضافة متغيرَين معًا؟ أو هل يمكن إضافة نتيجة استدعاء إجراء إلى نتيجة عملية حسابية مختلفة؟ لحلّ هذه المشكلة، استخدِم عمليات ربط الإدخال بدلاً من الحقول. يسمح هذا للمستخدمين باستخدام كتل القيم كقيم إدخال.
يحتوي إدخال القيمة على صفر أو أكثر من الحقول وينتهي باتصال إدخال. يستبدل المربّع التالي حقول الأرقام في مربّع الإضافة بروابط إدخال. يتم إنشاؤه من خلال إدخال قيمتين، الأولى لا تحتوي على أي حقول والثانية تحتوي على حقل تصنيف. وينتهي كلاهما بوصلات إدخال.
إدخالات كشف الحساب
آخر نوع من الإدخال هو إدخال الجملة، الذي يحتوي على صفر أو أكثر من الحقول وينتهي باتصال تالٍ. يتيح لك الربط التالي تضمين مجموعة من مربّعات العبارات داخل المربّع. على سبيل المثال، ضع في اعتبارك كتلة التكرار التالية. يتألف الصف الثاني من هذا المربّع من إدخال عبارة مع حقل تصنيف واحد واتصال تالٍ.
يتم دائمًا عرض إدخالات البيانات في الصف الخاص بها. يمكنك الاطّلاع على ذلك في كتلة if-then-else التالية، والتي تتضمّن إدخال قيمة في الصف الأول وإدخالات عبارات في الصفين التاليين.
المدخلات المضمّنة مقابل المدخلات الخارجية
يمكن عرض المدخلات بشكل مضمّن أو خارجي. تتحكّم هذه السمة في ما إذا كان سيتم عرض أدوات الربط الخاصة بمدخلات القيم داخل الكتلة (في السطر) أو على الحافة الخارجية (خارجية)، بالإضافة إلى ما إذا كان سيتم عرض المدخلات في الصف نفسه أو في صفوف مختلفة.
عند إنشاء كتلة مخصّصة، يمكنك تحديد الكتلة التي تريد استخدامها أو السماح لـ Blockly بتحديدها نيابةً عنك. لمزيد من المعلومات، يُرجى الاطّلاع على المدخلات المضمّنة مقابل المدخلات الخارجية.
هيا نلعب!
أفضل طريقة للتعرّف على الإدخالات والحقول وعمليات الربط هي إنشاء
مربّعات في أدوات مطوّري Blockly
واختيار إعدادات مختلفة للقائمة المنسدلة inputs (automatic وexternal وinline).
الرموز
بالإضافة إلى المدخلات وعمليات الربط والحقول، يمكن أن تحتوي الوحدات على رمز واحد أو أكثر من الرموز. تتعدّد استخدامات هذه الحقول، مثل عرض التحذيرات أو إدخال تعليقات على مستوى الكتلة أو عرض واجهة مستخدم أداة التعديل. على سبيل المثال، إليك فقرة تتضمّن رمز تعليق ومحرّرًا مرتبطًا بها.
لمزيد من المعلومات، يُرجى الاطّلاع على Icons.
الكتل وكائنات 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'
],
},
]
}