Adobe Flex অ্যাপ্লিকেশন ডেভেলপমেন্টে Input Fields, Labels, এবং Buttons ব্যবহৃত হয় ইউজার ইন্টারফেস তৈরি করতে। এই তিনটি কম্পোনেন্ট ব্যবহারকারী থেকে ইনপুট নেওয়া, তথ্য প্রদর্শন করা এবং অ্যাপ্লিকেশনের ইন্টারঅ্যাকশনের জন্য ব্যবহৃত হয়। Flex-এ এই কম্পোনেন্টগুলির মাধ্যমে ইন্টারেক্টিভ এবং ডাইনামিক অ্যাপ্লিকেশন তৈরি করা সম্ভব। নিচে Input Fields, Labels, এবং Buttons ব্যবহারের বিস্তারিত উদাহরণ এবং ব্যাখ্যা দেওয়া হলো।
১. Input Fields (ইনপুট ফিল্ডস)
Input Fields হল এমন কম্পোনেন্ট যা ব্যবহারকারীদের ডেটা ইনপুট করতে সহায়ক। Flex-এ প্রধানত TextInput কম্পোনেন্ট ব্যবহার করা হয় ইনপুট ফিল্ড তৈরি করতে।
উদাহরণ: TextInput
<s:TextInput id="usernameInput" width="200" horizontalCenter="0" verticalCenter="0"/>
এখানে:
- id="usernameInput": ইনপুট ফিল্ডের একটি ইউনিক আইডি যা ActionScript-এ রেফারেন্স হিসেবে ব্যবহার করা হয়।
- width="200": ইনপুট ফিল্ডের প্রস্থ নির্ধারণ করে।
- horizontalCenter="0" verticalCenter="0": ইনপুট ফিল্ডটিকে স্ক্রিনের কেন্দ্রে অবস্থান করে।
Input Field এর ব্যবহার
- ইউজারের নাম, ইমেইল, ফোন নম্বর বা অন্য যেকোনো ডেটা ইনপুটের জন্য TextInput ব্যবহার করা হয়।
- Password ইনপুট ফিল্ড তৈরি করতে
displayAsPassword="true"ব্যবহার করা যেতে পারে।
<s:TextInput id="passwordInput" width="200" displayAsPassword="true" horizontalCenter="0" verticalCenter="50"/>
২. Labels (লেবেলস)
Labels হল এমন কম্পোনেন্ট যা তথ্য প্রদর্শন করতে ব্যবহৃত হয়, যেমন টেক্সট, সংখ্যা বা অন্যান্য ডেটা। Flex-এ Label কম্পোনেন্ট ব্যবহার করে টেক্সট প্রদর্শন করা হয়।
উদাহরণ: Label
<s:Label text="Enter your username:" horizontalCenter="0" verticalCenter="-50"/>
এখানে:
- text="Enter your username:": লেবেলটির প্রদর্শিত টেক্সট।
- horizontalCenter="0" verticalCenter="-50": লেবেলটি স্ক্রিনের কেন্দ্রে স্থানান্তরিত হবে এবং কিছুটা উপরে চলে যাবে।
Labels এর ব্যবহার
- Text প্রদর্শনের জন্য বা অন্য কোন বার্তা (যেমন, ত্রুটি বার্তা, নির্দেশাবলী) প্রদর্শনের জন্য Label ব্যবহার করা হয়।
- Dynamic Text প্রদর্শন করতে {bindable data} ব্যবহার করা যেতে পারে।
<s:Label text="{userName}" horizontalCenter="0" verticalCenter="60"/>
এখানে, userName একটি Bindable ডেটা ভেরিয়েবল হতে পারে, যা পরিবর্তন হলে লেবেলটি রিয়েল-টাইমে আপডেট হবে।
৩. Buttons (বাটনস)
Buttons হল ইন্টারেকটিভ কম্পোনেন্ট যা ব্যবহারকারীর কার্যকলাপের জন্য ব্যবহৃত হয়। Flex-এ Button কম্পোনেন্ট ব্যবহার করে বাটন তৈরি করা হয় এবং বাটনটি ক্লিক করার মাধ্যমে একটি ফাংশন কার্যকর করা হয়।
উদাহরণ: Button
<s:Button label="Submit" click="submitForm()" horizontalCenter="0" verticalCenter="100"/>
এখানে:
- label="Submit": বাটনের লেবেল, যা ইউজারের কাছে প্রদর্শিত হয়।
- click="submitForm()": এই অ্যাকশনটি submitForm() নামক ActionScript ফাংশনকে কল করবে যখন বাটনটি ক্লিক করা হবে।
- horizontalCenter="0" verticalCenter="100": বাটনটিকে স্ক্রিনের কেন্দ্রে এবং কিছুটা নিচে রাখবে।
Buttons এর ব্যবহার
- ফর্ম সাবমিট, ডেটা সেভ, বা অন্য যেকোনো ইন্টারঅ্যাকশন চালানোর জন্য বাটন ব্যবহৃত হয়।
- ToggleButton ব্যবহার করে সিলেকশন বা অবস্থান পরিবর্তন করা যায়।
<s:Button label="Click Me" toggle="true" click="handleClick()"/>
পূর্ণাঙ্গ উদাহরণ: Input Fields, Labels, এবং Buttons ব্যবহার
এখানে একটি উদাহরণ দেওয়া হলো, যেখানে Input Field, Label, এবং Button ব্যবহৃত হয়েছে:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
<![CDATA[
private var userName:String = "";
private function displayUserName():void {
userName = nameInput.text;
greetingLabel.text = "Hello, " + userName + "!";
}
]]>
</fx:Script>
<s:Label text="Enter your name:" horizontalCenter="0" verticalCenter="-50"/>
<s:TextInput id="nameInput" width="200" horizontalCenter="0" verticalCenter="0"/>
<s:Button label="Greet" click="displayUserName()" horizontalCenter="0" verticalCenter="50"/>
<s:Label id="greetingLabel" text="" horizontalCenter="0" verticalCenter="100"/>
</s:Application>
ব্যাখ্যা:
- TextInput ব্যবহারকারীর নাম ইনপুট নেওয়ার জন্য।
- Button ক্লিক করলে displayUserName() ফাংশনটি কল হয়, যা Label এ একটি স্বাগত বার্তা প্রদর্শন করে।
- Label ব্যবহার করা হয় ইউজারের নাম এবং স্বাগত বার্তা প্রদর্শন করার জন্য।
Input Fields, Labels, এবং Buttons এর সুবিধা:
- ইউজার ইন্টারফেস তৈরি করা সহজ: Flex এর MXML ব্যবহার করে ইনপুট ফিল্ড, লেবেল এবং বাটন খুব সহজেই ডিজাইন করা যায়।
- ডাটা বাইন্ডিং: Flex অ্যাপ্লিকেশন ডেটা এবং UI কম্পোনেন্টগুলির মধ্যে রিয়েল-টাইম সম্পর্ক বজায় রাখতে ডাটা বাইন্ডিং সাপোর্ট করে।
- ইন্টারেকটিভ অ্যাপ্লিকেশন: বাটন এবং ইনপুট ফিল্ড ব্যবহারকারীর সাথে ইন্টারঅ্যাকশন তৈরি করে, যা অ্যাপ্লিকেশনটিকে ডায়নামিক এবং ব্যবহারযোগ্য করে তোলে।
Flex অ্যাপ্লিকেশন ডেভেলপমেন্টে Input Fields, Labels, এবং Buttons অত্যন্ত গুরুত্বপূর্ণ ভূমিকা পালন করে। এই কম্পোনেন্টগুলির মাধ্যমে সহজে এবং দ্রুত ইন্টারেকটিভ এবং ইউজার-ফ্রেন্ডলি অ্যাপ্লিকেশন তৈরি করা সম্ভব।
