GWT এর মাধ্যমে Dynamic CSS Class কনফিগার করা

গুগল ওয়েব টুলকিট (GWT) একটি শক্তিশালী Java-based ফ্রেমওয়ার্ক যা JavaScript এ কোড রূপান্তর করে। GWT-তে CSS ক্লাস কনফিগার এবং কাস্টমাইজ করার জন্য ডাইনামিক মেথড ব্যবহার করা হয়, যা আপনাকে ওয়েব অ্যাপ্লিকেশনে ইউজার ইন্টারফেসের স্টাইল পরিচালনা করতে সহায়তা করে।

ডাইনামিক CSS ক্লাস ব্যবহার করলে আপনি কোন উপাদান বা HTML এলিমেন্টের স্টাইল পরিবর্তন করতে পারেন রানটাইমের সময়, যা সাধারনত ওয়েব অ্যাপ্লিকেশনগুলিতে রিয়্যাক্টিভ ইউজার ইন্টারফেসের জন্য প্রয়োজনীয়।

Dynamic CSS Class কনফিগার করা

GWT-তে Dynamic CSS Class কনফিগার করতে কিছু নির্দিষ্ট স্টেপ ফলো করতে হয়। এতে আপনি DOM এলিমেন্টগুলোর জন্য CSS ক্লাস পরিবর্তন বা অ্যাড/রিমুভ করতে পারেন। এখানে একটি উদাহরণ দেওয়া হলো:

১. GWT-তে CSS ক্লাস ডিফাইন করা

প্রথমে, আপনাকে CSS ফাইলটি তৈরি করতে হবে এবং সেখানে স্টাইলস ডিফাইন করতে হবে। উদাহরণস্বরূপ, একটি style.css ফাইলে নিম্নলিখিত স্টাইল কোড যুক্ত করা যেতে পারে:

/* style.css */
.highlight {
    background-color: yellow;
    font-weight: bold;
}

.hide {
    display: none;
}

এখানে, highlight ক্লাস একটি এলিমেন্টের ব্যাকগ্রাউন্ড কালার হলুদ এবং ফন্ট ওয়েট বোল্ড করে, এবং hide ক্লাস এলিমেন্টটি হাইড করে।

২. GWT-তে CSS ক্লাস ব্যবহার

এখন, আপনার GWT কোডে CSS ক্লাস ব্যবহার করার জন্য, আপনাকে CSS ক্লাসগুলিকে Resource ক্লাসে লোড করতে হবে। GWT অ্যাপ্লিকেশন তৈরি করতে এই ফাইলটি সাধারণত *.gwt.xml ফাইলে লিংক করা হয়।

<module>
    <inherits name="com.google.gwt.user.User"/>
    <stylesheet src="style.css"/>
</module>

এখানে style.css ফাইলটি আপনার GWT অ্যাপ্লিকেশনের সাথে যুক্ত করা হয়েছে।

৩. Dynamic CSS Class যুক্ত করা

এখন, আপনি ডাইনামিকালি CSS ক্লাস যোগ বা সরানোর জন্য GWT-এর DOM API ব্যবহার করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো যেখানে একটি এলিমেন্টের CSS ক্লাস ডাইনামিক্যালি পরিবর্তন করা হয়েছে:

public class DynamicCSSExample implements EntryPoint {

    public void onModuleLoad() {
        Button highlightButton = new Button("Highlight");
        RootPanel.get().add(highlightButton);

        // "highlight" CSS ক্লাস অ্যাড করা
        highlightButton.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                highlightButton.addStyleName("highlight");
            }
        });
    }
}

এখানে, যখন highlightButton ক্লিক করা হবে, তখন CSS ক্লাস highlight যোগ করা হবে এবং এলিমেন্টটি হাইলাইট হয়ে যাবে।

৪. Dynamic CSS Class রিমুভ করা

যদি আপনি কোনো CSS ক্লাস রিমুভ করতে চান, তাহলে আপনি removeStyleName() মেথড ব্যবহার করতে পারেন। উদাহরণস্বরূপ:

public class DynamicCSSExample implements EntryPoint {

    public void onModuleLoad() {
        Button removeHighlightButton = new Button("Remove Highlight");
        RootPanel.get().add(removeHighlightButton);

        // "highlight" CSS ক্লাস রিমুভ করা
        removeHighlightButton.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                removeHighlightButton.removeStyleName("highlight");
            }
        });
    }
}

এখানে, removeHighlightButton ক্লিক করলে highlight CSS ক্লাস রিমুভ হবে এবং এলিমেন্টটির স্টাইল পরিবর্তন হবে।

৫. Dynamic CSS ক্লাসের Conditional ব্যবহার

আপনি CSS ক্লাসের ব্যবহারকে কন্ডিশনাল করতে পারেন, অর্থাৎ কিছু শর্ত মেনে CSS ক্লাস অ্যাপ্লাই বা রিমুভ হবে। নিচে একটি উদাহরণ দেওয়া হলো যেখানে একটি টেক্সট বক্সে ব্যবহারকারীর ইনপুটের উপর ভিত্তি করে CSS ক্লাস যোগ বা সরানো হচ্ছে:

public class ConditionalCSSExample implements EntryPoint {

    public void onModuleLoad() {
        TextBox inputBox = new TextBox();
        Button validateButton = new Button("Validate");
        RootPanel.get().add(inputBox);
        RootPanel.get().add(validateButton);

        validateButton.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                String inputValue = inputBox.getText();
                if (inputValue.length() < 5) {
                    inputBox.addStyleName("highlight");  // Input ছোট হলে হাইলাইট
                } else {
                    inputBox.removeStyleName("highlight");
                }
            }
        });
    }
}

এখানে, ইনপুটের দৈর্ঘ্য ৫ এর কম হলে highlight CSS ক্লাস যোগ করা হবে, অন্যথায় এটি রিমুভ হবে।

সারাংশ

GWT-তে Dynamic CSS Class কনফিগার করা আপনাকে রিয়্যাক্টিভ স্টাইলিংয়ের ক্ষমতা প্রদান করে। আপনি CSS ক্লাস যোগ, সরানো, এবং শর্তসাপেক্ষভাবে পরিবর্তন করতে পারেন, যা ব্যবহারকারীর ইন্টারঅ্যাকশন অনুযায়ী ওয়েব অ্যাপ্লিকেশনটির ইউজার ইন্টারফেসকে ডাইনামিক এবং ইন্টারেকটিভ করে তোলে। এটি একদিকে যেমন স্টাইলিংকে নমনীয় করে, অন্যদিকে সঠিকভাবে অ্যাপ্লিকেশনের আচরণকে আরও উন্নত করে।