Notifications এবং Toast Messages তৈরি করা

Vaadin অ্যাপ্লিকেশনে Notifications এবং Toast Messages ব্যবহার করা হয় ইউজারের কাছে দ্রুত তথ্য প্রদর্শন করার জন্য। এগুলো সাধারণত সময়মতো (non-blocking) মেসেজ হিসেবে প্রদর্শিত হয় এবং ইউজারের অভিজ্ঞতাকে আরও উন্নত করে।

Notifications কী?

Notification হল একটি UI উপাদান যা ব্যবহারকারীর সামনে একটি মেসেজ বা ইনফরমেশন দ্রুত প্রদর্শন করে। এটি সাধারাণত একটি ছোট বার্তায় তথ্য প্রদান করে, যা এক সেকেন্ডের মধ্যে অদৃশ্য হয়ে যায়, অথবা ইউজার ইন্টারঅ্যাকশনের মাধ্যমে তা বন্ধ করা যায়।

Vaadin এর Notification কম্পোনেন্ট ব্যবহার করে আপনি সহজেই ইউজারের জন্য টেক্সট, সতর্কতা, তথ্য বা সফলতার বার্তা প্রদর্শন করতে পারেন।

Toast Message কী?

Toast Messages হলো ছোট বার্তা যা সাধারণত স্ক্রীনের নিচের অংশে প্রদর্শিত হয় এবং কিছু সময় পর স্বয়ংক্রিয়ভাবে অদৃশ্য হয়ে যায়। এগুলো সাধারণত নন-ব্লকিং এবং অস্থায়ী মেসেজ হিসেবে ব্যবহৃত হয়, যেমন "অপারেশন সফল", "তথ্য সঠিকভাবে সংরক্ষিত হয়েছে" ইত্যাদি।

Vaadin এ Notification ব্যবহার করা

Vaadin এ Notification ব্যবহার করতে, আপনি Notification ক্লাসের একটি ইনস্ট্যান্স তৈরি করে মেসেজ প্রদান করতে পারেন। নিচে Notification এর একটি সাধারণ উদাহরণ দেওয়া হলো:

Notification.show("This is a simple notification");

এটি একটি সাধারণ বার্তা তৈরি করবে, যা স্ক্রীনের উপরের দিকে প্রদর্শিত হবে। আপনি এই Notification-টি বিভিন্ন কনফিগারেশন দিয়ে কাস্টমাইজ করতে পারেন।

Notification এর কাস্টমাইজেশন

1. Position সেট করা: Notification এর অবস্থান কাস্টমাইজ করতে পারেন, যেমন উপরে, নিচে, বামে, বা ডানে।

Notification notification = new Notification("This is a custom positioned notification");
notification.setPosition(Notification.Position.TOP_CENTER); // Top Center position
notification.open();

2. ডিউরেশন (Duration): Notification কত সময় পর অদৃশ্য হবে তা নির্ধারণ করতে পারেন।

Notification notification = new Notification("This message will disappear after 3 seconds");
notification.setDuration(3000); // 3000 milliseconds = 3 seconds
notification.open();

3. স্টাইলিং: Notification এর স্টাইল কাস্টমাইজ করা যায়।

Notification notification = new Notification("Success!");
notification.addThemeVariants(NotificationVariant.LUMO_SUCCESS); // Success theme
notification.open();

4. অ্যাকশন বোতাম যোগ করা: Notification-এ একটি অ্যাকশন বোতামও যোগ করা যায়, যা ইউজারের ইন্টারঅ্যাকশনের জন্য ব্যবহৃত হয়।

Notification notification = new Notification("Do you want to save changes?");
Button saveButton = new Button("Save");
saveButton.addClickListener(event -> {
    // Save action code here
});
notification.add(saveButton);
notification.open();

Toast Messages তৈরি করা

Toast Messages তৈরি করার জন্য আপনাকে সাধারণত Notification ক্লাস ব্যবহার করতে হবে এবং সেটি একটি নির্দিষ্ট অবস্থানে, অল্প সময়ের জন্য প্রদর্শন করতে হবে। Vaadin এর Notification এর মাধ্যমে Toast মেসেজ তৈরি করা যায়। নিচে একটি Toast মেসেজ তৈরি করার উদাহরণ দেয়া হলো:

Notification toastMessage = new Notification("Your changes have been saved successfully");
toastMessage.setPosition(Notification.Position.BOTTOM_CENTER); // Position at bottom center
toastMessage.setDuration(3000); // Duration set to 3 seconds
toastMessage.open();

এটি একটি Toast মেসেজ তৈরি করবে, যা স্ক্রীনের নিচের অংশে প্রদর্শিত হবে এবং ৩ সেকেন্ড পর অদৃশ্য হয়ে যাবে।

Notifications এর অন্যান্য কাস্টমাইজেশন

1. Multiple Notifications: আপনি একাধিক Notification একসাথে প্রদর্শন করতে পারেন এবং সেগুলো একে অপরের উপর না আসতে সঠিক অবস্থান সেট করতে পারেন।

Notification notification1 = new Notification("Notification 1");
notification1.setPosition(Notification.Position.TOP_CENTER);
notification1.open();

Notification notification2 = new Notification("Notification 2");
notification2.setPosition(Notification.Position.TOP_END);
notification2.open();

2. টেক্সট এবং কন্টেন্ট কাস্টমাইজেশন: Notification এ শুধুমাত্র টেক্সট নয়, আপনি HTML কন্টেন্টও যোগ করতে পারেন।

Notification notification = new Notification("Notification with <b>HTML</b> content", 5000);
notification.setPosition(Notification.Position.BOTTOM_START);
notification.getElement().setProperty("innerHTML", "You have <i>new</i> notifications");
notification.open();

3. থিম যোগ করা: Vaadin Notification-এ ভিন্ন ভিন্ন থিম (Theme) যোগ করা যায়, যেমন LUMO_SUCCESS, LUMO_ERROR, LUMO_CONTRAST ইত্যাদি।

Notification notification = new Notification("Success message");
notification.addThemeVariants(NotificationVariant.LUMO_SUCCESS);
notification.open();

সারাংশ

Vaadin-এ Notification এবং Toast Messages ইউজারের জন্য দ্রুত, অস্থায়ী বার্তা প্রদর্শন করার জন্য অত্যন্ত কার্যকরী টুল। আপনি এগুলোর মাধ্যমে ইউজারকে ইনফরমেশন, সতর্কতা বা সফলতার মেসেজ প্রদর্শন করতে পারেন, যা ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে। এগুলোর স্টাইলিং, অবস্থান, সময়কাল, এবং অ্যাকশন বোতাম কাস্টমাইজ করার মাধ্যমে আপনি একটি ইন্টারঅ্যাকটিভ এবং গ্রাহক-বান্ধব ইউজার ইন্টারফেস তৈরি করতে পারবেন।