গ্রিড এবং ডাটা প্রেজেন্টেশন

Vaadin এ গ্রিড হল একটি অত্যন্ত শক্তিশালী কম্পোনেন্ট যা বড় আকারের ডেটা এবং টেবিল আকারে ডেটা প্রেজেন্টেশন করার জন্য ব্যবহৃত হয়। এটি একটি ইউজার ইন্টারফেস উপাদান (UI component) যা ডেটা রেকর্ডের তালিকা দেখাতে সাহায্য করে এবং বিভিন্ন ধরনের ইন্টারঅ্যাকশনের জন্য বিভিন্ন ফিচার সরবরাহ করে, যেমন ফিল্টারিং, পেজিনেশন, সোর্টিং ইত্যাদি। Vaadin গ্রিডের মাধ্যমে আপনি ডেটা খুব সহজে ইউজারদের কাছে প্রেজেন্ট করতে পারেন।

গ্রিড কী এবং কেন প্রয়োজন?

গ্রিড হল একটি টেবিল-ভিত্তিক উপাদান যা ডেটা রেকর্ডগুলি এক বা একাধিক কলামে দেখানোর জন্য ব্যবহৃত হয়। গ্রিডে ডেটা উপস্থাপন করার জন্য এটি বিভিন্ন ফিচার যেমন কাস্টম কলাম, ফিল্টারিং, পেজিনেশন, সোর্টিং, এবং অ্যাকশন সমর্থন করে। এটি সাধারণত ডেটা ম্যানেজমেন্ট সিস্টেমে বা কোনো অ্যাপ্লিকেশনের টেবিল ভিউ হিসেবে ব্যবহৃত হয়।

Vaadin গ্রিডের প্রধান বৈশিষ্ট্য

1. ডাটা বাইন্ডিং: গ্রিডের মাধ্যমে আপনি সহজেই আপনার ডেটা মডেল (যেমন POJO) বাইন্ড করতে পারেন, যার মাধ্যমে আপনি সার্ভার-সাইড ডেটাকে গ্রিডে উপস্থাপন করতে পারেন।
2. সোর্টিং: গ্রিডের কলামগুলির জন্য সোর্টিং ফিচার প্রযোজ্য করা যায়, যাতে ব্যবহারকারী ডেটাকে কোনো নির্দিষ্ট অর্ডারে সাজাতে পারেন।
3. ফিল্টারিং: গ্রিডের ডেটা ফিল্টার করতে পারেন যাতে নির্দিষ্ট ডেটা ব্যবহারকারী দেখতে পারেন।
4. পেজিনেশন: ডেটার বড় তালিকা হলে, গ্রিডে পেজিনেশন যোগ করা যেতে পারে, যাতে ডেটা সহজে পেইজ বাই পেইজ প্রদর্শিত হয়।
5. কাস্টম কলাম: আপনি আপনার প্রয়োজন অনুযায়ী গ্রিডে কাস্টম কলাম তৈরি করতে পারেন, যেখানে ইন্টারঅ্যাকটিভ বা কাস্টম সেল কন্টেন্ট যুক্ত করা হয়।

Vaadin গ্রিড ব্যবহার করার উদাহরণ

ধরা যাক, আপনি একটি Person মডেল ক্লাস তৈরি করেছেন এবং তা গ্রিডে প্রদর্শন করতে চান। নিচে একটি উদাহরণ দেওয়া হলো:

১. ডোমেন মডেল তৈরি করা

public class Person {
    private String name;
    private String email;
    private int age;

    // Getter and Setter methods
    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }
}

২. Vaadin গ্রিড ব্যবহার করা

এখন, Person অবজেক্টের একটি তালিকা ব্যবহার করে গ্রিডে ডেটা প্রদর্শন করা যাক।

import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import java.util.Arrays;
import java.util.List;

public class GridView extends VerticalLayout {

    public GridView() {
        // Sample data for the grid
        List<Person> persons = Arrays.asList(
            new Person("John Doe", "john@example.com", 28),
            new Person("Jane Smith", "jane@example.com", 34),
            new Person("Sam Brown", "sam@example.com", 45)
        );

        // Create a Grid
        Grid<Person> grid = new Grid<>(Person.class);

        // Set the grid items
        grid.setItems(persons);

        // Customize columns (optional)
        grid.removeColumnByKey("class");
        grid.getColumnByKey("name").setHeader("Full Name");
        grid.getColumnByKey("email").setHeader("Email Address");
        grid.getColumnByKey("age").setHeader("Age");

        // Add grid to layout
        add(grid);
    }
}

এখানে কী হচ্ছে?

1. ডাটা বাইন্ডিং: grid.setItems(persons) দিয়ে আমরা গ্রিডের আইটেম হিসেবে Person অবজেক্টের তালিকা বাইন্ড করেছি।
2. কলাম কাস্টমাইজেশন: গ্রিডের ডিফল্ট কলামগুলির নাম পরিবর্তন করেছি setHeader() ব্যবহার করে, যা গ্রিডের ইউজার ইন্টারফেসে প্রদর্শিত হবে।
3. অপ্রয়োজনীয় কলাম অপসারণ: grid.removeColumnByKey("class") দিয়ে গ্রিড থেকে class কলামটি অপসারণ করেছি, যা গ্রিডের ডিফল্ট প্রপার্টি।

গ্রিডের উন্নত ফিচার

1. ফিল্টারিং: গ্রিডে ডেটা ফিল্টার করার জন্য কলামের হেডারে ফিল্টার অপশন যোগ করা যেতে পারে। উদাহরণস্বরূপ:

   grid.addColumn(Person::getName).setHeader("Name").setSortable(true).setKey("name").setComparator(Comparator.comparing(Person::getName));
   grid.getColumnByKey("name").setFooter("Footer");
   

2. পেজিনেশন: গ্রিডের পেজিনেশন যুক্ত করতে setPageSize() মেথড ব্যবহার করা হয়:

   grid.setPageSize(5); // Show 5 rows per page
   

3. সরাসরি সেল এডিটিং: গ্রিডের সেলে সরাসরি ডেটা সম্পাদনা করার জন্য Editor ব্যবহার করা যেতে পারে। এটি গ্রিডের সেল এডিট করতে সহায়তা করে এবং পরিবর্তন করা ডেটা মডেলে যুক্ত হয়।
4. ডেটা সেভ করার জন্য ইভেন্ট: গ্রিডে কোনো পরিবর্তন ঘটলে তা সার্ভারে সেভ করার জন্য ইভেন্ট হ্যান্ডলিং ব্যবহার করা যেতে পারে।

উপসংহার

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

Vaadin এর Grid কম্পোনেন্ট একটি শক্তিশালী এবং ইউজার-বান্ধব উপাদান যা ব্যবহারকারীদের বড় ডেটাসেট প্রদর্শন করতে সাহায্য করে। এটি সহজেই ফিল্টার, সোর্ট, পেজিনেশন, সিলেকশন এবং অন্যান্য ইন্টারঅ্যাকটিভ ফিচার সহ গ্রিড ভিউ তৈরি করতে পারে। এই কম্পোনেন্টটি মূলত টেবিল আকারে ডেটা প্রদর্শন করতে ব্যবহৃত হয় এবং ওয়েব অ্যাপ্লিকেশনগুলিতে ব্যাপকভাবে ব্যবহৃত হয়ে থাকে।

Grid কম্পোনেন্ট কী?

Grid একটি টেবিল ভিত্তিক UI কম্পোনেন্ট যা ব্যবহারকারীদের ডেটা দেখানোর জন্য বিভিন্ন কলাম এবং রো ব্যবহার করে। এটি একাধিক কাস্টমাইজেশন অপশন প্রদান করে যেমন সোর্টিং, ফিল্টারিং, পেজিনেশন, রেডি ডেটা রেন্ডারিং, সিলেকশন, এবং আরও অনেক কিছু। এর মাধ্যমে আপনি ডেটাসেটের আকার এবং কাঠামো অনুযায়ী ডেটাকে খুবই সুনির্দিষ্টভাবে উপস্থাপন করতে পারেন।

Grid এর মূল বৈশিষ্ট্য

1. ডেটা সোর্টিং (Data Sorting):
   • আপনি Grid-এর কলামগুলিতে সোর্টিং সক্ষম করতে পারেন, যাতে ব্যবহারকারী ডেটা সহজেই যেকোনো কলাম অনুযায়ী অ্যালফাবেটিক্যাল বা সংখ্যাগতভাবে সাজাতে পারেন।
2. ফিল্টারিং (Filtering):
   • Grid কম্পোনেন্টে ফিল্টারিং ফিচারও রয়েছে, যা ব্যবহারকারীদের নির্দিষ্ট ডেটা খুঁজে বের করতে সাহায্য করে। উদাহরণস্বরূপ, ব্যবহারকারী একটি নির্দিষ্ট নাম বা ডেটা খুঁজতে পারেন।
3. পেজিনেশন (Pagination):
   • বড় ডেটাসেট নিয়ে কাজ করার সময় Grid পেজিনেশন সাপোর্ট করে, যার মাধ্যমে ডেটাকে ছোট অংশে ভাগ করে দেখানো হয়।
4. ডেটা সিলেকশন (Data Selection):
   • Grid ব্যবহারকারীদের ডেটা সিলেক্ট করতে দেয়, যা বিভিন্ন ধরনের প্রয়োজনে ব্যবহার করা যেতে পারে, যেমন ব্যাচ অপারেশন।
5. কাস্টম রেন্ডারিং (Custom Rendering):
   • আপনি Grid-এর ডেটাকে কাস্টম স্টাইল বা কাস্টম রেন্ডারিং প্রয়োগ করে দেখতে পারেন।

Vaadin Grid কম্পোনেন্টের উদাহরণ

Vaadin-এ একটি সিম্পল Grid কম্পোনেন্ট তৈরি করতে নিচের কোডটি ব্যবহার করা যেতে পারে:

@Route("")
public class MainView extends VerticalLayout {

    public MainView() {
        // ডেটা তৈরি করা
        List<Person> people = List.of(
            new Person("John Doe", 28),
            new Person("Jane Smith", 34),
            new Person("Mike Johnson", 45)
        );

        // Grid তৈরি করা
        Grid<Person> grid = new Grid<>(Person.class);
        grid.setItems(people); // Grid এ ডেটা সেট করা

        // Grid কলাম কাস্টমাইজ করা
        grid.setColumns("name", "age"); // কলামগুলো নির্ধারণ

        // গ্রিডকে UI তে যোগ করা
        add(grid);
    }

    // ব্যক্তির তথ্য রাখা Person ক্লাস
    public static class Person {
        private String name;
        private int age;

        public Person(String name, int age) {
            this.name = name;
            this.age = age;
        }

        public String getName() {
            return name;
        }

        public int getAge() {
            return age;
        }
    }
}

Grid কম্পোনেন্টে কাস্টমাইজেশন

Vaadin Grid কম্পোনেন্টে বিভিন্ন কাস্টমাইজেশন ফিচার যোগ করা সম্ভব। নিচে কিছু সাধারণ কাস্টমাইজেশন ফিচারের উদাহরণ দেওয়া হলো:

1. কলাম অর্ডার এবং লেবেল কাস্টমাইজেশন

আপনি Grid-এ কলামের লেবেল পরিবর্তন করতে এবং কলামগুলির অর্ডার নিয়ন্ত্রণ করতে পারেন:

grid.addColumn(Person::getName).setHeader("Full Name").setSortable(true);
grid.addColumn(Person::getAge).setHeader("Age").setSortable(true);

এখানে, setHeader() মেথডটি কলামের শিরোনাম কাস্টমাইজ করে এবং setSortable(true) মেথডটি কলামগুলোকে সোর্টেবল বানায়।

2. ফিল্টারিং ফিচার

আপনি Grid-এর জন্য ফিল্টারিং যোগ করতে পারেন, যার মাধ্যমে ব্যবহারকারী নির্দিষ্ট ডেটা অনুসন্ধান করতে পারবেন:

TextField filterText = new TextField();
filterText.setPlaceholder("Filter by name...");
filterText.addValueChangeListener(event -> {
    grid.setItems(people.stream()
        .filter(person -> person.getName().toLowerCase().contains(event.getValue().toLowerCase()))
        .collect(Collectors.toList()));
});
add(filterText, grid);

এখানে, filterText ফিল্ডের মাধ্যমে ব্যবহারকারী একটি নাম অনুসন্ধান করতে পারবেন এবং Grid তার ভিত্তিতে ডেটা ফিল্টার করবে।

3. পেজিনেশন

Vaadin Grid কম্পোনেন্ট পেজিনেশন সাপোর্ট করে, যা বড় ডেটাসেটের জন্য খুবই উপকারী। নিচে একটি উদাহরণ:

Grid<Person> grid = new Grid<>(Person.class);
grid.setItems(people);
grid.setPageSize(5); // প্রতি পেজে ৫টি আইটেম

এখানে, setPageSize() মেথডটি প্রতি পেজে কতটি আইটেম দেখানো হবে তা নির্ধারণ করে।

4. ডেটা সিলেকশন

Grid-এ ব্যবহারকারীরা এক বা একাধিক আইটেম নির্বাচন করতে পারেন:

grid.setSelectionMode(SelectionMode.MULTI); // একাধিক আইটেম নির্বাচন করা যাবে
grid.addSelectionListener(event -> {
    Set<Person> selectedPeople = event.getAllSelectedItems();
    // নির্বাচিত আইটেমের ওপর অপারেশন করুন
});

এখানে, setSelectionMode(SelectionMode.MULTI) ব্যবহার করে একাধিক আইটেম সিলেক্ট করা যাবে এবং addSelectionListener দিয়ে সিলেক্টেড আইটেমের ওপর কাজ করা যাবে।

সারাংশ

Vaadin Grid একটি শক্তিশালী কম্পোনেন্ট যা আপনাকে বড় ডেটাসেট সহজে প্রদর্শন এবং পরিচালনা করতে সহায়তা করে। এর মাধ্যমে আপনি ডেটা সোর্টিং, ফিল্টারিং, পেজিনেশন, সিলেকশন এবং কাস্টম রেন্ডারিংয়ের মতো ফিচারগুলো খুব সহজে প্রয়োগ করতে পারেন। এটি ওয়েব অ্যাপ্লিকেশনগুলিতে ডেটা ভিউ করার জন্য একেবারে আদর্শ একটি টুল।

Vaadin ফ্রেমওয়ার্কে ডাটা সোর্স এবং ডাটা ডিসপ্লে করা ওয়েব অ্যাপ্লিকেশনের একটি গুরুত্বপূর্ণ অংশ। এটি ডেভেলপারদের ডেটাবেস বা অন্য কোনো সোর্স থেকে ডাটা নিয়ে এসে সেটি ইউজার ইন্টারফেসে প্রদর্শন করতে সহায়তা করে। Vaadin অনেক ধরনের কম্পোনেন্ট সরবরাহ করে, যার মাধ্যমে ডেটা ভিউ তৈরি করা যায়, যেমন Grid, ListBox, ComboBox ইত্যাদি। এই সিস্টেম ব্যবহার করে ডেটা ইন্টারেক্টিভভাবে ডিসপ্লে করা সম্ভব হয়।

ডাটা সোর্স

ডাটা সোর্স হচ্ছে সেই উৎস, যেখানে থেকে আপনি ডেটা সংগ্রহ করেন। এটি একটি ডেটাবেস, API বা ইন-মেমরি ডাটা স্টোর হতে পারে। Vaadin ডাটা সোর্সের জন্য বিভিন্ন ধরনের সাপোর্ট সরবরাহ করে, যেমন ListDataProvider, BeanDataProvider, এবং JdbcDataProvider ইত্যাদি।

1. ListDataProvider

ListDataProvider ব্যবহার করা হয় একটি সাধারণ Java List বা Array থেকে ডেটা প্রদর্শন করার জন্য। উদাহরণস্বরূপ, একটি List এর ডেটা Grid কম্পোনেন্টে প্রদর্শন করতে:

List<String> dataList = Arrays.asList("Apple", "Banana", "Orange");
ListDataProvider<String> dataProvider = new ListDataProvider<>(dataList);

Grid<String> grid = new Grid<>();
grid.setDataProvider(dataProvider);
grid.addColumn(item -> item).setHeader("Fruits");

• এখানে ListDataProvider ব্যবহার করে একটি সাধারণ তালিকা Grid এ প্রদর্শন করা হয়েছে।

2. BeanDataProvider

BeanDataProvider ব্যবহার করা হয় Java Beans বা POJO (Plain Old Java Object) থেকে ডেটা প্রদর্শন করার জন্য। এই পদ্ধতিতে আপনি আপনার ডেটাকে একটি Java Bean অবজেক্টের মধ্যে সাজিয়ে, তারপরে সেই Bean কে Grid এ ডিসপ্লে করতে পারেন।

public class Fruit {
    private String name;
    private int quantity;
    
    public Fruit(String name, int quantity) {
        this.name = name;
        this.quantity = quantity;
    }
    
    public String getName() {
        return name;
    }
    
    public int getQuantity() {
        return quantity;
    }
}

List<Fruit> fruits = Arrays.asList(
    new Fruit("Apple", 5),
    new Fruit("Banana", 10),
    new Fruit("Orange", 7)
);

BeanDataProvider<Fruit> dataProvider = new BeanDataProvider<>(Fruit.class);
Grid<Fruit> grid = new Grid<>();
grid.setDataProvider(dataProvider);
grid.addColumn(Fruit::getName).setHeader("Fruit Name");
grid.addColumn(Fruit::getQuantity).setHeader("Quantity");

• এখানে BeanDataProvider ব্যবহার করা হয়েছে Fruit নামক Java Bean থেকে ডেটা প্রদর্শন করতে।

3. JdbcDataProvider

JdbcDataProvider ব্যবহৃত হয় যখন ডেটা ডাটাবেস থেকে সরাসরি লোড করতে হয়। এটি JDBC কনফিগারেশন এবং ডেটাবেস কনেকশন ব্যবহার করে ডেটা ফেচ করে।

JdbcDataProvider<Product> dataProvider = new JdbcDataProvider<>(Product.class, 
    "SELECT * FROM products", connection -> {
        // Database connection code
    });

Grid<Product> grid = new Grid<>();
grid.setDataProvider(dataProvider);

• এই উদাহরণে, JdbcDataProvider একটি SQL কোয়েরি ব্যবহার করে ডেটাবেস থেকে ডেটা সংগ্রহ করে এবং Grid কম্পোনেন্টে প্রদর্শন করে।

ডাটা ডিসপ্লে করা

Vaadin ডেটাকে ইউজার ইন্টারফেসে ডিসপ্লে করতে বিভিন্ন কম্পোনেন্ট সরবরাহ করে। ডেটা ভিউ তৈরি করার জন্য সাধারণত Grid, ComboBox, ListBox, এবং DataView ব্যবহার করা হয়।

1. Grid

Grid হচ্ছে একটি শক্তিশালী এবং কাস্টমাইজযোগ্য কম্পোনেন্ট, যা ডেটা প্রদর্শনের জন্য ব্যবহৃত হয়। এটি সাধারণত টেবিল বা লিস্টের আকারে ডেটা দেখানোর জন্য ব্যবহৃত হয়।

Grid<Fruit> grid = new Grid<>();
grid.setItems(fruits);
grid.addColumn(Fruit::getName).setHeader("Fruit Name");
grid.addColumn(Fruit::getQuantity).setHeader("Quantity");

• এখানে Grid ব্যবহার করে Fruit অবজেক্টের নাম এবং পরিমাণ প্রদর্শন করা হচ্ছে।

2. ComboBox

ComboBox একটি ড্রপডাউন লিস্ট তৈরি করতে ব্যবহৃত হয়। এটি সাধারণত সিলেকশনের জন্য ব্যবহার করা হয়।

ComboBox<String> comboBox = new ComboBox<>("Select Fruit");
comboBox.setItems("Apple", "Banana", "Orange");

• এখানে ComboBox ব্যবহার করে ফ্রুটের নামের একটি ড্রপডাউন তৈরি করা হয়েছে।

3. ListBox

ListBox ব্যবহার করে আপনি লিস্টের আকারে ডেটা প্রদর্শন করতে পারেন। এটি একাধিক অপশন প্রদর্শন করে, কিন্তু ড্রপডাউন লিস্টের মতো কাজ করে না।

ListBox<String> listBox = new ListBox<>();
listBox.setItems("Apple", "Banana", "Orange");

• এখানে ListBox ব্যবহার করে ফ্রুটের নামের একটি লিস্ট তৈরি করা হয়েছে।

ডাটা ডিসপ্লে কাস্টমাইজেশন

Vaadin আপনাকে ডেটা ডিসপ্লে কাস্টমাইজ করার সুযোগ দেয়। আপনি কলাম হেডার, স্টাইল, কাস্টম কম্পোনেন্ট এবং বিভিন্ন কন্ডিশনাল ফরম্যাটিং ব্যবহার করে ডেটাকে আরও ইন্টারেক্টিভ এবং সুন্দরভাবে উপস্থাপন করতে পারেন। উদাহরণস্বরূপ, কলামের ভ্যালু এবং রেকর্ডের শো করার সময় কাস্টম ফরম্যাটিং ব্যবহার করা:

grid.addColumn(fruit -> fruit.getQuantity() > 5 ? "Available" : "Out of stock")
    .setHeader("Availability");

• এখানে Grid এর জন্য একটি কাস্টম কলাম যোগ করা হয়েছে, যা Fruit এর পরিমাণের উপর ভিত্তি করে "Available" অথবা "Out of stock" প্রদর্শন করবে।

Vaadin-এ ডাটা সোর্স এবং ডাটা ডিসপ্লে করা খুবই শক্তিশালী এবং কাস্টমাইজযোগ্য। আপনি সহজেই ডেটা সোর্সে এক্সেস করতে পারেন এবং Grid, ComboBox, ListBox এর মতো কম্পোনেন্ট ব্যবহার করে সেই ডেটাকে সুন্দরভাবে ইউজার ইন্টারফেসে প্রদর্শন করতে পারেন। Vaadin এর ডেটা প্রদর্শন সিস্টেম ডেভেলপারদের জন্য খুবই সুবিধাজনক এবং ইন্টারেক্টিভ ওয়েব অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে।

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 ব্যবহার করে ইউজারের জন্য কাস্টম এডিটিং ফিচার যোগ করা সম্ভব। এগুলো ব্যবহৃত হলে ওয়েব অ্যাপ্লিকেশনটি আরও ইন্টারেক্টিভ, কাস্টমাইজেবল এবং ব্যবহারকারী বান্ধব হয়ে ওঠে।

Vaadin একটি অত্যন্ত শক্তিশালী ফ্রেমওয়ার্ক, যা ব্যবহারকারীদের জন্য ডেটা টেবিল বা গ্রিডে pagination এবং sorting সহজে পরিচালনা করতে সক্ষম। এই বৈশিষ্ট্যগুলি বিশেষভাবে দীর্ঘ ডেটাসেটের জন্য প্রয়োজনীয়, যেখানে ডেটা প্রদর্শনের জন্য পেজিনেশন এবং ব্যবহারকারীদের জন্য সহজে sorting অপশন প্রদান করা গুরুত্বপূর্ণ।

এখানে Vaadin-এ pagination এবং sorting ব্যবস্থাপনা করার পদ্ধতি বিস্তারিতভাবে আলোচনা করা হয়েছে।

Pagination (পেজিনেশন)

Pagination বা পেজিনেশন হল একটি পদ্ধতি, যার মাধ্যমে দীর্ঘ ডেটা একবারে না দেখিয়ে, নির্দিষ্ট পৃষ্ঠায় বিভক্ত করে দেখানো হয়। এতে ডেটা দ্রুত লোড হয় এবং ইউজারদের জন্য ডেটা পর্যালোচনা করা সহজ হয়। Vaadin-এ pagination ব্যবস্থাপনা করার জন্য সাধারণত Grid কম্পোনেন্ট ব্যবহার করা হয়।

1. Grid এবং Pagination ব্যবহার করা

Vaadin এর Grid কম্পোনেন্টে pagination যোগ করতে, setPageSize() মেথড ব্যবহার করতে হয়, যা নির্ধারণ করে একটি পেজে কতটি রেকর্ড দেখানো হবে। এর মাধ্যমে আপনি সহজেই pagination যুক্ত করতে পারবেন।

Grid<Person> grid = new Grid<>(Person.class);
grid.setItems(personService.findAll());  // Items set

grid.setPageSize(10);  // প্রতি পেজে 10টি আইটেম দেখাবে

// Grid কে কাস্টমাইজ করা
grid.setColumns("name", "age", "address");

• এখানে setPageSize(10) ব্যবহার করা হয়েছে, যার মাধ্যমে প্রতি পেজে ১০টি আইটেম দেখানো হবে।
• setItems() মেথড দিয়ে আপনি ডেটা সেট করতে পারেন, যা গ্রিডে দেখানো হবে।

2. Pagination Controls

Vaadin গ্রিডে pagination এর জন্য ডিফল্ট pagination কন্ট্রোল থাকে, যেমন পেজ স্লাইডার এবং পেজ নম্বর। আপনি যদি pagination কন্ট্রোল কাস্টমাইজ করতে চান, তবে Paginator লাইব্রেরি ব্যবহার করতে পারেন অথবা Grid এর সাথে GridPaginator ব্যবহার করতে পারেন।

Pagination pagination = new Pagination();
pagination.setPageSize(10);  // প্রতি পেজে 10টি আইটেম

// pagination grid-এ যোগ করা
grid.setPaginator(pagination);

Sorting (সর্টিং)

Vaadin গ্রিডে সহজেই ডেটা sorting করা যায়। গ্রিডের প্রতিটি কলামে ক্লিক করে সেই কলামের উপর sorting করা যেতে পারে, আর Vaadin স্বয়ংক্রিয়ভাবে ascending বা descending অর্ডারে ডেটা সাজিয়ে দেয়। গ্রিডের জন্য ডিফল্ট সর্টিং ফিচার সক্রিয় থাকে, তবে আপনি চাইলে sorting কাস্টমাইজও করতে পারেন।

1. Sorting সক্রিয় করা

Vaadin গ্রিডের setSortable(true) মেথড ব্যবহার করে আপনি একটি কলামকে sortable করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো:

Grid<Person> grid = new Grid<>(Person.class);
grid.setItems(personService.findAll());  // Items set

grid.setColumns("name", "age", "address");

// Sortable কলাম যোগ করা
grid.getColumnByKey("name").setSortable(true);
grid.getColumnByKey("age").setSortable(true);

• এখানে setSortable(true) ব্যবহার করা হয়েছে, যার মাধ্যমে name এবং age কলামগুলোতে sorting সক্ষম হবে।

2. Custom Sorting Logic

আপনি যদি একটি কাস্টম sorting লজিক প্রয়োগ করতে চান, তবে setComparator() মেথড ব্যবহার করতে পারেন। উদাহরণস্বরূপ, নিচে name কলামের জন্য কাস্টম sorting লজিক দেওয়া হলো:

grid.addColumn(Person::getName)
    .setHeader("Name")
    .setSortable(true)
    .setComparator((name1, name2) -> name1.compareTo(name2));

• এই ক্ষেত্রে, setComparator() ব্যবহার করে আপনি sorting কাস্টমাইজ করতে পারবেন।

Pagination এবং Sorting একসাথে ব্যবহার করা

Vaadin-এ pagination এবং sorting একসাথে ব্যবহৃত হতে পারে, যাতে ব্যবহারকারীরা পেজিনেশন কন্ট্রোল এবং কলাম sorting এর মাধ্যমে সহজেই ডেটা পর্যালোচনা করতে পারেন। উদাহরণস্বরূপ, যদি আপনি গ্রিডে pagination এবং sorting একসাথে ব্যবহার করতে চান, তবে নিচের কোডটি দেখতে পারেন:

Grid<Person> grid = new Grid<>(Person.class);
grid.setItems(personService.findAll());  // Items set

grid.setPageSize(10);  // প্রতি পেজে 10টি আইটেম দেখাবে

grid.setColumns("name", "age", "address");
grid.getColumnByKey("name").setSortable(true);  // Name column sortable
grid.getColumnByKey("age").setSortable(true);   // Age column sortable

grid.addItemClickListener(event -> {
    Notification.show("You clicked: " + event.getItem().getName());
});

• এখানে pagination এবং sorting একসাথে ব্যবহৃত হচ্ছে, যাতে ব্যবহারকারীরা ডেটার পৃষ্ঠাগুলোর মধ্যে নেভিগেট করতে এবং কলাম অনুযায়ী ডেটা সাজাতে পারেন।

উপসংহার

Vaadin-এ pagination এবং sorting ব্যবস্থাপনা খুবই সহজ এবং কার্যকর। Grid কম্পোনেন্ট ব্যবহার করে আপনি সহজেই ডেটা পেজিনেশন এবং কলাম ভিত্তিক sorting পরিচালনা করতে পারেন। pagination ব্যবহার করে আপনি ডেটাকে বিভিন্ন পৃষ্ঠায় বিভক্ত করতে পারেন এবং sorting দিয়ে ব্যবহারকারীদের ডেটা সাজানোর সুবিধা দিতে পারেন। Vaadin-এর ডিফল্ট ফিচারগুলি খুবই শক্তিশালী এবং কাস্টমাইজেশন সুবিধা প্রদান করে, যা ডেভেলপারদের জন্য অত্যন্ত সহায়ক।