থিমিং এবং স্টাইলিং

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

থিমিং (Theming) কী?

থিমিং হল একটি প্রক্রিয়া যার মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনটির চেহারা এবং অনুভূতি কাস্টমাইজ করতে পারেন, যেমন রঙ, ফন্ট, বর্ডার, প্যাডিং, মার্জিন, ইত্যাদি। Vaadin থিমিং ব্যবস্থাপনার জন্য Vaadin Material Design এবং Lumo থিম সরবরাহ করে, যা আপনাকে সহজে একটি আধুনিক, রেসপনসিভ এবং সুন্দর ইউআই ডিজাইন তৈরি করতে সাহায্য করে।

Vaadin এ থিম ব্যবহার করা

Vaadin 14 এবং তার পরবর্তী সংস্করণে, আপনি Lumo এবং Material থিমগুলি ব্যবহার করতে পারেন। Lumo থিমটি ডিফল্ট থিম হিসেবে থাকে এবং এটি হালকা রঙের স্কিম এবং আধুনিক ডিজাইন সরবরাহ করে, যেখানে Material থিমটি গুগল ম্যাটেরিয়াল ডিজাইনের ভিত্তিতে তৈরি, যা আরো নির্দিষ্টভাবে ম্যাটেরিয়াল ডিজাইন সিস্টেম অনুসরণ করে।

1. Lumo থিম ব্যবহার করা

Vaadin অ্যাপ্লিকেশনটি Lumo থিমের সাথে ডিফল্টভাবে আসে, এবং এটি UI উপাদানগুলিকে সাদা ব্যাকগ্রাউন্ড, হালকা রঙ এবং আধুনিক শেডিং সহ উপস্থাপন করে। আপনাকে বিশেষভাবে Lumo থিম প্রয়োগ করার জন্য কিছু করতে হবে না, কারণ এটি ডিফল্ট থিম।

@Route("")
@Theme(value = Lumo.class)
public class MainView extends VerticalLayout {
    public MainView() {
        add(new H1("Welcome to Vaadin App with Lumo Theme"));
    }
}

2. Material থিম ব্যবহার করা

যদি আপনি Material থিম ব্যবহার করতে চান, তাহলে আপনাকে @Theme অ্যানোটেশন ব্যবহার করে থিমটি অ্যাসাইন করতে হবে।

@Route("")
@Theme(value = Material.class)
public class MainView extends VerticalLayout {
    public MainView() {
        add(new H1("Welcome to Vaadin App with Material Theme"));
    }
}

এখানে, @Theme(value = Material.class) এই লাইনটি Material থিমটি অ্যাসাইন করবে, এবং আপনার অ্যাপ্লিকেশনটি একটি ম্যাটেরিয়াল ডিজাইন ফিল পাবে।

স্টাইলিং (Styling) কী?

স্টাইলিং হল ইউআই উপাদানগুলির ডিজাইন কাস্টমাইজ করার প্রক্রিয়া, যেমন রঙ, ফন্ট, আকার, মার্জিন ইত্যাদি। Vaadin এ স্টাইলিং করার জন্য আপনি CSS ব্যবহার করতে পারেন। CSS ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনটির বিভিন্ন UI উপাদানের স্টাইল কাস্টমাইজ করতে পারেন।

Vaadin এ স্টাইলিং করা

Vaadin এ স্টাইলিং করতে CSS ব্যবহার করা হয়। আপনি সরাসরি <style> ট্যাগ ব্যবহার করে বা আলাদা স্টাইল শীট তৈরি করে CSS স্টাইলিং করতে পারেন।

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

আপনি একটি নির্দিষ্ট ক্লাস বা উপাদানকে স্টাইল করতে CSS ব্যবহার করতে পারেন। উদাহরণস্বরূপ:

@Route("")
public class MainView extends VerticalLayout {
    public MainView() {
        add(new H1("Welcome to Vaadin App"));
        getElement().getStyle().set("background-color", "lightblue");
        getElement().getStyle().set("font-size", "24px");
    }
}

এখানে, getElement().getStyle() এর মাধ্যমে উপাদানের স্টাইল পেতে এবং সেট করতে পারছেন। এটি ডাইনামিকভাবে CSS প্রপার্টি অ্যাসাইন করে দেয়।

2. ইন্টিগ্রেটেড CSS ফাইল ব্যবহার

Vaadin এ CSS ফাইল ইন্টিগ্রেট করার জন্য আপনাকে frontend ফোল্ডারে CSS ফাইল রাখতে হবে। এর পরে, HTML এ link ট্যাগ ব্যবহার করে এই ফাইলটি যোগ করা যেতে পারে।

প্রথমে, frontend/styles ফোল্ডারে একটি CSS ফাইল তৈরি করুন, যেমন styles.css:

/* styles.css */
h1 {
    color: darkblue;
    text-align: center;
}

তারপর, এই CSS ফাইলটি Vaadin অ্যাপ্লিকেশনে লিংক করুন:

@Route("")
@CssImport("./styles/styles.css")
public class MainView extends VerticalLayout {
    public MainView() {
        add(new H1("Welcome to Vaadin App"));
    }
}

এখানে, @CssImport অ্যানোটেশনটি আপনার CSS ফাইল অ্যাপ্লিকেশনে অন্তর্ভুক্ত করে।

কাস্টম থিম তৈরি করা

আপনি যদি প্রি-বিল্ট থিমের বাইরে গিয়ে একটি কাস্টম থিম তৈরি করতে চান, তবে আপনি @CssImport এর মাধ্যমে আপনার নিজস্ব CSS ফাইল ব্যবহার করতে পারেন। এই পদ্ধতিতে, আপনি আপনার অ্যাপ্লিকেশনটি সম্পূর্ণ কাস্টমাইজ করতে পারবেন।

কাস্টম থিম উদাহরণ:

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

@Route("")
@CssImport("./styles/custom-theme.css")
public class MainView extends VerticalLayout {
    public MainView() {
        Button button = new Button("Click Me");
        button.addClassName("my-button");
        add(button);
    }
}

এখানে, my-button ক্লাস ব্যবহার করে একটি কাস্টম স্টাইল তৈরি করা হয়েছে, যা শুধুমাত্র এই বাটনের জন্য প্রযোজ্য।

থিম এবং স্টাইলিং এর সুবিধা

1. কাস্টমাইজেশন: থিমিং এবং স্টাইলিং এর মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনের ডিজাইন সম্পূর্ণ কাস্টমাইজ করতে পারবেন, যা আপনার ব্র্যান্ড এবং প্রয়োজন অনুযায়ী হবে।
2. উন্নত ইউজার এক্সপিরিয়েন্স (UX): একটি ভালো থিম এবং স্টাইলিং ব্যবহারকারীদের জন্য আরও আর্কষণীয় এবং ইন্টারেক্টিভ অভিজ্ঞতা তৈরি করে।
3. এডাপ্টিভ ডিজাইন: Vaadin এর থিমিং ব্যবস্থা রেসপনসিভ ডিজাইন সমর্থন করে, যা অ্যাপ্লিকেশনকে বিভিন্ন ডিভাইসে সুন্দরভাবে উপস্থাপন করে।
4. প্রোডাক্টিভিটি বৃদ্ধি: Vaadin এর প্রি-বিল্ট থিম এবং স্টাইলিং পদ্ধতিগুলি আপনাকে দ্রুত উন্নত ইউআই তৈরি করতে সহায়তা করে, যা ডেভেলপমেন্টের সময় কমিয়ে আনে।

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

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

Vaadin থিম কী?

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

Vaadin থিম ব্যবহারের সুবিধা

1. কাস্টমাইজেশন: Vaadin থিম আপনাকে সম্পূর্ণ কাস্টম থিম তৈরি করতে দেয়, যাতে আপনি আপনার অ্যাপ্লিকেশনের ডিজাইনকে আপনার ব্র্যান্ড বা পছন্দ অনুযায়ী কাস্টমাইজ করতে পারেন।
2. রেসপনসিভ ডিজাইন: Vaadin থিম স্বয়ংক্রিয়ভাবে রেসপনসিভ হয়, যা আপনার অ্যাপ্লিকেশনটি বিভিন্ন স্ক্রিন সাইজ এবং ডিভাইসে সুন্দরভাবে প্রদর্শিত হতে সহায়তা করে।
3. সহজ ইন্টিগ্রেশন: Vaadin-এ থিম তৈরি এবং প্রয়োগ করা খুবই সহজ, আপনি সরাসরি CSS, SCSS, বা স্টাইল শীট ব্যবহার করতে পারেন।

Vaadin থিম তৈরি এবং কাস্টমাইজ করা

Vaadin থিম তৈরি এবং কাস্টমাইজ করার জন্য বেশ কিছু স্টেপ অনুসরণ করতে হবে। প্রথমে একটি নতুন থিম তৈরি করতে হবে এবং তারপর সেখানে আপনার কাস্টম CSS বা SCSS ফাইল যোগ করতে হবে।

1. কাস্টম থিম তৈরি করা

Vaadin-এ কাস্টম থিম তৈরি করতে, প্রথমে আপনার অ্যাপ্লিকেশনে একটি নতুন থিম তৈরি করতে হবে। Vaadin এর @Theme অ্যানোটেশন ব্যবহার করে থিম অ্যাসাইন করা হয়।

@Theme(value = "myapp")
public class MainView extends VerticalLayout {
    public MainView() {
        add(new H1("Hello, Vaadin!"));
    }
}

এখানে, @Theme("myapp") অ্যানোটেশন ব্যবহার করে myapp নামের থিম অ্যাপ্লিকেশনটিতে অ্যাপ্লাই করা হয়েছে।

2. SCSS বা CSS ফাইল তৈরি করা

Vaadin এ কাস্টম থিম কাস্টমাইজ করার জন্য SCSS (Sass) ফাইল ব্যবহার করা যেতে পারে। SCSS ফাইলটি frontend/themes ফোল্ডারে রাখতে হবে।

• Example SCSS File (styles.scss)

@import "../styles/vaadin-button-styles";

:host {
    --vaadin-button-background: #6200ea;
    --vaadin-button-text-color: white;
    --vaadin-button-border-radius: 5px;
}

h1 {
    font-family: 'Arial', sans-serif;
    color: #6200ea;
    text-align: center;
}

এখানে, --vaadin-button-background, --vaadin-button-text-color এর মতো CSS ভ্যারিয়েবল ব্যবহার করে vaadin-button এর লুক কাস্টমাইজ করা হয়েছে।

3. থিম ফাইল যুক্ত করা

SCSS বা CSS ফাইল তৈরি করার পরে, সেটি থিম ফোল্ডারে যুক্ত করতে হবে। Vaadin SCSS ফাইলগুলোকে CSS তে কম্পাইল করতে সহায়তা করে, এবং এগুলোর মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনের কম্পোনেন্টগুলোর কাস্টম স্টাইল সেট করতে পারেন।

frontend/
  └── themes/
        └── myapp/
              └── styles.scss

এই SCSS ফাইলের মধ্যে আপনি CSS ভ্যারিয়েবলস, মিক্সিন্স, এবং অন্যান্য SCSS ফিচার ব্যবহার করতে পারেন।

4. ডিফল্ট থিমের কাস্টমাইজেশন

Vaadin এর ডিফল্ট থিম (লাইট বা ডার্ক) কাস্টমাইজ করতে, আপনাকে কেবল আপনার থিমে প্রয়োজনীয় CSS কাস্টমাইজেশন যোগ করতে হবে।

@import "../styles/vaadin-text-field-styles";

:host {
    --vaadin-text-field-border-color: #6200ea;
    --vaadin-text-field-focus-color: #03dac6;
}

এখানে, vaadin-text-field এর বর্ডার এবং ফোকাস কালার কাস্টমাইজ করা হয়েছে।

Vaadin ডিফল্ট থিমের স্টাইল ভ্যারিয়েবল

Vaadin থিম অনেক ধরনের CSS ভ্যারিয়েবল সরবরাহ করে, যার মাধ্যমে আপনি বিভিন্ন কম্পোনেন্টের স্টাইল কাস্টমাইজ করতে পারেন। কিছু সাধারণ ভ্যারিয়েবল হল:

• --vaadin-button-background: বাটনের ব্যাকগ্রাউন্ড কালার।
• --vaadin-button-text-color: বাটনের টেক্সট কালার।
• --vaadin-text-field-border-color: টেক্সট ফিল্ডের বর্ডার কালার।
• --vaadin-select-background-color: সিলেক্ট বক্সের ব্যাকগ্রাউন্ড কালার।
• --vaadin-menu-bar-item-hover-background: মেনু আইটেমের হোভার ব্যাকগ্রাউন্ড কালার।

থিম এবং লেআউটের কাস্টমাইজেশন

Vaadin এ আপনি শুধু থিমের স্টাইলই নয়, লেআউটের কাস্টমাইজেশনও করতে পারেন। আপনি চাইলে নিজের পছন্দের লেআউট, মেনু, সাইডবার ইত্যাদি কাস্টমাইজ করতে পারেন।

:host {
    --vaadin-app-layout-background-color: #f0f0f0;
    --vaadin-app-layout-header-background-color: #6200ea;
}

এখানে, AppLayout এর ব্যাকগ্রাউন্ড এবং হেডারের ব্যাকগ্রাউন্ড কালার কাস্টমাইজ করা হয়েছে।

সারাংশ

Vaadin এর থিমিং সিস্টেম ব্যবহারকারীদের জন্য কাস্টম UI তৈরি করার একটি শক্তিশালী উপায়। @Theme অ্যানোটেশন ব্যবহার করে আপনি একটি কাস্টম থিম অ্যাসাইন করতে পারেন এবং SCSS বা CSS ফাইলের মাধ্যমে বিভিন্ন কম্পোনেন্টের লুক অ্যান্ড ফিল কাস্টমাইজ করতে পারেন। Vaadin থিমিং সিস্টেমটি অনেক বেশি নমনীয়, এবং এর মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনটি সম্পূর্ণভাবে কাস্টমাইজ করতে পারেন, যা ব্যবহারকারীর অভিজ্ঞতাকে আরও উন্নত করে।

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

Lumo থিম

Lumo হল Vaadin এর একটি লাইট-ওয়েট থিম, যা একটি পরিষ্কার, মিনিমালিস্টিক এবং আধুনিক ডিজাইন স্টাইল প্রদান করে। Lumo থিমটির মাধ্যমে আপনি একটি স্বচ্ছ, সহজ এবং ব্যবহারকারী বান্ধব ইন্টারফেস তৈরি করতে পারেন।

Lumo থিম ব্যবহারের জন্য কীভাবে কনফিগারেশন করবেন?

1. Lumo থিম অন্তর্ভুক্ত করা: Vaadin অ্যাপ্লিকেশনে Lumo থিম যুক্ত করতে, আপনাকে @Theme অ্যানোটেশন ব্যবহার করতে হবে।

   @Route("")
   @Theme(value = Lumo.class, variant = Lumo.DARK)
   public class MainView extends VerticalLayout {
       public MainView() {
           add(new H1("Welcome to Vaadin with Lumo Theme"));
       }
   }
   

   এখানে, @Theme(value = Lumo.class) ব্যবহার করে আপনি Lumo থিম অ্যাপ্লিকেশনে অন্তর্ভুক্ত করছেন। আপনি variant = Lumo.DARK ব্যবহার করে থিমটি ডার্ক মোডেও চালু করতে পারেন।

2. Lumo থিম কাস্টমাইজেশন: আপনি Lumo থিমের মধ্যে আপনার নিজস্ব স্টাইল যুক্ত করতে পারেন CSS কাস্টমাইজেশন ব্যবহার করে। উদাহরণস্বরূপ:

   :root {
       --lumo-primary-color: #6200ea;
       --lumo-base-color: #f5f5f5;
   }
   

   এখানে, --lumo-primary-color এবং --lumo-base-color দ্বারা আপনি থিমের রঙ পরিবর্তন করতে পারেন।

Material থিম

Material থিম, Google এর Material Design এর ওপর ভিত্তি করে তৈরি করা হয়েছে, যা আধুনিক, ইন্টারেক্টিভ এবং ইউজার ফ্রেন্ডলি ডিজাইন উপস্থাপন করে। Material থিমটি ব্যবহারকারীদের একটি সুন্দর এবং সুসংগঠিত ডিজাইন অভিজ্ঞতা প্রদান করে।

Material থিম ব্যবহারের জন্য কীভাবে কনফিগারেশন করবেন?

1. Material থিম অন্তর্ভুক্ত করা: Vaadin অ্যাপ্লিকেশনে Material থিম যোগ করতে আপনাকে @Theme অ্যানোটেশন ব্যবহার করতে হবে, যেখানে Material ক্লাস প্যারামিটার হিসেবে পাঠানো হবে।

   @Route("")
   @Theme(value = Material.class)
   public class MainView extends VerticalLayout {
       public MainView() {
           add(new H1("Welcome to Vaadin with Material Theme"));
       }
   }
   

   এখানে @Theme(value = Material.class) ব্যবহার করে আপনি Material থিম অ্যাপ্লিকেশনে যুক্ত করছেন।

2. Material থিম কাস্টমাইজেশন: Material থিমের CSS কাস্টমাইজেশন করতে আপনি থিমের বিভিন্ন ভ্যারিয়েবল ব্যবহার করতে পারেন। উদাহরণ:

   :root {
       --material-primary-color: #03a9f4;
       --material-background-color: #fafafa;
   }
   

   এখানে, --material-primary-color এবং --material-background-color ভ্যারিয়েবলগুলি ব্যবহার করে আপনি থিমের রঙ এবং ব্যাকগ্রাউন্ড রঙ কাস্টমাইজ করতে পারেন।

Lumo এবং Material থিমের মধ্যে পার্থক্য

1. ডিজাইন স্টাইল:
   • Lumo থিমটি একটি মিনিমালিস্টিক এবং ক্লিন ডিজাইন প্রদান করে, যেখানে ব্যবহারকারীদের জন্য একটি সরল এবং আধুনিক অভিজ্ঞতা তৈরি করা হয়।
   • Material থিমটি Google এর Material Design-এর উপর ভিত্তি করে তৈরি এবং এতে আধুনিক, ডিপ, এবং শেডেড ইফেক্ট রয়েছে। এটি একটি বেশি ইন্টারেক্টিভ এবং ৩ডি অনুভূতি প্রদান করে।
2. রং এবং টেক্সট:
   • Lumo থিমের রং তুলনামূলকভাবে হালকা এবং প্রাকৃতিক হয়, যা একটি শান্ত এবং ক্লিন অনুভূতি তৈরি করে।
   • Material থিমের রং আরও শক্তিশালী এবং বিভিন্ন শেড ব্যবহার করে, যা একাধিক লেয়ারের মধ্যে গভীরতা সৃষ্টি করে।
3. ব্যবহারযোগ্যতা:
   • Lumo থিম সাধারণত লাইট এবং ডার্ক মোডের মধ্যে সুন্দরভাবে পরিবর্তিত হয়, ব্যবহারকারীদের জন্য সহজ এবং অদ্বিতীয় অভিজ্ঞতা প্রদান করে।
   • Material থিমের মাধ্যমে আপনি আরও ডায়নামিক এবং ইন্টারেক্টিভ কম্পোনেন্ট পাবেন, যেমন ত্রানজিশন, স্লাইডার, এবং ফ্লোটিং অ্যাকশন বাটন।

থিম পরিবর্তন

Vaadin এর মধ্যে থিম পরিবর্তন করতে, আপনি সহজেই @Theme অ্যানোটেশন ব্যবহার করতে পারেন এবং এটির মাধ্যমে বিভিন্ন থিম সিলেক্ট করতে পারেন। উদাহরণস্বরূপ:

@Route("")
@Theme(value = Material.class)  // Material theme
public class MainView extends VerticalLayout {
    public MainView() {
        add(new H1("Welcome to Material Theme"));
    }
}

এখানে আপনি চাইলে Material এবং Lumo থিমের মধ্যে সহজেই পরিবর্তন করতে পারবেন, এবং থিম অনুযায়ী অ্যাপ্লিকেশনের ইউজার ইন্টারফেস স্বয়ংক্রিয়ভাবে পরিবর্তিত হবে।

সারাংশ

Vaadin আপনাকে দুটি শক্তিশালী থিম প্রদান করে: Lumo এবং Material। Lumo একটি মিনিমালিস্টিক এবং ক্লিন ডিজাইন উপস্থাপন করে, যেখানে Material থিমটি Google এর Material Design এর সাথে মানানসই ডিজাইন উপস্থাপন করে। আপনি সহজেই @Theme অ্যানোটেশন ব্যবহার করে যেকোনো একটি থিম অ্যাপ্লিকেশনে অন্তর্ভুক্ত করতে পারেন এবং CSS কাস্টমাইজেশনের মাধ্যমে থিমের স্টাইল পরিবর্তন করতে পারেন। এই থিমগুলি আপনার ওয়েব অ্যাপ্লিকেশনের ইউজার ইন্টারফেসকে আরো সুন্দর, ইন্টারেক্টিভ এবং ব্যবহারকারী বান্ধব করে তোলে।

Vaadin এ Custom CSS এবং স্টাইলিং কাস্টমাইজেশন করা একটি গুরুত্বপূর্ণ বৈশিষ্ট্য, যা আপনাকে আপনার অ্যাপ্লিকেশনের ইউজার ইন্টারফেসকে সম্পূর্ণভাবে কাস্টমাইজ এবং ব্র্যান্ডের মতো করতে সাহায্য করে। Vaadin, HTML এবং CSS এর উপর ভিত্তি করে কাজ করে, এবং এর মাধ্যমে আপনি সহজেই CSS এর মাধ্যমে আপনার অ্যাপ্লিকেশনটির চেহারা এবং অনুভূতি পরিবর্তন করতে পারেন।

Custom CSS ব্যবহার করা

Vaadin এ স্টাইলিং করতে আপনি সাধারণত CSS ফাইল ব্যবহার করেন। আপনি আপনার অ্যাপ্লিকেশনকে কাস্টম স্টাইল দিতে পারেন বিভিন্ন উপায়ে:

1. Global Stylesheet:

Vaadin প্রজেক্টে global stylesheet যোগ করতে হলে আপনাকে একটি CSS ফাইল তৈরি করে সেটি অ্যাপ্লিকেশনে অন্তর্ভুক্ত করতে হবে। এই CSS ফাইলটি অ্যাপ্লিকেশনের সারা UI তে প্রভাব ফেলবে।

CSS ফাইল তৈরি করা: প্রথমে, frontend/styles ফোল্ডারে একটি CSS ফাইল তৈরি করুন, যেমন styles.css।

styles.css:

/* Global style for all buttons */
button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
}

/* Custom styling for a header */
h1 {
    color: #333;
    font-size: 2em;
}

CSS ফাইল অন্তর্ভুক্ত করা: @CssImport অ্যানোটেশন ব্যবহার করে এই CSS ফাইলটি আপনার Vaadin ভিউতে অন্তর্ভুক্ত করুন।

@CssImport("./styles/styles.css")
public class MainView extends VerticalLayout {
    public MainView() {
        H1 header = new H1("Welcome to My Vaadin App!");
        Button button = new Button("Click Me");
        add(header, button);
    }
}

এখানে, @CssImport("./styles/styles.css") ব্যবহার করে CSS ফাইলটি অন্তর্ভুক্ত করা হয়েছে।

2. Scoped CSS for Specific Components:

যদি আপনি শুধু নির্দিষ্ট কম্পোনেন্টের জন্য CSS প্রয়োগ করতে চান, তাহলে scoped styles ব্যবহার করতে পারেন।

উদাহরণস্বরূপ:

@Route("")
@CssImport(value = "./styles/custom-button.css", themeFor = "vaadin-button")
public class MainView extends VerticalLayout {
    public MainView() {
        Button button = new Button("Styled Button");
        add(button);
    }
}

এখানে, custom-button.css শুধুমাত্র vaadin-button কম্পোনেন্টের জন্য স্টাইল প্রযোজ্য হবে।

3. Inline CSS Styling:

Vaadin এ আপনি inline stylingও ব্যবহার করতে পারেন। এটি তাড়াতাড়ি কাস্টম স্টাইল প্রয়োগ করার জন্য ব্যবহার করা যায়।

উদাহরণ:

Button button = new Button("Click Me");
button.getStyle().set("background-color", "#4CAF50")
                  .set("color", "white")
                  .set("padding", "10px 20px");

এখানে, getStyle().set() মেথড ব্যবহার করে Button কম্পোনেন্টে inline CSS প্রযোজ্য করা হয়েছে।

Vaadin কম্পোনেন্ট কাস্টমাইজেশন

Vaadin কম্পোনেন্টের স্টাইল কাস্টমাইজ করার জন্য CSS প্রোপার্টি এবং ক্লাস ব্যবহার করা হয়। কিছু বিশেষ কম্পোনেন্টের স্টাইল কাস্টমাইজ করার জন্য আপনাকে তাদের CSS ক্লাস এবং আইডি চিহ্নিত করতে হবে।

1. Button Customization:

Vaadin এর বাটনের জন্য কাস্টম CSS ক্লাস ব্যবহার করা:

CSS ফাইল (styles.css):

.custom-button {
    background-color: #007BFF;
    color: white;
    border-radius: 8px;
    font-size: 16px;
}

Java কোড:

Button customButton = new Button("Custom Styled Button");
customButton.addClassName("custom-button");
add(customButton);

এখানে, addClassName("custom-button") ব্যবহার করে বাটনে কাস্টম ক্লাস যোগ করা হয়েছে।

2. TextField Customization:

TextField কম্পোনেন্টের জন্য স্টাইলিং:

CSS ফাইল (styles.css):

vaadin-text-field {
    --vaadin-text-field-focus-ring-color: #FF9800;
    --vaadin-text-field-background-color: #F3F4F6;
}

Java কোড:

TextField textField = new TextField("Custom Text Field");
add(textField);

এখানে, vaadin-text-field কাস্টম স্টাইলের জন্য CSS ভ্যারিয়েবল ব্যবহার করা হয়েছে।

Vaadin এর Shadow DOM এবং স্টাইলিং

Vaadin বেশ কিছু কম্পোনেন্ট Shadow DOM ব্যবহার করে, যার কারণে আপনি তাদের CSS স্টাইলিং করতে পারবেন না সরাসরি। তবে, আপনি Vaadin এর CSS variables ব্যবহার করে এই কম্পোনেন্টগুলোকে কাস্টমাইজ করতে পারেন।

উদাহরণ:

/* Shadow DOM স্টাইলিং */
vaadin-button {
    --vaadin-button-primary-background-color: #FF5722;
    --vaadin-button-primary-text-color: white;
}

এখানে, vaadin-button এর জন্য Shadow DOM এর CSS ভ্যারিয়েবলস ব্যবহার করা হয়েছে।

সারাংশ

Vaadin এ Custom CSS এবং স্টাইলিং কাস্টমাইজেশন এর মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনটির চেহারা এবং অনুভূতি সম্পূর্ণভাবে কাস্টমাইজ করতে পারেন। আপনি global styles, scoped styles, এবং inline CSS এর মাধ্যমে সহজেই Vaadin কম্পোনেন্টগুলোর ডিজাইন পরিবর্তন করতে পারেন। CSS ভ্যারিয়েবল এবং Shadow DOM ব্যবহার করে, আপনি Vaadin এর বিভিন্ন বিল্ট-ইন কম্পোনেন্টগুলোকেও কাস্টমাইজ করতে সক্ষম হন।

এই কাস্টমাইজেশন প্রক্রিয়াগুলির মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনকে আরও ইউজার ফ্রেন্ডলি এবং ব্র্যান্ডেড করতে পারেন।

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-এর মাধ্যমে আপনি গতি এবং কাজের সহজতা বজায় রেখে ডিজাইনের দিক থেকে আরও বৈচিত্র্য আনতে পারেন। তাছাড়া, থিমের মাধ্যমে আপনার অ্যাপ্লিকেশনটি সম্পূর্ণরূপে কাস্টমাইজ করা সম্ভব, যা ব্যবহারকারীর অভিজ্ঞতা আরও উন্নত করতে সাহায্য করবে।