Layout Panels (FlowPanel, VerticalPanel, HorizontalPanel)

GWT তে UI উপাদানগুলি সঠিকভাবে সজ্জিত করার জন্য বিভিন্ন ধরনের Layout Panels ব্যবহৃত হয়। Layout Panels হল বিশেষ ধরনের কন্টেইনার, যা আপনাকে আপনার UI উপাদানগুলোকে নির্দিষ্টভাবে সাজানোর সুবিধা দেয়। GWT এ কয়েকটি জনপ্রিয় Layout Panel রয়েছে, যেগুলোর মধ্যে FlowPanel, VerticalPanel, এবং HorizontalPanel সবচেয়ে বেশি ব্যবহৃত হয়।

FlowPanel

FlowPanel হল একটি সাধারণ কন্টেইনার প্যানেল, যা তার সমস্ত UI উপাদানগুলোকে একে একে ঝুলানোর মতো সাজায়। এতে উপাদানগুলোর অবস্থান নির্দিষ্ট করা হয় না এবং এটি উপাদানগুলোকে তাদের প্রাকৃতিক আকার ও ভরের ভিত্তিতে সাজায়। এটি সাধারণত ব্যবহার করা হয় যখন উপাদানগুলোর মধ্যে কোন নির্দিষ্ট সজ্জা বা বিন্যাস প্রয়োজন হয় না।

FlowPanel এর উদাহরণ:

package com.example.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.RootPanel;

public class MyFlowPanelApp implements EntryPoint {

    @Override
    public void onModuleLoad() {
        // একটি FlowPanel তৈরি করা
        FlowPanel flowPanel = new FlowPanel();

        // কিছু বোতাম তৈরি করা
        Button button1 = new Button("Button 1");
        Button button2 = new Button("Button 2");
        
        // বোতামগুলো FlowPanel এ যোগ করা
        flowPanel.add(button1);
        flowPanel.add(button2);
        
        // FlowPanel টি RootPanel এ যোগ করা
        RootPanel.get().add(flowPanel);
    }
}

এই উদাহরণে, FlowPanel দুটি বোতামকে একে একে সাজায়। কোনো নির্দিষ্ট বিন্যাস ছাড়া উপাদানগুলো সাজানো হয়।

VerticalPanel

VerticalPanel হল একটি কন্টেইনার প্যানেল যা সমস্ত UI উপাদানগুলোকে উল্লম্বভাবে সাজায় (top to bottom)। এর মাধ্যমে আপনি সহজে উপাদানগুলোকে একে একে উপরে থেকে নিচে সাজাতে পারেন। এটি সাধারণত ফর্ম, লিস্ট, অথবা এমন কোন UI সজ্জার জন্য ব্যবহৃত হয় যেখানে উপাদানগুলোর মধ্যে একটি উল্লম্ব বিন্যাস প্রয়োজন।

VerticalPanel এর উদাহরণ:

package com.example.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.RootPanel;

public class MyVerticalPanelApp implements EntryPoint {

    @Override
    public void onModuleLoad() {
        // একটি VerticalPanel তৈরি করা
        VerticalPanel verticalPanel = new VerticalPanel();

        // কিছু বোতাম তৈরি করা
        Button button1 = new Button("Button 1");
        Button button2 = new Button("Button 2");
        
        // বোতামগুলো VerticalPanel এ যোগ করা
        verticalPanel.add(button1);
        verticalPanel.add(button2);
        
        // VerticalPanel টি RootPanel এ যোগ করা
        RootPanel.get().add(verticalPanel);
    }
}

এই উদাহরণে, VerticalPanel দুটি বোতামকে উল্লম্বভাবে সাজায়, অর্থাৎ একটি বোতাম উপরে এবং অপরটি নিচে।

HorizontalPanel

HorizontalPanel হল একটি কন্টেইনার প্যানেল যা সমস্ত UI উপাদানগুলোকে অনুভূমিকভাবে সাজায় (left to right)। এই প্যানেলটি উপাদানগুলোকে একে একে বাঁ থেকে ডানে সাজায়। এটি সাধারণত টুলবার, নেভিগেশন বার, বা এমন UI সজ্জার জন্য ব্যবহৃত হয় যেখানে উপাদানগুলো অনুভূমিকভাবে সাজানো প্রয়োজন।

HorizontalPanel এর উদাহরণ:

package com.example.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.RootPanel;

public class MyHorizontalPanelApp implements EntryPoint {

    @Override
    public void onModuleLoad() {
        // একটি HorizontalPanel তৈরি করা
        HorizontalPanel horizontalPanel = new HorizontalPanel();

        // কিছু বোতাম তৈরি করা
        Button button1 = new Button("Button 1");
        Button button2 = new Button("Button 2");
        
        // বোতামগুলো HorizontalPanel এ যোগ করা
        horizontalPanel.add(button1);
        horizontalPanel.add(button2);
        
        // HorizontalPanel টি RootPanel এ যোগ করা
        RootPanel.get().add(horizontalPanel);
    }
}

এখানে, HorizontalPanel দুটি বোতামকে অনুভূমিকভাবে সাজায়, অর্থাৎ একটি বোতাম বামে এবং অপরটি ডানদিকে থাকবে।

Layout Panels এর প্রয়োজনীয়তা

• FlowPanel: যখন আপনার UI উপাদানগুলোকে কেবল প্রাকৃতিক অবস্থায় সাজানোর প্রয়োজন হয় এবং কোনো নির্দিষ্ট বিন্যাসের প্রয়োজন নেই, তখন FlowPanel ব্যবহার করা হয়।
• VerticalPanel: যখন আপনি উপাদানগুলোকে উল্লম্বভাবে সাজাতে চান, বিশেষ করে ফর্ম, ইনপুট ফিল্ড, এবং অন্য কোন লম্বা তালিকা তৈরি করার জন্য, তখন VerticalPanel ব্যবহৃত হয়।
• HorizontalPanel: যখন UI উপাদানগুলোকে অনুভূমিকভাবে সাজাতে হয়, যেমন টুলবার বা নেভিগেশন বার, তখন HorizontalPanel ব্যবহার করা হয়।

এই Layout Panels GWT ডেভেলপারদের জন্য একটি শক্তিশালী টুল, যা বিভিন্ন ধরনের UI সজ্জার ক্ষেত্রে সহায়তা করে এবং অ্যাপ্লিকেশনটি আরও ব্যবহারযোগ্য এবং সুন্দর করে তোলে।