Vaadin এ Custom Cell Renderer এবং Editor ব্যবহৃত হয় UI কম্পোনেন্টে ডেটা প্রদর্শন এবং এডিট করার জন্য কাস্টম লজিক বা উপস্থাপনা যোগ করতে। সাধারণত Grid কম্পোনেন্টে এ দুটি ফিচার ব্যবহৃত হয়, যার মাধ্যমে ডেটা প্রদর্শনের স্টাইল এবং এডিটিং প্রসেস কাস্টমাইজ করা সম্ভব হয়। Vaadin এ Custom Cell Renderer এবং Editor এর মাধ্যমে আরও উন্নত এবং ইন্টারেক্টিভ ডেটা টেবিল তৈরি করা যায়।
Custom Cell Renderer
Cell Renderer হল একটি কাস্টম উপায়ে কিভাবে Grid এর সেলগুলোর ডেটা প্রদর্শন করা হবে তার লজিক। Vaadin Grid কম্পোনেন্টে ডিফল্টভাবে সেল রেন্ডারিং করা হয়, কিন্তু আপনি আপনার প্রোজেক্টের চাহিদা অনুযায়ী সেল রেন্ডারিং কাস্টমাইজ করতে পারেন।
উদাহরণ: Custom Cell Renderer
ধরা যাক, আমাদের একটি Grid আছে যেখানে আমরা ব্যবহারকারীর নাম এবং বয়স প্রদর্শন করতে চাই, এবং বয়সের উপর ভিত্তি করে সেলটির ব্যাকগ্রাউন্ড রঙ পরিবর্তন করতে চাই। এজন্য একটি কাস্টম সেল রেন্ডারার ব্যবহার করা যেতে পারে।
Grid<User> grid = new Grid<>(User.class);
grid.addColumn(User::getName).setHeader("Name");
grid.addColumn(User::getAge).setHeader("Age")
.setRenderer(age -> {
String backgroundColor = age < 18 ? "lightcoral" : "lightgreen";
return new Span(age + " years").getElement().getStyle().set("background-color", backgroundColor);
});
এখানে:
setRenderer()মেথডটি ব্যবহার করা হয়েছে, যাতে বয়সের উপর ভিত্তি করে একটি কাস্টম সেল রেন্ডার করা হয়।Spanকম্পোনেন্টের মাধ্যমে সেলটির টেক্সট এবং ব্যাকগ্রাউন্ড রঙ কাস্টমাইজ করা হচ্ছে।
Custom Cell Editor
Cell Editor ব্যবহৃত হয় Grid এর সেলে ইউজারের ইনপুট গ্রহণ করার জন্য। আপনি যখন একটি সেল এডিট করেন, তখন ডিফল্ট এডিটর ব্যবহার করা হয়, কিন্তু আপনি চাইলে সেই এডিটর কাস্টমাইজ করতে পারেন। কাস্টম এডিটর ব্যবহার করার মাধ্যমে আপনি সেলে ডেটা এডিট করার অভিজ্ঞতাটি আরও ব্যবহারকারীর উপযোগী করতে পারেন।
উদাহরণ: Custom Cell Editor
ধরা যাক, আপনি একটি Grid তৈরি করেছেন যেখানে ব্যবহারকারী একটি DatePicker ব্যবহার করে বয়স নির্বাচন করবে। এই ক্ষেত্রে, Grid এর সেলে কাস্টম এডিটর ব্যবহার করা হবে।
Grid<User> grid = new Grid<>(User.class);
grid.addColumn(User::getName).setHeader("Name");
grid.addColumn(User::getDateOfBirth).setHeader("Date of Birth")
.setEditorComponent(new DatePicker())
.setEditorValue(User::getDateOfBirth, User::setDateOfBirth);
এখানে:
setEditorComponent()মেথডটি ব্যবহার করা হয়েছে, যাতে সেলেDatePickerএডিটর যোগ করা হয়।setEditorValue()এর মাধ্যমেUserক্লাসেরdateOfBirthফিল্ডের জন্য ইনপুট ভ্যালু সেট করা হয়েছে।
Custom Cell Renderer এবং Editor একসাথে ব্যবহার
Vaadin এর Grid কম্পোনেন্টে আপনি একই সময়ে Custom Cell Renderer এবং Editor ব্যবহার করতে পারেন। উদাহরণস্বরূপ, আপনি একটি Grid তৈরি করতে পারেন যেখানে সেলে ডেটা রেন্ডারিং এবং এডিটিং উভয়ই কাস্টমাইজ করা হয়।
উদাহরণ: Custom Renderer এবং Editor একসাথে ব্যবহার
Grid<User> grid = new Grid<>(User.class);
// Custom Renderer
grid.addColumn(User::getStatus).setHeader("Status")
.setRenderer(status -> {
String statusColor = status.equals("Active") ? "green" : "red";
return new Span(status).getElement().getStyle().set("color", statusColor);
});
// Custom Editor (DatePicker for Date of Birth)
grid.addColumn(User::getDateOfBirth).setHeader("Date of Birth")
.setEditorComponent(new DatePicker())
.setEditorValue(User::getDateOfBirth, User::setDateOfBirth);
এখানে:
Statusকলামে কাস্টম রেন্ডারার ব্যবহার করা হয়েছে, যেখানে ইউজারের অবস্থা অনুযায়ী সেলটির টেক্সট কালার পরিবর্তন হবে।Date of BirthকলামেDatePickerএডিটর ব্যবহার করা হয়েছে, যেখানে ইউজার একটি তারিখ নির্বাচন করতে পারবেন।
সার্ভার-সাইড এডিটিং
Vaadin এ, আপনি যখন গ্রিডে ডেটা এডিট করেন, তখন সেলটির নতুন মান সার্ভার সাইডে সেভ করতে হবে। Editor ব্যবহারের সময়, আপনি সার্ভার-সাইডে ডেটা সেভ করতে চান এমন একটি ইভেন্ট হ্যান্ডলার যোগ করতে পারেন।
উদাহরণ: Editor Save Event
grid.getEditor().addSaveListener(event -> {
User user = event.getItem();
userService.save(user); // Save the updated user to the server
});
এখানে, addSaveListener() ব্যবহার করা হয়েছে, যাতে ইউজার এডিট সম্পন্ন করার পরে সার্ভার সাইডে ডেটা সেভ হয়।
সারাংশ
Vaadin-এ Custom Cell Renderer এবং Editor ব্যবহারের মাধ্যমে আপনি Grid কম্পোনেন্টের সেল প্রদর্শন এবং এডিটিং প্রক্রিয়া কাস্টমাইজ করতে পারেন। Custom Cell Renderer ব্যবহার করে সেলের কন্টেন্ট কাস্টমাইজ করা যায় এবং Custom Editor ব্যবহার করে ইউজারের জন্য কাস্টম এডিটিং ফিচার যোগ করা সম্ভব। এগুলো ব্যবহৃত হলে ওয়েব অ্যাপ্লিকেশনটি আরও ইন্টারেক্টিভ, কাস্টমাইজেবল এবং ব্যবহারকারী বান্ধব হয়ে ওঠে।
Read more
