Adobe Flex এ DataGrid একটি গুরুত্বপূর্ণ কম্পোনেন্ট যা ডেটাকে টেবিল ফর্ম্যাটে প্রদর্শন করতে ব্যবহৃত হয়। DataGrid কম্পোনেন্টটি বিভিন্ন ধরণের ডেটা যেমন অ্যারে, XML বা ArrayCollection থেকে ডেটা রেন্ডার করতে পারে। এটি এমন একটি টেবিল ফরম্যাট তৈরি করতে সাহায্য করে যা সহজেই কাস্টমাইজ করা যায় এবং ডেটা ফরম্যাটিং করা যায়।
এই টিউটোরিয়ালে, আমরা DataGrid কাস্টমাইজেশন এবং ডেটা ফরম্যাটিংয়ের জন্য বিভিন্ন পদ্ধতি নিয়ে আলোচনা করব।
DataGrid কাস্টমাইজেশন
Flex-এ DataGrid কাস্টমাইজেশন বেশ শক্তিশালী এবং নমনীয়, যার মাধ্যমে আপনি বিভিন্ন UI কম্পোনেন্ট এবং স্টাইলিং পরিবর্তন করতে পারেন।
DataGrid এর মৌলিক স্ট্রাকচার
<mx:DataGrid id="dataGrid" dataProvider="{dataList}">
<mx:columns>
<mx:DataGridColumn headerText="Name" dataField="name"/>
<mx:DataGridColumn headerText="Age" dataField="age"/>
<mx:DataGridColumn headerText="Country" dataField="country"/>
</mx:columns>
</mx:DataGrid>
এখানে:
- dataProvider: এটি ArrayCollection বা Array এর মতো ডেটা প্রদানকারী কম্পোনেন্ট।
- columns: এই বিভাগে আপনি প্রতিটি কলামের জন্য DataGridColumn কাস্টমাইজ করতে পারবেন।
Columns কাস্টমাইজেশন
DataGridColumn এর বিভিন্ন বৈশিষ্ট্য কাস্টমাইজ করা যায়:
- headerText: কলামের শিরোনাম।
- dataField: ডেটা ফিল্ড, যা প্রেরিত ডেটাতে থেকে তথ্য রেন্ডার করে।
- width: কলামের প্রস্থ।
- editable: কলামটি সম্পাদনা করা যাবে কিনা।
উদাহরণ: Column Customization
<mx:DataGrid id="dataGrid" dataProvider="{dataList}">
<mx:columns>
<mx:DataGridColumn headerText="Name" dataField="name" width="150"/>
<mx:DataGridColumn headerText="Age" dataField="age" width="100" editable="true"/>
<mx:DataGridColumn headerText="Country" dataField="country" width="200"/>
</mx:columns>
</mx:DataGrid>
এখানে, Age কলামটি editable="true" সেট করা হয়েছে, যার ফলে ব্যবহারকারী DataGrid এ সরাসরি পরিবর্তন করতে পারবেন।
DataGrid Row and Cell Customization
Flex-এ DataGrid এর সারি এবং সেল কাস্টমাইজ করতে অনেক ধরনের স্টাইল এবং বৈশিষ্ট্য প্রদান করা হয়। আপনি cellRenderer এবং itemRenderer ব্যবহার করে সেল এবং আইটেম কাস্টমাইজ করতে পারেন।
CellRenderer কাস্টমাইজেশন
cellRenderer ব্যবহার করে আপনি সেলগুলির ভিজ্যুয়াল উপস্থাপন কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ, আপনি TextInput, CheckBox বা অন্যান্য কম্পোনেন্ট ব্যবহার করে সেলগুলির ডেটা কাস্টমাইজ করতে পারেন।
<mx:DataGrid id="dataGrid" dataProvider="{dataList}">
<mx:columns>
<mx:DataGridColumn headerText="Name" dataField="name" />
<mx:DataGridColumn headerText="Age" dataField="age">
<mx:itemRenderer>
<mx:Component>
<mx:TextInput text="{data.age}" width="50"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
এখানে Age কলামে TextInput কম্পোনেন্ট যুক্ত করা হয়েছে, যা সেলটি সম্পাদনাযোগ্য করে তোলে।
DataGrid এর Data Formatting
Data Formatting ফর্ম্যাটিং ডেটার উপস্থাপন নির্ধারণ করতে সাহায্য করে, যেমন সংখ্যা, মুদ্রা, তারিখ, ইত্যাদি। Flex-এ DataGrid এর ডেটা ফরম্যাট করার জন্য আপনি formatter ব্যবহার করতে পারেন।
Number Formatter
NumberFormatter ব্যবহার করে আপনি ডেটা ফরম্যাট করতে পারেন, যেমন দশমিক সংখ্যা, মুদ্রার ফরম্যাট ইত্যাদি।
<mx:DataGrid id="dataGrid" dataProvider="{dataList}">
<mx:columns>
<mx:DataGridColumn headerText="Price" dataField="price">
<mx:formatter>
<mx:NumberFormatter decimalSeparator="." thousandSeparator=","/>
</mx:formatter>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
এখানে NumberFormatter ব্যবহার করে দাম বা মুল্যকে সুন্দরভাবে প্রদর্শন করা হয়েছে, যেমন হাজারের পরে কমা (,) এবং দশমিক চিহ্ন (.)।
Currency Formatter
<mx:DataGrid id="dataGrid" dataProvider="{dataList}">
<mx:columns>
<mx:DataGridColumn headerText="Amount" dataField="amount">
<mx:formatter>
<mx:CurrencyFormatter currencySymbol="$"/>
</mx:formatter>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
এখানে, CurrencyFormatter ব্যবহার করে ডেটার পাশে মুদ্রার চিহ্ন ($) যোগ করা হয়েছে।
Date Formatter
DateFormatter ব্যবহার করে আপনি তারিখের ফরম্যাট কাস্টমাইজ করতে পারেন।
<mx:DataGrid id="dataGrid" dataProvider="{dataList}">
<mx:columns>
<mx:DataGridColumn headerText="Date" dataField="date">
<mx:formatter>
<mx:DateFormatter formatString="YYYY-MM-DD"/>
</mx:formatter>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
এখানে DateFormatter ব্যবহার করে তারিখের ফরম্যাট পরিবর্তন করা হয়েছে, যেমন YYYY-MM-DD।
DataGrid Filtering
Flex DataGrid এ ফিল্টারিং ব্যবস্থাও উপলব্ধ, যার মাধ্যমে আপনি প্রদর্শিত ডেটাকে নির্দিষ্ট শর্তের উপর ভিত্তি করে ফিল্টার করতে পারেন।
Filtering Data
<mx:DataGrid id="dataGrid" dataProvider="{filteredData}">
<mx:columns>
<mx:DataGridColumn headerText="Name" dataField="name"/>
<mx:DataGridColumn headerText="Age" dataField="age"/>
</mx:columns>
</mx:DataGrid>
<mx:Script>
<![CDATA[
private var dataList:ArrayCollection = new ArrayCollection([
{name: "John", age: 28},
{name: "Jane", age: 32},
{name: "Jake", age: 25}
]);
private var filteredData:ArrayCollection = new ArrayCollection();
private function filterData():void {
var filter:AdvancedDataGridFilter = new AdvancedDataGridFilter();
filter.filterFunction = function(item:Object):Boolean {
return item.age > 30; // Filter data with age greater than 30
};
filteredData = dataList.filter(filter.filterFunction);
}
]]>
</mx:Script>
এখানে, filterData() ফাংশনটি age এর ভিত্তিতে ডেটাকে ফিল্টার করবে এবং শুধুমাত্র ৩০ বছরের বেশি বয়সের ব্যক্তিদের দেখাবে।
সারাংশ
- DataGrid কাস্টমাইজেশন: Flex এর DataGrid কম্পোনেন্টটি বিভিন্ন স্টাইলিং এবং কাস্টমাইজেশনের সুযোগ প্রদান করে, যেমন কলামের আকার, সেল রেন্ডারিং, কলামের শিরোনাম পরিবর্তন ইত্যাদি।
- Data Formatting: Flex এ ডেটার উপস্থাপন কাস্টমাইজ করতে formatter ব্যবহার করা হয়, যেমন NumberFormatter, CurrencyFormatter, DateFormatter ইত্যাদি।
- Filtering: Flex DataGrid এ ডেটা ফিল্টার করতে AdvancedDataGridFilter ব্যবহার করা যায়, যা ব্যবহারকারীর জন্য ডেটা আরও সহজভাবে অ্যাক্সেসযোগ্য করে তোলে।
এই সমস্ত ফিচার এবং কাস্টমাইজেশন Flex অ্যাপ্লিকেশন ডেভেলপমেন্টকে আরও শক্তিশালী এবং ব্যবহারকারীর জন্য উপযোগী করে তোলে।
Read more
