Vaadin-এ বিভিন্ন ধরনের লেআউট ব্যবহৃত হয়, যার মাধ্যমে ওয়েব পেজের উপাদানগুলো (UI components) সুন্দরভাবে সাজানো যায়। VerticalLayout, HorizontalLayout, এবং GridLayout হল সবচেয়ে সাধারণ এবং জনপ্রিয় লেআউট ক্লাস যা Vaadin-এ ব্যবহৃত হয়। এই লেআউটগুলো ব্যবহার করে আপনি অ্যাপ্লিকেশনের UI উপাদানগুলো সহজে এবং কার্যকরভাবে সাজাতে পারবেন।
VerticalLayout
VerticalLayout একটি লেআউট ক্লাস যা উপাদানগুলোকে উল্লম্ব (vertically) সাজানোর জন্য ব্যবহৃত হয়। এর মাধ্যমে আপনি উপাদানগুলোকে একে একে উপর থেকে নিচে সাজাতে পারেন। এটি সাধারণত টেক্সট, বোতাম, ফর্ম ইত্যাদি সাজাতে ব্যবহার হয়।
উদাহরণ:
@Route("")
public class VerticalLayoutExample extends VerticalLayout {
public VerticalLayoutExample() {
// একটি টাইটেল তৈরি করা
H1 title = new H1("Vertical Layout Example");
// একটি বোতাম তৈরি করা
Button button = new Button("Click Me", event -> title.setText("Button Clicked"));
// উপাদানগুলো VerticalLayout-এ যোগ করা
add(title, button);
}
}
এখানে VerticalLayout ব্যবহার করা হয়েছে যাতে title এবং button একে অপরের উপরে সজ্জিত হয়। এটি স্বাভাবিকভাবেই উপাদানগুলোর মধ্যে কিছু ফাঁকা জায়গা রেখে সাজানো হয়।
বৈশিষ্ট্য:
- উপাদানগুলো উল্লম্বভাবে (vertically) সাজানো হয়।
- সহজ এবং দ্রুত ফর্ম বা টেক্সট সাজানোর জন্য আদর্শ।
- কমপ্লেক্স লেআউট তৈরি করতে এটি খুবই উপকারী।
HorizontalLayout
HorizontalLayout একটি লেআউট ক্লাস যা উপাদানগুলোকে অনুভূমিকভাবে (horizontally) সাজানোর জন্য ব্যবহৃত হয়। আপনি এই লেআউটে উপাদানগুলো একে অপরের পাশে রাখতে পারেন, যেমন ফর্মের ইনপুট ফিল্ড ও বোতাম একে অপরের পাশে রাখার জন্য।
উদাহরণ:
@Route("")
public class HorizontalLayoutExample extends HorizontalLayout {
public HorizontalLayoutExample() {
// একটি টেক্সট ফিল্ড তৈরি করা
TextField textField = new TextField("Enter Name");
// একটি বোতাম তৈরি করা
Button button = new Button("Submit");
// উপাদানগুলো HorizontalLayout-এ যোগ করা
add(textField, button);
}
}
এখানে HorizontalLayout ব্যবহার করা হয়েছে যাতে textField এবং button একে অপরের পাশে সাজানো হয়। এটি খুবই উপকারী যখন আপনি ফর্মের ইনপুট ফিল্ড ও বোতাম বা অন্যান্য উপাদান পাশাপাশি রাখবেন।
বৈশিষ্ট্য:
- উপাদানগুলো অনুভূমিকভাবে (horizontally) সাজানো হয়।
- সাধারণত ফর্ম এবং ইনপুট ফিল্ড সাজানোর জন্য ব্যবহৃত হয়।
- উপাদানগুলো একে অপরের পাশে সাজাতে খুবই কার্যকর।
GridLayout
GridLayout হল একটি খুবই শক্তিশালী লেআউট ক্লাস যা একটি গ্রিড (টেবিলের মতো) তৈরি করে। এর মাধ্যমে আপনি উপাদানগুলো সারি এবং কলামে সাজাতে পারেন, যা টেবিলের মত ডাটা ডিসপ্লে করার জন্য আদর্শ।
উদাহরণ:
@Route("")
public class GridLayoutExample extends VerticalLayout {
public GridLayoutExample() {
// GridLayout তৈরি করা
GridLayout gridLayout = new GridLayout(3, 2); // 3 কলাম এবং 2 সারি
// কিছু উপাদান যোগ করা
gridLayout.add(new Label("Name"));
gridLayout.add(new TextField());
gridLayout.add(new Label("Email"));
gridLayout.add(new TextField());
gridLayout.add(new Button("Submit"));
// GridLayout VerticalLayout-এ যোগ করা
add(gridLayout);
}
}
এখানে GridLayout ব্যবহার করা হয়েছে ৩টি কলাম এবং ২টি সারির একটি গ্রিড তৈরি করতে। এই লেআউটটি ফর্মের ইনপুট ফিল্ড এবং টেক্সটগুলো গ্রিডে সাজানোর জন্য উপকারী।
বৈশিষ্ট্য:
- উপাদানগুলো সারি (rows) এবং কলাম (columns) ভিত্তিকভাবে সাজানো হয়।
- টেবিল বা ডাটাবেস ফরম্যাটে ডাটা প্রদর্শনের জন্য উপযুক্ত।
- ফ্লেক্সিবল এবং কাস্টমাইজযোগ্য লেআউট।
উপসংহার
- VerticalLayout: উপাদানগুলো উল্লম্বভাবে সাজানোর জন্য ব্যবহৃত হয়। এটি সাধারণত ফর্ম, টেক্সট, বোতাম ইত্যাদি সাজানোর জন্য উপযোগী।
- HorizontalLayout: উপাদানগুলো অনুভূমিকভাবে সাজানোর জন্য ব্যবহৃত হয়। এটি সাধারণত ইনপুট ফিল্ড ও বোতাম একসঙ্গে সাজানোর জন্য ব্যবহার হয়।
- GridLayout: সারি এবং কলাম ভিত্তিক লেআউট, যা ডেটা গ্রিড বা টেবিল তৈরি করার জন্য আদর্শ।
এই লেআউটগুলো Vaadin অ্যাপ্লিকেশন ডেভেলপমেন্টে উপাদানগুলো সুন্দরভাবে সাজাতে সাহায্য করে এবং আপনার অ্যাপ্লিকেশনকে আরও কার্যকরী ও ব্যবহারকারী-বান্ধব করে তোলে।
Read more
