JSF (JavaServer Faces) ফ্রেমওয়ার্কে DataTable কম্পোনেন্টটি একটি অত্যন্ত শক্তিশালী টুল, যা ডেভেলপারদের ডেটা প্রদর্শন করতে সহায়তা করে। DataTable কম্পোনেন্টটি মূলত একটি টেবিলের মতো ডেটা প্রদর্শন করে এবং এটি সহজেই ডাইনামিক ডেটা পরিবেশন করতে সক্ষম। DataTable কম্পোনেন্টের মাধ্যমে আপনি সারি (row), কলাম (column), এবং বিভিন্ন ধরনের ইনপুট বা অ্যাকশন বাটন যুক্ত করতে পারেন।
DataTable কম্পোনেন্টের মৌলিক ব্যবহার
DataTable কম্পোনেন্টে সাধারণত ডেটা প্রদর্শন করা হয় যা JavaBeans বা একটি কাস্টম ডেটা সঞ্চালন থেকে আসতে পারে। এটি জাভা সার্ভার ফেসেসের একটি গুরুত্বপূর্ণ অংশ হিসেবে ব্যবহৃত হয় এবং অনেক ক্ষেত্রেই ডেটা টেবিলের মাধ্যমে বিভিন্ন ইনফরমেশন সিস্টেমে উপস্থাপিত হয়।
DataTable কম্পোনেন্টের মৌলিক কাঠামো
JSF DataTable কম্পোনেন্ট সাধারণত নিচের মতো দেখতে হয়:
<h:dataTable value="#{bean.items}" var="item">
<h:column>
<f:facet name="header">ID</f:facet>
#{item.id}
</h:column>
<h:column>
<f:facet name="header">Name</f:facet>
#{item.name}
</h:column>
<h:column>
<f:facet name="header">Action</f:facet>
<h:commandButton value="Edit" action="#{bean.editItem(item)}"/>
</h:column>
</h:dataTable>
উপাদানসমূহ
- value="#{bean.items}":
- এখানে
#{bean.items}একটি মডেল ডেটার রেফারেন্স যা প্রেজেন্টেশন লেয়ার (view layer) তে টেবিলের ডেটা প্রদর্শন করবে। এটি সাধারণত ম্যানেজড বিইন (Managed Bean) থেকে আসবে।
- এখানে
- var="item":
varঅ্যাট্রিবিউটটি প্রতিটি সারির জন্য আইটেমটি প্রতিনিধিত্ব করে।itemএকটি ভেরিয়েবল যা প্রতিটি সারি (row) এর জন্য মান ধারণ করবে।
- <h:column>:
h:columnট্যাগটি টেবিলের কলামটি তৈরি করে। প্রতিটি কলাম টেবিলের একটি নির্দিষ্ট ডেটার অংশ প্রদর্শন করে।
- <f:facet name="header">:
facetট্যাগটি কলামের হেডার নির্ধারণ করতে ব্যবহৃত হয়। এটি টেবিলের শিরোনাম হিসাবে কাজ করে।
- <h:commandButton>:
- এটি একটি বাটন তৈরি করে যা বিশেষ অ্যাকশন (যেমন: সম্পাদনা, মুছে ফেলা ইত্যাদি) সম্পাদন করে। বাটনটি একটি ফাংশন বা মেথড (যেমন
editItem) কল করতে পারে।
- এটি একটি বাটন তৈরি করে যা বিশেষ অ্যাকশন (যেমন: সম্পাদনা, মুছে ফেলা ইত্যাদি) সম্পাদন করে। বাটনটি একটি ফাংশন বা মেথড (যেমন
DataTable এর ব্যবহারিক উদাহরণ
ধরা যাক, আপনি একটি সিম্পল ইন্টারফেস তৈরি করতে চান যেখানে ব্যবহারকারীরা বিভিন্ন পণ্য (Product) এর তালিকা দেখতে পারবে এবং প্রতিটি পণ্য সম্পাদনা করতে পারবে।
Managed Bean (ProductBean.java):
import javax.faces.bean.ManagedBean; import java.util.ArrayList; import java.util.List; @ManagedBean public class ProductBean { private List<Product> items; public ProductBean() { items = new ArrayList<>(); items.add(new Product(1, "Product A")); items.add(new Product(2, "Product B")); items.add(new Product(3, "Product C")); } public List<Product> getItems() { return items; } public void editItem(Product item) { // edit item logic here System.out.println("Editing product: " + item.getName()); } } class Product { private int id; private String name; public Product(int id, String name) { this.id = id; this.name = name; } public int getId() { return id; } public String getName() { return name; } }JSF Page (products.xhtml):
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"> <h:head> <title>Product List</title> </h:head> <h:body> <h:dataTable value="#{productBean.items}" var="item"> <h:column> <f:facet name="header">Product ID</f:facet> #{item.id} </h:column> <h:column> <f:facet name="header">Product Name</f:facet> #{item.name} </h:column> <h:column> <f:facet name="header">Action</f:facet> <h:commandButton value="Edit" action="#{productBean.editItem(item)}"/> </h:column> </h:dataTable> </h:body> </html>
DataTable কম্পোনেন্টের উন্নত ফিচার
JSF DataTable কম্পোনেন্টটি কেবলমাত্র ডেটা প্রদর্শনের জন্য নয়, বরং এটি অনেক উন্নত ফিচারও প্রদান করে, যেমন:
- সার্চ এবং ফিল্টারিং: ডেটার মধ্যে সার্চ এবং ফিল্টারিং করা সম্ভব।
- পেজিনেশন: অনেক ডেটা থাকলে
DataTableপেজিনেশন (pagination) করতে সহায়তা করে, যাতে ডেটা একসঙ্গে অনেক পৃষ্ঠায় বিভক্ত হয়ে প্রদর্শিত হয়। - সোর্টিং: কলামের ভিত্তিতে ডেটা সাজানো (sorting) সম্ভব।
- এডিটিং এবং ডিলিটিং: প্রতিটি রোতে অ্যাকশন বাটন (যেমন সম্পাদনা বা মুছে ফেলা) যোগ করা যায়।
উদাহরণ: DataTable এর পেজিনেশন ও সোর্টিং
<h:dataTable value="#{productBean.items}" var="item" paginator="true" rows="5" sortBy="#{item.name}">
<h:column>
<f:facet name="header">Product ID</f:facet>
#{item.id}
</h:column>
<h:column>
<f:facet name="header">Product Name</f:facet>
#{item.name}
</h:column>
<h:column>
<f:facet name="header">Action</f:facet>
<h:commandButton value="Edit" action="#{productBean.editItem(item)}"/>
</h:column>
</h:dataTable>
এখানে:
- paginator="true": পেজিনেশন সক্ষম করবে।
- rows="5": প্রতি পৃষ্ঠায় ৫টি আইটেম দেখাবে।
- sortBy="#{item.name}": নাম অনুযায়ী ডেটা সাজানোর ব্যবস্থা।
সারাংশ
JSF DataTable কম্পোনেন্টটি একটি শক্তিশালী উপাদান যা ডেটা প্রদর্শন, পেজিনেশন, সোর্টিং, ফিল্টারিং এবং অ্যাকশন কম্পোনেন্ট পরিচালনা করার জন্য ব্যবহৃত হয়। এটি একটি গুরুত্বপূর্ণ টুল যেখানে জাভা ডেভেলপাররা ডাইনামিক ডেটা প্রদর্শন করতে পারে এবং ব্যবহারকারীদের ইন্টারেকশনকে আরও কার্যকর করতে পারে। DataTable কম্পোনেন্টের সাহায্যে আপনি সহজেই যেকোনো ধরনের ডেটা টেবিল তৈরি এবং পরিচালনা করতে পারবেন।
Read more
