Modal Dialog এবং Confirmation Boxes ব্যবহারকারীদের সঙ্গে ইন্টারঅ্যাকশন করার জন্য গুরুত্বপূর্ণ ইউজার ইন্টারফেস উপাদান। ExtJS এ এগুলি খুব সহজে তৈরি করা যায়। Modal Dialog ব্যবহারকারীকে অন্যান্য অ্যাপ্লিকেশনের কার্যক্রম থেকে বিচ্ছিন্ন করে একটি গুরুত্বপূর্ণ মেসেজ বা ফর্ম প্রদর্শন করতে ব্যবহৃত হয়, যেখানে ব্যবহারকারীকে একে একে প্রতিক্রিয়া জানাতে হয়। Confirmation Boxes সাধারণত ব্যবহারকারীকে একটি সিদ্ধান্ত নিতে প্রম্পট করতে ব্যবহৃত হয়, যেমন "আপনি কি ডিলিট করতে চান?" বা "আপনি কি সেভ করতে চান?"।
এখানে ExtJS তে Modal Dialog এবং Confirmation Boxes তৈরি করার পদ্ধতি দেখানো হবে।
১. Modal Dialog
Modal Dialog হলো এমন একটি ডায়ালগ বক্স যা অ্যাপ্লিকেশনের অন্যান্য অংশের উপর লেগে থাকে, অর্থাৎ, এটি যখন পর্যন্ত বন্ধ না করা হয়, তখন পর্যন্ত ব্যবহারকারী অন্য কোনো কার্যক্রম করতে পারে না। এটি সাধারণত গুরুত্বপূর্ণ মেসেজ বা ফর্ম উপস্থাপনের জন্য ব্যবহৃত হয়।
Modal Dialog তৈরি করা:
উদাহরণ:
Ext.create('Ext.window.Window', {
title: 'Modal Dialog Example',
width: 300,
height: 200,
layout: 'fit',
modal: true, // Modal dialog
items: {
xtype: 'panel',
html: 'This is a modal dialog. Please interact with it!'
},
buttons: [
{
text: 'OK',
handler: function() {
Ext.Msg.alert('Action', 'You clicked OK!');
}
},
{
text: 'Cancel',
handler: function() {
Ext.Msg.alert('Action', 'You clicked Cancel!');
}
}
]
}).show();
কী কোড বুঝানো হচ্ছে:
modal: true: এটি ডায়ালগ বক্সকে মোডাল বানায়, অর্থাৎ ইউজার অন্য কিছু করতে পারবে না যতক্ষণ না তারা ডায়ালগ বক্সটি বন্ধ করে।buttons: এখানে দুইটি বাটন দেওয়া হয়েছে, একটির মাধ্যমেOKক্লিক করলে একটি মেসেজ প্রদর্শিত হবে এবং অন্যটির মাধ্যমেCancelক্লিক করলে আরেকটি মেসেজ প্রদর্শিত হবে।layout: 'fit': এটি ডায়ালগ বক্সের মধ্যে একটি প্যানেল ফিট করে।
২. Confirmation Box
Confirmation Box হল একটি ডায়ালগ বক্স যা সাধারণত ব্যবহারকারীকে একটি ক্রিয়া বা সিদ্ধান্ত নিতে প্রম্পট করে। যেমন: "আপনি কি নিশ্চিত যে আপনি এই তথ্য মুছে ফেলতে চান?"
Confirmation Box তৈরি করা:
উদাহরণ:
Ext.Msg.confirm('Confirm', 'Are you sure you want to delete this item?', function(choice) {
if (choice === 'yes') {
Ext.Msg.alert('Action', 'Item deleted!');
} else {
Ext.Msg.alert('Action', 'Item not deleted!');
}
});
কী কোড বুঝানো হচ্ছে:
Ext.Msg.confirm: এটি একটি কনফার্মেশন বক্স তৈরি করে যা দুটি অপশন (Yes/No) প্রদর্শন করে।choice === 'yes': এখানে, যদি ব্যবহারকারী 'Yes' বাটন ক্লিক করেন, তবে একটি মেসেজ "Item deleted!" দেখানো হবে, আর যদি 'No' ক্লিক করেন, তবে "Item not deleted!" দেখানো হবে।Ext.Msg.alert: এটি সাধারণ একটি মেসেজ ডায়ালগ তৈরি করে যা ব্যবহারকারীকে দেখানো হয়।
৩. অন্যান্য Dialog এবং Message Boxes
Information Message Box
একটি সাধারণ মেসেজ বক্স যা ইউজারকে তথ্য দেখায়।
উদাহরণ:
Ext.Msg.alert('Information', 'This is an information message!');
Error Message Box
এটি একটি ত্রুটি বার্তা প্রদর্শন করার জন্য ব্যবহৃত হয়।
উদাহরণ:
Ext.Msg.alert('Error', 'An error occurred while processing your request.');
Warning Message Box
এটি সতর্কবার্তা (Warning) প্রদর্শন করে।
উদাহরণ:
Ext.Msg.alert('Warning', 'Are you sure you want to continue?');
Modal Dialog এবং Confirmation Box এর মধ্যে পার্থক্য
| Feature | Modal Dialog | Confirmation Box |
|---|---|---|
| Purpose | ব্যবহারকারীকে গুরুত্বপূর্ণ তথ্য বা ফর্ম উপস্থাপন করা | ব্যবহারকারী থেকে একটি সিদ্ধান্ত নেওয়া (Yes/No) |
| Blocking | হ্যাঁ, ইউজারকে অন্য কোনো কার্যক্রম করতে বাধা দেয় | না, ইউজার অন্য কিছু করতে পারবে |
| Use Case | তথ্য ফর্ম বা মেসেজ প্রদর্শন | ডিলিট, সেভ, বা অন্য কোনো কার্যক্রমের জন্য নিশ্চিতকরণ |
| UI | একটি উইন্ডো বা প্যানেল | একটি প্রম্পট ডায়ালগ (Yes/No Options) |
সারাংশ
- Modal Dialog: একটি পপ-আপ উইন্ডো যা ইউজারকে অন্য কোনো কার্যক্রম করতে দেয় না যতক্ষণ না তারা ডায়ালগ বক্সটি বন্ধ করে।
- Confirmation Box: একটি সরল প্রম্পট যা ব্যবহারকারীকে একটি সিদ্ধান্ত নিতে বলে (যেমন, "আপনি কি নিশ্চিত?").
- Message Boxes: সাধারণত Info, Error, এবং Warning মেসেজ দেখানোর জন্য ব্যবহৃত হয়।
ExtJS এ Modal Dialog এবং Confirmation Boxes তৈরি করা খুবই সহজ এবং অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ইউজার-ফ্রেন্ডলি করে তোলে। এগুলি সাধারণত ব্যবহারকারীর সাথে ইন্টারঅ্যাকশন এবং সিদ্ধান্ত গ্রহণে সহায়তা করে।
Read more
