JSF (JavaServer Faces) ফ্রেমওয়ার্কে টেমপ্লেট পেজ তৈরি করা একটি কার্যকরী পদ্ধতি যা আপনাকে বিভিন্ন পৃষ্ঠার জন্য সাধারণ লেআউট এবং ফিচার পুনরায় ব্যবহার করার সুযোগ দেয়। এতে কোড রিপিটিশন কমে এবং অ্যাপ্লিকেশনটি আরও স্কেলেবল এবং রক্ষণাবেক্ষণযোগ্য হয়। JSF ফ্রেমওয়ার্কে টেমপ্লেট পেজ তৈরি করতে Facelets ব্যবহার করা হয়, যা JSF এর জন্য একটি ভিউ টেমপ্লেট ভাষা। Facelets এর মাধ্যমে আপনি একটি সাধারণ পেজ (যেমন header, footer, navigation) একাধিক পৃষ্ঠায় পুনঃব্যবহার করতে পারবেন।
১. Facelets টেমপ্লেট ব্যবহারের সুবিধা
- Code Reusability: একবার তৈরি করা টেমপ্লেট পুনরায় ব্যবহৃত হয়, যা কোড রিপিটিশন কমায়।
- Consistency: সব পৃষ্ঠায় একই লেআউট ও ডিজাইন বজায় রাখা যায়।
- Maintainability: এক জায়গায় পরিবর্তন করলে সেটি সব পৃষ্ঠায় প্রভাব ফেলে, ফলে অ্যাপ্লিকেশনটির রক্ষণাবেক্ষণ সহজ হয়।
২. Facelets টেমপ্লেট পেজ তৈরি করা
Facelets JSF এর ডিফল্ট ভিউ টেমপ্লেট ভাষা এবং এটি .xhtml এক্সটেনশন ব্যবহার করে। এখানে, একটি সাধারণ টেমপ্লেট পেজ তৈরি করার উদাহরণ দেওয়া হলো, যা বিভিন্ন পৃষ্ঠায় শেয়ার করা যাবে।
২.১. প্রাথমিক টেমপ্লেট পেজ তৈরি করা
প্রথমে, আপনি একটি Facelets টেমপ্লেট পেজ তৈরি করবেন, যেখানে আপনার হেডার, ফুটার এবং অন্যান্য সাধারণ উপাদান থাকবে।
<!-- layout.xhtml - Basic Template -->
<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>My JSF Application</title>
</h:head>
<h:body>
<!-- Header Section -->
<h:panelGroup id="header">
<h1>Welcome to My JSF App</h1>
</h:panelGroup>
<!-- Navigation Bar -->
<h:panelGroup id="navbar">
<h:link value="Home" outcome="home" />
<h:link value="About" outcome="about" />
<h:link value="Contact" outcome="contact" />
</h:panelGroup>
<!-- Main Content Section -->
<h:panelGroup id="content">
<f:facet name="content">
<ui:insert name="content" />
</f:facet>
</h:panelGroup>
<!-- Footer Section -->
<h:panelGroup id="footer">
<h:outputText value="© 2024 My JSF Application" />
</h:panelGroup>
</h:body>
</html>
এখানে, layout.xhtml ফাইলটি একটি সাধারণ টেমপ্লেট যা header, navbar, content এবং footer অন্তর্ভুক্ত করছে। এখানে, <ui:insert> ট্যাগ ব্যবহার করা হয়েছে যা টেমপ্লেটের কনটেন্ট সেকশনে অন্যান্য পেজের কনটেন্ট ইনজেক্ট করবে।
২.২. টেমপ্লেট পেজে কনটেন্ট ইনজেক্ট করা
অবশ্যই, আপনি এই টেমপ্লেট পেজে কনটেন্ট ইনজেক্ট করতে পারবেন। একটি নতুন পৃষ্ঠা তৈরি করুন যা টেমপ্লেট ব্যবহার করবে এবং সেই পৃষ্ঠায় কনটেন্ট ইনজেক্ট করবে।
<!-- home.xhtml - Content Page -->
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets"
template="/layout.xhtml">
<ui:define name="content">
<h:form>
<h:outputText value="This is the Home page content!" />
</h:form>
</ui:define>
</ui:composition>
এখানে:
ui:compositionট্যাগটিlayout.xhtmlটেমপ্লেটের সাথে যুক্ত হচ্ছে এবং টেমপ্লেটের content সেকশনে কনটেন্ট ইনজেক্ট করছে।ui:defineট্যাগটি ব্যবহৃত হচ্ছে টেমপ্লেটের নির্দিষ্ট সেকশনে কনটেন্ট ইনজেক্ট করার জন্য।
২.৩. অন্য পৃষ্ঠার কনটেন্ট ইনজেক্ট করা
আপনি অন্যান্য পৃষ্ঠাগুলিতে একই টেমপ্লেট ব্যবহার করতে পারেন, এবং প্রতিটি পৃষ্ঠায় তাদের নিজস্ব কনটেন্ট ইনজেক্ট করতে পারবেন।
<!-- about.xhtml -->
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets"
template="/layout.xhtml">
<ui:define name="content">
<h:form>
<h:outputText value="Welcome to the About page!" />
</h:form>
</ui:define>
</ui:composition>
এখানে:
about.xhtmlপৃষ্ঠা একইlayout.xhtmlটেমপ্লেট ব্যবহার করছে এবং content সেকশনে আলাদা কনটেন্ট ইনজেক্ট করছে।
৩. উন্নত টেমপ্লেট কৌশল: UI Parameterization
আপনি টেমপ্লেটের মধ্যে parameters ব্যবহার করে আরও উন্নত কাস্টমাইজেশন করতে পারেন। উদাহরণস্বরূপ, আপনি টেমপ্লেটের মধ্যে page title বা header কাস্টমাইজ করতে পারেন।
<!-- layout.xhtml - With Parameters -->
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title><ui:insert name="title">Default Title</ui:insert></title>
</h:head>
<h:body>
<!-- Page Content -->
<h:panelGroup>
<ui:insert name="content"/>
</h:panelGroup>
</h:body>
</html>
এখন আপনি যেকোনো পৃষ্ঠায় title এবং content কাস্টমাইজ করতে পারেন।
<!-- home.xhtml -->
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets"
template="/layout.xhtml">
<ui:define name="title">Home Page</ui:define>
<ui:define name="content">
<h:form>
<h:outputText value="Welcome to the Home page!" />
</h:form>
</ui:define>
</ui:composition>
এখানে, title এবং content প্যারামিটার কাস্টমাইজ করা হয়েছে। home.xhtml পৃষ্ঠায় title কে Home Page এবং content কে নতুন কনটেন্ট দিয়ে প্রতিস্থাপন করা হয়েছে।
সারাংশ
JSF এর মাধ্যমে Facelets টেমপ্লেট তৈরি করা একটি শক্তিশালী এবং কার্যকরী পদ্ধতি যা ওয়েব অ্যাপ্লিকেশনে কোড পুনঃব্যবহার (code reusability) নিশ্চিত করে। টেমপ্লেট পেজ তৈরি করার মাধ্যমে আপনি header, footer, navigation এবং অন্যান্য সাধারণ উপাদান একবার তৈরি করে বিভিন্ন পৃষ্ঠায় পুনরায় ব্যবহার করতে পারেন। ui:insert এবং ui:define ট্যাগের মাধ্যমে কনটেন্ট ইনজেক্ট করা এবং টেমপ্লেটের প্যারামিটারাইজেশন আপনার অ্যাপ্লিকেশনকে আরও গতিশীল এবং মেনটেনেবল করে তোলে।
Read more
