গুগল ওয়েব টুলকিট (GWT) ব্যবহার করে ওয়েব অ্যাপ্লিকেশন তৈরি করা অনেক সহজ এবং কার্যকরী। GWT অ্যাপ্লিকেশন তৈরির সময়, ওয়েব পেজের স্টাইলিং করতে CSS (Cascading Style Sheets) ব্যবহার করা হয়। GWT-তে স্টাইল ব্যবস্থাপনা করার জন্য দুটি মূল পদ্ধতি রয়েছে: Inline CSS এবং External CSS। এই টিউটোরিয়ালে আমরা উভয় পদ্ধতির ব্যবহার এবং সেগুলির পার্থক্য নিয়ে আলোচনা করব।
Inline CSS কী?
Inline CSS হল এমন একটি পদ্ধতি যেখানে CSS কোড সরাসরি HTML উপাদানে (যেমন: div, span, button, ইত্যাদি) যোগ করা হয়। GWT-তে, আপনি যখন সরাসরি HTML উপাদানের মধ্যে স্টাইল প্রদান করেন, তখন এটি Inline CSS হিসেবে গণ্য হয়।
Inline CSS ব্যবহার করার উদাহরণ:
Button myButton = new Button("Click Me");
myButton.getElement().getStyle().setBackgroundColor("blue");
myButton.getElement().getStyle().setColor("white");
এখানে, myButton-এর ব্যাকগ্রাউন্ড কালার এবং ফন্ট কালার Inline CSS হিসেবে সরাসরি কোডে সেট করা হয়েছে। এই পদ্ধতিতে স্টাইল উপাদানটির সঙ্গে যুক্ত থাকে এবং একে আলাদা CSS ফাইলের মাধ্যমে ব্যবহার করা হয় না।
External CSS কী?
External CSS হল এমন একটি পদ্ধতি যেখানে CSS কোড আলাদা একটি ফাইলের মাধ্যমে যুক্ত করা হয় এবং HTML ডকুমেন্টের মধ্যে লিঙ্ক করা হয়। GWT-তে, আপনি যদি External CSS ব্যবহার করতে চান, তবে আপনাকে একটি .css ফাইল তৈরি করতে হবে এবং সেটি HTML বা GWT অ্যাপ্লিকেশন থেকে রেফারেন্স করতে হবে।
External CSS ব্যবহার করার উদাহরণ:
প্রথমে, একটি CSS ফাইল তৈরি করুন:
styles.css
.myButtonStyle {
background-color: green;
color: white;
padding: 10px;
border-radius: 5px;
}
এরপর, GWT কোডে CSS ক্লাস ব্যবহার করুন:
Button myButton = new Button("Click Me");
myButton.setStyleName("myButtonStyle");
এখানে, styles.css ফাইলের মধ্যে একটি CSS ক্লাস .myButtonStyle তৈরি করা হয়েছে এবং তারপর GWT কোডে setStyleName() মেথড ব্যবহার করে ক্লাসটি অ্যাপ্লিকেশন উপাদানে যুক্ত করা হয়েছে।
Inline CSS এবং External CSS-এর মধ্যে পার্থক্য
- স্থিতি ও কার্যকারিতা:
- Inline CSS কোড সরাসরি HTML উপাদানে প্রযোজ্য হয়, ফলে এটি সামান্য কম কার্যকরী হতে পারে, বিশেষত যদি অনেক উপাদান একই স্টাইল শেয়ার করে।
- External CSS ফাইলগুলো একটি সেন্ট্রালাইজড অবস্থানে থাকে, যা সমস্ত উপাদানগুলোর জন্য একযোগভাবে স্টাইল প্রয়োগ করতে সাহায্য করে। এটি বড় প্রকল্পের জন্য আরো উপযোগী।
- রক্ষণাবেক্ষণ:
- Inline CSS অনেক ক্ষেত্রে কঠিন হতে পারে, কারণ একাধিক উপাদানকে একই স্টাইলে সাজানোর জন্য একাধিক স্থানে কোড রিপিট করতে হয়।
- External CSS ফাইলগুলো রক্ষণাবেক্ষণ এবং আপডেট করা সহজ, কারণ সমস্ত স্টাইল এক জায়গায় থাকে।
- পেজ লোডের পারফরম্যান্স:
- Inline CSS প্রতিটি উপাদানে যুক্ত করা হলে পেজের আকার বৃদ্ধি পায় এবং লোডিং টাইমও কিছুটা বাড়ে।
- External CSS ফাইলগুলো আলাদাভাবে লোড হয় এবং কোড পুনঃব্যবহারযোগ্য হতে থাকে, যা পেজের লোডিং স্পীড উন্নত করে।
GWT-তে CSS যুক্ত করার পদ্ধতি
1. GWT-তে Inline CSS:
গুগল ওয়েব টুলকিটে Inline CSS ব্যবহারের জন্য আপনি getStyle() মেথডের মাধ্যমে CSS সেট করতে পারেন। উদাহরণস্বরূপ:
TextBox myTextBox = new TextBox();
myTextBox.getElement().getStyle().setBackgroundColor("lightgray");
myTextBox.getElement().getStyle().setColor("black");
এখানে, TextBox-এর ব্যাকগ্রাউন্ড এবং টেক্সটের রং সরাসরি Inline CSS দ্বারা নিয়ন্ত্রণ করা হচ্ছে।
2. GWT-তে External CSS:
GWT-তে External CSS ব্যবহারের জন্য, প্রথমে একটি CSS ফাইল তৈরি করতে হবে এবং তারপর সেই CSS ফাইলটিকে আপনার GWT অ্যাপ্লিকেশনে লোড করতে হবে।
CSS ফাইল তৈরি করা: styles.css
.highlight { background-color: yellow; color: black; }Java কোডে ব্যবহার করা:
Label myLabel = new Label("Highlighted Text"); myLabel.setStyleName("highlight");
এখানে, highlight ক্লাসটি GWT কোডে CSS ফাইল থেকে প্রযোজ্য হয়েছে।
সারাংশ
GWT-তে Inline CSS এবং External CSS উভয় পদ্ধতি ব্যবহার করা যায়, তবে প্রতিটির রয়েছে নিজস্ব সুবিধা এবং সীমাবদ্ধতা। Inline CSS সাধারণত ছোট প্রজেক্টে বা বিশেষ উপাদানগুলোর জন্য ব্যবহার করা হয়, যেখানে স্টাইলটি সরাসরি কোডের মধ্যে থাকবে। অপরদিকে, External CSS বড় প্রজেক্টে ব্যবহৃত হয়, যেখানে সব স্টাইল একত্রিত করা হয় এবং রক্ষণাবেক্ষণ সহজ হয়। উভয়ের মধ্যে সঠিক ব্যবহারের মাধ্যমে, আপনি আপনার GWT অ্যাপ্লিকেশনটি আরও কার্যকরী এবং রক্ষণাবেক্ষণযোগ্য করতে পারবেন।
Read more
