RichFaces একটি JavaServer Faces (JSF) ভিত্তিক লাইব্রেরি, যা AJAX এবং অন্যান্য ইন্টারেক্টিভ ইউজার ইন্টারফেস উপাদান সরবরাহ করে। Tree Nodes এবং Child Elements কনফিগারেশন RichFaces তে এমন একটি গুরুত্বপূর্ণ ফিচার, যা dynamic tree structures তৈরি করতে ব্যবহৃত হয়। এটি সাধারণত rich:tree কম্পোনেন্টে ব্যবহৃত হয়, যেখানে পিতামাতা (parent) এবং সন্তান (child) উপাদানগুলিকে হায়ারার্কিক্যালভাবে সাজানো হয়।
RichFaces: Tree Nodes এবং Child Elements কনফিগারেশন
rich:tree কম্পোনেন্টের মাধ্যমে আপনি সহজেই একটি ডাইনামিক ট্রি স্ট্রাকচার তৈরি করতে পারেন যেখানে প্রতিটি ট্রী নোডের ভিতরে child nodes থাকবে। Tree Nodes সাধারণত ডেটা বা তথ্যের হায়ারার্কি (যেমন, ফোল্ডার এবং ফাইল) প্রদর্শন করার জন্য ব্যবহৃত হয়।
1. Basic Tree Structure Using rich:tree
এখানে একটি সহজ rich:tree উদাহরণ দেওয়া হলো যেখানে পিতামাতা এবং সন্তান নোড তৈরি করা হয়েছে।
Example: Basic Tree Structure
<h:form>
<rich:tree value="#{treeBean.treeModel}" var="node">
<rich:node label="#{node.label}">
<!-- Nested child nodes can be added here -->
<rich:treeNodes value="#{node.children}" var="childNode">
<rich:node label="#{childNode.label}" />
</rich:treeNodes>
</rich:node>
</rich:tree>
</h:form>
ব্যাখ্যা:
rich:tree: এটি মূল ট্রী কম্পোনেন্ট।valueঅ্যাট্রিবিউটটি একটি ডেটা মডেল থেকে ট্রী নোড ডেটা ধারণ করে।rich:node: এটি একটি ট্রী নোড তৈরি করে এবং প্রতিটি নোডের জন্যlabelপ্রদান করা হয়।rich:treeNodes: এটি সন্তানের (child) নোড গুলি প্রদর্শন করতে ব্যবহৃত হয়। এটি একটি nested কম্পোনেন্ট, যা ট্রী নোডের ভিতরে থাকা সন্তানের জন্য ডেটা রেন্ডার করে।
2. Tree with Dynamic Nodes and Child Elements
এখন, একটি ডাইনামিক Tree তৈরি করি যেখানে Child Elements গুলি AJAX ব্যবহার করে লোড করা হবে।
Example: Dynamic Tree with AJAX
<h:form>
<rich:tree value="#{treeBean.treeModel}" var="node" switchType="ajax">
<rich:node label="#{node.label}">
<rich:treeNodes value="#{node.children}" var="childNode">
<rich:node label="#{childNode.label}" />
</rich:treeNodes>
</rich:node>
</rich:tree>
</h:form>
ব্যাখ্যা:
switchType="ajax": এই অ্যাট্রিবিউটটি AJAX ব্যবহার করে ট্রী নোডের কন্টেন্ট লোডিং নিশ্চিত করে। এটি পেজ রিফ্রেশ ছাড়া নতুন নোড লোড করতে সাহায্য করে।- AJAX Interaction: এই কনফিগারেশনটি পেজ রিফ্রেশ না করে ট্রী নোডগুলোকে dynamic ভাবে লোড করবে।
3. Tree Nodes with Expand/Collapse Functionality
RichFaces তে আপনি সহজে expand এবং collapse করতে পারবেন ট্রী নোড। এটি সাধারণত ডাইনামিক ট্রী স্ট্রাকচারে ব্যবহার করা হয় যাতে ইউজারদের জন্য নোডগুলিকে ভিউ করা সহজ হয়।
Example: Tree Nodes with Expand/Collapse
<h:form>
<rich:tree value="#{treeBean.treeModel}" var="node" switchType="ajax">
<rich:node label="#{node.label}" expanded="true">
<rich:treeNodes value="#{node.children}" var="childNode">
<rich:node label="#{childNode.label}" expanded="true"/>
</rich:treeNodes>
</rich:node>
</rich:tree>
</h:form>
ব্যাখ্যা:
expanded="true": এটি প্রতিটি নোডের জন্য ডিফল্টভাবে এক্সপ্যান্ড (প্রসারিত) হওয়ার স্টেট নির্ধারণ করে। অর্থাৎ, ইউজার পেজ লোড হলে নোডগুলো আগে থেকেই এক্সপ্যান্ডেড থাকবে।- AJAX Expansion:
switchType="ajax"ব্যবহার করলে ব্যবহারকারীর ক্লিকের মাধ্যমে নোড এক্সপ্যান্ড অথবা কলাপস হতে পারে, কোন পেজ রিফ্রেশ ছাড়াই।
4. Tree Model Using Managed Bean (Server-Side Data)
এখন, আমরা RichFaces এর rich:tree কম্পোনেন্টে server-side data ব্যবহার করে dynamic tree model তৈরি করব। এখানে, Managed Bean এর মাধ্যমে ট্রী নোডের ডেটা পরিচালিত হবে।
Example: Dynamic Tree Model with Managed Bean
@ManagedBean
public class TreeBean {
private TreeNode root;
@PostConstruct
public void init() {
root = new DefaultTreeNode("Root", null);
TreeNode parentNode1 = new DefaultTreeNode("Parent 1", root);
new DefaultTreeNode("Child 1.1", parentNode1);
new DefaultTreeNode("Child 1.2", parentNode1);
TreeNode parentNode2 = new DefaultTreeNode("Parent 2", root);
new DefaultTreeNode("Child 2.1", parentNode2);
}
public TreeNode getTreeModel() {
return root;
}
}
<h:form>
<rich:tree value="#{treeBean.treeModel}" var="node" switchType="ajax">
<rich:node label="#{node.label}">
<rich:treeNodes value="#{node.children}" var="childNode">
<rich:node label="#{childNode.label}" />
</rich:treeNodes>
</rich:node>
</rich:tree>
</h:form>
ব্যাখ্যা:
TreeNode: TreeNode Java ক্লাস ব্যবহার করে পিতামাতা এবং সন্তান নোড গুলি তৈরি করা হয়।- Managed Bean:
@ManagedBeanএর মাধ্যমে TreeBean ক্লাসে ট্রী ডেটা তৈরি করা হয় এবং JSF কম্পোনেন্টে এই ডেটা বাইন্ডিং করা হয়। switchType="ajax": এটি AJAX রিকোয়েস্টে ডেটা লোড করতে সহায়তা করে, যাতে পেজ রিফ্রেশ ছাড়াই ট্রী কন্টেন্ট আপডেট হয়।
5. Adding Icons to Tree Nodes
ট্রী নোডগুলিতে আইকন যোগ করা একটি সাধারণ ফিচার যা ইউজারের ইন্টারফেসকে আরও ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় করে তোলে।
Example: Adding Icons to Tree Nodes
<h:form>
<rich:tree value="#{treeBean.treeModel}" var="node" switchType="ajax">
<rich:node label="#{node.label}">
<f:facet name="icon">
<h:graphicImage value="#{node.icon}" />
</f:facet>
<rich:treeNodes value="#{node.children}" var="childNode">
<rich:node label="#{childNode.label}" />
</rich:treeNodes>
</rich:node>
</rich:tree>
</h:form>
ব্যাখ্যা:
<f:facet name="icon">: এই ফেসেটটি ট্রী নোডের আইকন প্রদর্শনের জন্য ব্যবহৃত হয়।<h:graphicImage value="#{node.icon}" />: এটি প্রতিটি নোডের আইকন প্রদর্শন করার জন্য ব্যবহার করা হয়, যেখানে node.icon হল আইকনের সোর্স।
RichFaces এর rich:tree কম্পোনেন্টটি একটি শক্তিশালী টুল যা ব্যবহারকারীদেরকে ডাইনামিক এবং ইন্টারেক্টিভ tree structure তৈরি করতে সহায়তা করে। আপনি Tree Nodes, Child Elements, AJAX, Expand/Collapse ফিচার, Icons এবং Server-side Data সহ একটি পূর্ণাঙ্গ ডাইনামিক ট্রী তৈরি করতে পারেন। এই ফিচারগুলি আপনার ওয়েব অ্যাপ্লিকেশনকে আরও ইন্টারেক্টিভ এবং ব্যবহারকারী-বান্ধব করে তোলে।
Read more
