Vaadin এ Dialog এবং ConfirmDialog কম্পোনেন্টস ব্যবহার করে আপনি ইউজার ইন্টারফেসে মডাল উইন্ডো বা পপ-আপ তৈরি করতে পারেন। এগুলি সাধারণত ইউজারের সাথে ইন্টারঅ্যাকশন করার জন্য, যেমন কনফার্মেশন, ইনপুট, বা মেসেজ প্রদর্শন করতে ব্যবহৃত হয়।
Dialog কম্পোনেন্ট
Dialog কম্পোনেন্টটি একটি সাধারণ পপ-আপ বা মডাল উইন্ডো তৈরি করতে ব্যবহৃত হয়, যা সাধারণত একটি নির্দিষ্ট কাজের জন্য ইউজারের কাছ থেকে ইনপুট বা অ্যাকশন নেয়। এটি আপনার অ্যাপ্লিকেশনের UI-তে একটি নতুন স্তর হিসাবে প্রদর্শিত হয় এবং ইউজারকে একটি নির্দিষ্ট কাজ করার জন্য নির্দেশনা প্রদান করতে পারে।
Dialog তৈরি করা
Dialog dialog = new Dialog();
dialog.add(new Text("This is a simple dialog window!"));
Button closeButton = new Button("Close", event -> dialog.close());
dialog.add(closeButton);
dialog.open();
এখানে, একটি Dialog কম্পোনেন্ট তৈরি করা হয়েছে, যা একটি টেক্সট এবং একটি বাটন ধারণ করে। বাটনটি ক্লিক করলে ডায়ালগটি বন্ধ হবে। dialog.open() ব্যবহার করে ডায়ালগটি পেজে দেখানো হয়।
Dialog কাস্টমাইজেশন
- নির্দিষ্ট আকার:
setWidth()এবংsetHeight()ব্যবহার করে আপনি ডায়ালগের আকার কাস্টমাইজ করতে পারেন।
dialog.setWidth("400px");
dialog.setHeight("300px");
- Positioning:
setPosition()ব্যবহার করে আপনি ডায়ালগের অবস্থানও কাস্টমাইজ করতে পারেন।
dialog.setPosition(Align.CENTER);
Dialog এর অন্যান্য বৈশিষ্ট্য
- Closable: ডায়ালগে ক্লোজ বাটন থাকতে পারে, যেটি ইউজারকে ডায়ালগ বন্ধ করতে সহায়তা করে।
- Focusable: ডায়ালগটি ফোকাসযোগ্য হয়ে থাকলে ইউজার সহজেই এর মধ্যে ইন্টারঅ্যাক্ট করতে পারে।
ConfirmDialog কম্পোনেন্ট
ConfirmDialog হল একটি বিশেষ ধরনের ডায়ালগ, যা সাধারণত ইউজারের একটি অ্যাকশন নিশ্চিত করার জন্য ব্যবহৃত হয়, যেমন ডিলিট অপারেশন বা অন্য কোন গুরুত্বপূর্ণ সিদ্ধান্ত গ্রহণের জন্য। এটি দুটি বাটন প্রদর্শন করে, যেমন "Confirm" এবং "Cancel"।
ConfirmDialog তৈরি করা
ConfirmDialog confirmDialog = new ConfirmDialog();
confirmDialog.setHeader("Are you sure?");
confirmDialog.setText("Do you really want to delete this item?");
Button confirmButton = new Button("Confirm", event -> {
// Perform the action (e.g., delete item)
Notification.show("Item deleted!");
confirmDialog.close();
});
Button cancelButton = new Button("Cancel", event -> confirmDialog.close());
confirmDialog.setCancelable(true); // Allow closing by clicking outside
confirmDialog.setConfirmButton(confirmButton);
confirmDialog.setCancelButton(cancelButton);
confirmDialog.open();
এখানে একটি ConfirmDialog তৈরি করা হয়েছে, যেখানে ইউজারকে একটি অ্যাকশন নিশ্চিত করার জন্য একটি পপ-আপ উইন্ডো প্রদর্শিত হবে। ইউজার "Confirm" বাটন ক্লিক করলে অ্যাকশন (যেমন ডিলিট) সম্পন্ন হবে এবং "Cancel" বাটন ক্লিক করলে ডায়ালগটি বন্ধ হবে।
ConfirmDialog কাস্টমাইজেশন
- Header এবং Text:
setHeader()এবংsetText()ব্যবহার করে আপনি ডায়ালগের শিরোনাম এবং মূল বার্তা কাস্টমাইজ করতে পারেন। - Cancelable:
setCancelable(true)ব্যবহার করে আপনি ডায়ালগের বাইরে ক্লিক করে ডায়ালগ বন্ধ করার অনুমতি দিতে পারেন।
ConfirmDialog এর বৈশিষ্ট্য
- Confirm এবং Cancel বাটন: সাধারণত
ConfirmDialog-এ দুটি বাটন থাকে: একটি "Confirm" এবং অন্যটি "Cancel"। - Cancelable: এটি ইউজারকে ডায়ালগটি বাইরের অংশে ক্লিক করে বন্ধ করার অনুমতি দেয়।
Dialog এবং ConfirmDialog এর মধ্যে পার্থক্য
| বৈশিষ্ট্য | Dialog | ConfirmDialog |
|---|---|---|
| ব্যবহার | সাধারণ মডাল উইন্ডো, কোনো নির্দিষ্ট অ্যাকশন বা তথ্য প্রদর্শন করতে ব্যবহৃত | ইউজারের কোনো অ্যাকশন (যেমন ডিলিট) নিশ্চিত করার জন্য ব্যবহৃত |
| বাটন | সাধারণত একটি ক্লোজ বা কাস্টম বাটন থাকে | দুটি বাটন থাকে: "Confirm" এবং "Cancel" |
| টেক্সট কাস্টমাইজেশন | টেক্সট কাস্টমাইজ করা যায় | শিরোনাম এবং বডি টেক্সট কাস্টমাইজ করা যায় |
| প্রধান বৈশিষ্ট্য | সাধারণ ইউজার ইনপুট বা তথ্য প্রদর্শন | ইউজারের অ্যাকশন নিশ্চিত করা |
সারাংশ
Vaadin এর Dialog এবং ConfirmDialog কম্পোনেন্টস আপনাকে মডাল উইন্ডো এবং পপ-আপ তৈরি করতে সহায়তা করে। Dialog সাধারণত ইউজারের সাথে ইন্টারঅ্যাকশন করার জন্য ব্যবহৃত হয়, যেখানে ConfirmDialog ইউজারের কোনো গুরুত্বপূর্ণ সিদ্ধান্ত নিশ্চিত করার জন্য ব্যবহৃত হয়। আপনি এই কম্পোনেন্টগুলিকে কাস্টমাইজ করে বিভিন্ন ধরনের বার্তা, বাটন এবং ইন্টারঅ্যাকশন তৈরি করতে পারেন, যা আপনার অ্যাপ্লিকেশনের ইউজার এক্সপিরিয়েন্স (UX) উন্নত করে।
Read more
