GWT এর Event Handling

গুগল ওয়েব টুলকিট (Google Web Toolkit) - Web Development

365

GWT-তে ইভেন্ট হ্যান্ডলিং (Event Handling) একটি গুরুত্বপূর্ণ অংশ, যা ব্যবহারকারীর ইন্টারঅ্যাকশন যেমন ক্লিক, কিবোর্ড ইনপুট, বা মাউস মুভমেন্ট পরিচালনা করতে ব্যবহৃত হয়। GWT ইভেন্ট মডেল জাভা-ভিত্তিক এবং এটি DOM-সাপেক্ষ ইভেন্ট পরিচালনা করার জন্য বিভিন্ন ইন্টারফেস এবং ক্লাস প্রদান করে।


ইভেন্ট হ্যান্ডলিংয়ের গুরুত্ব

  1. ইউজার ইন্টারঅ্যাকশন: ব্যবহারকারীর অ্যাকশন পরিচালনা করা সহজ হয়।
  2. ডাইনামিক রেসপন্স: UI পরিবর্তন বা নতুন উপাদান লোড করতে সহায়তা করে।
  3. মডিউলার কোড: ইভেন্ট হ্যান্ডলার ব্যবহার করে কোড মডিউলার এবং পুনর্ব্যবহারযোগ্য করা যায়।

GWT-তে Event Types

ক্লিক ইভেন্ট (Click Event)

GWT-তে ClickHandler ইন্টারফেস ব্যবহার করে ক্লিক ইভেন্ট পরিচালনা করা হয়।

Button button = new Button("Click Me");
button.addClickHandler(new ClickHandler() {
    @Override
    public void onClick(ClickEvent event) {
        Window.alert("Button Clicked!");
    }
});
RootPanel.get().add(button);

কীবোর্ড ইভেন্ট (Keyboard Event)

KeyDownHandler, KeyUpHandler, এবং KeyPressHandler ব্যবহার করে কীবোর্ড ইভেন্ট পরিচালনা করা যায়।

TextBox textBox = new TextBox();
textBox.addKeyDownHandler(new KeyDownHandler() {
    @Override
    public void onKeyDown(KeyDownEvent event) {
        if (event.getNativeKeyCode() == KeyCodes.KEY_ENTER) {
            Window.alert("Enter Key Pressed!");
        }
    }
});
RootPanel.get().add(textBox);

মাউস ইভেন্ট (Mouse Event)

MouseDownHandler, MouseUpHandler, এবং MouseMoveHandler ইন্টারফেস ব্যবহার করে মাউস ইভেন্ট পরিচালনা করা হয়।

Label label = new Label("Hover over me");
label.addMouseOverHandler(new MouseOverHandler() {
    @Override
    public void onMouseOver(MouseOverEvent event) {
        label.setText("Mouse Over Detected!");
    }
});
RootPanel.get().add(label);

GWT ইভেন্ট হ্যান্ডলিংয়ের মৌলিক ধাপসমূহ

  1. ইভেন্ট হ্যান্ডলার ইন্টারফেস ইমপ্লিমেন্ট করুন: GWT প্রয়োজনীয় ইন্টারফেস প্রদান করে।
  2. উইজেটের সাথে ইভেন্ট লিঙ্ক করুন: নির্দিষ্ট উইজেটের জন্য ইভেন্ট হ্যান্ডলার যোগ করুন।
  3. ইভেন্ট পরিচালনা করুন: হ্যান্ডলার মেথডে ইভেন্টের কার্যক্রম লিখুন।

Event Bus ব্যবহার

বড় অ্যাপ্লিকেশনগুলোর জন্য GWT EventBus ব্যবহার করে ইভেন্ট পরিচালনা করা হয়। এটি ইভেন্টগুলিকে ডেকাপলড রাখে এবং কোডকে আরও মডুলার করে তোলে।

EventBus উদাহরণ

  1. ইভেন্ট তৈরি করুন:

    public class CustomEvent extends GwtEvent<CustomEventHandler> {
        public static final Type<CustomEventHandler> TYPE = new Type<>();
        
        @Override
        public Type<CustomEventHandler> getAssociatedType() {
            return TYPE;
        }
        
        @Override
        protected void dispatch(CustomEventHandler handler) {
            handler.onCustomEvent(this);
        }
    }
    
  2. ইভেন্ট হ্যান্ডলার তৈরি করুন:

    public interface CustomEventHandler extends EventHandler {
        void onCustomEvent(CustomEvent event);
    }
    
  3. ইভেন্ট ফায়ার এবং হ্যান্ডলিং:

    EventBus eventBus = new SimpleEventBus();
    eventBus.addHandler(CustomEvent.TYPE, event -> Window.alert("Custom Event Triggered!"));
    eventBus.fireEvent(new CustomEvent());
    

GWT ইভেন্ট হ্যান্ডলিংয়ের সুবিধা

  1. মাল্টি-প্ল্যাটফর্ম সমর্থন: ব্রাউজার-সামঞ্জস্যপূর্ণ ইভেন্ট হ্যান্ডলিং।
  2. ডিকাপলড আর্কিটেকচার: EventBus ব্যবহার করলে কোড সহজে স্কেল করা যায়।
  3. ইন-বিল্ট ইন্টারফেস: ক্লিক, মাউস, কীবোর্ড ইত্যাদি ইভেন্টের জন্য প্রস্তুত ইন্টারফেস।

GWT-তে ইভেন্ট হ্যান্ডলিং সহজ এবং শক্তিশালী। এটি ব্যবহার করে ডেভেলপাররা ইন্টারঅ্যাকটিভ এবং পারফর্ম্যান্স-সমৃদ্ধ ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারেন।

Content added By

Event Model এর ভূমিকা

241

গুগল ওয়েব টুলকিট (Google Web Toolkit বা GWT) একটি ইভেন্ট-চালিত (event-driven) প্রোগ্রামিং মডেল অনুসরণ করে। GWT-তে ইভেন্ট মডেল এমন একটি কাঠামো প্রদান করে যা ব্যবহারকারীর কার্যক্রমের (actions) উপর ভিত্তি করে প্রতিক্রিয়া তৈরি করতে ব্যবহৃত হয়, যেমন বাটন ক্লিক, মাউস মুভমেন্ট, বা কীবোর্ড ইন্টারঅ্যাকশন।


GWT ইভেন্ট মডেল কী?

GWT ইভেন্ট মডেল হল এমন একটি পদ্ধতি যা ইভেন্ট উৎপন্ন করা (event generation), প্রসেস করা (event processing), এবং তাদের হ্যান্ডলিং (event handling) সহজ করে।
GWT-তে ইভেন্ট মডেল নিম্নলিখিত উপাদানগুলোর উপর ভিত্তি করে কাজ করে:

  1. Event Object: ইভেন্ট সম্পর্কিত তথ্য ধারণ করে।
  2. Event Sources: যেখান থেকে ইভেন্ট উৎপন্ন হয়, যেমন বাটন, টেক্সটবক্স ইত্যাদি।
  3. Event Listeners/Handlers: ইভেন্টের প্রতিক্রিয়া (response) তৈরি করার জন্য।

ইভেন্ট মডেলের প্রধান ভূমিকা

ব্যবহারকারীর ইন্টারঅ্যাকশন পরিচালনা

ইভেন্ট মডেল ব্যবহারকারীর কার্যক্রম সনাক্ত করে এবং সেই অনুযায়ী অ্যাপ্লিকেশনের প্রতিক্রিয়া তৈরি করে। উদাহরণস্বরূপ, যখন একজন ব্যবহারকারী একটি বাটনে ক্লিক করেন, তখন ক্লিক ইভেন্ট ট্রিগার হয় এবং তার জন্য নির্ধারিত কোড কার্যকর হয়।

Button button = new Button("Click Me");
button.addClickHandler(event -> Window.alert("Button Clicked!"));
RootPanel.get().add(button);

ইভেন্ট হ্যান্ডলিং আলাদা করা

GWT ইভেন্ট মডেল কোডের মডুলারিটি বজায় রাখে। ইভেন্ট হ্যান্ডলিং লজিক মূল কোড থেকে আলাদা রাখা যায়, যা কোড ম্যানেজমেন্ট সহজ করে।

button.addClickHandler(new ClickHandler() {
    @Override
    public void onClick(ClickEvent event) {
        Window.alert("Handled by separate handler!");
    }
});

DOM ইভেন্ট পরিচালনা

GWT সরাসরি DOM ইভেন্টগুলিও পরিচালনা করতে পারে। এতে কমপ্লেক্স অ্যাপ্লিকেশন তৈরির সুযোগ বৃদ্ধি পায়। উদাহরণস্বরূপ:

DOM.sinkEvents(button.getElement(), Event.ONMOUSEOVER);
DOM.setEventListener(button.getElement(), event -> {
    if (DOM.eventGetType(event) == Event.ONMOUSEOVER) {
        Window.alert("Mouse Over Detected!");
    }
});

কাস্টম ইভেন্ট তৈরি এবং ব্যবহারে সহায়তা

GWT কাস্টম ইভেন্ট তৈরি করার সুযোগ দেয়, যা বড় অ্যাপ্লিকেশনগুলোতে নির্দিষ্ট ফিচারের জন্য কার্যকর।

public class CustomEvent extends GwtEvent<CustomEventHandler> {
    public static final Type<CustomEventHandler> TYPE = new Type<>();
    
    @Override
    public Type<CustomEventHandler> getAssociatedType() {
        return TYPE;
    }

    @Override
    protected void dispatch(CustomEventHandler handler) {
        handler.onCustomEvent(this);
    }
}

public interface CustomEventHandler extends EventHandler {
    void onCustomEvent(CustomEvent event);
}

GWT ইভেন্ট মডেলের প্রধান ইভেন্ট টাইপ

ClickEvent

বাটন, লেবেল, বা অন্য ইন্টারঅ্যাকটিভ উপাদানগুলিতে ক্লিকের জন্য ব্যবহৃত হয়।

button.addClickHandler(event -> Window.alert("Button was clicked!"));

KeyPressEvent

টেক্সট ইনপুট বা কীবোর্ডের কার্যক্রম সনাক্ত করতে ব্যবহৃত হয়।

TextBox textBox = new TextBox();
textBox.addKeyPressHandler(event -> Window.alert("Key Pressed: " + event.getCharCode()));

MouseOverEvent এবং MouseOutEvent

মাউস পয়েন্টার কোনো উইজেটে প্রবেশ বা বের হওয়া সনাক্ত করতে ব্যবহৃত হয়।

button.addMouseOverHandler(event -> Window.alert("Mouse Entered"));
button.addMouseOutHandler(event -> Window.alert("Mouse Left"));

ChangeEvent

ড্রপডাউন বা টেক্সট ফিল্ডে মান পরিবর্তনের জন্য ব্যবহৃত হয়।

ListBox listBox = new ListBox();
listBox.addChangeHandler(event -> Window.alert("Selected: " + listBox.getSelectedIndex()));

GWT ইভেন্ট মডেলের সুবিধা

  • মডুলারিটি: কোডকে ভালোভাবে সংগঠিত করে।
  • পোর্টেবিলিটি: GWT ইভেন্ট মডেল বিভিন্ন প্ল্যাটফর্ম এবং ব্রাউজারের সঙ্গে সামঞ্জস্যপূর্ণ।
  • ডাইনামিক ইন্টারঅ্যাকশন: দ্রুত এবং ইন্টারঅ্যাকটিভ অ্যাপ্লিকেশন তৈরি করা সহজ করে।
  • কাস্টমাইজেশন: কাস্টম ইভেন্ট তৈরি এবং পরিচালনা করার সুবিধা দেয়।

GWT ইভেন্ট মডেল ব্যবহার করে অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং কার্যকরী করা সম্ভব। এটি কোড ব্যবস্থাপনা সহজ করার পাশাপাশি ব্যবহারকারীর কার্যক্রম সনাক্ত করে দ্রুত প্রতিক্রিয়া প্রদান করে।

Content added By

ClickHandler এবং ChangeHandler ব্যবহার

227

গুগল ওয়েব টুলকিট (GWT) ইভেন্ট-ড্রিভেন প্রোগ্রামিং পদ্ধতিতে কাজ করে। ব্যবহারকারীর ইন্টারঅ্যাকশনের জন্য GWT-তে ইভেন্ট হ্যান্ডলার, যেমন ClickHandler এবং ChangeHandler, ব্যবহৃত হয়। ClickHandler সাধারণত বোতাম বা লিঙ্কের ক্লিক ইভেন্ট পরিচালনার জন্য ব্যবহৃত হয়, আর ChangeHandler ড্রপডাউন, টেক্সট বক্স বা চেকবক্সের মান পরিবর্তন শনাক্ত করতে ব্যবহৃত হয়।


ClickHandler ব্যবহার

ClickHandler ব্যবহার করে বোতাম বা অন্যান্য ক্লিকযোগ্য উপাদানগুলোর জন্য ইভেন্ট পরিচালনা করা হয়।

ClickHandler যোগ করার ধাপ

  1. Widget তৈরি করুন: সাধারণত একটি Button বা Hyperlink।
  2. ClickHandler ইন্টারফেস ইমপ্লিমেন্ট করুন: addClickHandler মেথড ব্যবহার করে একটি ইভেন্ট হ্যান্ডলার যোগ করুন।

উদাহরণ

Button button = new Button("Click Me");

// ClickHandler যোগ করা
button.addClickHandler(new ClickHandler() {
    @Override
    public void onClick(ClickEvent event) {
        Window.alert("Button Clicked!");
    }
});

// RootPanel-এ বোতাম যোগ করা
RootPanel.get().add(button);

ল্যাম্বডা এক্সপ্রেশন ব্যবহার করে:

GWT জাভা ৮ সমর্থন করে। তাই, কোড আরও সংক্ষিপ্তভাবে লেখা যায়।

button.addClickHandler(event -> Window.alert("Button Clicked with Lambda!"));

ChangeHandler ব্যবহার

ChangeHandler ব্যবহার করা হয় যখন ড্রপডাউন মেনু, টেক্সট বক্স, বা চেকবক্সের মান পরিবর্তিত হয়।

ChangeHandler যোগ করার ধাপ

  1. Widget তৈরি করুন: TextBox, ListBox, বা CheckBox-এর মতো ইনপুট উইজেট।
  2. ChangeHandler ইন্টারফেস ইমপ্লিমেন্ট করুন: addChangeHandler মেথড ব্যবহার করে ইভেন্ট হ্যান্ডলার যোগ করুন।

উদাহরণ

ListBox listBox = new ListBox();
listBox.addItem("Option 1");
listBox.addItem("Option 2");

// ChangeHandler যোগ করা
listBox.addChangeHandler(new ChangeHandler() {
    @Override
    public void onChange(ChangeEvent event) {
        int selectedIndex = listBox.getSelectedIndex();
        Window.alert("Selected: " + listBox.getItemText(selectedIndex));
    }
});

// RootPanel-এ ListBox যোগ করা
RootPanel.get().add(listBox);

টেক্সট বক্সের জন্য উদাহরণ

TextBox textBox = new TextBox();
textBox.addChangeHandler(event -> Window.alert("Text Changed: " + textBox.getText()));

// RootPanel-এ TextBox যোগ করা
RootPanel.get().add(textBox);

ClickHandler এবং ChangeHandler একসাথে ব্যবহার

একই ইন্টারফেসে ClickHandler এবং ChangeHandler উভয়ই ব্যবহার করা সম্ভব।

উদাহরণ

Button button = new Button("Submit");
TextBox textBox = new TextBox();

// ClickHandler
button.addClickHandler(event -> {
    String input = textBox.getText();
    Window.alert("Button Clicked! Input: " + input);
});

// ChangeHandler
textBox.addChangeHandler(event -> Window.alert("Text Changed to: " + textBox.getText()));

// RootPanel-এ উইজেট যোগ করা
RootPanel.get().add(textBox);
RootPanel.get().add(button);

ClickHandler এবং ChangeHandler: প্রধান পার্থক্য

বৈশিষ্ট্যClickHandlerChangeHandler
ইভেন্টের ধরনক্লিক ইভেন্ট (Button, Hyperlink)মান পরিবর্তন (TextBox, ListBox)
উদ্দেশ্যক্লিক শনাক্ত করামান পরিবর্তন শনাক্ত করা
ব্যবহারযোগ্য উইজেটButton, HyperlinkTextBox, ListBox, CheckBox

সেরা প্র্যাকটিস

  1. অপ্রয়োজনীয় হ্যান্ডলার এড়িয়ে সিস্টেম পারফরম্যান্স উন্নত করুন।
  2. হ্যান্ডলারের ভিতরে লজিক ছোট এবং নির্দিষ্ট রাখুন।
  3. লেআউট এবং ইন্টারঅ্যাকশন সহজ করতে উইজেটের সঙ্গে প্রাসঙ্গিক হ্যান্ডলার ব্যবহার করুন।

উপরোক্ত উদাহরণগুলো ClickHandler এবং ChangeHandler ব্যবহারের মাধ্যমে GWT অ্যাপ্লিকেশনে ইন্টারঅ্যাকশন বাড়াতে সাহায্য করবে।

Content added By

Custom Events এবং Event Propagation

273

গুগল ওয়েব টুলকিট (Google Web Toolkit বা GWT) ওয়েব অ্যাপ্লিকেশনে ইভেন্ট-চালিত প্রোগ্রামিং সহজ করে। Custom Events তৈরি করে ডেভেলপাররা নির্দিষ্ট কার্যকারিতার জন্য ইভেন্ট সংজ্ঞায়িত করতে পারেন। একইসাথে, Event Propagation ইভেন্টের সঠিক সংক্রমণ এবং নিয়ন্ত্রণের জন্য অত্যন্ত গুরুত্বপূর্ণ।


Custom Events

Custom Events কী?

Custom Events হল এমন ইভেন্ট যা ডেভেলপার নিজে সংজ্ঞায়িত করেন। এগুলো ব্যবহারকারীর নির্দিষ্ট ক্রিয়া বা অ্যাপ্লিকেশনের অভ্যন্তরীণ কার্যকলাপের প্রতিক্রিয়া জানাতে তৈরি করা হয়।

Custom Events তৈরি এবং ব্যবহার

  1. ইভেন্ট ক্লাস তৈরি করুন: 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);
        }
    }
    
  2. ইভেন্ট হ্যান্ডলার ইন্টারফেস তৈরি করুন: ইন্টারফেসটি ইভেন্টের জন্য প্রয়োজনীয় ফাংশন সংজ্ঞায়িত করে।

    public interface MyCustomEventHandler extends EventHandler {
        void onCustomEvent(MyCustomEvent event);
    }
    
  3. ইভেন্ট রেজিস্ট্রেশন:
    ইভেন্ট রেজিস্ট্রেশন করতে 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-এর ধাপ

  1. Capturing Phase:
    ইভেন্ট যখন DOM-এর উপরের স্তর (root) থেকে child elements-এর দিকে যায়।
  2. Target Phase:
    ইভেন্ট নির্দিষ্ট element-এ পৌঁছায়।
  3. 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 ব্যবহারের মাধ্যমে অ্যাপ্লিকেশনের ইভেন্ট হ্যান্ডলিং আরও দক্ষ এবং কার্যকর হয়।

Content added By

Event Handling এর Best Practices

327

গুগল ওয়েব টুলকিট (Google Web Toolkit বা GWT)-এ ইভেন্ট-ড্রিভেন প্রোগ্রামিং একটি গুরুত্বপূর্ণ দিক। এটি ডেভেলপারদের ইন্টারেক্টিভ এবং প্রতিক্রিয়াশীল অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে। GWT-তে ইভেন্ট মডেলটি DOM ইভেন্টের উপর ভিত্তি করে কাজ করে এবং এর মাধ্যমে কাস্টম ইভেন্ট এবং ইভেন্ট প্রোপাগেশন (Event Propagation) কার্যকরভাবে ব্যবস্থাপনা করা যায়।


Custom Events (কাস্টম ইভেন্ট)

Custom Events তৈরি

GWT-তে কাস্টম ইভেন্ট তৈরি করতে GwtEvent ক্লাস ব্যবহার করতে হয়।

ধাপসমূহ

  1. ইভেন্ট ক্লাস তৈরি করুন: GwtEvent থেকে একটি ক্লাস তৈরি করে এর ধরন (type) এবং প্রয়োজনীয় ডেটা সংজ্ঞায়িত করতে হয়।

    public class MyCustomEvent extends GwtEvent<MyCustomEvent.Handler> {
        public interface Handler extends EventHandler {
            void onCustomEvent(MyCustomEvent event);
        }
    
        public static final Type<Handler> TYPE = new Type<>();
    
        private final String message;
    
        public MyCustomEvent(String message) {
            this.message = message;
        }
    
        public String getMessage() {
            return message;
        }
    
        @Override
        public Type<Handler> getAssociatedType() {
            return TYPE;
        }
    
        @Override
        protected void dispatch(Handler handler) {
            handler.onCustomEvent(this);
        }
    }
    
  2. ইভেন্ট হ্যান্ডলার নিবন্ধন করুন:
    HasHandlers ইন্টারফেস ব্যবহার করে ইভেন্ট রেজিস্টার করা হয়।

    public class MyCustomWidget extends Composite implements HasHandlers {
        public void triggerCustomEvent(String message) {
            fireEvent(new MyCustomEvent(message));
        }
    }
    
  3. ইভেন্ট শোনার জন্য লিসেনার যোগ করুন:

    MyCustomWidget widget = new MyCustomWidget();
    widget.addHandler(event -> Window.alert("Received: " + event.getMessage()), MyCustomEvent.TYPE);
    

Event Propagation (ইভেন্ট প্রোপাগেশন)

ইভেন্ট প্রোপাগেশন প্রক্রিয়া

GWT-তে ইভেন্ট প্রোপাগেশন তিনটি ধাপে সম্পন্ন হয়:

  1. Capturing Phase: ইভেন্ট DOM-এর উপর থেকে নিচের দিকে যায়।
  2. Target Phase: ইভেন্ট নির্দিষ্ট DOM উপাদানে পৌঁছে।
  3. Bubbling Phase: ইভেন্ট DOM-এর নিচ থেকে উপরে ফিরে যায়।

ইভেন্ট প্রোপাগেশন বন্ধ করা

GWT-তে ইভেন্ট প্রোপাগেশন বন্ধ করতে Event.stopPropagation() ব্যবহার করা হয়।

Button button = new Button("Click Me");
button.addClickHandler(event -> {
    event.stopPropagation(); // ইভেন্ট প্রোপাগেশন বন্ধ
    Window.alert("Button clicked!");
});
RootPanel.get().add(button);

Custom Event এবং Propagation উদাহরণ

public class CustomEventExample {
    public static void main(String[] args) {
        Button parentButton = new Button("Parent Button");
        Button childButton = new Button("Child Button");

        // Parent Button এ ClickHandler যোগ করা
        parentButton.addClickHandler(event -> Window.alert("Parent Button clicked!"));

        // Child Button এ ClickHandler যোগ করা
        childButton.addClickHandler(event -> {
            event.stopPropagation(); // ইভেন্ট প্রোপাগেশন বন্ধ
            Window.alert("Child Button clicked!");
        });

        RootPanel.get().add(parentButton);
        RootPanel.get().add(childButton);
    }
}

Custom Events বনাম Standard Events

বৈশিষ্ট্যCustom EventsStandard Events
ব্যবহারব্যবহারকারীর চাহিদা অনুযায়ী তৈরিDOM দ্বারা সরবরাহিত
নিয়ন্ত্রণসম্পূর্ণ নিয়ন্ত্রণ প্রদান করেপ্রি-ডিফাইন্ড নিয়ম মেনে চলে
জটিলতাউন্নত লজিক প্রয়োগে কার্যকরসহজ এবং ডিফল্ট ব্যবহারের জন্য

GWT-তে Custom Events এবং Event Propagation ব্যবহারের মাধ্যমে ইন্টারেক্টিভ অ্যাপ্লিকেশন তৈরি সহজ এবং কার্যকর হয়ে ওঠে। Custom Events আপনাকে নির্দিষ্ট লজিক অনুযায়ী ইভেন্ট পরিচালনার স্বাধীনতা দেয়, আর Event Propagation ইভেন্টের কার্যক্রম নিয়ন্ত্রণ করতে সাহায্য করে।

Content added By
Promotion

Are you sure to start over?

Loading...