কম্পোনেন্ট স্টাইলিং এবং Theme Variations

Vaadin একটি অত্যন্ত কাস্টমাইজযোগ্য UI ফ্রেমওয়ার্ক, যা আপনার অ্যাপ্লিকেশনের কম্পোনেন্টগুলিকে সহজে স্টাইল করতে এবং বিভিন্ন theme variations তৈরি করতে সহায়তা করে। এতে আপনার অ্যাপ্লিকেশনটির ডিজাইন এবং লুক সম্পূর্ণভাবে কাস্টমাইজ করা সম্ভব হয়, যার মাধ্যমে আপনি ইচ্ছামতো UI কম্পোনেন্টের চেহারা পরিবর্তন করতে পারেন।

কম্পোনেন্ট স্টাইলিং

Vaadin-এ কম্পোনেন্ট স্টাইলিং করার জন্য বিভিন্ন পদ্ধতি রয়েছে। এটি সাধারণত CSS (Cascading Style Sheets) ব্যবহার করে করা হয়, তবে Vaadin নিজেই কিছু স্টাইলিং ফিচার সরবরাহ করে, যা ডেভেলপারদের জন্য আরও সহজ এবং কার্যকরী।

1. CSS ব্যবহার করে কম্পোনেন্ট স্টাইলিং

Vaadin-এর UI কম্পোনেন্টের স্টাইলিং করার জন্য, আপনি সাধারণ CSS ফাইল ব্যবহার করতে পারেন। CSS ফাইল তৈরি করে, আপনি আপনার কম্পোনেন্টগুলির জন্য স্টাইল নির্ধারণ করতে পারেন।

/* custom-styles.css */
.my-button {
    background-color: #4CAF50;
    color: white;
    border-radius: 8px;
    padding: 10px 20px;
}

এখন, আপনি এই CSS ক্লাসটি আপনার Vaadin কম্পোনেন্টের সাথে যুক্ত করতে পারেন:

Button myButton = new Button("Click me!");
myButton.addClassName("my-button");

এখানে, addClassName মেথডের মাধ্যমে my-button CSS ক্লাসটি বাটনের সঙ্গে যুক্ত করা হয়েছে।

2. Inline স্টাইলিং

Vaadin আপনাকে inline স্টাইলিংয়ের মাধ্যমে কম্পোনেন্টের স্টাইল সোজাসুজি কোডের ভিতরেও নির্ধারণ করতে দেয়:

Button button = new Button("Click Me!");
button.getElement().getStyle().set("background-color", "blue");
button.getElement().getStyle().set("color", "white");

এখানে getStyle() ব্যবহার করে আমরা CSS স্টাইল সরাসরি বাটনের সাথে সংযুক্ত করেছি।

3. Custom Styles with Shadow DOM

Vaadin কম্পোনেন্টগুলি অনেক সময় Shadow DOM ব্যবহার করে, যা কম্পোনেন্টের স্টাইল এবং কাঠামো আলাদা রাখে। তবে, আপনি যদি Shadow DOM-এর মধ্যে স্টাইল পরিবর্তন করতে চান, তাহলে ::part সিলেক্টর ব্যবহার করতে হবে। উদাহরণস্বরূপ:

/* custom-styles.css */
my-button::part(button) {
    background-color: red;
    color: white;
}

এখানে my-button একটি কাস্টম কম্পোনেন্ট এবং ::part(button) সিলেক্টর ব্যবহার করে তার ব্যাকগ্রাউন্ড এবং টেক্সটের রঙ পরিবর্তন করা হয়েছে।

Theme Variations

Vaadin কম্পোনেন্টগুলোর জন্য বিভিন্ন theme variations ব্যবহার করে আপনার অ্যাপ্লিকেশনটির বিভিন্ন ডিজাইন স্টাইল তৈরি করা যায়। Vaadin ইতিমধ্যে কিছু পূর্বনির্ধারিত থিম সরবরাহ করে, তবে আপনি চাইলে কাস্টম থিমও তৈরি করতে পারেন।

1. Vaadin Predefined Themes

Vaadin কিছু প্রাক-নির্ধারিত থিম প্রদান করে, যেমন Material এবং Lumo থিম। আপনি এই থিমগুলিকে ব্যবহার করে আপনার অ্যাপ্লিকেশনটির সাধারণ চেহারা কাস্টমাইজ করতে পারেন।

• Lumo Theme: এটি একটি লাইট থিম এবং সাধারণভাবে অনেক সহজ এবং পরিস্কার ডিজাইনের জন্য ব্যবহৃত হয়।
• Material Theme: এটি গুগলের Material Design এর উপর ভিত্তি করে তৈরি হয়েছে, যা আধুনিক এবং ফ্ল্যাট ডিজাইন অনুসরণ করে।

Vaadin অ্যাপ্লিকেশনটির জন্য ডিফল্ট থিম হিসেবে Lumo থিম ব্যবহার হয়, তবে আপনি চাইলে এই থিম পরিবর্তন করতে পারেন। থিম পরিবর্তনের জন্য, আপনাকে @Theme অ্যানোটেশন ব্যবহার করতে হবে।

@Route("")
@Theme("my-theme")
public class MainView extends VerticalLayout {
    public MainView() {
        Button button = new Button("Click Me!");
        add(button);
    }
}

এখানে @Theme("my-theme") দ্বারা একটি কাস্টম থিম নির্ধারণ করা হয়েছে।

2. Custom Theme Creation

আপনি আপনার অ্যাপ্লিকেশনের জন্য একটি কাস্টম থিম তৈরি করতে পারেন, যেখানে আপনি CSS কাস্টমাইজেশন করে নির্দিষ্ট থিমের ফিচারগুলো পরিবর্তন করবেন। প্রথমে একটি theme ফোল্ডার তৈরি করুন এবং সেখানে আপনার থিমের স্টাইলশীট রাখুন।

/* src/main/resources/META-INF/resources/frontend/styles/shared-styles.css */
:host {
    --lumo-primary-color: #FF5733;
    --lumo-button-primary-contrast-color: white;
}

এখন এই কাস্টম থিমটি আপনার অ্যাপ্লিকেশনে অন্তর্ভুক্ত করতে হবে:

@Route("")
@Theme(value = Lumo.class, variant = Lumo.DARK) // Or you can use your custom theme
public class MainView extends VerticalLayout {
    public MainView() {
        Button button = new Button("Click Me!");
        add(button);
    }
}

3. Dynamic Theme Switching

Vaadin আপনাকে অ্যাপ্লিকেশন চলাকালীন থিম পরিবর্তন করার ক্ষমতাও প্রদান করে। এটি থিম পরিবর্তন করতে UI বা ব্যবহারকারীর পছন্দ অনুযায়ী পারফর্ম করতে পারে।

Button changeThemeButton = new Button("Switch Theme", event -> {
    if (getUI().get().getThemeName().equals("lumo")) {
        getUI().get().setThemeName("material");
    } else {
        getUI().get().setThemeName("lumo");
    }
});
add(changeThemeButton);

এখানে, ইউজার থিম পরিবর্তন করতে পারেন। getUI().get().setThemeName() ব্যবহার করে আপনি UI থিম পরিবর্তন করতে পারেন।

সারাংশ

Vaadin এ কম্পোনেন্ট স্টাইলিং এবং থিম ভ্যারিয়েশনস ব্যবহার করে আপনি সহজেই আপনার অ্যাপ্লিকেশনের ইউজার ইন্টারফেসের চেহারা পরিবর্তন এবং কাস্টমাইজ করতে পারেন। CSS, Inline স্টাইলিং এবং Shadow DOM-এর মাধ্যমে আপনি গতি এবং কাজের সহজতা বজায় রেখে ডিজাইনের দিক থেকে আরও বৈচিত্র্য আনতে পারেন। তাছাড়া, থিমের মাধ্যমে আপনার অ্যাপ্লিকেশনটি সম্পূর্ণরূপে কাস্টমাইজ করা সম্ভব, যা ব্যবহারকারীর অভিজ্ঞতা আরও উন্নত করতে সাহায্য করবে।