Search This Blog

2009-11-23

Flex Tutorials 8-Using Datagrid and TileList in Adobe Flex

Create a reviewlist.xml file as follows under src\assets location
<?xml version="1.0" encoding="utf-8"?>
<list>
<review>
<review_id>38</review_id>
<restaurant_id>58</restaurant_id>
<reviewer>RJ Talbot</reviewer>
<title>Nice Visit</title>
<review_text>Good food, great prices and nice staff. Worth the visit!</review_text>
<review_date>2005-03-13 14:41:54.0</review_date>
<rating>4</rating>
</review>
<review>
<review_id>23</review_id>
<restaurant_id>53</restaurant_id>
<reviewer>Bill Taylor</reviewer>
<title>Loved it!</title>
<review_text>This is an amazing place!</review_text>
<review_date>2005-03-30 15:07:05.0</review_date>
<rating>5</rating>
</review>
</list>

Inline DataBinding with Autognerated column=true
<?xml version="1.0"?>
<mx:Application backgroundColor="#FFFFFF" xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="srv.send()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var reviewList:ArrayCollection;
]]>
</mx:Script>
<mx:HTTPService id=" simpletest " url="assets\datagriddata.xml" result=" reviewList = new ArrayCollection(simpletest.lastResult. list. review)"/>// result=" reviewList = simpletest.lastResult. list. review"
<mx:DataGrid dataProvider="{ reviewList }"/>
</mx:Application>

Autogenerated Column=false
<mx:DataGrid id="reviewGrid" dataProvider="{reviewList}">
<mx:columns>
<mx:DataGridColumn dataField="review_date" headerText="Review Date"/>
<mx:DataGridColumn dataField="reviewer" headerText="Reviewer"/>
</mx:columns>
</mx:DataGrid>

Format Datagrid column with LabelFunction+DateFormatter
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="simpletest.send();" >
<mx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridColumn;
import mx.collections.ArrayCollection;
[Bindable]
private var reviewList:ArrayCollection;
private function dateFormat(item:Object, review_date:DataGridColumn):String{
return myDate.format(item.review_date);
}
]]>
</mx:Script>
<mx:HTTPService id="simpletest" url="assets\reviewlist.xml" result="reviewList = simpletest.lastResult.list.review"/>
<mx:DateFormatter id="myDate" formatString="DD-MMM-YYYY"/>
<mx:DataGrid dataProvider ="{reviewList}">
<mx:columns>
<mx:DataGridColumn dataField="reviewer" headerText="Reviewer"/>
<mx:DataGridColumn dataField="review_date" headerText="Review Date" labelFunction="dateFormat" width="150"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
N.B.LableFunction Doesn’t take () when calling AS function ,Label Function in AS always function signature will be remain same for any other application.

Editable Datagrid+ itemEditor+ itemRenderer
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="simpletest.send()" >
<mx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridColumn;
import mx.collections.ArrayCollection;
[Bindable]
private var reviewList:ArrayCollection;
]]>
</mx:Script>
<mx:HTTPService id="simpletest" url="assets\reviewlist.xml" result="reviewList = simpletest.lastResult.list.review;"/>

<mx:DataGrid dataProvider ="{reviewList}" editable="true">
<mx:columns>
<mx:DataGridColumn dataField="reviewer" headerText="Reviewer"/>
<mx:DataGridColumn dataField="rating" headerText="Rating" itemEditor="mx.controls.NumericStepper"/>
</mx:columns>
</mx:DataGrid>
<mx:DataGrid dataProvider ="{reviewList}" editable="true">
<mx:columns>
<mx:DataGridColumn dataField="reviewer" headerText="Reviewer"/>
<mx:DataGridColumn dataField="rating" headerText="Rating" itemRenderer="mx.controls.NumericStepper" rendererIsEditor="true"/>
/*<mx:DataGridColumn dataField="rating"
headerText="Rating" editorDataField="true">
<mx:itemEditor>
<mx:Component>
<mx:NumericStepper minimum="1" maximum="5"/>
</mx:Component>
</mx:itemEditor>
</mx:DataGridColumn>*/
</mx:columns>
</mx:DataGrid>
</mx:Application>

Output: For rendererIsEditor="true" the output will be as follows

For editorDataField="true" the output will be as follows


Custom column contain muliple row in a cell using itemrenderer +VariableRowHeight for a cell
Create mxml component “RatingDetail.mxml”
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:DateFormatter id="simpleDate" formatString="DD-MMM-YYYY"/>
<mx:Label text="Rating:{data.rating}"/>
<mx:Label text="Review Date: {simpleDate.format(data.review_date)}"/>
</mx:VBox>
In the main application the MXML will be as follows
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" CreationComplete="simpletest.send()" >
<mx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridColumn;
import mx.collections.ArrayCollection;
[Bindable]
private var reviewList:ArrayCollection;
]]>
</mx:Script>
<mx:HTTPService id="simpletest" url="assets\reviewlist.xml"
result="reviewList = simpletest.lastResult.list.review"/>
<mx:DataGrid dataProvider ="{reviewList}" variableRowHeight="true" width="35%">
<mx:columns>
<mx:DataGridColumn dataField="reviewer" headerText="Reviewer"/>
<mx:DataGridColumn dataField="rating" headerText="Rating Info" itemRenderer="RatingDetail"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>



TileList:Inbuid image controller based on the data sructure
Create photo.xml file as follows under src\assets folder
<?xml version="1.0" encoding="utf-8"?>
<list>
<food>
<food_name>Artichoke Dip</food_name>
<photo>artichokeDip.jpg</photo>
</food>
<food>
<food_name>Bread Pudding</food_name>
<photo>breadPudding.jpg</photo>
</food>
</list>

Create a Thumbnail.mxml under the folder src/ itemRenderers /
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Image source="{'assets/'+data.photo}"/>
<mx:Label text="{data.food_name}"/>
</mx:VBox>
In the main application file:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="simpletest.send()">

<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var photoColl:ArrayCollection;
[Bindable]
private var photoColl:ArrayCollection;
private function tileChanged(event:Event):void{
foodName.text = event.target.selectedItem.food_name;
}
]]>
</mx:Script>

<mx:HTTPService id="simpletest" url="assets\photo.xml"
result="photoColl=simpletest.lastResult.list.food"/>
<mx:DataGrid dataProvider="{photoColl}"/>
<mx:Label id="foodName" text="Watch here"/>
<mx:TileList dataProvider="{photoColl}" itemRenderer="itemRenderers.Thumbnail" width="700" rowHeight="170" columnWidth="220" change="tileChanged(event)" >
</mx:TileList>
</mx:Application>
Output :

No comments: