গুগল ওয়েব টুলকিট (Google Web Toolkit বা GWT) ওয়েব অ্যাপ্লিকেশনে ইভেন্ট-চালিত প্রোগ্রামিং সহজ করে। Custom Events তৈরি করে ডেভেলপাররা নির্দিষ্ট কার্যকারিতার জন্য ইভেন্ট সংজ্ঞায়িত করতে পারেন। একইসাথে, Event Propagation ইভেন্টের সঠিক সংক্রমণ এবং নিয়ন্ত্রণের জন্য অত্যন্ত গুরুত্বপূর্ণ।
Custom Events
Custom Events কী?
Custom Events হল এমন ইভেন্ট যা ডেভেলপার নিজে সংজ্ঞায়িত করেন। এগুলো ব্যবহারকারীর নির্দিষ্ট ক্রিয়া বা অ্যাপ্লিকেশনের অভ্যন্তরীণ কার্যকলাপের প্রতিক্রিয়া জানাতে তৈরি করা হয়।
Custom Events তৈরি এবং ব্যবহার
ইভেন্ট ক্লাস তৈরি করুন: GWT-তে
GwtEventক্লাস এক্সটেন্ড করে একটি ইভেন্ট তৈরি করা হয়।public class MyCustomEvent extends GwtEvent<MyCustomEventHandler> { public static Type<MyCustomEventHandler> TYPE = new Type<>(); @Override public Type<MyCustomEventHandler> getAssociatedType() { return TYPE; } @Override protected void dispatch(MyCustomEventHandler handler) { handler.onCustomEvent(this); } }ইভেন্ট হ্যান্ডলার ইন্টারফেস তৈরি করুন: ইন্টারফেসটি ইভেন্টের জন্য প্রয়োজনীয় ফাংশন সংজ্ঞায়িত করে।
public interface MyCustomEventHandler extends EventHandler { void onCustomEvent(MyCustomEvent event); }ইভেন্ট রেজিস্ট্রেশন:
ইভেন্ট রেজিস্ট্রেশন করতেaddHandlerব্যবহার করতে হয়।Button button = new Button("Trigger Event"); button.addClickHandler(event -> { MyCustomEvent customEvent = new MyCustomEvent(); button.fireEvent(customEvent); }); button.addHandler(new MyCustomEventHandler() { @Override public void onCustomEvent(MyCustomEvent event) { Window.alert("Custom Event Triggered!"); } }, MyCustomEvent.TYPE);
Event Propagation
Event Propagation কী?
Event Propagation ইভেন্টগুলোর parent থেকে child বা child থেকে parent পর্যায়ে ছড়ানোর প্রক্রিয়া। GWT-তে এটি DOM ইভেন্ট মডেলের অংশ।
Propagation-এর ধাপ
- Capturing Phase:
ইভেন্ট যখন DOM-এর উপরের স্তর (root) থেকে child elements-এর দিকে যায়। - Target Phase:
ইভেন্ট নির্দিষ্ট element-এ পৌঁছায়। - Bubbling Phase:
ইভেন্ট child element থেকে parent elements-এর দিকে ফিরে যায়।
GWT-তে Propagation নিয়ন্ত্রণ
GWT-তে ইভেন্ট propagation নিয়ন্ত্রণ করতে event.stopPropagation() এবং event.preventDefault() ব্যবহার করা হয়।
Button button = new Button("Click Me");
button.addClickHandler(event -> {
event.stopPropagation(); // ইভেন্ট propagation থামায়
Window.alert("Button clicked!");
});
RootPanel.get().add(button);
Custom Events এবং Event Propagation এর ব্যবহারিক উদাহরণ
উদাহরণ: Parent এবং Child উইজেটের মধ্যে Propagation
VerticalPanel parentPanel = new VerticalPanel();
parentPanel.addDomHandler(event -> {
Window.alert("Parent Panel Clicked!");
}, ClickEvent.getType());
Button childButton = new Button("Child Button");
childButton.addClickHandler(event -> {
event.stopPropagation(); // Parent Panel-এ propagation থামানো হয়েছে
Window.alert("Child Button Clicked!");
});
parentPanel.add(childButton);
RootPanel.get().add(parentPanel);
এই উদাহরণে, childButton-এ ক্লিক করলে parentPanel-এ ইভেন্ট পৌঁছায় না কারণ stopPropagation() ব্যবহার করা হয়েছে।
Custom Events এবং Event Propagation এর গুরুত্ব
- Custom Events: কাস্টম ইভেন্টের মাধ্যমে ডেভেলপাররা অ্যাপ্লিকেশনের নির্দিষ্ট ক্রিয়াকলাপকে ট্র্যাক করতে পারেন।
- Event Propagation: DOM ম্যানিপুলেশন সহজ করে এবং ইভেন্ট হ্যান্ডলিং আরও নিয়ন্ত্রিত হয়।
সঠিক নিয়মে Custom Events এবং Event Propagation ব্যবহারের মাধ্যমে অ্যাপ্লিকেশনের ইভেন্ট হ্যান্ডলিং আরও দক্ষ এবং কার্যকর হয়।
Read more
