Tapestry এর Asset Management একটি শক্তিশালী সিস্টেম যা স্ট্যাটিক ফাইলগুলিকে, যেমন CSS, JavaScript, এবং ইমেজ, ওয়েব পেজের সাথে যুক্ত করার জন্য ব্যবহৃত হয়। Tapestry ফ্রেমওয়ার্কটি আপনাকে সম্পদের ব্যবস্থাপনা সহজ করে দেয় এবং আপনাকে কাস্টম asset paths, minification, এবং bundling ইত্যাদি কার্যকারিতা ব্যবহার করার সুবিধা দেয়।
এটি আধুনিক ওয়েব অ্যাপ্লিকেশনে খুবই গুরুত্বপূর্ণ, যেখানে আপনি performance optimization এবং cache management এর জন্য স্ট্যাটিক ফাইলগুলোকে সঠিকভাবে পরিচালনা করতে চান।
এই টিউটোরিয়ালে আমরা Tapestry এর Asset Management এর বিভিন্ন বৈশিষ্ট্য এবং তাদের ব্যবহারের পদ্ধতি দেখব।
Tapestry এর Asset Management সিস্টেমের মধ্যে কিছু গুরুত্বপূর্ণ বৈশিষ্ট্য রয়েছে, যেমন:
এই বৈশিষ্ট্যগুলি আপনাকে ওয়েব অ্যাপ্লিকেশনটিকে আরও দ্রুত এবং কার্যকরভাবে রান করাতে সহায়তা করে।
Tapestry ফ্রেমওয়ার্ক আপনাকে asset paths নির্ধারণ করতে সহায়তা করে। অর্থাৎ, আপনি স্ট্যাটিক ফাইল যেমন CSS, JavaScript, এবং ইমেজ ফাইলের পথ সহজে উল্লেখ করতে পারেন এবং Tapestry সেগুলি প্রজেক্টের মধ্যে সঠিকভাবে রেজোলভ করবে।
HTML টেমপ্লেট (index.tml):
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd">
<head>
<title>Asset Management Example</title>
<!-- CSS Asset Inclusion -->
<t:head>
<t:stylesheet href="context/css/styles.css"/>
</t:head>
<!-- JavaScript Asset Inclusion -->
<t:body>
<t:script src="context/js/scripts.js"></t:script>
</t:body>
</head>
<body>
<h1>Welcome to Tapestry Asset Management!</h1>
</body>
</html>
এখানে:
<t:stylesheet> ট্যাগটি styles.css ফাইলকে অন্তর্ভুক্ত করছে।<t:script> ট্যাগটি scripts.js ফাইলকে অন্তর্ভুক্ত করছে।Tapestry স্বয়ংক্রিয়ভাবে ফাইলের পথ সঠিকভাবে রেজোলভ করে। আপনি যদি এই ফাইলগুলো src/main/resources ফোল্ডারে রাখেন, তবে Tapestry সেগুলো যথাযথভাবে মানচিত্র করবে।
Tapestry আপনাকে একাধিক JavaScript বা CSS ফাইল একত্রিত করার সুযোগ দেয়। এটি asset bundling নামে পরিচিত। একাধিক ফাইলকে একত্রিত করার মাধ্যমে ওয়েব পেজের রিকোয়েস্ট সংখ্যা কমানো যায়, যা পারফরম্যান্স বাড়াতে সাহায্য করে।
CSS এবং JavaScript Bundle করা (application.properties):
আপনি application.properties ফাইলে asset bundling কনফিগারেশন করতে পারেন:
tapestry.assets.bundle.css = /css/styles.css, /css/responsive.css
tapestry.assets.bundle.js = /js/main.js, /js/slider.js
HTML টেমপ্লেট (index.tml):
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd">
<head>
<title>Asset Bundling Example</title>
<!-- Bundled CSS -->
<t:head>
<t:stylesheet href="context/css/bundle.css"/>
</t:head>
<!-- Bundled JavaScript -->
<t:body>
<t:script src="context/js/bundle.js"></t:script>
</t:body>
</head>
<body>
<h1>Welcome to Tapestry Asset Bundling!</h1>
</body>
</html>
এখানে, bundle.css এবং bundle.js ফাইলগুলোতে আপনার সমস্ত প্রয়োজনীয় স্টাইলশিট এবং স্ক্রিপ্ট একত্রিত করা হয়েছে। এতে একাধিক ফাইলের পরিবর্তে একটি ফাইল লোড হয়, যা পারফরম্যান্স উন্নত করে।
Tapestry আপনাকে asset minification (যেমন CSS এবং JavaScript ফাইল সংকোচন) করার সুযোগ দেয়। এতে ফাইলের আকার ছোট হয়ে যায়, যা পেজ লোডিং সময়কে দ্রুত করে।
application.properties ফাইলে minification কনফিগারেশন করুন:
tapestry.assets.minify.css = true
tapestry.assets.minify.js = true
HTML টেমপ্লেট (index.tml):
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd">
<head>
<title>Asset Minification Example</title>
<!-- Minified CSS -->
<t:head>
<t:stylesheet href="context/css/styles.css"/>
</t:head>
<!-- Minified JavaScript -->
<t:body>
<t:script src="context/js/scripts.js"></t:script>
</t:body>
</head>
<body>
<h1>Welcome to Tapestry Asset Minification!</h1>
</body>
</html>
এখানে, CSS এবং JavaScript ফাইলগুলি minify করার মাধ্যমে তাদের আকার ছোট করা হবে, যা সার্ভার এবং ক্লায়েন্টের মধ্যে দ্রুত ট্রান্সফার করতে সাহায্য করবে।
Tapestry আপনাকে asset caching করতে সহায়তা করে, যা ওয়েব পেজের লোডিং সময় কমায় এবং সার্ভার রেসপন্স টাইম উন্নত করে। আপনি সম্পদের ক্যাশিং পলিসি কনফিগার করতে পারেন, যাতে ব্রাউজার এবং সার্ভার কম সময়ে ফাইলগুলো লোড করতে পারে।
application.properties ফাইলে ক্যাশিং কনফিগারেশন:
tapestry.assets.cache = true
HTML টেমপ্লেট (index.tml):
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd">
<head>
<title>Asset Caching Example</title>
<!-- Cached CSS -->
<t:head>
<t:stylesheet href="context/css/styles.css"/>
</t:head>
<!-- Cached JavaScript -->
<t:body>
<t:script src="context/js/scripts.js"></t:script>
</t:body>
</head>
<body>
<h1>Welcome to Tapestry Asset Caching!</h1>
</body>
</html>
এখানে, Tapestry সম্পদের ক্যাশিং সক্রিয় করার মাধ্যমে, ব্রাউজার ক্যাশে এই ফাইলগুলি সংরক্ষণ করবে এবং পুনরায় লোডের প্রয়োজন হবে না, যা পেজ লোডিং সময় কমাবে।
Tapestry এর Asset Management সিস্টেম ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্টের জন্য একটি শক্তিশালী টুল। এটি asset paths, bundling, minification, এবং caching এর মাধ্যমে স্ট্যাটিক ফাইলগুলির পরিচালনা সহজ করে দেয় এবং পারফরম্যান্স উন্নত করে। এই বৈশিষ্ট্যগুলি আপনার ওয়েব অ্যাপ্লিকেশনকে দ্রুত এবং কার্যকরী করে তোলে, বিশেষত যখন আপনার অ্যাপ্লিকেশনটি বড় বা ট্র্যাফিক বেশি হয়।
Apache Tapestry একটি শক্তিশালী Java web framework যা dynamic এবং static ওয়েব অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে। এর মধ্যে, static assets (যেমন images, CSS, এবং JavaScript) পরিচালনা একটি গুরুত্বপূর্ণ বিষয়, কারণ এই রিসোর্সগুলি অ্যাপ্লিকেশনের লুক এবং ফাংশনালিটি নির্ধারণে সহায়ক। Tapestry ফ্রেমওয়ার্ক আপনাকে এই স্ট্যাটিক রিসোর্সগুলি সহজে পরিচালনা করার জন্য উন্নত সমাধান প্রদান করে।
এখানে আমরা Tapestry তে static assets যেমন images, CSS, এবং JS ফাইলগুলি কিভাবে পরিচালনা করা যায়, সে বিষয়ে আলোচনা করব।
Tapestry-তে static assets সরবরাহ করতে, সাধারণত তিনটি পদ্ধতি ব্যবহার করা হয়:
Tapestry সাধারণত webapp ডিরেক্টরির মধ্যে থাকা স্ট্যাটিক রিসোর্সগুলো সরবরাহ করে। আপনি যদি images, CSS, এবং JavaScript ফাইলগুলিকে সহজে ব্যবহারের জন্য resources ফোল্ডারে রাখেন, তবে Tapestry সেগুলিকে সরবরাহ করবে।
Image ফাইল: আপনি যদি একটি image ফাইল অ্যাপ্লিকেশনে যুক্ত করতে চান, তবে তা webapp/resources/images ডিরেক্টরিতে রাখতে পারেন।
উদাহরণ:
webapp/resources/images/logo.png
HTML বা Tapestry টেমপ্লেটে এটি ব্যবহারের জন্য:
<img src="${asset:images/logo.png}" alt="Logo">
CSS ফাইল: Tapestry আপনাকে CSS ফাইল সহজে অ্যাসেট হিসেবে যুক্ত করতে দেয়। আপনি webapp/resources/css ফোল্ডারে CSS ফাইল রাখতে পারেন এবং এটি টেমপ্লেটে যোগ করতে পারেন।
উদাহরণ:
webapp/resources/css/styles.css
CSS ফাইল টেমপ্লেটে ব্যবহার করার জন্য:
<link rel="stylesheet" type="text/css" href="${asset:css/styles.css}">
JavaScript ফাইল: JavaScript ফাইলও একইভাবে webapp/resources/js ডিরেক্টরিতে রাখা হয় এবং টেমপ্লেটে যুক্ত করা যায়।
উদাহরণ:
webapp/resources/js/app.js
JavaScript ফাইল টেমপ্লেটে ব্যবহার করার জন্য:
<script src="${asset:js/app.js}"></script>
Tapestry এর Asset API ব্যবহার করে আপনি স্ট্যাটিক রিসোর্সগুলির জন্য URL গুলি সহজে রেজলভ করতে পারেন। এটি ফাইলের সঠিক অবস্থান নির্ধারণ করতে সাহায্য করে।
Tapestry ফ্রেমওয়ার্ক ${asset} প্রপার্টি ব্যবহার করে স্ট্যাটিক রিসোর্সগুলির URL সরবরাহ করে। এটি আপনাকে URL গুলি ঠিকমতো রেজলভ করার সুবিধা দেয়।
CSS/JS/Images এর জন্য ব্যবহার: Tapestry-এর ${asset} টেমপ্লেট প্রপার্টি দিয়ে রিসোর্স ফাইলের সঠিক অবস্থান এবং URL রেজলভ করতে পারেন।
উদাহরণ:
<link rel="stylesheet" type="text/css" href="${asset:css/styles.css}">
এখানে, ${asset:css/styles.css} Tapestry রিসোর্স রেজলভ করে এবং styles.css ফাইলের সঠিক URL প্রদান করবে।
Tapestry তে static asset caching এর মাধ্যমে আপনি ওয়েব পেজ লোডিং পারফরম্যান্স বৃদ্ধি করতে পারেন। এতে স্ট্যাটিক রিসোর্সগুলিকে ক্যাশে সংরক্ষণ করে তাদের পুনরায় লোড করা হয় না, ফলে সাইটের পারফরম্যান্স বাড়ে।
Tapestry স্ট্যাটিক রিসোর্সগুলিকে Cache-Control হেডারের মাধ্যমে ক্যাশ করতে সহায়তা করে। এটি এমনভাবে কাজ করে যাতে ব্রাউজার আগে লোড হওয়া ফাইলগুলিকে পুনরায় না ডাউনলোড করে।
উদাহরণ: web.xml তে সঠিক হেডার সেট করা:
<filter>
<filter-name>static-assets</filter-name>
<filter-class>org.apache.tapestry5.internal.services.StaticAssetFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>static-assets</filter-name>
<url-pattern>/resources/*</url-pattern>
</filter-mapping>
Cache-Control Headers: ওয়েব সার্ভার/অ্যাপ্লিকেশন সার্ভারকে আপনি ক্যাশিং হেডার যোগ করতে বলবেন যাতে স্ট্যাটিক রিসোর্সগুলো সঠিকভাবে ক্যাশ হয়।
উদাহরণ:
Cache-Control: public, max-age=31536000
এটি কনফিগার করলে ব্রাউজার ঐ স্ট্যাটিক ফাইলটি ১ বছর (31536000 সেকেন্ড) ধরে ক্যাশে রাখবে।
Tapestry তে static assets (যেমন images, CSS, JS) পরিচালনা করা খুবই সহজ এবং Tapestry ফ্রেমওয়ার্ক এর জন্য প্রণীত উন্নত সমাধান সরবরাহ করে। আপনি webapp/resources ডিরেক্টরিতে ফাইলগুলো রাখতে পারেন, ${asset} API ব্যবহার করে সঠিক URL রেজলভ করতে পারেন এবং স্ট্যাটিক রিসোর্সগুলির পারফরম্যান্স বৃদ্ধি করতে ক্যাশিং হেডার কনফিগার করতে পারেন। Tapestry আপনাকে ওয়েব অ্যাপ্লিকেশনের স্ট্যাটিক রিসোর্সের সঠিক এবং কার্যকর ব্যবস্থাপনা নিশ্চিত করার জন্য প্রয়োজনীয় সবকিছু প্রদান করে।
Apache Tapestry একটি শক্তিশালী Java-based framework যা asset management এর জন্য উন্নত সরঞ্জাম সরবরাহ করে। Static assets (যেমন, ইমেজ, CSS, JavaScript ফাইল) ওয়েব অ্যাপ্লিকেশনটির একটি গুরুত্বপূর্ণ অংশ। Tapestry-তে এই ধরনের ফাইলের জন্য Asset URL Management তত্ত্বাবধানের জন্য সহজ এবং কার্যকর পদ্ধতি প্রদান করা হয়।
এখানে আমরা দেখব কীভাবে Tapestry-তে static assets (যেমন ইমেজ, CSS, এবং JavaScript ফাইল) পরিচালনা করা এবং তাদের URL গুলি ঠিকমতো কনফিগার করা যায়।
Tapestry, asset management সরবরাহের জন্য কিছু সাধারণ কনভেনশন অনুসরণ করে:
/assets/ নামে একটি ডিরেক্টরি ব্যবহার করে।Tapestry তে static assets পরিচালনা করার জন্য নিচে কিছু উপায় এবং কৌশল আলোচনা করা হয়েছে:
আপনার static assets (যেমন, ইমেজ, CSS, JS) অ্যাপ্লিকেশন ডিরেক্টরির মধ্যে একটি নির্দিষ্ট ফোল্ডারে রাখতে হবে। সাধারণভাবে, static assets গুলি src/main/webapp/assets/ ডিরেক্টরির মধ্যে রাখা হয়।
Tapestry তে CSS এবং JavaScript ফাইল যুক্ত করার জন্য নিচের কোড ব্যবহার করা হয়।
CSS ফাইল যুক্ত করা:
<head>
<t:stylesheet src="assets/styles.css"/>
</head>
এখানে:
<t:stylesheet> ট্যাগটি Tapestry-কে নির্দেশ করে যে, এটি CSS ফাইল styles.css ব্যবহার করতে হবে।src="assets/styles.css": এখানে assets হলো static assets ফোল্ডার যেখানে আপনার CSS ফাইলটি সংরক্ষিত রয়েছে।JavaScript ফাইল যুক্ত করা:
<head>
<t:script src="assets/scripts.js"/>
</head>
এখানে:
<t:script> ট্যাগটি Tapestry-কে নির্দেশ করে যে, এটি JavaScript ফাইল scripts.js ব্যবহার করতে হবে।Tapestry তে ইমেজ ফাইলের URL যুক্ত করতে আপনি সাধারণভাবে <img> HTML ট্যাগ ব্যবহার করবেন এবং Tapestry asset: URL প্রসেসর ব্যবহার করে ইমেজ লোড করবেন।
<img src="t:asset/ images/logo.png" alt="Logo"/>
এখানে:
t:asset/: Tapestry এই অংশটিকে বুঝে যে এটি static asset ফোল্ডার থেকে ফাইল লোড করবে।images/logo.png: এটি আপনার static assets ফোল্ডারের অধীনে থাকা ইমেজ ফাইলের পথ।Tapestry তে asset URL গুলি স্বয়ংক্রিয়ভাবে তৈরি করা হয়। এর মাধ্যমে static assets এর path গুলি সহজে পরিচালনা করা যায় এবং সেগুলি cache busting অথবা নতুন ভার্সন অনুযায়ী আপডেট করা সম্ভব হয়।
Tapestry t:asset ট্যাগের মাধ্যমে asset এর সঠিক URL তৈরি করে। এই ট্যাগটি ডেভেলপারদের জন্য static files গুলি সঠিকভাবে লোড এবং ব্যবস্থাপনা করতে সহায়ক।
<!-- CSS ফাইল লোড করা -->
<t:stylesheet src="assets/styles.css"/>
<!-- JavaScript ফাইল লোড করা -->
<t:script src="assets/scripts.js"/>
<!-- ইমেজ লোড করা -->
<img src="t:asset/images/logo.png" alt="Logo"/>
Tapestry এটি /assets/ ডিরেক্টরিতে থাকা সমস্ত স্ট্যাটিক ফাইলের জন্য উপযুক্ত URL তৈরি এবং প্রসেস করে।
Tapestry স্বয়ংক্রিয়ভাবে cache busting URL তৈরি করতে পারে। এটি যখন কোনো static asset (যেমন CSS বা JS ফাইল) পরিবর্তন হয়, তখন তার URL এ একটি version/hash যোগ করে যা ব্রাউজারকে নতুন ভার্সন লোড করতে বাধ্য করে।
উদাহরণস্বরূপ, যদি আপনার styles.css ফাইলটি পরিবর্তিত হয়, Tapestry সেই ফাইলের জন্য একটি নতুন URL তৈরি করবে যা আগের সংস্করণের থেকে আলাদা হবে। এটি সাধারণত ফাইলের সংস্করণ বা সময় স্ট্যাম্প যুক্ত করে যেমন styles.css?v=12345678।
Tapestry ফ্রেমওয়ার্কে static resources ডিপ্লয় করার জন্য সঠিক কনফিগারেশন করতে হয়। উদাহরণস্বরূপ, Tomcat এর মতো সাভার ব্যবহার করলে, আপনার assets/ ফোল্ডারটি webapp ডিরেক্টরির অধীনে স্থাপন করা উচিত।
Tapestry তে Asset Management এবং URL Management খুবই সহজ এবং স্বয়ংক্রিয়। আপনি static assets (যেমন CSS, JS, এবং ইমেজ ফাইল) সহজেই /assets/ ফোল্ডারের মধ্যে রাখার মাধ্যমে এবং t:asset, t:stylesheet, এবং t:script ট্যাগ ব্যবহার করে সেগুলি পরিচালনা করতে পারেন। Tapestry এর asset URL management এর মাধ্যমে আপনার ফাইলগুলির জন্য সঠিক URL তৈরি করা এবং cache busting পরিচালনা করা যায়, যা ওয়েব অ্যাপ্লিকেশনকে আরও কার্যকরী এবং দ্রুত বানায়।
Asset compression এবং minification ওয়েব অ্যাপ্লিকেশনের পারফরম্যান্স বৃদ্ধি করার জন্য অত্যন্ত গুরুত্বপূর্ণ। এটি ব্রাউজারের উপর থেকে লোড হওয়া ফাইলের আকার কমিয়ে দেয় এবং লোডিং সময় কমাতে সহায়তা করে। Apache Tapestry এ এই প্রক্রিয়া সরলভাবে করা যায়।
Tapestry তে অ্যাসেট (যেমন, ইমেজ, CSS, এবং JS ফাইল) ব্যবস্থাপনা খুব সহজ। Tapestry একটি শক্তিশালী Asset Manager সরবরাহ করে, যা স্ট্যাটিক রিসোর্স (ইমেজ, CSS, JS ফাইল) লোড, কনফিগার এবং মিনিফাই করার জন্য সহায়তা করে।
Tapestry তে Asset Management মূলত দুটি প্রধান কার্যকারিতা প্রদান করে:
Tapestry তে অটো কম্প্রেশন এবং মিনিফিকেশন চালু করা সহজ। আপনি কিছু কনফিগারেশন করে স্ট্যাটিক অ্যাসেটগুলি মিনিফাই এবং কম্প্রেস করতে পারেন। Tapestry তে Asset কনফিগারেশন গুলো প্রধানত tapestry.properties ফাইল অথবা @Import অ্যানোটেশন ব্যবহার করে করা হয়।
Tapestry এর tapestry.properties ফাইলের মধ্যে compression সক্রিয় করার জন্য নিচের কনফিগারেশন ব্যবহার করতে হবে।
tapestry.properties ফাইলে gzip কমপ্রেশন সেট করা:
tapestry.asset.compression.enabled=true
এই কনফিগারেশন সেট করার মাধ্যমে, Tapestry আপনার CSS, JavaScript এবং HTML ফাইলগুলো ব্রাউজারে পাঠানোর আগে কম্প্রেস করে। এটি ব্রাউজারে দ্রুত লোড হওয়ার সুবিধা দেয়।
Tapestry তে asset minification সক্রিয় করার জন্য আপনাকে minifier সেট করতে হবে।
tapestry.properties ফাইলে minification সেট করা:
tapestry.asset.minification.enabled=true
এই কনফিগারেশন ব্যবহার করে Tapestry আপনার স্ট্যাটিক ফাইলগুলো মিনিফাই করবে, যেমন:
Tapestry তে Asset URL Management এবং Cache-Control সেটিংস ব্যবহার করে, আপনি আপনার অ্যাসেটগুলিকে আরো দ্রুত লোড করাতে পারেন এবং ব্রাউজারের ক্যাশে কন্ট্রোল করতে পারেন।
Cache-Control:
উদাহরণ:
tapestry.asset.cacheable=true
Tapestry এর Asset Management সিস্টেমটি আপনাকে অ্যাসেটগুলি সঠিকভাবে পরিচালনা এবং URL তৈরি করতে সহায়তা করে। আপনি @Asset অ্যানোটেশন এবং t:asset ট্যাগ ব্যবহার করে সহজেই অ্যাসেট ফাইলের রেফারেন্স তৈরি করতে পারেন।
CSS ফাইল লোড করা (t:stylesheet):
<t:stylesheet href="styles/main.css" />
JavaScript ফাইল লোড করা (t:javascript):
<t:javascript src="scripts/app.js" />
Tapestry অ্যাসেটগুলিকে assets/ ফোল্ডারে রাখে এবং সেগুলির URL গুলো অ্যাপ্লিকেশনে ব্যবহার করে।
Tapestry তে Asset Compression এবং Minification খুব সহজে চালু করা যায়। এই প্রক্রিয়াগুলি ওয়েব অ্যাপ্লিকেশনকে দ্রুত এবং পারফর্ম্যান্সে উন্নত করতে সহায়তা করে। Tapestry এর Asset Management সিস্টেম CSS, JavaScript এবং অন্যান্য স্ট্যাটিক ফাইলগুলিকে কম্প্রেস এবং মিনিফাই করে দ্রুত লোড করতে সক্ষম। Cache-control এবং CDN ব্যবহারের মাধ্যমে ওয়েব অ্যাপ্লিকেশনের রেসপন্স টাইম আরও কমানো সম্ভব।
Apache Tapestry ফ্রেমওয়ার্কে external resources এবং CDN (Content Delivery Network) ইন্টিগ্রেট করা খুবই সহজ। ওয়েব অ্যাপ্লিকেশনগুলির পারফরম্যান্স উন্নত করতে এবং রিসোর্স লোড করার গতি বাড়াতে, আপনি টেপেস্ট্রি অ্যাপ্লিকেশনে বিভিন্ন external resources যেমন CSS, JavaScript, এবং images ইন্টিগ্রেট করতে পারেন। এজন্য সাধারণভাবে Content Delivery Network (CDN) ব্যবহার করা হয়।
এই টিউটোরিয়ালে, আমরা দেখব কিভাবে Tapestry-তে external resources এবং CDN integration সহজে করা যায়।
External resources বলতে সেগুলোকে বোঝানো হয় যেগুলো ওয়েব অ্যাপ্লিকেশনের বাইরে হোস্ট করা থাকে, যেমন CDN, বা অন্য কোনো থার্ড-পার্টি সার্ভিস থেকে সরবরাহিত রিসোর্স। এটি সাধারণত JavaScript, CSS, এবং image ফাইলগুলির জন্য ব্যবহৃত হয়।
Tapestry তে external CSS ফাইল অন্তর্ভুক্ত করতে, সাধারণত <link> ট্যাগ ব্যবহার করা হয় যা head সেকশনে যুক্ত করা হয়। আপনি যেকোনো CDN থেকে CSS লিংক ব্যবহার করতে পারেন।
উদাহরণ:
<head>
<title>My Tapestry App</title>
<!-- External CSS from CDN -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
</head>
এখানে Bootstrap CSS ফাইলটি JSDelivr CDN থেকে লোড করা হচ্ছে।
Tapestry তে external JavaScript ফাইল যোগ করার জন্য, আপনি ট্যাগ ব্যবহার করে রিসোর্সটিকে আপনার HTML পৃষ্ঠার body এর শেষে যুক্ত করতে পারেন।
উদাহরণ:
<body>
<h1>Welcome to My Tapestry Application</h1>
<!-- External JS from CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
এখানে jQuery এবং Bootstrap JS ফাইলগুলি CDN থেকে লোড হচ্ছে।
Tapestry তে external images যুক্ত করতে ট্যাগ ব্যবহার করা হয়।
উদাহরণ:
<img src="https://example-cdn.com/images/logo.png" alt="Logo">
এখানে, logo.png ইমেজটি একটি external CDN থেকে লোড হচ্ছে।
CDN (Content Delivery Network) হল একটি বিতরণ নেটওয়ার্ক যা ওয়েব অ্যাপ্লিকেশনের static assets দ্রুত এবং বিশ্বব্যাপী ব্যবহারকারীদের কাছে পৌঁছানোর জন্য ব্যবহৃত হয়। Tapestry আপনাকে external resources যেমন CSS, JavaScript, এবং images সরবরাহ করতে CDN ব্যবহার করতে সহায়তা করে।
Tapestry তে external asset URL তৈরি করতে @Asset অ্যানোটেশন ব্যবহার করা হয়। Tapestry এর Asset API আপনাকে স্ট্যাটিক রিসোর্সের URL তৈরি করতে সহায়ক।
উদাহরণ:
package com.example.pages;
import org.apache.tapestry5.annotations.Asset;
public class HomePage {
@Asset("classpath:/images/logo.png") // Asset URL referencing a local image
private String logoImageUrl;
public String getLogoImageUrl() {
return logoImageUrl;
}
}
এই কোডটি আপনার অ্যাপ্লিকেশন থেকে একটি logo.png ইমেজকে রিসোর্স হিসেবে রেফারেন্স করবে।
Tapestry-তে আপনি Asset URL ইন্টিগ্রেট করার জন্য CDN লিংকও ব্যবহার করতে পারেন। আপনি static assets CDN থেকে লোড করতে চাইলে, CDN URL সরাসরি ব্যবহার করতে পারেন।
উদাহরণ:
<head>
<title>My Tapestry App</title>
<!-- External CSS from CDN -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
</head>
<body>
<img src="https://example-cdn.com/images/logo.png" alt="Logo">
</body>
এখানে, আপনার CSS এবং image CDN থেকে লোড হবে। আপনি টেপেস্ট্রির Asset API ব্যবহার করে সহজেই এই ধরনের URL তৈরি করতে পারেন।
যখন আপনি CDN বা external resources ব্যবহার করেন, তখন asset compression এবং minification গুরুত্বপূর্ণ। এটি ফাইল সাইজ ছোট করে এবং ওয়েব পেজের লোডিং টাইম কমায়।
Tapestry কিছু বিল্ট-ইন টুলস সরবরাহ করে যা CSS এবং JavaScript ফাইলগুলোকে মিনিফাই করতে পারে। Tapestry এর Asset Compression এবং Minification সক্ষম করতে, আপনাকে tapestry-asset প্লাগইন ব্যবহার করতে হবে।
Tapestry প্লাগইনে কম্প্রেশন সক্ষম করার জন্য আপনাকে সাধারণত build.properties ফাইলে কনফিগারেশন যুক্ত করতে হয়।
উদাহরণ:
tapestry.assets.minify=true # Enable asset minification
এটি CSS এবং JavaScript ফাইল মিনিফাই করবে, যাতে অ্যাপ্লিকেশনটি দ্রুত লোড হয়।
Tapestry তে asset compression সক্ষম করতে, আপনাকে অবশ্যই বিল্ট-ইন কমপ্রেশন টুল ব্যবহার করতে হবে।
উদাহরণ:
tapestry.assets.compress=true # Enable asset compression
এই কনফিগারেশন আপনার অ্যাপ্লিকেশন এর CSS এবং JavaScript ফাইল কম্প্রেস করবে।
Tapestry তে external resources এবং CDN integration সহজ এবং কার্যকর। আপনি CSS, JavaScript, এবং images ব্যবহার করতে CDN লিঙ্ক সরাসরি টেমপ্লেটে যুক্ত করতে পারেন এবং Asset API ব্যবহার করে এই রিসোর্সগুলির URL তৈরি করতে পারেন। Asset compression এবং minification এর মাধ্যমে অ্যাপ্লিকেশনের পারফরম্যান্স আরও উন্নত করা যায়। CDN এর মাধ্যমে আপনার রিসোর্সগুলি বিশ্বব্যাপী দ্রুতভাবে বিতরণ করা সম্ভব, যা ওয়েব অ্যাপ্লিকেশনের লোড টাইম কমাতে সহায়ক।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
