Flex এর Layout Containers (HBox, VBox, Grid, Tile)

Flex অ্যাপ্লিকেশন তৈরি করতে Layout Containers ব্যবহার করা হয়, যা UI কম্পোনেন্টগুলোর অবস্থান এবং মাপ পরিচালনা করে। Flex এর বিভিন্ন ধরনের Layout Containers যেমন HBox, VBox, Grid, এবং Tile ব্যবহার করে অ্যাপ্লিকেশনের UI গঠন করা হয়। এগুলো UI কম্পোনেন্টগুলোর বিন্যাসকে নিয়ন্ত্রণ করে এবং তাদের অবস্থান সহজেই নির্ধারণ করতে সাহায্য করে।

১. HBox (Horizontal Box)

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

বৈশিষ্ট্য:

• উপাদানগুলিকে অনুভূমিকভাবে (horizontal) সাজায়।
• padding, spacing, এবং horizontalAlign প্রপার্টি ব্যবহার করা যেতে পারে।
• উপাদানগুলোর অবস্থান নিয়ন্ত্রণের জন্য horizontalAlign এবং verticalAlign ব্যবহার করা হয়।

উদাহরণ:

<s:HBox width="100%" height="100%">
    <s:Button label="Button 1"/>
    <s:Button label="Button 2"/>
    <s:Button label="Button 3"/>
</s:HBox>

এই উদাহরণে, তিনটি বাটন অনুভূমিকভাবে সাজানো হবে।

২. VBox (Vertical Box)

VBox একটি লেআউট কন্টেইনার যা উপাদানগুলিকে উল্লম্বভাবে (vertically) সাজানোর জন্য ব্যবহৃত হয়। এটি একটি সাধারণ কন্টেইনার যা উপাদানগুলিকে একটির নিচে আরেকটি সাজায়।

বৈশিষ্ট্য:

• উপাদানগুলিকে উল্লম্বভাবে (vertical) সাজায়।
• verticalAlign, horizontalAlign, এবং spacing প্রপার্টি ব্যবহার করা হয়।
• উপাদানগুলোর মধ্যে ফাঁকা জায়গা বা গ্যাপের জন্য spacing ব্যবহার করা যেতে পারে।

উদাহরণ:

<s:VBox width="100%" height="100%">
    <s:Button label="Button 1"/>
    <s:Button label="Button 2"/>
    <s:Button label="Button 3"/>
</s:VBox>

এই উদাহরণে, তিনটি বাটন উল্লম্বভাবে সাজানো হবে।

৩. Grid

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

বৈশিষ্ট্য:

• Grid কন্টেইনারে উপাদানগুলি সারি এবং কলামে সাজানো হয়।
• columnCount এবং rowCount প্রপার্টি ব্যবহার করা হয় গ্রিডের কলাম এবং সারির সংখ্যা নির্ধারণ করতে।
• horizontalGap এবং verticalGap প্রপার্টি দ্বারা কলাম এবং সারির মধ্যে ফাঁকা জায়গা নির্ধারণ করা হয়।

উদাহরণ:

<s:Grid width="100%" height="100%" columnCount="2">
    <s:GridItem>
        <s:Label text="Label 1"/>
    </s:GridItem>
    <s:GridItem>
        <s:Label text="Label 2"/>
    </s:GridItem>
    <s:GridItem>
        <s:Label text="Label 3"/>
    </s:GridItem>
    <s:GridItem>
        <s:Label text="Label 4"/>
    </s:GridItem>
</s:Grid>

এই উদাহরণে, চারটি লেবেল দুটি কলামে সাজানো হবে।

৪. Tile

Tile লেআউট কন্টেইনারটি উপাদানগুলোকে টাইলের মতো সাজায়, যেখানে প্রতিটি উপাদান একটি টাইল হিসেবে পরিবেশন করা হয়। এটি সাধারণত আইকন, ছবির গ্যালারি, বা টাইল ভিউ তৈরি করতে ব্যবহৃত হয়। উপাদানগুলো একে অপরের পাশের দিকে সাজানো হয়, এবং লেআউটটি স্বয়ংক্রিয়ভাবে টাইল আকারে সাজানো হয়।

বৈশিষ্ট্য:

• Tile উপাদানগুলোকে টাইলের মতো (tile) সাজায়।
• স্বয়ংক্রিয়ভাবে উপাদানগুলোর আকার এবং বিন্যাস পরিবর্তন করতে সক্ষম।
• tileWidth এবং tileHeight ব্যবহার করে টাইলের আকার নির্ধারণ করা যায়।

উদাহরণ:

<s:Tile width="100%" height="100%" columnCount="3" rowHeight="100">
    <s:Button label="Tile 1"/>
    <s:Button label="Tile 2"/>
    <s:Button label="Tile 3"/>
    <s:Button label="Tile 4"/>
</s:Tile>

এই উদাহরণে, চারটি বাটন টাইল আকারে সাজানো হবে, এবং প্রতি সারিতে তিনটি উপাদান থাকবে।

সারাংশ

Flex অ্যাপ্লিকেশন তৈরি করতে Layout Containers অত্যন্ত গুরুত্বপূর্ণ ভূমিকা পালন করে। এগুলোর মাধ্যমে ইউজার ইন্টারফেসের উপাদানগুলোর অবস্থান এবং বিন্যাস নিয়ন্ত্রণ করা হয়। Flex এর HBox, VBox, Grid, এবং Tile লেআউট কন্টেইনারগুলো ব্যবহার করে ডেভেলপাররা সহজেই উপাদানগুলোকে সজ্জিত এবং সাজাতে পারেন, যা অ্যাপ্লিকেশনটির ইউজার এক্সপেরিয়েন্স উন্নত করতে সাহায্য করে।

• HBox: উপাদানগুলোকে অনুভূমিকভাবে সাজায়।
• VBox: উপাদানগুলোকে উল্লম্বভাবে সাজায়।
• Grid: টেবিল বা গ্রিড স্টাইলে উপাদান সাজায়।
• Tile: উপাদানগুলোকে টাইল আকারে সাজায়।

এই কন্টেইনারগুলো ব্যবহার করে Flex অ্যাপ্লিকেশনের UI ডিজাইনকে আরও প্রভাবশালী এবং কার্যকরী করা যায়।