Polymer Framework ব্যবহার করে কাস্টম Polymer Elements তৈরি করার জন্য আপনাকে কিছু গুরুত্বপূর্ণ পদক্ষেপ অনুসরণ করতে হবে। Polymer Elements হলো পুনঃব্যবহারযোগ্য কাস্টম HTML ট্যাগ যা ওয়েব কম্পোনেন্ট হিসেবে কাজ করে। এখানে Polymer Elements তৈরি করার একটি সহজ গাইড দেওয়া হল:
Polymer Elements তৈরি করার ধাপ:
Polymer লাইব্রেরি অন্তর্ভুক্ত করুন: প্রথমে আপনাকে Polymer লাইব্রেরি আপনার প্রজেক্টে অন্তর্ভুক্ত করতে হবে। আপনি Polymer এর সর্বশেষ সংস্করণটি CDN থেকে অন্তর্ভুক্ত করতে পারেন:
<script src="https://cdn.jsdelivr.net/npm/@polymer/polymer@3.0.0/polymer.js"></script>- ডম-মডিউল তৈরি করুন: Polymer Elements তৈরি করার জন্য, আপনি একটি
<dom-module>ট্যাগ ব্যবহার করবেন। এই ট্যাগের মধ্যে আপনি টেমপ্লেট এবং স্ক্রিপ্ট যুক্ত করবেন যা আপনার কাস্টম উপাদানকে সংজ্ঞায়িত করবে। - টেমপ্লেট তৈরি করুন:
<template>ট্যাগের মধ্যে HTML কনটেন্ট লিখুন। এই টেমপ্লেটটি উপাদানটি রেন্ডার করার সময় কপি হয়ে যাবে। - কাস্টম উপাদান তৈরি করুন: Polymer এর
Polymer()ফাংশন ব্যবহার করে উপাদানটির বৈশিষ্ট্য এবং আচরণ সংজ্ঞায়িত করুন।
উদাহরণ:
এখানে একটি সাধারণ Polymer Element তৈরি করার উদাহরণ দেওয়া হলো:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Polymer Custom Element</title>
<script src="https://cdn.jsdelivr.net/npm/@polymer/polymer@3.0.0/polymer.js"></script>
</head>
<body>
<!-- Custom Polymer Element -->
<dom-module id="custom-button">
<template>
<style>
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
<button on-click="handleClick">{{buttonLabel}}</button>
</template>
<script>
class CustomButton extends Polymer.Element {
static get is() { return 'custom-button'; }
static get properties() {
return {
buttonLabel: {
type: String,
value: 'Click me'
}
};
}
handleClick() {
alert('Button clicked!');
}
}
// Register the custom element
customElements.define(CustomButton.is, CustomButton);
</script>
</dom-module>
<!-- Use the Custom Element -->
<custom-button></custom-button>
</body>
</html>
ব্যাখ্যা:
<dom-module id="custom-button">: এখানে আমরা একটি কাস্টম উপাদান তৈরি করছি যার নামcustom-button।<template>: এই ট্যাগের মধ্যে HTML স্ট্রাকচার এবং CSS স্টাইল দেয়া হয়েছে। এটি উপাদানটির দৃশ্যমান অংশ।Polymer.Element: এই ক্লাসের মাধ্যমে Polymer উপাদান তৈরি হয়।CustomButtonক্লাসটিPolymer.Elementথেকে উত্তোলন করা হয়েছে এবং এখানে কাস্টম উপাদানের সমস্ত বৈশিষ্ট্য এবং আচরণ সংজ্ঞায়িত করা হয়েছে।customElements.define(CustomButton.is, CustomButton): এখানে কাস্টম উপাদানটি ওয়েব কম্পোনেন্ট হিসাবে নিবন্ধিত করা হয়, যাতে এটি HTML ডকুমেন্টে ব্যবহৃত হতে পারে।handleClick: একটি ক্লিক ইভেন্ট হ্যান্ডলার যা বাটনে ক্লিক করলে একটি অ্যালার্ট দেখায়।
Polymer Elements ব্যবহারের উদাহরণ:
একবার কাস্টম উপাদান তৈরি হলে, এটি HTML ডকুমেন্টের মধ্যে ব্যবহার করা যেতে পারে, যেমন:
<custom-button buttonLabel="Submit"></custom-button>
এই কোডে, আপনি buttonLabel প্রপার্টি কাস্টম উপাদানে পাস করছেন, যা বাটনের টেক্সট পরিবর্তন করবে।
Polymer Elements এর উপকারিতা:
- Reusability: একবার তৈরি করা উপাদানটি পুনঃব্যবহারযোগ্য, যার ফলে কোডের পুনঃব্যবহারযোগ্যতা বাড়ে।
- Encapsulation: Shadow DOM ব্যবহার করে, উপাদানটির স্টাইল এবং স্ক্রিপ্ট মূল ডকুমেন্ট থেকে আলাদা থাকে, ফলে অন্য অংশে এর প্রভাব পড়ে না।
- Custom Behavior: কাস্টম উপাদানে আপনি যা খুশি ফাংশনালিটি যোগ করতে পারেন, যেমন ইভেন্ট হ্যান্ডলিং, ডাটা-বাইন্ডিং, ইত্যাদি।
এইভাবে, Polymer দিয়ে আপনি ওয়েব ডেভেলপমেন্টে মডুলার এবং কাস্টম উপাদান তৈরি করতে পারবেন, যা সহজে পুনঃব্যবহারযোগ্য এবং মানসম্মত হবে।
Polymer ফ্রেমওয়ার্ক ব্যবহার করে Custom Elements তৈরি করার জন্য, আপনাকে HTML, JavaScript এবং Polymer API ব্যবহার করতে হবে। Custom Elements হল পুনঃব্যবহারযোগ্য HTML উপাদান যা আপনার নিজস্ব ট্যাগের মাধ্যমে ওয়েব পেজে ব্যবহার করা যেতে পারে। Polymer এর মাধ্যমে এটি অত্যন্ত সহজ এবং দক্ষ উপায়ে তৈরি করা সম্ভব। নিচে Polymer দিয়ে Custom Elements তৈরি করার ধাপগুলো আলোচনা করা হলো।
Custom Elements তৈরি করার জন্য ধাপসমূহ:
- DOM Module তৈরি করুন: Polymer ফ্রেমওয়ার্কে কাস্টম উপাদান (Custom Elements) তৈরি করতে
dom-moduleট্যাগ ব্যবহার করা হয়। এই ট্যাগের মধ্যে HTML টেমপ্লেট এবং স্ক্রিপ্ট থাকে, যা উপাদানের আচরণ নির্ধারণ করে। - HTML টেমপ্লেট লিখুন: আপনার কাস্টম উপাদানের HTML টেমপ্লেট এখানে থাকবে। আপনি এখানে HTML ট্যাগগুলো নির্ধারণ করতে পারেন।
- JavaScript ব্যবহার করে উপাদানটির কার্যকলাপ সংজ্ঞায়িত করুন: আপনি JavaScript কোড ব্যবহার করে কাস্টম উপাদানের কার্যকলাপ, প্রপার্টি, এবং ইভেন্ট পরিচালনা করবেন।
- Polymer ফাংশন ব্যবহার করুন: Polymer ফ্রেমওয়ার্কের
Polymer()ফাংশন ব্যবহার করে আপনি কাস্টম উপাদানটি ডিফাইন করবেন।
Custom Element তৈরি করার উদাহরণ:
ধরা যাক, আমরা একটি সিম্পল কাস্টম বাটন উপাদান তৈরি করতে চাই যা ক্লিক করলে একটি বার্তা দেখাবে।
১. HTML টেমপ্লেট এবং JavaScript:
<dom-module id="custom-button">
<template>
<button on-click="handleClick">{{buttonLabel}}</button>
</template>
<script>
Polymer({
is: 'custom-button', // উপাদানটির নাম
properties: {
buttonLabel: {
type: String,
value: 'Click me' // ডিফল্ট টেক্সট
}
},
handleClick: function() {
alert('Button clicked!'); // বাটন ক্লিক হলে একটি এলার্ট বার্তা দেখাবে
}
});
</script>
</dom-module>
২. ব্যাখ্যা:
<dom-module>: এটি Polymer এর একটি বিশেষ ট্যাগ যা কাস্টম উপাদানটি সংজ্ঞায়িত করতে ব্যবহৃত হয়।idঅ্যাট্রিবিউটের মাধ্যমে উপাদানটির নাম দেওয়া হয়।<template>: এটি কাস্টম উপাদানের HTML টেমপ্লেট। এখানে আমরা একটি বাটন উপাদান তৈরি করেছি এবং একটি ইভেন্ট হ্যান্ডলার (on-click) যুক্ত করেছি।- Properties:
buttonLabelপ্রপার্টি ডিফাইন করা হয়েছে, যার ডিফল্ট মান 'Click me'। - handleClick: এটি একটি ফাংশন যা বাটন ক্লিক করার পর একটি এলার্ট বার্তা প্রদর্শন করে।
৩. HTML ডকুমেন্টে কাস্টম উপাদান ব্যবহার:
এখন এই কাস্টম উপাদানটি আপনি যেকোনো HTML ডকুমেন্টে ব্যবহার করতে পারেন।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Polymer Custom Element Example</title>
<script src="https://polygit.org/polymer+1.0.0/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<script src="path-to-your-custom-button.js"></script> <!-- আপনার কাস্টম উপাদান ফাইল -->
</head>
<body>
<!-- কাস্টম বাটন উপাদান ব্যবহার করা -->
<custom-button></custom-button>
</body>
</html>
৪. ব্যাখ্যা:
custom-buttonহল আপনার কাস্টম উপাদানের নাম যা আপনিPolymerফাংশনেisপ্রপার্টি দিয়ে দিয়েছিলেন। এখন আপনি এই উপাদানটি যেকোনো HTML ডকুমেন্টে ব্যবহার করতে পারবেন।webcomponentsjsলাইব্রেরি ইনক্লুড করা হয়েছে যাতে ব্রাউজারে Web Components সমর্থিত না থাকলে তা ঠিকভাবে কাজ করতে পারে।
এখন আপনি এটি ব্যবহার করতে পারবেন:
আপনার HTML ডকুমেন্টে <custom-button></custom-button> ব্যবহার করলে, এটি একটি ক্লিকযোগ্য বাটন দেখাবে, এবং ক্লিক করলে এলার্ট বার্তা প্রদর্শিত হবে।
Polymer দিয়ে আরও উন্নত Custom Elements তৈরি করার জন্য:
- Data Binding: Polymer ডাটা-বাইন্ডিং সাপোর্ট দেয়, যার মাধ্যমে আপনার কাস্টম উপাদান সহজে ডাটা সিঙ্ক্রোনাইজ করতে পারে।
- Events: কাস্টম ইভেন্ট ব্যবহার করে আপনার উপাদানের ইন্টারঅ্যাকশন আরও উন্নত করতে পারবেন।
- Styling: Polymer এর
styleট্যাগ ব্যবহার করে কাস্টম উপাদানগুলির স্টাইল করা যায়।
এভাবে আপনি Polymer ফ্রেমওয়ার্ক ব্যবহার করে আপনার ওয়েব অ্যাপ্লিকেশনের জন্য কাস্টম উপাদান তৈরি এবং ব্যবহার করতে পারেন।
PolymerElement ক্লাসের ব্যবহার
Polymer Framework-এ PolymerElement একটি বিশেষ ক্লাস যা ওয়েব কম্পোনেন্ট তৈরি করার জন্য ব্যবহৃত হয়। Polymer 3.x সংস্করণ থেকে PolymerElement ব্যবহার শুরু হয়, যা HTMLElement এর উপর ভিত্তি করে তৈরি হয়। এটি ডেভেলপারদের কাস্টম HTML উপাদান (custom elements) তৈরি করতে সাহায্য করে, এবং এর মধ্যে অনেক সুবিধা থাকে যেমন রিয়েক্টিভ প্রপার্টি সিস্টেম এবং টেমপ্লেট ব্যবস্থাপনা।
PolymerElement ক্লাসের মূল বৈশিষ্ট্যসমূহ:
- Property Definition (প্রপার্টি সংজ্ঞা):
PolymerElementক্লাস আপনাকে আপনার কাস্টম কম্পোনেন্টের জন্য প্রপার্টি ডিফাইন করতে দেয়, এবং এগুলির জন্য ডাটা-বাইন্ডিং এবং রিয়েক্টিভিটিও সরবরাহ করে। - Template Handling (টেমপ্লেট হ্যান্ডলিং): আপনি HTML টেমপ্লেট সংজ্ঞায়িত করতে পারেন যা কাস্টম কম্পোনেন্টের ভিউ প্রদান করবে। এটি Shadow DOM-এর মধ্যে রেন্ডার হয়।
- Lifecycle Callbacks (লাইফসাইকেল কলব্যাকস):
PolymerElementএকটি পূর্ণাঙ্গ লাইফসাইকেল সাপোর্ট প্রদান করে, যেমনconnectedCallback(),disconnectedCallback(),attributeChangedCallback()ইত্যাদি। - Event Handling (ইভেন্ট হ্যান্ডলিং): ইভেন্ট ব্যবস্থাপনা এবং ইভেন্ট লিসেনার অ্যাটাচ করা সহজ হয়।
- Declarative Templates: HTML টেমপ্লেট ব্যবহার করে, আপনি DOM নির্মাণের জন্য কাস্টম কম্পোনেন্ট তৈরি করতে পারেন।
PolymerElement ক্লাসের একটি সাধারণ উদাহরণ:
নিচে একটি PolymerElement ব্যবহার করে কাস্টম কম্পোনেন্ট তৈরি করার উদাহরণ দেওয়া হলো:
import { PolymerElement, html } from '@polymer/polymer';
class MyButton extends PolymerElement {
static get properties() {
return {
label: {
type: String,
value: 'Click me'
}
};
}
_onClick() {
alert('Button clicked!');
}
static get template() {
return html`
<style>
button {
background-color: #007bff;
color: white;
padding: 10px;
border: none;
cursor: pointer;
}
</style>
<button on-click="_onClick">{{label}}</button>
`;
}
}
customElements.define('my-button', MyButton);
উপরের উদাহরণে যা ঘটছে:
properties: এখানে একটিlabelপ্রপার্টি ডিফাইন করা হয়েছে, যার ডিফল্ট মান'Click me'।template: কাস্টম HTML টেমপ্লেট দেওয়া হয়েছে যা কাস্টম স্টাইল এবং একটি বাটন তৈরি করে।_onClick(): একটি ক্লিক হ্যান্ডলারের মেথড যেখানে বাটন ক্লিক করা হলে একটি এলার্ট দেখানো হবে।customElements.define: এটি আপনার কাস্টম উপাদানmy-buttonহিসেবে নিবন্ধন করতে ব্যবহৃত হয়, যাতে আপনি HTML ফাইলে এই উপাদানটি ব্যবহার করতে পারেন।
PolymerElement এর লাইফসাইকেল মেথড:
Polymer কম্পোনেন্টের কিছু গুরুত্বপূর্ণ লাইফসাইকেল মেথড নিচে দেওয়া হলো:
connectedCallback(): যখন কাস্টম উপাদানটি DOM-এ যুক্ত হয়, তখন এটি কল হয়। উদাহরণস্বরূপ, এটি DOM-এ উপস্থিত হওয়ার পর কোনো এক্সটার্নাল ডেটা লোড করার জন্য ব্যবহার করা যেতে পারে।disconnectedCallback(): যখন কাস্টম উপাদানটি DOM থেকে সরিয়ে নেওয়া হয়, তখন এটি কল হয়। এটি রিসোর্স ফ্রি বা ক্লিনআপ করার জন্য ব্যবহৃত হতে পারে।attributeChangedCallback(): যখন কোনো অ্যাট্রিবিউটের মান পরিবর্তিত হয়, তখন এই কলব্যাকটি চালু হয়। এটি অ্যাট্রিবিউট ম্যানিপুলেশন করার জন্য ব্যবহার করা যেতে পারে।
Example of Lifecycle Methods:
import { PolymerElement, html } from '@polymer/polymer';
class MyComponent extends PolymerElement {
static get properties() {
return {
title: {
type: String,
value: 'Welcome'
}
};
}
connectedCallback() {
super.connectedCallback();
console.log('Element connected to the DOM');
}
disconnectedCallback() {
super.disconnectedCallback();
console.log('Element disconnected from the DOM');
}
static get template() {
return html`
<h1>{{title}}</h1>
`;
}
}
customElements.define('my-component', MyComponent);
PolymerElement একটি শক্তিশালী এবং নমনীয় ক্লাস যা কাস্টম HTML উপাদান তৈরি করতে সক্ষম করে, এবং এটি ডেভেলপারদেরকে Web Components ব্যবহার করে রিয়েক্টিভ, পুনঃব্যবহারযোগ্য, এবং মডুলার UI উপাদান তৈরি করতে সাহায্য করে। Polymer লাইব্রেরি ব্যবহার করে ডেভেলপাররা সহজেই ক্লাস-ভিত্তিক উপাদান তৈরি করতে পারে যা সারা পৃথিবীজুড়ে ওয়েব অ্যাপ্লিকেশন নির্মাণের জন্য আদর্শ।
Polymer ফ্রেমওয়ার্কে Attributes এবং Properties এর মাধ্যমে ডেটা পাস করা একটি গুরুত্বপূর্ণ কনসেপ্ট যা আপনাকে কাস্টম উপাদানগুলো (custom elements) এর মধ্যে ডেটা আদান-প্রদান করতে সহায়ক। Polymer এর মাধ্যমে ওয়েব কম্পোনেন্ট তৈরি করার সময় আপনি বিভিন্ন ধরনের ডেটা পাস করতে পারেন—যেমন HTML অ্যাট্রিবিউট বা কাস্টম উপাদানগুলির প্রপার্টি ব্যবহার করে।
১. Attributes:
Attributes হল HTML ট্যাগের বৈশিষ্ট্য, যা ব্রাউজারে একটি স্ট্রিং মান হিসেবে থাকে। Polymer দিয়ে আপনি কাস্টম উপাদানগুলিতে অ্যাট্রিবিউট ব্যবহার করতে পারেন, এবং এগুলির মাধ্যমে ডেটা পাস করা হয়। তবে, এক্ষেত্রে একটি সীমাবদ্ধতা রয়েছে—অ্যাট্রিবিউটগুলি সাধারণত স্ট্রিং টাইপের মান ধারণ করে এবং সেই মানটি JavaScript বা Polymer কোডে অ্যাক্সেস করার সময় এটি একটি স্ট্রিং হিসাবে থাকবে।
Attribute ব্যবহার:
Polymer এ অ্যাট্রিবিউটগুলির মাধ্যমে ডেটা পাস করার জন্য, সাধারণত HTML ট্যাগের মধ্যে অ্যাট্রিবিউট হিসেবে মান নির্ধারণ করা হয়, এবং সেই মানটি পরবর্তীতে JavaScript কোডে ব্যবহার করা হয়।
উদাহরণ:
<dom-module id="my-element">
<template>
<p>The value of the attribute is: {{message}}</p>
</template>
<script>
Polymer({
is: 'my-element',
properties: {
message: {
type: String,
value: 'Hello, world!'
}
},
ready: function() {
this.message = this.getAttribute('message') || 'Default message';
}
});
</script>
</dom-module>
এখানে message অ্যাট্রিবিউটকে কাস্টম উপাদানের মধ্যে ডেটা হিসেবে পাস করা হচ্ছে। যদি message অ্যাট্রিবিউট HTML ট্যাগে দেওয়া হয়, তবে সেটি Polymer উপাদানটির প্রপার্টি হিসেবে সেট হয়ে যাবে।
<my-element message="Hello from Attribute"></my-element>
এই উদাহরণে, "Hello from Attribute" মানটি message প্রপার্টিতে সেট হবে এবং এটি ডম-টেমপ্লেটে প্রদর্শিত হবে।
২. Properties:
Properties হল JavaScript অবজেক্ট বা Polymer উপাদানগুলির বৈশিষ্ট্য, এবং এগুলি অনেক বেশি ফ্লেক্সিবল। Properties আপনি আপনার কাস্টম উপাদানগুলিতে ডেটা পাস করতে ব্যবহার করতে পারেন, এবং এগুলি স্ট্রিং, নাম্বার, অবজেক্ট ইত্যাদি যেকোনো ধরনের ডেটা ধারণ করতে সক্ষম।
Polymer এ প্রপার্টি ব্যবহার করলে ডেটা দুটি উপাদানের মধ্যে সহজেই সিঙ্ক্রোনাইজ করা যায় এবং এটি স্ট্রিং না হয়ে বিভিন্ন ধরনের ডেটা টাইপ সাপোর্ট করে।
Property ব্যবহার:
Polymer এ প্রপার্টির মাধ্যমে ডেটা পাস করার জন্য, আপনাকে প্রপার্টির মান পরিবর্তন করলে তা উপাদানে রেন্ডার হতে থাকবে। এবং আপনি ডেটা পাস করতে this.set('property', value) ফর্ম্যাটও ব্যবহার করতে পারেন।
উদাহরণ:
<dom-module id="my-element">
<template>
<p>The value of the property is: {{message}}</p>
</template>
<script>
Polymer({
is: 'my-element',
properties: {
message: {
type: String,
value: 'Hello, world!'
}
}
});
</script>
</dom-module>
এখানে, message একটি property হিসেবে ডিফাইন করা হয়েছে। এর মান value: 'Hello, world!' দ্বারা সেট করা হয়েছে। আপনি যদি এই প্রপার্টি পরিবর্তন করেন, তা অবিলম্বে UI তে প্রতিফলিত হবে।
<my-element></my-element>
<script>
var element = document.querySelector('my-element');
element.message = 'Updated message!';
</script>
এই কোডে message প্রপার্টির মান পরিবর্তন হলে তা UI তে আপডেট হবে এবং ব্যবহারকারীর কাছে "Updated message!" প্রদর্শিত হবে।
Attributes এবং Properties এর মধ্যে পার্থক্য:
- Attributes হল HTML উপাদানের অংশ, যা ব্রাউজারে সরাসরি স্ট্রিং হিসেবে থাকে। এগুলো DOM-এ অ্যাক্সেস করা সহজ হলেও JavaScript-এ স্ট্রিং বা অন্যান্য মানে রূপান্তর করতে হয়।
- Properties হল JavaScript অবজেক্টের অংশ, যেগুলি কাস্টম উপাদানগুলির প্রপার্টি হিসেবে কাজ করে। এগুলির মাধ্যমে আপনি যেকোনো ডেটা টাইপের মান ধারণ করতে পারেন (যেমন স্ট্রিং, নাম্বার, অবজেক্ট) এবং সহজেই পরিবর্তন করতে পারেন।
Polymer ফ্রেমওয়ার্কে Attributes এবং Properties দিয়ে ডেটা পাস করার মাধ্যম দুটি গুরুত্বপূর্ণ টুল যা আপনাকে কাস্টম উপাদানগুলির মধ্যে ডেটা আদান-প্রদান করতে সহায়তা করে। Attributes সহজ, স্ট্রিং-ভিত্তিক মান ধারণ করে, এবং Properties বেশি ফ্লেক্সিবল, যেগুলি আরও জটিল ডেটা ধারণ করতে সক্ষম।
Polymer Framework-এ Custom Events এবং Data Binding দুটি গুরুত্বপূর্ণ বৈশিষ্ট্য যা ওয়েব অ্যাপ্লিকেশনের কার্যকারিতা এবং কার্যক্ষমতা বৃদ্ধি করতে সহায়তা করে। আসুন, এগুলির সম্পর্কে বিস্তারিত জানি:
১. Custom Events:
Polymer-এ Custom Events ব্যবহারের মাধ্যমে আপনি কাস্টম ইভেন্ট তৈরি করতে পারেন যা আপনার কাস্টম উপাদান (Custom Elements) বা কম্পোনেন্টগুলির মধ্যে যোগাযোগের সুবিধা দেয়। এটি আপনাকে আপনার অ্যাপ্লিকেশনের ইন্টারঅ্যাকশন আরও কার্যকরী এবং নিয়ন্ত্রিত করার সুযোগ দেয়।
Custom Events কিভাবে কাজ করে:
Polymer Framework-এ Custom Event তৈরি করতে fire() মেথড ব্যবহার করা হয়। এটি কাস্টম ইভেন্ট ট্রিগার করতে এবং তার সঙ্গে যুক্ত ডাটা পাস করতে সহায়তা করে। উদাহরণস্বরূপ:
<dom-module id="custom-button">
<template>
<button on-click="handleClick">Click Me</button>
</template>
<script>
Polymer({
is: 'custom-button',
handleClick: function() {
// Custom event তৈরি করা
this.fire('button-clicked', { message: 'Button was clicked!' });
}
});
</script>
</dom-module>
এখানে, handleClick() মেথডটি button-clicked নামক একটি কাস্টম ইভেন্ট ট্রিগার করছে। এই ইভেন্টে একটি ডাটা (message) পাস করা হচ্ছে। এরপর আপনি এই কাস্টম ইভেন্টটি অন্য একটি উপাদানে শুনতে (listen) পারেন:
<custom-button on-button-clicked="handleButtonClicked"></custom-button>
<script>
function handleButtonClicked(event) {
console.log(event.detail.message); // Output: Button was clicked!
}
</script>
এখানে, on-button-clicked ইভেন্টটি সুনাম (listen) করছে এবং যখন কাস্টম বাটনটি ক্লিক হবে, তখন handleButtonClicked() মেথডটি কল হবে এবং ইভেন্টের ডিটেইল (ডাটা) পাওয়া যাবে।
২. Data Binding:
Polymer Framework-এ Data Binding এমন একটি বৈশিষ্ট্য যা স্বয়ংক্রিয়ভাবে আপনার UI এবং ডাটা মডেলের মধ্যে সিঙ্ক্রোনাইজেশন বজায় রাখে। অর্থাৎ, যখন ডাটা পরিবর্তিত হয়, তখন UI-ও স্বয়ংক্রিয়ভাবে পরিবর্তিত হয় এবং এর বিপরীতটিও ঘটে। Polymer দুটি ধরনের ডাটা বাইন্ডিং সাপোর্ট করে: One-way Binding এবং Two-way Binding।
One-way Data Binding:
এটি হল একমুখী ডাটা বাইন্ডিং, যেখানে ডাটা মডেল থেকে ভিউ (UI) পর্যন্ত ডাটা প্রবাহিত হয়, কিন্তু UI থেকে ডাটাতে কোনো পরিবর্তন হয় না। এটি সাধারণত নিচের মতো হয়:
<dom-module id="data-binding-example">
<template>
<p>{{message}}</p> <!-- message এখানে বাইন্ডিং হবে -->
</template>
<script>
Polymer({
is: 'data-binding-example',
properties: {
message: {
type: String,
value: 'Hello, Polymer!'
}
}
});
</script>
</dom-module>
এখানে, message প্রপার্টি ডাটা মডেল থেকে HTML টেমপ্লেটের মধ্যে প্রদর্শিত হবে। যখন message পরিবর্তিত হবে, তখন UI-তেও তা স্বয়ংক্রিয়ভাবে আপডেট হবে।
Two-way Data Binding:
এটি দ্বিমুখী ডাটা বাইন্ডিং, যেখানে ডাটা মডেল এবং UI একে অপরের সাথে যোগাযোগ করে। পরিবর্তন ডাটা মডেলে অথবা UI তে যেখানেই হয়, তা স্বয়ংক্রিয়ভাবে অপরটি সিঙ্ক্রোনাইজ করে। এটি Polymer-এ {{}} এর মাধ্যমে কাজ করে।
<dom-module id="two-way-binding-example">
<template>
<input value="{{inputValue::input}}">
<p>You typed: {{inputValue}}</p> <!-- Input value এবং p tag উভয়ই সিঙ্ক্রোনাইজ -->
</template>
<script>
Polymer({
is: 'two-way-binding-example',
properties: {
inputValue: {
type: String,
value: ''
}
}
});
</script>
</dom-module>
এখানে, inputValue প্রপার্টি একটি ইনপুট ফিল্ডের সাথে বাইন্ড করা হয়েছে। ব্যবহারকারী ইনপুট পরিবর্তন করলে inputValue আপডেট হবে, এবং সেই পরিবর্তন UI তে (p ট্যাগে) দেখানো হবে। এর বিপরীতে, যদি inputValue প্রপার্টি প্রোগ্রাম্যাটিকভাবে পরিবর্তিত হয়, ইনপুট ফিল্ডটিও আপডেট হবে।
- Custom Events Polymer-এ কাস্টম ইভেন্ট তৈরি এবং শেয়ার করার জন্য ব্যবহৃত হয়। এটি আপনার কাস্টম উপাদানগুলির মধ্যে কার্যকরী ইন্টারঅ্যাকশন নিশ্চিত করে।
- Data Binding Polymer অ্যাপ্লিকেশনে UI এবং ডাটা মডেলের মধ্যে স্বয়ংক্রিয় সিঙ্ক্রোনাইজেশন প্রদান করে, যা উন্নত ব্যবহারকারীর অভিজ্ঞতা এবং কোডের সহজতা প্রদান করে।
এই বৈশিষ্ট্যগুলি Polymer Framework-কে একটি শক্তিশালী এবং সহজ ব্যবহারযোগ্য টুল বানায়, যা আধুনিক ওয়েব অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে।
Read more
