Widget Factory হল jQueryUI-এর একটি শক্তিশালী ফিচার যা ডেভেলপারদের জন্য কাস্টম উইজেট তৈরি করার সুবিধা প্রদান করে। এটি আপনাকে একটি নতুন উইজেট তৈরির জন্য একটি অবকাঠামো (framework) প্রদান করে, যার মাধ্যমে আপনি সহজে এবং কার্যকরীভাবে আপনার নিজস্ব উইজেট তৈরি করতে পারেন। এই উইজেটগুলো jQueryUI-এর অন্যান্য উইজেটের মতোই ইন্টারঅ্যাকটিভ এবং কাস্টমাইজযোগ্য হয়।
Widget Factory কি?
Widget Factory হল একটি জাভাস্ক্রিপ্ট API যা jQueryUI-তে কাস্টম উইজেট তৈরি করার জন্য ব্যবহৃত হয়। এটি আপনাকে একটি নির্দিষ্ট অবকাঠামো এবং মেথড প্রদান করে যা আপনাকে আপনার কাস্টম উইজেটের জন্য ইভেন্ট হ্যান্ডলিং, প্রপার্টি, মেথড এবং ইন্ট্যারফেস তৈরি করতে সহায়তা করে। Widget Factory ব্যবহারের মাধ্যমে আপনি নিজে নতুন UI উপাদান তৈরি করতে পারবেন যা অন্যান্য উইজেটের মতোই ব্যবহার করা যাবে।
Widget Factory দিয়ে Custom Widget তৈরি করা
১. Widget Factory এর মৌলিক কাঠামো
Widget Factory দিয়ে একটি কাস্টম উইজেট তৈরি করতে হলে, আপনাকে প্রথমে কিছু মৌলিক কোড রচনা করতে হবে। নিচে একটি সাধারণ উদাহরণ দেওয়া হলো যেখানে একটি কাস্টম উইজেট তৈরি করা হচ্ছে।
$.widget("custom.myWidget", {
// কাস্টম উইজেটের প্রপার্টি
options: {
message: "Hello, World!" // ডিফল্ট মেসেজ
},
// উইজেটের প্রাথমিক নির্মাণ
_create: function() {
this.element.addClass("custom-widget");
this.element.html("<div>" + this.options.message + "</div>");
},
// একটি কাস্টম মেথড
updateMessage: function(newMessage) {
this.options.message = newMessage;
this.element.html("<div>" + this.options.message + "</div>");
}
});
এখানে, $.widget() মেথড ব্যবহার করে একটি কাস্টম উইজেট তৈরি করা হয়েছে। এর মধ্যে কিছু মূল অংশ আছে:
- options: এটি ডিফল্ট কনফিগারেশন সঠিকভাবে সেট করতে ব্যবহৃত হয়।
- _create(): উইজেটটি প্রথমবার ইনস্ট্যান্সিয়েট হলে এটি চালু হয়। এখানে আমরা এলিমেন্টে ক্লাস যোগ করেছি এবং একটি ডিফল্ট মেসেজ প্রদর্শন করেছি।
- updateMessage(): এটি একটি কাস্টম মেথড যা ব্যবহারকারী মেসেজ পরিবর্তন করতে পারে।
২. Widget ব্যবহার করা
এখন যে কাস্টম উইজেট তৈরি করা হয়েছে তা ব্যবহার করতে হবে। এই উইজেটটি jQueryUI-এর অন্যান্য উইজেটের মতোই ব্যবহৃত হতে পারে।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Widget Example</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<style>
.custom-widget {
background-color: #3498db;
color: white;
padding: 20px;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="widget"></div>
<script>
$(document).ready(function() {
// কাস্টম উইজেট ইনিশিয়েট করা
$("#widget").myWidget({
message: "Welcome to jQueryUI Custom Widget!"
});
// মেসেজ আপডেট করা
setTimeout(function() {
$("#widget").myWidget("updateMessage", "New message updated!");
}, 3000);
});
</script>
</body>
</html>
এখানে $("#widget").myWidget() দিয়ে আমরা কাস্টম উইজেট ইনস্ট্যান্সিয়েট করেছি এবং তারপরে updateMessage() মেথড ব্যবহার করে মেসেজ পরিবর্তন করেছি।
৩. Widget এর উন্নত কাস্টমাইজেশন
Widget Factory দিয়ে আপনি আরও উন্নত কাস্টমাইজেশন করতে পারেন, যেমন ইভেন্ট হ্যান্ডলিং, কাস্টম স্টাইলিং, বা কাস্টম মেথডের মাধ্যমে উইজেটের আচরণ পরিবর্তন করা। উদাহরণস্বরূপ, নিচে একটি উইজেটের onClick ইভেন্ট কাস্টমাইজ করা হচ্ছে:
$.widget("custom.clickableWidget", {
options: {
message: "Click Me!"
},
_create: function() {
this.element.addClass("clickable-widget");
this.element.html("<button>" + this.options.message + "</button>");
this._on(this.element, {
"click button": "buttonClick"
});
},
buttonClick: function() {
alert("Button clicked!");
}
});
এখানে, _on() মেথড ব্যবহার করা হয়েছে যা কাস্টম ইভেন্ট হ্যান্ডলিং প্রদান করে, যেমন যখন বাটন ক্লিক করা হবে তখন একটি এলার্ট মেসেজ দেখাবে।
৪. Widget-এর Lifecycle মেথড
jQueryUI Widget Factory অনেক lifecycle মেথড সরবরাহ করে যেগুলির মাধ্যমে আপনি উইজেটের জীবনচক্রের বিভিন্ন পর্যায় পরিচালনা করতে পারেন:
- _create(): উইজেট তৈরি হওয়ার পর এটি চালু হয়।
- _destroy(): উইজেট ধ্বংস করার সময় এটি চালু হয়।
- _setOption(): একটি অপশন পরিবর্তন করার সময় এটি চালু হয়।
- _setOptions(): একাধিক অপশন পরিবর্তন করার সময় এটি চালু হয়।
উদাহরণ: _destroy() মেথড ব্যবহার
$.widget("custom.removableWidget", {
options: {
message: "This widget can be removed"
},
_create: function() {
this.element.addClass("removable-widget");
this.element.html("<p>" + this.options.message + "</p>");
this.element.append("<button>Remove</button>");
this._on(this.element.find("button"), {
"click": "removeWidget"
});
},
removeWidget: function() {
this.destroy(); // উইজেট ধ্বংস
}
});
এখানে, _destroy() মেথড ব্যবহার করা হয়েছে, যা removeWidget() মেথডের মাধ্যমে উইজেটকে ধ্বংস করে।
উপসংহার
jQueryUI Widget Factory হল একটি অত্যন্ত শক্তিশালী টুল যা আপনাকে কাস্টম উইজেট তৈরি এবং কাস্টমাইজ করার সুবিধা দেয়। _create(), _destroy(), এবং _setOption() এর মতো lifecycle মেথডের সাহায্যে আপনি সহজেই আপনার কাস্টম উইজেটের আচরণ এবং কার্যকলাপ নিয়ন্ত্রণ করতে পারেন। এই ফিচারটি আপনাকে jQueryUI-এর অন্যান্য উইজেটের মতোই কাস্টম ইন্টারফেস তৈরি করার সুযোগ দেয় এবং আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনের কার্যকারিতা বাড়ায়।
Read more
