Dinesh- Flex/AIR Blog

I was trying to create an AIR app, where i need to export my  datagrid content to excel and give it for the user . I used as3xls-1.0.swc for the excel operation, thought of sharing my solution to the web:-)…

In the below example  i used webservice to get data for the datagrid, thought this could also help
the begginners how to fetch data through webservice and display in datagrid…

Now coming to the code,Flex has the powerful method for filtering the data in ArrayCollection.
This can be done by assigning filterFunction to the arrayCollection.

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”initApp()”>
<mx:Script>
<![CDATA[
import mx.rpc.soap.LoadEvent;
import mx.events.ListEvent;
import mx.controls.Alert;
import mx.collections.ArrayCollection;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;

[Bindable]
private var gridData:ArrayCollection;

/* on creationComplete,the wsdl data is loaded */
private function initApp():void{
webService.wsdl = “http://www.abundanttech.com/WebServices/DeadOrAlive/DeadOrAlive.asmx?WSDL”;
webService.addEventListener(LoadEvent.LOAD,dataLoaded)
webService.loadWSDL();
}

/* once the dataloads,calling the particular method
of the webservice to get the particular data set*/
private function dataLoaded(e:LoadEvent):void{
webService.getTodaysBirthdays.send();
}

/* once we get the resultant data,the data assigned to the datgrid(this
is an simple example for getting data from webservice) */
private function resultHandler(e:ResultEvent):void{
gridData = ArrayCollection(e.result.Tables.Table.Rows);
total.text = gridData.length.toString();
}
/*
Here once the refresh method called,
Flex passes the each row data into the (applyFilter)function as an object
*/
private function filterGrid():void{
gridData.filterFunction = applyFilter;
gridData.refresh()
total.text = gridData.length.toString();
}
/* This is the important function where
we need to put our logic for filtering the data
For True – the row value is displayed
For False – the row value is filtered*/
private function applyFilter(item:Object):Boolean{
if(minAge.text <= item.Age && item.Age <= maxAge.text )
return true;
else
return false;
}

/* Reseting the data is simple,since we are not deleting at anystage,
the data will always remains in the memory */
private function resetData():void{
gridData.filterFunction = null;
gridData.refresh()
total.text = gridData.length.toString();
minAge.text = ”;
maxAge.text = ”;
}
]]>
</mx:Script>
<mx:WebService id=”webService” result=”resultHandler(event)” />
<mx:DataGrid id=”dg” x=”10″ y=”124″ width=”498″  height=”274″ dataProvider=”{gridData}” />
<mx:Label x=”147″ y=”61″ text=”Min Age:”/>
<mx:Label x=”147″ y=”98″ width=”95″ text=”No of Persons:”/>
<mx:Text x=”253.5″ y=”98″ width=”124″ id=”total”/>
<mx:Label x=”277″ y=”61″ text=”Max Age:”/>
<mx:Button x=”389″ y=”59″ label=”Filter” click=”filterGrid()”/>
<mx:TextInput x=”209″ y=”59″ width=”33″ height=”20″ id=”minAge”/>
<mx:TextInput x=”343″ y=”59″ width=”29.5″ id=”maxAge”/>
<mx:Button label=”Reset” click=”resetData()” x=”389″ y=”96″/>
</mx:Application>

//Assign your html content to this variable
var htmlContent:string;

var imageRegExp:RegExp = /<img\s+src\s*=\s*["']([^"']+)["']\s*/ig;

//gets all the img tag content and stores in array
var imagePathArray:Array = htmlContent.match(imageRegExp);

for(var i:uint=0;i<imagePathArray.length;i++)
{
//provides the imagepath
var imageLink:String = imagePathArray[i].replace(/<img\s+src\s*=/ig,”");
//provides the imagefilename
var imageFileName:String = imageLinkPath.substring((imageLink.lastIndexOf(‘\/’))+1,imageLink.length-2);
}

Main.mxml:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” xmlns:local=”*”>
<local:MyPanel width=”469″ height=”290″ x=”78″ y=”51″>

<mx:ControlBar height=”39″ width=”520″ horizontalAlign=”center”>
<mx:Button label=”Add New”/>
<mx:HSlider width=”90″ minimum=”0″ maximum=”100″ snapInterval=”10″/>
<mx:Button label=”RemoveSelected” />
<mx:HSlider width=”106″ minimum=”0″ maximum=”100″ snapInterval=”10″/>
</mx:ControlBar>
</local:MyPanel>
</mx:Application>

MyPanel.as:

package
{
import mx.containers.Panel;
import mx.controls.Button;

public class MyPanel extends Panel
{
private var btn:Button;

public function MyPanel()
{
super();
}
override protected function createChildren() : void
{
super.createChildren();
btn = new Button();
btn.label = ‘Button’;
btn.visible = true;
btn.includeInLayout = true;
rawChildren.addChild( btn );
}
override protected function updateDisplayList (unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);

btn.setActualSize( btn.getExplicitOrMeasuredWidth(),
btn.getExplicitOrMeasuredHeight() );

var y:int = 0;
var x:int = 0;
btn.move(x, y);
}
}
}

The ControlBar class extends Box and The ControlBar container lets you place controls

at the bottom of a Panel or TitleWindow container.The ControlBar tag must be the last child tag

of the enclosing tag for the Panel or TitleWindow container.

Thought it might be useful for begginers learning flex Datagrid…

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”initApp()”>
<mx:Script>
<![CDATA[
import mx.events.ListEvent;
import mx.events.DataGridEvent;
import mx.events.ItemClickEvent;
import mx.collections.ArrayCollection;

[Bindable]
private var initalData:ArrayCollection;

private function initApp():void{
initalData = new ArrayCollection([{first:'aaa',last:'zzz',email:'aaazzz@yahoo.com'},
{first:'bbb',last:'yyy',email:'bbbyyy@yaoo.com'},
{first:'ccc',last:'xxx',email:'cccxxx@yahoo.com'}]);
}

private function editSelectedRow(e:ListEvent):void{
trace(e.currentTarget.selectedItem.first); //output- selectedItem value
trace(e.currentTarget.selectedItem.last);//output- selectedItem value
trace(e.currentTarget.selectedItem.email);//output- selectedItem value
}

]]>
</mx:Script>

<mx:DataGrid width=”435″ height=”148″ id=”dg” dataProvider=”{initalData}” itemClick=”editSelectedRow(event)”>
<mx:columns>
<mx:DataGridColumn headerText=”FirstName” dataField=”first”/>
<mx:DataGridColumn headerText=”LastName” dataField=”last”/>
<mx:DataGridColumn headerText=”Email” dataField=”email”/>
</mx:columns>
</mx:DataGrid>

</mx:Application>

var str:String=”  123456789    “;

Trace(str.length); //15
Trace(StringUtil.trim(str).length); //9

StringUtil.trim method removes all whitespace characters from the beginning and end of the specified string.

The StringUtil utility class has some more methods that will be more useful when you work with String objects within Flex:-)

Alert.show(“You are using flash version”+flash.system.capabilities.version.tostring());

this will give you the Flash Player Version installed in your system:-)

Mouse.hide()—–use this method when ever you want to hide windows default cursor

Mouse.show()—-use this method to display the hidded windows default cursor

These methods are commonly used when user mouseover any video player,where we can hide the default window cursor:-)

<mx:Label text=”change cursor” useHandCursor=”true” mouseChildren=”false” buttonMode=”true”/>

same property can be applied for setting handcursor in canvas,button..