প্রথম UI ক্লাস তৈরি করা

প্রথম Vaadin অ্যাপ্লিকেশন তৈরি - ভাডিন (Vaadin) - Web Development

301

Vaadin এ একটি ওয়েব অ্যাপ্লিকেশন তৈরি করতে, প্রথমে একটি UI ক্লাস তৈরি করতে হয়, যা ওয়েব অ্যাপ্লিকেশনের ইউজার ইন্টারফেস (UI) প্রদর্শন করবে। Vaadin এ UI ক্লাস তৈরি করার জন্য আপনাকে Java ব্যবহার করতে হবে। এটি খুবই সহজ এবং সরল প্রক্রিয়া। নিচে একটি সাধারণ উদাহরণ দেওয়া হল যাতে আপনি প্রথম UI ক্লাস তৈরি করতে পারেন।

UI ক্লাস তৈরি করার ধাপ


  1. Vaadin প্রজেক্ট তৈরি করা
    প্রথমে একটি নতুন Vaadin প্রজেক্ট তৈরি করতে হবে। এটি Maven বা Gradle ব্যবহার করে করা যেতে পারে। আপনি Vaadin এর অফিসিয়াল ওয়েবসাইট থেকে স্টার্টার টেমপ্লেট ডাউনলোড করে দ্রুত একটি নতুন প্রজেক্ট তৈরি করতে পারেন।
  2. UI ক্লাস তৈরি করা
    Vaadin এ UI ক্লাস তৈরি করতে আপনাকে @Route অ্যানোটেশন ব্যবহার করতে হবে, যা নির্দেশ করে যে এই ক্লাসটি ওয়েব অ্যাপ্লিকেশনের UI হিসেবে কাজ করবে। এছাড়াও, UI ক্লাসে এক বা একাধিক কম্পোনেন্ট যোগ করে আপনি ইউজারের সাথে ইন্টারঅ্যাকশন করতে পারবেন।
  3. কোড উদাহরণ
    নিচে একটি সাধারণ UI ক্লাসের উদাহরণ দেওয়া হল:
package com.example.application;

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;

@Route("")
public class MainView extends VerticalLayout {

    public MainView() {
        // একটি বাটন তৈরি
        Button button = new Button("Click me", e -> {
            button.setText("Hello, Vaadin!");
        });

        // বাটনটি লেআউটে যোগ করা
        add(button);
    }
}

ব্যাখ্যা


  1. @Route("")
    এই অ্যানোটেশনটি নির্ধারণ করে যে MainView ক্লাসটি অ্যাপ্লিকেশনের প্রধান রুট (route) হবে, অর্থাৎ এটি অ্যাপ্লিকেশনের মূল পৃষ্ঠা হিসেবে কাজ করবে। রুটের মধ্যে আপনি ইউজার ইন্টারফেসের কম্পোনেন্ট গুলি যোগ করতে পারেন।
  2. VerticalLayout
    VerticalLayout একটি লেআউট কম্পোনেন্ট যা উপাদানগুলোকে সোজা অবস্থানে (vertical) সাজানোর জন্য ব্যবহৃত হয়। এখানে আমরা একটি Button যোগ করেছি।
  3. Button কম্পোনেন্ট
    এখানে একটি বাটন তৈরি করা হয়েছে, যার লেখা "Click me" এবং একটি ক্লিক ইভেন্ট সেট করা হয়েছে, যাতে ক্লিক করলে বাটনের লেখা পরিবর্তন হয়ে "Hello, Vaadin!" হয়ে যাবে।
  4. add() মেথড
    add() মেথডের মাধ্যমে আমরা VerticalLayout লেআউটে বাটনটি যোগ করেছি। এর ফলে UI তে বাটনটি দৃশ্যমান হবে।

প্রথম UI ক্লাসে যে বিষয়গুলো মনে রাখতে হবে


  • Vaadin এ UI ক্লাস তৈরি করতে @Route অ্যানোটেশন ব্যবহার করা হয়।
  • ইউআই কম্পোনেন্টগুলো যেমন Button, TextField, Grid ইত্যাদি, আপনি কম্পোনেন্ট ক্লাসের মাধ্যমে যুক্ত করতে পারেন।
  • Vaadin-এ লেআউট ব্যবহৃত হয় যাতে কম্পোনেন্টগুলো সঠিকভাবে স্ক্রীনে প্রদর্শিত হয়।
  • আপনি যে রুটে UI প্রদর্শন করতে চান, সেটি নির্ধারণ করার জন্য @Route ব্যবহার করতে হবে।

এইভাবে Vaadin এ আপনার প্রথম UI ক্লাস তৈরি করতে পারবেন এবং সহজেই ওয়েব অ্যাপ্লিকেশনের ইউজার ইন্টারফেস তৈরি করতে শুরু করতে পারবেন।

Content added By
Promotion

Are you sure to start over?

Loading...