Composite এবং Custom কম্পোনেন্টস

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

Composite কম্পোনেন্টস

Composite কম্পোনেন্ট হলো একটি ধরনের কাস্টম কম্পোনেন্ট যা এক বা একাধিক বিদ্যমান কম্পোনেন্টের সমন্বয়ে তৈরি হয়। এর মাধ্যমে আপনি সহজেই একটি নতুন কম্পোনেন্ট তৈরি করতে পারেন, যেটি বিদ্যমান কম্পোনেন্টগুলোকে একটি ক্লাসে এম্বেড করে। Composite কম্পোনেন্ট সাধারণত Composite<T> ক্লাস থেকে এক্সটেন্ড করা হয়, যেখানে T হলো আপনার কাস্টম কম্পোনেন্টের রিটার্ন টাইপ।

1. Composite কম্পোনেন্ট তৈরি করা

এখানে একটি উদাহরণ দেওয়া হলো, যেখানে একটি Composite কম্পোনেন্ট তৈরি করা হয়েছে, যা একটি Button এবং একটি Label কম্পোনেন্টের সমন্বয়ে তৈরি:

public class CustomButtonLabel extends Composite<Div> {

    public CustomButtonLabel() {
        // Button তৈরি
        Button button = new Button("Click Me");
        button.addClickListener(event -> {
            Notification.show("Button clicked!");
        });

        // Label তৈরি
        Label label = new Label("Hello, Vaadin!");

        // কম্পোনেন্টগুলোকে একত্রিত করা
        getContent().add(button, label);
    }
}

• এখানে CustomButtonLabel একটি Composite<Div> ক্লাসের সাবক্লাস। Div হলো একটি কন্টেইনার কম্পোনেন্ট যা অন্যান্য কম্পোনেন্ট ধারণ করে।
• Button এবং Label দুটি বিদ্যমান কম্পোনেন্টকে getContent().add() ব্যবহার করে একত্রিত করা হয়েছে।

2. Composite কম্পোনেন্টের বৈশিষ্ট্য

• রিইউজেবল: আপনি Composite কম্পোনেন্টটি একাধিক স্থানে ব্যবহার করতে পারেন।
• এনক্যাপসুলেশন: একাধিক কম্পোনেন্টকে একত্রিত করে একটি নতুন কম্পোনেন্ট তৈরি করার সুবিধা।
• সহজ কাস্টমাইজেশন: আপনি সহজে Composite কম্পোনেন্টে নতুন বৈশিষ্ট্য যোগ করতে পারেন, যেমন ইভেন্ট হ্যান্ডলিং, স্টাইলিং বা ফাংশনালিটি।

Custom কম্পোনেন্টস

Custom কম্পোনেন্ট হল এমন একটি কম্পোনেন্ট যা আপনার নির্দিষ্ট চাহিদা অনুযায়ী সম্পূর্ণ নতুনভাবে তৈরি করা হয়। এই কম্পোনেন্টটি Java কোড এবং HTML, CSS অথবা JavaScript এর সাহায্যে তৈরি করা যায়। Vaadin এ Custom কম্পোনেন্ট তৈরি করতে সাধারণত @Tag, @JavaScript, এবং @CssImport অ্যানোটেশন ব্যবহার করা হয়।

1. Custom কম্পোনেন্ট তৈরি করা

এখানে একটি Custom কম্পোনেন্ট তৈরি করার উদাহরণ দেওয়া হলো, যেখানে একটি কাস্টম Button তৈরি করা হয়েছে যা একটি নির্দিষ্ট স্টাইলের সাথে কাজ করে:

@Tag("custom-button")
@CssImport("./styles/custom-button.css")
public class CustomButton extends Div {

    public CustomButton(String text) {
        setText(text);
        addClassName("custom-button");
        getElement().addEventListener("click", e -> {
            Notification.show("Custom Button clicked!");
        });
    }
}

• এখানে @Tag("custom-button") ব্যবহার করে HTML ট্যাগ custom-button তৈরী করা হয়েছে।
• @CssImport("./styles/custom-button.css") এর মাধ্যমে একটি কাস্টম CSS ফাইল ইম্পোর্ট করা হয়েছে যা custom-button ট্যাগের স্টাইলিং করবে।
• Div ক্লাস এক্সটেন্ড করে কাস্টম বাটনের ফাংশনালিটি যোগ করা হয়েছে।

2. Custom কম্পোনেন্টের বৈশিষ্ট্য

• HTML, CSS এবং JavaScript সমর্থন: Custom কম্পোনেন্টের মধ্যে HTML, CSS এবং JavaScript কোড একত্রিত করা যায়, যা আপনাকে কাস্টম ইউআই ডিজাইন তৈরি করতে সহায়তা করে।
• স্টাইলিং: আপনি নিজের ইচ্ছামতো স্টাইলিং করতে পারেন, যেমন ব্যাকগ্রাউন্ড কালার, মার্জিন, প্যাডিং, ফন্ট সাইজ ইত্যাদি।
• ইন্টারঅ্যাক্টিভিটি: JavaScript ব্যবহার করে কম্পোনেন্টকে আরও ইন্টারঅ্যাক্টিভ এবং ডাইনামিক করা যায়।

3. Custom কম্পোনেন্টের স্টাইলিং

/* custom-button.css */
.custom-button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}
.custom-button:hover {
    background-color: #45a049;
}

এখানে কাস্টম বাটনের জন্য একটি CSS ক্লাস .custom-button তৈরি করা হয়েছে। এই ক্লাসটি বাটনের ব্যাকগ্রাউন্ড কালার, টেক্সট কালার এবং অন্যান্য স্টাইলিং সেট করে।

Composite এবং Custom কম্পোনেন্টসের মধ্যে পার্থক্য

সারাংশ

Vaadin এ Composite এবং Custom কম্পোনেন্ট তৈরি করার মাধ্যমে আপনি একটি শক্তিশালী, কাস্টমাইজেবল এবং রিইউজেবল ইউআই তৈরি করতে পারেন। Composite কম্পোনেন্ট বিদ্যমান কম্পোনেন্টের সমন্বয়ে একটি নতুন কম্পোনেন্ট তৈরি করতে সাহায্য করে, যেখানে Custom কম্পোনেন্ট সম্পূর্ণ নতুনভাবে আপনার চাহিদা অনুযায়ী তৈরি করা যায়। এই দুটি ধরনের কম্পোনেন্টের ব্যবহার আপনার অ্যাপ্লিকেশনকে আরও মডুলার, স্কেলেবল এবং কাস্টমাইজযোগ্য করে তোলে।