Event Bubbles এবং Event Delegation

Web Development - অ্যাপাচি ট্যাপেস্ট্রি (Apache Tapestry) - Tapestry এর Event-Driven Programming |

Apache Tapestry একটি event-driven programming পদ্ধতি অনুসরণ করে, যেখানে পেজ বা কম্পোনেন্টের মধ্যে ইভেন্ট ট্রিগারিং এবং ইভেন্ট হ্যান্ডলিং একটি গুরুত্বপূর্ণ ভূমিকা পালন করে। Tapestry তে Event Bubbles এবং Event Delegation দুটি গুরুত্বপূর্ণ ধারণা, যা ইভেন্ট প্রক্রিয়াকরণের ফ্লো এবং কার্যকারিতা নিয়ন্ত্রণ করে। এই দুটি ধারণা বুঝতে পারলে, Tapestry এর ইভেন্ট সিস্টেম আরও পরিষ্কার এবং কার্যকরীভাবে ব্যবহার করা যাবে।

Event Bubbles (ইভেন্ট বুবলিং)

Event Bubbles হল একটি প্রক্রিয়া যেখানে একটি কম্পোনেন্ট ইভেন্ট ট্রিগার করার পর, সেই ইভেন্টটি উপরের স্তরের কম্পোনেন্টে (যেমন পেজে বা পেজের সন্নিহিত কম্পোনেন্টে) "বুবল" (propagate) হয়ে পৌঁছায়। এটি DOM (Document Object Model) এর সাথে সম্পর্কিত একটি ধারণা, যেখানে ইভেন্ট শুরু হয় এবং উপরের স্তরে প্রপাগেট করে, যতক্ষণ না তা থামানো হয়।

Tapestry তে ইভেন্ট বুবলিং এর মাধ্যমে কম্পোনেন্টগুলো তাদের parent component অথবা page এর দিকে ইভেন্ট প্রেরণ করতে পারে।

উদাহরণ: Event Bubbles

ধরা যাক, একটি button ক্লিক করার পর আপনি চান যে ইভেন্টটি কম্পোনেন্ট থেকে পেজের দিকে প্রপাগেট হোক।

HTML টেমপ্লেট (button.tml):

<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd">
    <body>
        <t:button t:id="clickButton" value="Click Me" />
    </body>
</html>

Java ক্লাস (ButtonPage.java):

package com.example.pages;

import org.apache.tapestry5.annotations.OnEvent;

public class ButtonPage {

    // Button click event handler
    @OnEvent(value = "click", component = "clickButton")
    public String onButtonClick() {
        // Handle the button click event here
        return "Button clicked, event bubbled!";
    }
}

এখানে:

@OnEvent অ্যানোটেশন ব্যবহার করে ইভেন্ট হ্যান্ডলিং করা হয়েছে, যা click ইভেন্টটি clickButton কম্পোনেন্ট থেকে পেজে "bubble" করে।
ইভেন্টটি ButtonPage পেজের মেথডে পৌঁছে এবং হ্যান্ডলিং করে একটি বার্তা প্রদর্শিত হবে।

Event Bubbles এর সুবিধা

Event Bubbles ফিচারটি কম্পোনেন্টের মধ্যে সহজে ইভেন্ট ট্রান্সফার করতে সহায়ক।
এটি উপরের স্তরের কম্পোনেন্ট বা পেজে ইভেন্টের জন্য কেন্দ্রীভূত প্রসেসিং করতে সহায়ক।

Event Delegation (ইভেন্ট ডেলিগেশন)

Event Delegation হল একটি প্রক্রিয়া যেখানে একটি কম্পোনেন্ট ইভেন্টটি তার parent component বা parent page এ ডেলিগেট (delegated) করে, এবং সেই parent ইভেন্টটি হ্যান্ডল করে। Tapestry তে, একটি কম্পোনেন্ট তার প্যারেন্ট বা পেজে ইভেন্ট ডেলিগেট করতে পারে, যা অনেক সময় প্রয়োজনীয় এবং সহজ।

উদাহরণ: Event Delegation

ধরা যাক, একটি কম্পোনেন্টে যখন ইভেন্ট ট্রিগার হয়, তখন সেই ইভেন্টটি পেজের কাছে ডেলিগেট করা হবে।

HTML টেমপ্লেট (child-component.tml):

<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd">
    <body>
        <t:button t:id="childButton" value="Click Me" />
    </body>
</html>

Java ক্লাস (ChildComponent.java):

package com.example.components;

import org.apache.tapestry5.annotations.OnEvent;

public class ChildComponent {

    @OnEvent(value = "click", component = "childButton")
    public String onButtonClick() {
        return "Button clicked in child component!";
    }
}

Java ক্লাস (ParentPage.java):

package com.example.pages;

import org.apache.tapestry5.annotations.OnEvent;

public class ParentPage {

    @OnEvent(value = "click", component = "childButton")
    public String onChildButtonClick() {
        return "Event delegated to parent page!";
    }
}

এখানে:

ChildComponent কম্পোনেন্টের মধ্যে click ইভেন্ট ট্রিগার হলে, তা পেজের ParentPage ক্লাসে ডেলিগেট করা হবে।
ParentPage ক্লাসে সেই ইভেন্টটি হ্যান্ডল করা হবে এবং একটি বার্তা প্রদর্শিত হবে।

Event Delegation এর সুবিধা:

Event Delegation ব্যবহার করে আপনি ইভেন্টগুলিকে কম্পোনেন্ট থেকে parent component বা page এর কাছে পাঠাতে পারেন, যাতে মূল কার্যাবলি উপরের স্তরে প্রক্রিয়া করা হয়।
এটি কোডের পুনঃব্যবহারযোগ্যতা বৃদ্ধি করে এবং কোডের সেন্ট্রালাইজেশন নিশ্চিত করে।