Custom Events তৈরি এবং Dispatch করা

Polymer ফ্রেমওয়ার্কে Custom Events তৈরি এবং dispatch (প্রেরণ) করা একটি খুবই গুরুত্বপূর্ণ কনসেপ্ট। Custom Events ব্যবহার করে আপনি উপাদানগুলির মধ্যে যোগাযোগ করতে পারেন, যেখানে উপাদানগুলি একে অপরকে জানাতে পারে বা ইনফরমেশন আদান-প্রদান করতে পারে। Polymer এ Custom Events তৈরি এবং dispatch করার জন্য, আপনি CustomEvent কনস্ট্রাক্টর এবং dispatchEvent() মেথড ব্যবহার করতে পারেন।

এখানে Custom Events তৈরি করা এবং dispatch করা সম্পর্কে বিস্তারিত ব্যাখ্যা দেওয়া হলো।

১. Custom Event তৈরি করা

Polymer-এ Custom Event তৈরি করতে CustomEvent কনস্ট্রাক্টর ব্যবহার করা হয়। এর মাধ্যমে আপনি একটি কাস্টম ইভেন্ট তৈরি করতে পারেন যা প্রয়োজনীয় তথ্য এবং ইভেন্টের নাম ধারণ করবে।

Custom Event তৈরি করার উদাহরণ:

<dom-module id="custom-event-example">
  <template>
    <button onclick="dispatchCustomEvent()">Click Me</button>
  </template>

  <script>
    Polymer({
      is: 'custom-event-example',

      dispatchCustomEvent: function() {
        // Custom Event তৈরি করা
        const customEvent = new CustomEvent('myCustomEvent', {
          detail: {
            message: 'Hello from Custom Event!',
            timestamp: new Date().toISOString()
          },
          bubbles: true, // ইভেন্টটি উপরের এলিমেন্টে বুবল করবে
          composed: true // ইভেন্টটি Shadow DOM-এর বাইরে যাবে
        });

        // ইভেন্ট ডিপ্যাচ করা
        this.dispatchEvent(customEvent);
      }
    });
  </script>
</dom-module>

ব্যাখ্যা:

1. CustomEvent কনস্ট্রাক্টর: এটি একটি কাস্টম ইভেন্ট তৈরি করতে ব্যবহৃত হয়। এখানে myCustomEvent নামের কাস্টম ইভেন্ট তৈরি করা হয়েছে।
2. detail: এটি ইভেন্টের সাথে অতিরিক্ত ডেটা প্রেরণ করার জন্য ব্যবহৃত হয়। এখানে একটি message এবং timestamp পাঠানো হয়েছে।
3. bubbles: যদি এটি true হয়, ইভেন্টটি উপরের এলিমেন্টে বুবল করবে, অর্থাৎ Parent এলিমেন্টে পৌঁছাবে।
4. composed: এটি true হলে, ইভেন্টটি Shadow DOM-এর বাইরে যেতে পারবে।
5. dispatchEvent(): এই মেথডটি ইভেন্টটিকে ডিপ্যাচ বা প্রেরণ করার জন্য ব্যবহৃত হয়।

২. Custom Event Listen করা

এখন, কিভাবে এই Custom Event কে সুনা (Listen) করা যায় তা দেখে নেওয়া যাক। Polymer কম্পোনেন্টে ইভেন্ট লিসেনিং এর জন্য আপনি addEventListener বা Polymer-এর ইভেন্ট মেকানিজম ব্যবহার করতে পারেন।

Custom Event Listen করার উদাহরণ:

<dom-module id="event-listener-example">
  <template>
    <custom-event-example id="customEventComponent"></custom-event-example>
  </template>

  <script>
    Polymer({
      is: 'event-listener-example',

      ready: function() {
        // Custom Event Listener যোগ করা
        this.$.customEventComponent.addEventListener('myCustomEvent', this.handleCustomEvent);
      },

      handleCustomEvent: function(event) {
        // ইভেন্ট হ্যান্ডলিং
        console.log('Custom Event received!');
        console.log('Message:', event.detail.message);
        console.log('Timestamp:', event.detail.timestamp);
      }
    });
  </script>
</dom-module>

ব্যাখ্যা:

1. addEventListener: myCustomEvent নামের ইভেন্টটি লিসেন করা হচ্ছে এবং যখন এই ইভেন্টটি ঘটে, তখন handleCustomEvent ফাংশনটি কল হবে।
2. handleCustomEvent: এই ফাংশনটি ইভেন্টের ডেটা (যেমন message এবং timestamp) কনসোলে লগ করে দেখাবে।

৩. Custom Event Dispatching এবং Handling

আপনার কাস্টম ইভেন্ট তৈরি এবং dispatch করার জন্য, আপনি একাধিক উপাদান বা ওয়েব কম্পোনেন্ট ব্যবহার করতে পারেন। ইভেন্ট বুবলিং এবং কম্পোজড অপশন ব্যবহার করে আপনি নিশ্চিত করতে পারেন যে ইভেন্টটি ডম ট্রিতে উপরে (parent) পৌঁছাবে এবং Shadow DOM-এর বাইরেও প্রেরিত হবে।

অতিরিক্ত টিপস:

• bubbles এবং composed প্রপার্টি ব্যবহার করে আপনি কাস্টম ইভেন্টের প্রকৃতি নিয়ন্ত্রণ করতে পারেন।
• detail প্রপার্টি ব্যবহার করে আপনি কাস্টম ডেটা প্রেরণ করতে পারেন, যা ইভেন্ট হ্যান্ডলারের মাধ্যমে অ্যাক্সেস করা যাবে।
• আপনি Polymer ফ্রেমওয়ার্কের @eventname ডেকোরেটরও ব্যবহার করতে পারেন (Polymer 3.0 বা LitElement-এ), যা ইভেন্ট হ্যান্ডলিংকে আরও সহজ করে।

৪. একাধিক কাস্টম ইভেন্ট Dispatch করা

যদি আপনি একাধিক কাস্টম ইভেন্ট dispatch করতে চান, তাহলে আপনি সেই ইভেন্টগুলো আলাদা আলাদা ডিপ্যাচ করতে পারেন বা একই ইভেন্টের মাধ্যমে একাধিক ডেটা পাঠাতে পারেন।

<dom-module id="multi-event-example">
  <template>
    <button onclick="dispatchMultipleEvents()">Dispatch Multiple Events</button>
  </template>

  <script>
    Polymer({
      is: 'multi-event-example',

      dispatchMultipleEvents: function() {
        const eventOne = new CustomEvent('eventOne', {
          detail: { message: 'First event' }
        });
        this.dispatchEvent(eventOne);

        const eventTwo = new CustomEvent('eventTwo', {
          detail: { message: 'Second event' }
        });
        this.dispatchEvent(eventTwo);
      }
    });
  </script>
</dom-module>

এখানে, দুটি আলাদা কাস্টম ইভেন্ট (eventOne এবং eventTwo) ডিপ্যাচ করা হয়েছে।

Polymer ফ্রেমওয়ার্কে Custom Events তৈরি এবং dispatch করা একটি গুরুত্বপূর্ণ টপিক যা আপনার উপাদানগুলির মধ্যে যোগাযোগ স্থাপন করতে সহায়তা করে। আপনি CustomEvent কনস্ট্রাক্টর ব্যবহার করে কাস্টম ইভেন্ট তৈরি করতে পারেন এবং dispatchEvent() মেথড দিয়ে এগুলো ডিপ্যাচ করতে পারেন। কাস্টম ইভেন্টগুলি খুবই ফ্লেক্সিবল, এবং তাদের সাথে অতিরিক্ত ডেটা প্রেরণ করা সম্ভব, যা আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং কার্যকরী করে তোলে।