الأحداث

يؤدي كل تغيير في مساحة العمل إلى بدء حدث. تصف هذه الأحداث بشكل كامل الحالة قبل كل تغيير وبعده.

الاستماع إلى الأحداث من مساحة العمل

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

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

function onFirstComment(event) {
  if (event.type == Blockly.Events.BLOCK_CHANGE &&
      event.element == 'comment' &&
      !event.oldValue && event.newValue) {
    alert('Congratulations on creating your first comment!')
    workspace.removeChangeListener(onFirstComment);
  }
}
workspace.addChangeListener(onFirstComment);

للاستماع إلى أي أحداث تحدث داخل نافذة منبثقة، يمكن إضافة مستمع إلى مساحة عمل النافذة المنبثقة.

var flyoutWorkspace = yourWorkspace.getFlyout().getWorkspace();
flyoutWorkspace.addChangeListener(onFirstComment);

الاستماع إلى الأحداث من الكتل

يمكن أن تتضمّن الكتل وظائف مستمع للتغييرات يتمّ استدعاؤها عند حدوث أي تغيير في مساحة العمل (بما في ذلك التغييرات غير المرتبطة بالكتلة). غالبًا ما يتم استخدام هذه العناصر لتحديد النص التحذيري للحظر أو إشعار مشابه للمستخدم خارج مساحته

تتم إضافة الدالة من خلال استدعاء Block.setOnChange باستخدام دالة، ويمكن إجراء ذلك أثناء الإعداد أو من خلال إضافة JSON إذا كنت تخطّط لاستخدامها على جميع المنصات.

JSON

{
  // ...,
  "extensions":["warning_on_change"],
}

Blockly.Extensions.register('warning_on_change', function() {
  // Example validation upon block change:
  this.setOnChange(function(changeEvent) {
    if (this.getInput('NUM').connection.targetBlock()) {
      this.setWarningText(null);
    } else {
      this.setWarningText('Must have an input block.');
    }
  });
});

JavaScript

Blockly.Blocks['block_type'] = {
  init: function() {
    // Example validation upon block change:
    this.setOnChange(function(changeEvent) {
      if (this.getInput('NUM').connection.targetBlock()) {
        this.setWarningText(null);
      } else {
        this.setWarningText('Must have an input block.');
      }
    });
  }
}

يمكنك أيضًا ضبط سمة onchange مباشرةً في الكتلة:

JavaScript

Blockly.Blocks['block_type'] = {
  init: function() {
    // Example validation upon block change:
    this.onchange = function(changeEvent) {
      if (this.getInput('NUM').connection.targetBlock()) {
        this.setWarningText(null);
      } else {
        this.setWarningText('Must have an input block.');
      }
    };
  }
}

يستدعي النظام الدالة مع إدخال حدث التغيير. داخل الدالة، يشيرthis إلى مثيل المربّع.

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

يمكنك الاطّلاع على الأمثلة في الوحدات controls_flow_statements وlogic_compare وprocedures_ifreturn.

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

أنواع الأحداث

يُرجى الرجوع إلى المستندات المرجعية للحصول على معلومات عن الأحداث الفردية.

عرض توضيحي

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