Vaadin একটি শক্তিশালী ওয়েব অ্যাপ্লিকেশন ফ্রেমওয়ার্ক, যা ডেভেলপারদের জন্য প্রচুর প্রি-বিল্ট UI কম্পোনেন্ট সরবরাহ করে। এগুলো বিভিন্ন ধরনের UI উপাদান যেমন টেবিল, ফর্ম, বাটন, টেক্সটফিল্ড, ড্রপডাউন ইত্যাদি অন্তর্ভুক্ত করে, যেগুলো সহজেই কাস্টমাইজ করা যায়। Vaadin এর কম্পোনেন্টস ব্যবহার করে আপনি দ্রুত এবং কার্যকরী ওয়েব ইউআই তৈরি করতে পারেন।
Vaadin কম্পোনেন্টস যোগ করা
Vaadin অ্যাপ্লিকেশন তৈরি করতে হলে প্রথমে আপনাকে কম্পোনেন্ট যোগ করতে হবে। Vaadin এর কম্পোনেন্টস লাইব্রেরি অনেক জনপ্রিয় কম্পোনেন্ট সরবরাহ করে যা সাধারণত vaadin প্যাকেজে অন্তর্ভুক্ত থাকে। এখানে একটি সাধারণ উদাহরণ দেওয়া হল যেভাবে আপনি একটি Button এবং TextField যোগ করতে পারেন:
@Route("main")
public class MainView extends VerticalLayout {
public MainView() {
// Button কম্পোনেন্ট তৈরি
Button button = new Button("Click Me", event -> {
Notification.show("Button clicked!");
});
// TextField কম্পোনেন্ট তৈরি
TextField textField = new TextField("Enter your name");
// কম্পোনেন্টগুলো UI তে যোগ করা
add(textField, button);
}
}
এই কোডে, আমরা একটি Button এবং TextField তৈরি করেছি এবং এগুলোকে VerticalLayout এর মধ্যে যোগ করেছি। যখন ব্যবহারকারী বাটনে ক্লিক করবে, তখন একটি নোটিফিকেশন দেখাবে।
Vaadin কম্পোনেন্ট কাস্টমাইজেশন
Vaadin কম্পোনেন্টগুলি অনেক ধরনের কাস্টমাইজেশন সমর্থন করে, যেমন স্টাইলিং, ইভেন্ট হ্যান্ডলিং এবং ভ্যালিডেশন। এখানে কিছু সাধারণ কাস্টমাইজেশন পদ্ধতি দেখানো হলো:
১. স্টাইলিং (Styling)
Vaadin আপনাকে CSS বা inline স্টাইল ব্যবহার করে কম্পোনেন্টগুলোর চেহারা কাস্টমাইজ করার সুযোগ দেয়। উদাহরণস্বরূপ, একটি বাটনের ব্যাকগ্রাউন্ড রং পরিবর্তন করা:
Button button = new Button("Click Me");
button.getStyle().set("background-color", "blue");
button.getStyle().set("color", "white");
এছাড়াও, আপনি @CssImport অ্যানোটেশন ব্যবহার করে একটি CSS ফাইলও ইমপোর্ট করতে পারেন এবং সেই ফাইলে স্টাইলস সংজ্ঞায়িত করতে পারেন।
২. ভ্যালিডেশন (Validation)
ফর্মের ক্ষেত্রে, আপনি ভ্যালিডেশন যুক্ত করতে পারেন যাতে ইউজার ইনপুট সঠিক থাকে। যেমন একটি TextField এর ইনপুট ভ্যালিডেশন:
TextField emailField = new TextField("Email");
emailField.setRequired(true);
emailField.setErrorMessage("Email is required");
emailField.addValueChangeListener(event -> {
if (!event.getValue().contains("@")) {
emailField.setInvalid(true);
emailField.setErrorMessage("Invalid email address");
} else {
emailField.setInvalid(false);
}
});
এখানে, TextField কাস্টমাইজ করা হয়েছে যাতে এটি সঠিক ইমেল ঠিকানা গ্রহণ করে।
৩. ইভেন্ট হ্যান্ডলিং (Event Handling)
Vaadin কম্পোনেন্টে বিভিন্ন ধরনের ইভেন্ট যেমন ক্লিক, পরিবর্তন ইত্যাদি শোনা যেতে পারে। যেমন, একটি বাটনের ক্লিক ইভেন্ট হ্যান্ডল করা:
Button button = new Button("Click Me", event -> {
Notification.show("Button clicked!");
});
এছাড়াও, আপনি অন্যান্য ইভেন্ট যেমন MouseEvent, ChangeEvent ইত্যাদি হ্যান্ডল করতে পারেন।
কাস্টম কম্পোনেন্ট তৈরি করা
Vaadin এ কাস্টম কম্পোনেন্ট তৈরি করা খুবই সহজ। আপনি একটি নতুন ক্লাস তৈরি করে এবং Component বা তার উপ-ক্লাস যেমন VerticalLayout, HorizontalLayout ইত্যাদি এক্সটেন্ড করে কাস্টম কম্পোনেন্ট তৈরি করতে পারেন।
public class CustomComponent extends VerticalLayout {
public CustomComponent() {
Button button = new Button("Click Me");
button.addClickListener(e -> {
Notification.show("Hello from custom component!");
});
add(button);
}
}
এখানে, CustomComponent একটি কাস্টম কম্পোনেন্ট যা একটি বাটন এবং তার ক্লিক ইভেন্ট শোনে।
সারাংশ
Vaadin এর মাধ্যমে UI কম্পোনেন্ট যোগ করা এবং কাস্টমাইজ করা অনেক সহজ। আপনি বিভিন্ন ধরনের প্রি-বিল্ট কম্পোনেন্ট ব্যবহার করে দ্রুত ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারেন এবং প্রয়োজন অনুযায়ী সেগুলো কাস্টমাইজ করে নিয়ে আসতে পারেন। স্টাইলিং, ভ্যালিডেশন, এবং ইভেন্ট হ্যান্ডলিংয়ের মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ইউজার-ফ্রেন্ডলি করতে পারেন।
Read more
