ফর্ম কম্পোনেন্টস এবং লেআউট

Vaadin-এ ফর্ম কম্পোনেন্টস এবং লেআউট ব্যবহৃত হয় ওয়েব অ্যাপ্লিকেশনের ইউজার ইন্টারফেস তৈরি করতে। ফর্ম কম্পোনেন্টস ব্যবহার করে ডেটা ইনপুট এবং সেগুলোর ভ্যালিডেশন করা যায়, আর লেআউট কম্পোনেন্টস দিয়ে এই ফর্মগুলোকে সুন্দরভাবে সাজানো হয়। Vaadin ফর্ম এবং লেআউট ব্যবস্থাপনার জন্য অনেক শক্তিশালী কম্পোনেন্ট এবং ফিচার সরবরাহ করে, যা ডেভেলপারদের সহজে ডাইনামিক এবং রেসপনসিভ ফর্ম তৈরি করতে সহায়তা করে।

Vaadin ফর্ম কম্পোনেন্টস

Vaadin বিভিন্ন ধরনের ফর্ম ইনপুট কম্পোনেন্ট সরবরাহ করে, যা ইউজার থেকে ডেটা সংগ্রহ করার জন্য ব্যবহৃত হয়। এখানে কিছু গুরুত্বপূর্ণ ফর্ম কম্পোনেন্টের বর্ণনা দেওয়া হলো:

1. TextField

• TextField কম্পোনেন্ট ব্যবহার করে ইউজার টেক্সট ইনপুট দিতে পারেন। এটি সাধারণত টেক্সট ডেটা গ্রহণ করতে ব্যবহৃত হয়।

• উদাহরণ:

  TextField nameField = new TextField("Name");
  nameField.setRequired(true);  // এটা একটি আবশ্যক ক্ষেত্র হিসেবে চিহ্নিত করে
  

2. PasswordField

• PasswordField কম্পোনেন্ট ব্যবহার করে নিরাপদ পাসওয়ার্ড ইনপুট নেওয়া হয়। এটি টেক্সট ফিল্ডের মতো, তবে এর ইনপুটগুলো আড়াল থাকে।

• উদাহরণ:

  PasswordField passwordField = new PasswordField("Password");
  passwordField.setRequired(true);
  

3. TextArea

• TextArea ব্যবহার করে দীর্ঘ টেক্সট ইনপুট নেয়া যায়, যা সাধারণত নোট বা বার্তা গ্রহণ করতে ব্যবহৃত হয়।

• উদাহরণ:

  TextArea messageField = new TextArea("Message");
  messageField.setRequired(true);
  

4. ComboBox

• ComboBox কম্পোনেন্ট একটি ড্রপডাউন মেনু হিসেবে কাজ করে, যেখানে ব্যবহারকারী প্রিসেট অপশন থেকে একটি অপশন সিলেক্ট করতে পারেন।

• উদাহরণ:

  ComboBox<String> countryComboBox = new ComboBox<>("Country");
  countryComboBox.setItems("USA", "Canada", "India");
  countryComboBox.setRequired(true);
  

5. Checkbox

• Checkbox কম্পোনেন্ট ব্যবহার করে ইউজার এক বা একাধিক অপশন নির্বাচন করতে পারেন।

• উদাহরণ:

  Checkbox acceptTerms = new Checkbox("I accept the terms and conditions");
  acceptTerms.setRequired(true);
  

6. DatePicker

• DatePicker ব্যবহার করে একটি নির্দিষ্ট তারিখ নির্বাচন করা যায়।

• উদাহরণ:

  DatePicker dateOfBirth = new DatePicker("Date of Birth");
  dateOfBirth.setRequired(true);
  

ফর্ম ভ্যালিডেশন

Vaadin ফর্ম কম্পোনেন্টের জন্য ভ্যালিডেশন সিস্টেম সরবরাহ করে, যার মাধ্যমে আপনি ইনপুট ডেটার সঠিকতা নিশ্চিত করতে পারেন। উদাহরণস্বরূপ, একটি TextField বা PasswordField এর জন্য ম্যান্ডেটরি (আবশ্যক) ফিল্ড চেক করা, বা ইমেল ফিল্ডে সঠিক ইমেল ফরম্যাট চেক করা যায়।

TextField emailField = new TextField("Email");
emailField.setRequired(true);
emailField.addValueChangeListener(event -> {
    if (!event.getValue().contains("@")) {
        emailField.setInvalid(true);
        emailField.setErrorMessage("Please enter a valid email address.");
    } else {
        emailField.setInvalid(false);
    }
});

Vaadin লেআউট কম্পোনেন্টস

লেআউট কম্পোনেন্টস ব্যবহার করে আপনি UI এর মধ্যে বিভিন্ন কম্পোনেন্টের স্থিতি এবং বিন্যাস কাস্টমাইজ করতে পারেন। Vaadin অনেক ধরনের লেআউট কম্পোনেন্ট সরবরাহ করে, যার মাধ্যমে ইউজার ইন্টারফেসের ডিজাইন করা যায়।

1. VerticalLayout

• VerticalLayout কম্পোনেন্ট ব্যবহার করে আপনি উপাদানগুলোকে উল্লম্বভাবে সাজাতে পারেন, যেমন ফর্ম ফিল্ড, বাটন ইত্যাদি।

• উদাহরণ:

  VerticalLayout formLayout = new VerticalLayout();
  formLayout.add(nameField, passwordField, messageField);
  

2. HorizontalLayout

• HorizontalLayout কম্পোনেন্ট ব্যবহার করে উপাদানগুলোকে অনুভূমিকভাবে সাজানো যায়।

• উদাহরণ:

  HorizontalLayout buttonLayout = new HorizontalLayout();
  buttonLayout.add(saveButton, cancelButton);
  

3. GridLayout

• GridLayout কম্পোনেন্ট ব্যবহার করে আপনি উপাদানগুলোকে গ্রিড আকারে সাজাতে পারেন, যা টেবিল বা ফর্মের জন্য উপযুক্ত।

• উদাহরণ:

  GridLayout gridLayout = new GridLayout(2, 2);
  gridLayout.addComponent(nameField, 0, 0);
  gridLayout.addComponent(passwordField, 1, 0);
  gridLayout.addComponent(messageField, 0, 1, 1, 1);
  

4. FormLayout

• FormLayout একটি বিশেষ ধরনের লেআউট, যা ফর্ম কম্পোনেন্টগুলোর জন্য বিশেষভাবে ডিজাইন করা হয়েছে। এটি ফর্ম এলিমেন্টগুলিকে সুন্দরভাবে সাজাতে সাহায্য করে।

• উদাহরণ:

  FormLayout formLayout = new FormLayout();
  formLayout.add(nameField, emailField, passwordField);
  

লেআউট কাস্টমাইজেশন

Vaadin লেআউট কম্পোনেন্টগুলির স্টাইল এবং কাস্টমাইজেশন করার জন্য CSS ক্লাস এবং inline স্টাইল ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ:

formLayout.getStyle().set("padding", "20px").set("background-color", "#f4f4f4");

এছাড়া, setWidth() এবং setHeight() মেথড ব্যবহার করে বিভিন্ন কম্পোনেন্টের আকারও কাস্টমাইজ করা যেতে পারে।

Vaadin-এ ফর্ম কম্পোনেন্টস এবং লেআউটের মাধ্যমে আপনি খুব সহজেই ডাইনামিক এবং ইন্টারেক্টিভ ওয়েব ফর্ম তৈরি করতে পারেন। এর শক্তিশালী কম্পোনেন্ট এবং লেআউট সিস্টেমের মাধ্যমে ডেভেলপাররা তাদের অ্যাপ্লিকেশনকে ব্যবহারকারী বান্ধব এবং সুরক্ষিত করতে সক্ষম হন।