RichFaces ফ্রেমওয়ার্কের rich:tree ট্যাগ ব্যবহার করে ডাটা ট্রি তৈরি করা একটি শক্তিশালী উপায় যা JavaServer Faces (JSF) অ্যাপ্লিকেশনের মধ্যে ডায়নামিক এবং ইন্টারঅ্যাকটিভ হায়ারার্কিক্যাল ডাটা প্রদর্শন করতে সহায়তা করে। এটি বিশেষভাবে AJAX এবং JavaBeans এর সাথে ভালোভাবে কাজ করে, যার মাধ্যমে সহজেই ট্রি স্ট্রাকচার এবং ডায়নামিক ডাটা লোড করা সম্ভব।
এখানে rich:tree ট্যাগ ব্যবহার করে ডাটা ট্রি তৈরি করার পদ্ধতি এবং কিছু উদাহরণ দেওয়া হলো।
1. rich:tree ট্যাগ ব্যবহার করে ডাটা ট্রি তৈরি
rich:tree ট্যাগটি একটি হায়ারার্কিক্যাল ডাটা (ডাটা ট্রি) প্রদর্শন করার জন্য ব্যবহৃত হয়। এটি AJAX ভিত্তিক টেবিল বা গ্রিড হিসেবে কাজ করতে পারে যা পেজ রিফ্রেশ ছাড়াই ডায়নামিকভাবে আপডেট হতে পারে।
rich:tree ট্যাগের মৌলিক গঠন:
<rich:tree value="#{bean.treeData}" var="node"
dynamic="true"
id="myTree"
renderNode="#{node.value}"
selectionMode="single">
<rich:treeNode>
<h:outputText value="#{node.value}" />
</rich:treeNode>
</rich:tree>
ব্যাখ্যা:
value: এখানে আপনার managed bean বা data model থেকে ডাটা সাপ্লাই করা হবে যা ট্রির নোডগুলিকে সাজাবে।var: প্রতিটি ট্রি নোডের জন্য একটি ভেরিয়েবল (যেমনnode) নির্ধারণ করা হয়েছে, যাতে আপনি সেই নোডের ভিতরের ডেটা অ্যাক্সেস করতে পারেন।dynamic: এই অ্যাট্রিবিউটটি ট্রি নোডের ক্লিকের মাধ্যমে ডাটা লোড করার সুবিধা দেয়।selectionMode: এখানে single সিলেকশন মোড দেওয়া হয়েছে, যার মাধ্যমে একবারে একটি নোড সিলেক্ট করা যাবে। যদি আপনি multiple মোড ব্যবহার করতে চান, তখন selectionMode="multiple" ব্যবহার করতে পারেন।
2. rich:tree উদাহরণ
ধরা যাক, আমরা একটি ডাটা ট্রি তৈরি করতে চাই যেখানে বিভিন্ন বিভাগের নোড থাকবে, যেমন Product Categories। আমরা JavaBeans এর মাধ্যমে ডাটা লোড করব এবং rich:tree ব্যবহার করে তা ডিসপ্লে করব।
JavaBean - TreeBean.java:
import org.richfaces.model.TreeNode;
import org.richfaces.model.TreeNodeImpl;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean
@SessionScoped
public class TreeBean {
private TreeNode root;
public TreeBean() {
root = new TreeNodeImpl("Root");
TreeNode electronics = new TreeNodeImpl("Electronics");
TreeNode computers = new TreeNodeImpl("Computers");
TreeNode laptops = new TreeNodeImpl("Laptops");
electronics.addChild(computers);
computers.addChild(laptops);
root.addChild(electronics);
}
public TreeNode getTreeData() {
return root;
}
}
HTML / JSF - treeExample.xhtml:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:rich="http://richfaces.org/rich"
template="/templates/default.xhtml">
<h:form>
<rich:tree value="#{treeBean.treeData}" var="node" dynamic="true"
id="myTree" selectionMode="single"
renderNode="#{node.value}">
<rich:treeNode>
<h:outputText value="#{node.value}" />
</rich:treeNode>
</rich:tree>
</h:form>
</ui:composition>
ব্যাখ্যা:
- JavaBean (
TreeBean):TreeBeanক্লাসটি TreeNode অবজেক্ট ব্যবহার করে একটি হায়ারার্কিক্যাল স্ট্রাকচার তৈরি করেছে। এখানে electronics বিভাগটি computers এবং laptops কে অন্তর্ভুক্ত করছে। এটি root থেকে একাধিক স্তর তৈরি করে। - JSF page (
treeExample.xhtml): এখানে rich:tree ট্যাগ ব্যবহার করা হয়েছে, যার মধ্যে dynamic="true" এর মাধ্যমে ডাটা AJAX মাধ্যমে লোড হচ্ছে এবং renderNode অ্যাট্রিবিউটটি ট্রি নোডের কন্টেন্ট প্রদর্শন করছে।
3. Dynamic Data Loading
rich:tree ট্যাগের dynamic="true" অ্যাট্রিবিউটটি ব্যবহার করে আপনি ডাটা লোডিংকে ডায়নামিক করতে পারেন। এটি বিশেষভাবে ব্যবহারী যখন ট্রি নোডের মধ্যে বিশাল পরিমাণ ডাটা থাকে এবং একটি নোড ক্লিক করলে সেই নোডের সন্তানের নোডগুলি ডাইনামিকভাবে লোড করতে হয়।
এটি নোড ক্লিক করলে সেই নোডের উপর ডাটা লোড করে, সুতরাং আপনি প্রতিবার পুরো ট্রি লোড না করে, শুধুমাত্র প্রয়োজনীয় ডাটা লোড করতে পারবেন।
Dynamic Tree Loading Example:
<rich:tree value="#{treeBean.treeData}" var="node" dynamic="true"
id="dynamicTree" selectionMode="single">
<rich:treeNode>
<h:outputText value="#{node.value}" />
</rich:treeNode>
</rich:tree>
এখানে, dynamic="true" অ্যাট্রিবিউট দিয়ে ট্রি নোডের ডাটা AJAX মাধ্যমে লোড হবে।
4. Tree Selection and Actions
rich:tree ট্যাগের সাহায্যে আপনি একটি ট্রি নোড নির্বাচন করার জন্য selectionMode ব্যবহার করতে পারেন এবং নির্বাচিত নোডের উপর অ্যাকশন গ্রহণ করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো যেখানে একটি বাটনের মাধ্যমে নির্বাচিত নোডের তথ্য প্রদর্শন করা হবে।
Example: Tree Selection Action
<h:form>
<rich:tree value="#{treeBean.treeData}" var="node" dynamic="true"
id="myTree" selectionMode="single">
<rich:treeNode>
<h:outputText value="#{node.value}" />
</rich:treeNode>
</rich:tree>
<h:commandButton value="Show Selected Node" action="#{treeBean.showSelectedNode}" />
<h:outputText value="#{treeBean.selectedNode}" />
</h:form>
JavaBean - TreeBean.java (Updated):
import org.richfaces.model.TreeNode;
import org.richfaces.model.TreeNodeImpl;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean
@SessionScoped
public class TreeBean {
private TreeNode root;
private String selectedNode;
public TreeBean() {
root = new TreeNodeImpl("Root");
TreeNode electronics = new TreeNodeImpl("Electronics");
TreeNode computers = new TreeNodeImpl("Computers");
TreeNode laptops = new TreeNodeImpl("Laptops");
electronics.addChild(computers);
computers.addChild(laptops);
root.addChild(electronics);
}
public TreeNode getTreeData() {
return root;
}
public void showSelectedNode() {
// Logic to retrieve the selected node's value
this.selectedNode = "Selected Node: " + ((TreeNodeImpl) root).getData();
}
public String getSelectedNode() {
return selectedNode;
}
}
ব্যাখ্যা:
- selectionMode="single": একটি একক নোড নির্বাচন করা যাবে।
- showSelectedNode(): বাটন ক্লিক করার পর নির্বাচিত নোডের ডেটা JavaBean এ প্রক্রিয়াজাত হবে এবং তা outputText এ প্রদর্শিত হবে।
rich:tree ট্যাগের সাহায্যে আপনি একটি শক্তিশালী ডাটা ট্রি তৈরি করতে পারেন যা AJAX সহ ডায়নামিকভাবে ডাটা লোড এবং নেভিগেশন করতে পারে। RichFaces এর এই ফিচারটি বড় এবং জটিল ডাটা কাঠামো সহজে প্রদর্শন করতে এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সহায়তা করে। আপনি dynamic data loading, node selection, এবং AJAX updates সহ বিভিন্ন ধরনের interactive tree তৈরি করতে পারেন যা JavaServer Faces অ্যাপ্লিকেশনে অত্যন্ত কার্যকরী হতে পারে।
Read more
