Vaadin-এ Dialog কম্পোনেন্ট ব্যবহার করে আপনি ব্যবহারকারীর জন্য ইনপুট, তথ্য বা নির্দেশনা প্রদর্শন করতে পারেন। Dialog দুটি প্রধান ধরনের হতে পারে: Modal Dialog এবং Modeless Dialog। Modal Dialog ব্যবহারকারীর সাথে সম্পর্কিত যে কোনো কর্মের জন্য বাধ্যতামূলক হয়, যেখানে Modeless Dialog ব্যবহারকারীর কাজকে বিরতি না দিয়ে অন্য কোনো উইন্ডো বা কন্টেন্ট প্রদর্শন করে।
Modal Dialog
Modal Dialog হল একটি ডায়লগ যা একটি ইন্টারঅ্যাকশনের মাধ্যমে পপ আপ হয় এবং ব্যবহারকারীকে সে ডায়লগ বন্ধ না করা পর্যন্ত মূল অ্যাপ্লিকেশন ইন্টারফেসের সাথে যোগাযোগ করতে দেয় না। এটি সাধারণত গুরুত্বপূর্ণ তথ্য বা নির্বাচন করার জন্য ব্যবহৃত হয়।
Modal Dialog তৈরি এবং ব্যবহার
Vaadin-এ Modal Dialog তৈরি করতে Dialog কম্পোনেন্ট ব্যবহার করা হয় এবং এটি সাধারণত একটি blocker হিসেবে কাজ করে।
@Route("")
public class MainView extends VerticalLayout {
public MainView() {
Button openDialogButton = new Button("Open Modal Dialog");
// Dialog তৈরি
Dialog modalDialog = new Dialog();
modalDialog.add(new Text("This is a modal dialog"));
modalDialog.setWidth("300px");
// Dialog বাটনটি ক্লিক করলে ডায়লগ ওপেন হবে
openDialogButton.addClickListener(event -> modalDialog.open());
// Layoutে বাটনটি যোগ করা
add(openDialogButton);
}
}
এখানে, যখন ব্যবহারকারী "Open Modal Dialog" বাটনে ক্লিক করবে, তখন একটি Modal Dialog ওপেন হবে। এই ডায়লগটি পেজের অন্য কোনো অংশের সাথে ইন্টারঅ্যাকশন করতে দেয় না, যতক্ষণ না ব্যবহারকারী ডায়লগটি বন্ধ না করেন।
Modal Dialog-এর অন্যান্য কাস্টমাইজেশন
- কনটেন্ট আকার নিয়ন্ত্রণ:
setWidth()বাsetHeight()মেথড ব্যবহার করে আপনি ডায়লগের আকার কাস্টমাইজ করতে পারেন। - কন্টেন্টের ভিতরে ভিউ যোগ করা: ডায়লগে অন্যান্য UI উপাদান যোগ করা যেমন টেক্সট, ফর্ম, ইমেজ ইত্যাদি।
Modeless Dialog
Modeless Dialog হল এমন একটি ডায়লগ যা ব্যবহারকারীকে প্রধান অ্যাপ্লিকেশন কনটেন্টের সাথে ইন্টারঅ্যাকশন করতে দেয়, যখন এটি প্রদর্শিত হয়। এটি সাধারণত ঐতিহ্যগত টুলটিপ, ইনফরমেশন বার বা ছোট ডায়লগ হিসেবে ব্যবহৃত হয়, যেখানে ব্যবহারকারী ডায়লগ বন্ধ না করে অন্যান্য অংশের সাথে কাজ করতে পারে।
Modeless Dialog তৈরি এবং ব্যবহার
Modeless Dialog তৈরি করতে Dialog কম্পোনেন্টের setModal(false) মেথড ব্যবহার করতে হয়। এটি ডায়লগকে মোডাল হিসেবে কাজ করতে বাধা দেয় এবং ব্যবহারকারী ডায়লগটি খোলার সময় অন্যান্য অংশে কাজ করতে পারে।
@Route("")
public class MainView extends VerticalLayout {
public MainView() {
Button openModelessDialogButton = new Button("Open Modeless Dialog");
// Dialog তৈরি
Dialog modelessDialog = new Dialog();
modelessDialog.add(new Text("This is a modeless dialog"));
modelessDialog.setWidth("300px");
modelessDialog.setModal(false); // Modeless তৈরি করা
// Dialog বাটনটি ক্লিক করলে ডায়লগ ওপেন হবে
openModelessDialogButton.addClickListener(event -> modelessDialog.open());
// Layoutে বাটনটি যোগ করা
add(openModelessDialogButton);
}
}
এখানে, setModal(false) ব্যবহার করার মাধ্যমে আমরা ডায়লগটিকে modeless বানিয়েছি, যার ফলে ব্যবহারকারী ডায়লগটি খোলার সময়ও মূল কন্টেন্টের সাথে ইন্টারঅ্যাকশন করতে পারবেন।
Modeless Dialog এর কাস্টমাইজেশন
- পজিশন কাস্টমাইজেশন:
modelessDialog.setPosition()মেথড ব্যবহার করে ডায়লগটির পজিশন নির্ধারণ করা যেতে পারে, যেমন সেন্টারে বা স্ক্রীনের অন্য কোনো জায়গায়। - ইন্টারঅ্যাকশন ফ্লো: Modeless ডায়লগ সাধারণত অন্য কম্পোনেন্টের সাথে ইন্টারঅ্যাকশন করতে দেয়, তাই এটি আপনার অ্যাপ্লিকেশনের লজিক অনুসারে কাস্টমাইজ করতে হবে।
Modal এবং Modeless Dialog এর মধ্যে পার্থক্য
| বৈশিষ্ট্য | Modal Dialog | Modeless Dialog |
|---|---|---|
| ইন্টারঅ্যাকশন | ব্যবহারকারী ডায়লগ বন্ধ না করা পর্যন্ত মূল অ্যাপ্লিকেশনের সাথে যোগাযোগ করতে পারেন না | ব্যবহারকারী ডায়লগ খোলার পরেও মূল অ্যাপ্লিকেশন এর সাথে কাজ করতে পারেন |
| ব্যবহার | জরুরি বার্তা বা তথ্য, ফর্ম জমা দেওয়া ইত্যাদি | সহায়ক বার্তা, টুলটিপ, ইনফরমেশন উইন্ডো ইত্যাদি |
| ধরণ | বাধ্যতামূলক (blocking) | অবাধ (non-blocking) |
সারাংশ
Vaadin-এ Modal এবং Modeless Dialog দুটি গুরুত্বপূর্ণ উপাদান, যা ব্যবহারকারীর সাথে যোগাযোগ করার জন্য ব্যবহৃত হয়। Modal Dialog ব্যবহারকারীর অন্য কোনো কাজ বন্ধ না করে কোন তথ্য বা সিলেকশন দাবি করে, এবং Modeless Dialog ব্যবহারকারীকে ডায়লগ খোলার পরেও অন্যান্য কাজ করতে দেয়। আপনি আপনার অ্যাপ্লিকেশনের প্রয়োজন অনুসারে এই দুই ধরনের ডায়লগ ব্যবহার করতে পারেন, যা ডেটা ইনপুট, নোটিফিকেশন, বা সহায়ক বার্তা প্রদর্শনে সাহায্য করবে।
Read more
