January, 2011 | G-catch

January 18, 2011

Get Selected Checkbox row in Datagrid

Below example shows how to get the selected checkbox values from Datagrid.
CompanyDetails.xml

<?xml version=”1.0″ ?>
<content>
<item>
<Company>Google</Company>
<Feature>Search Engine / Mail / Social Media</Feature>
<url>www.google.com</url>
</item>
<item>
<Company>Yahoo</Company>
<Feature>Search Engine / Mail</Feature>
<url>www.yahoo.com</url>
</item>
<item>
<Company>Yahoo</Company>
<Feature>Search Engine / Mail</Feature>
<url>www.yahoo.com</url>
</item>
<item>
<Company>Yahoo</Company>
<Feature>Search Engine / Mail</Feature>
<url>www.yahoo.com</url>
</item>
<item>
<Company>Yahoo</Company>
<Feature>Search Engine / Mail</Feature>
<url>www.yahoo.com</url>
</item>
<item>
<Company>Yahoo</Company>
<Feature>Search Engine / Mail</Feature>
<url>www.yahoo.com</url>
</item>
<item>
<Company>Yahoo</Company>
<Feature>Search Engine / Mail</Feature>
<url>www.yahoo.com</url>
</item>
<item>
<Company>Yahoo</Company>
<Feature>Search Engine / Mail</Feature>
<url>www.yahoo.com</url>
</item>
<item>
<Company>Yahoo</Company>
<Feature>Search Engine / Mail</Feature>
<url>www.yahoo.com</url>
</item>
<item>
<Company>Yahoo</Company>
<Feature>Search Engine / Mail</Feature>
<url>www.yahoo.com</url>
</item>
<item>
<Company>Yahoo</Company>
<Feature>Search Engine / Mail</Feature>
<url>www.yahoo.com</url>
</item>
<item>
<Company>Yahoo</Company>
<Feature>Search Engine / Mail</Feature>
<url>www.yahoo.com</url>
</item>
<item>
<Company>Yahoo</Company>
<Feature>Search Engine / Mail</Feature>
<url>www.yahoo.com</url>
</item>
<item>
<Company>Yahoo</Company>
<Feature>Search Engine / Mail</Feature>
<url>www.yahoo.com</url>
</item>
<item>
<Company>Yahoo</Company>
<Feature>Search Engine / Mail</Feature>
<url>www.yahoo.com</url>
</item>
</content>

Sample.mxml

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”onCreate(event)” >
<mx:Script>
<![CDATA[
import mx.controls.Label;
import mx.collections.XMLListCollection;
import mx.controls.Alert;
import mx.collections.ArrayCollection;
private function openXMLValues(e:Event):void
{
var XMLConv:XMLList=new XMLList(e.target.data)
for(var i:int=0;i<XMLConv.item.length();i++)XMLConv.item[i].appendChild(<Select>false</Select>) // Dynamically adding another node “select” to bind it with the checkbox datagrid column
var XMLL:XMLListCollection=new XMLListCollection(XMLConv.item)
DG.dataProvider=XMLL;
DG.rowCount=XMLL.length;
PanID.height=300;
}
private function onCreate(e:Event):void
{
var XMLLoader:URLLoader=new URLLoader(new URLRequest(“c:\\CompanyDetails.xml”))
XMLLoader.addEventListener(Event.COMPLETE,openXMLValues)
}
private function GetSelected(e:Event):void
{
var ListBoxArray:ArrayCollection=new ArrayCollection()
for(var c:int=0;c<DG.dataProvider.length;c++) {
if(DG.dataProvider.getItemAt(c)[“Select”]==’true’)
{
ListBoxArray.addItem(String(DG.dataProvider.getItemAt(c)[“Company”]))
}
}
Result.dataProvider=ListBoxArray;
}
]]>
</mx:Script>
<mx:Panel width=”430″ id=”PanID”>
<mx:DataGrid x=”21″ y=”25″ width=”388″ id=”DG” >
<mx:columns>
<mx:DataGridColumn dataField=”Company” />
<mx:DataGridColumn dataField=”Feature” />
<mx:DataGridColumn itemRenderer=”{ChkRen}” />
</mx:columns>
</mx:DataGrid>
</mx:Panel>
<mx:Button x=”365″ y=”308″ label=”Get Selected” click=”GetSelected(event)” />
<mx:List x=”438″ y=”10″ width=”217″ height=”191″ id=”Result”></mx:List>
<mx:Component id=”ChkRen”>
<mx:CheckBox selected=”{(data.Select==’true’)?true:false}” click=”{data.Select = (data.Select != ‘true’) ? ‘true’ : ‘false’;}” /> <!– // Selected attribute only accepts boolean type (true | false). data.Select returns a string from XMLListCollection, So casting from string to boolean is necessary here
On click of checkbox, its inverting the value of Select from “true to false” and vice versa –>

</mx:Component>
</mx:Application>

OutPut

January 17, 2011

Checkbox in Datagrid

Below example shows how to customize column in datagrid with Checkbox.

We have an issue with the item renderer while scrolling the datagrid. It automatically deselects the checkbox what you have selected. So as a workaround for this to avoid the scroll bar for datagrid and make the datagrid height to fit all the rows in one shot and put that datagrid in a panel with Limited height, where panel will have the scrollbar. It would not affect the datagrid itemrenderer.

CompanyDetails.xml

}
private function onCreate(e:Event):void
{
var XMLLoader:URLLoader=new URLLoader(new URLRequest(“c:\\CompanyDetails.xml”))
XMLLoader.addEventListener(Event.COMPLETE,openXMLValues) }
]]>
</mx:Script>
<mx:Panel width=”430″ id=”PanID”>
<mx:DataGrid x=”21″ y=”25″ width=”388″ id=”DG” >
<mx:columns>
<mx:DataGridColumn dataField=”Company” />
<mx:DataGridColumn dataField=”Feature” />
<mx:DataGridColumn headerText=”Select” itemRenderer=”{ChkRen}” />
</mx:columns>
</mx:DataGrid>
</mx:Panel>
<mx:Component id=”ChkRen”>
<mx:CheckBox/>
</mx:Component>
</mx:Application>

Output

January 13, 2011

Timer using setInterval in Flex

Below example shows to set a time interval to show the values from an Array.

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”onCreate(event)”>
<mx:Script>
<![CDATA[
private var Count:int=0; private var ServerTimer;
private function onCreate(e:Event):void
{
ServerTimer=setInterval(TimerFunction,1000) // Calling a function after 1 sec.
}
private function TimerFunction():void
{
ServerName.text=Count.toString() //Show the count value in the Label
Count+=1 // Increasing count value by 1
}
]]>
</mx:Script>
<mx:Label text=”Starting” fontSize=”40″ id=”ServerName” x=”67″ y=”83″> </mx:Label>
</mx:Application>

Output

/**/

January 12, 2011

Get values from Flex Datagrid

The below example shows you how to retrieve values from datagrid on click of the Button embedded in Datagrid.
CompanyDetails.xml

Sample.mxml

Screenshot

January 12, 2011

SharePoint List to Datagrid in Flex

The following example will show you how you can use a Button control as a custom item renderer in a DataGrid in Flex.
The XMLListCollection class provides collection functionality to an XMLList object and makes available some of the methods of the native XMLList class.

Refer article Access SharePoint List in Flex to understand how the List can be read in Flex.

XML Screenshot

MXML

<?xml version=”1.0″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” initialize=”onCreate(event);” >
<mx:Script>
<![CDATA[
import mx.controls.Alert
import mx.collections.XMLListCollection;
import mx.collections.ArrayCollection;
private function onCreate(e:Event):void
{
var XMLLoader:URLLoader= new URLLoader(new URLRequest(“[server]/_vti_bin/owssvr.dll?Cmd=Display&List={311A4A47-E6B4-49FA-916C-900A698E1188}&XMLDATA=TRUE”)) //Replace Server with your sharePoint link
XMLLoader.addEventListener(Event.COMPLETE,openXMLValues)
function openXMLValues(e:Event):void
{ var XMLL:XMLList=new XMLList(e.target.data)
var rsNS:Namespace = XMLL.namespace(“rs”);
var zNS:Namespace = XMLL.namespace(“z”);
var sNS:Namespace = XMLL.namespace(“s”);
var Values:XMLListCollection=new XMLListCollection(XMLL.rsNS::data.zNS::row);
DG.dataProvider=Values;
}
}
]]>
</mx:Script>
<mx:DataGrid x=”21″ y=”25″ width=”596″ height=”220″ id=”DG” >
<mx:columns>
<mx:DataGridColumn dataField=”@ows_LinkFilename” />
<mx:DataGridColumn itemRenderer=”{ButtonRen}” /> </mx:columns>
</mx:DataGrid><mx:Component id=”ButtonRen”>
<mx:Button label=”Generate” > </mx:Button>
</mx:Component></mx:Application>

To Define Component to be called in itemRenderer property

<mx:Component id=”ButtonRen”>
<mx:Button label=”Generate” > </mx:Button>
</mx:Component>

ScreenShot

January 11, 2011

XML to Datagrid in Flex

The XMLListCollection class provides collection functionality to an XMLList object and makes available some of the methods of the native XMLList class.

CompanyDetails.xml

MXML

ScreenShot

January 11, 2011

Custom Columns in Datagrid

A DataGrid is a formatted table whose items can be edited and displayed via custom renderers.

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”onCreate(event)”>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private var Values:ArrayCollection=new ArrayCollection([
{Company:”Google”,Feature:”Mail / Search Engine/Social Network”},
{Company:”Yahoo”,Feature:”Mail /Search Engine”}
]);
private function onCreate(e:Event):void
{
DG.dataProvider=Values;
}
]]>
</mx:Script>
<mx:DataGrid x=”21″ y=”25″ width=”388″ height=”220″ id=”DG”>
<mx:columns>
<mx:DataGridColumn dataField=”Company”> </mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:Application>

Output

<mx:columns> is to use the columns property of the DataGrid control and the <mx:DataGridColumn> tag to select the DataGrid columns, specify the order in which to display them, and set additional properties Each column in a DataGrid control is represented by a DataGridColumn object.

<mx:DataGrid x=”21″ y=”25″ width=”388″ height=”220″ id=”DG”>
<mx:columns>
<mx:DataGridColumn dataField=”Company”> </mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:Application>

January 11, 2011

Simple Datagrid In Flex

A DataGrid is a formatted table whose items can be edited and displayed via custom renderers.

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”onCreate(event)”>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private var Values:ArrayCollection=new ArrayCollection([
{Company:”Google”,Feature:”Mail / Search Engine/Social Network”},
{Company:”Yahoo”,Feature:”Mail /Search Engine”}
]); //Creating an Array Collection with “Company and Feature as Identifiers

private function onCreate(e:Event):void
{
DG.dataProvider=Values; // Assigning “Values” Arraycollection as a Dataprovider to DataGrid, “Comany” and “Feature” are considered automatically to be the column names for Datagrid
}
]]>
</mx:Script>
<mx:DataGrid x=”10″ y=”21″ width=”388″ height=”220″ id=”DG”>
</mx:DataGrid>
</mx:Application>

Output

January 10, 2011

Save File in AS3

Opens a dialog box that lets the user save a file to the local filesystem. Although Flash Player has no restriction on the size of files you can upload, download, load or save, the player officially supports sizes of up to 100 MB.

The save() method first opens a dialog box that asks the user to enter a filename and select a location on the local computer to save the file. once Selected and confirms the save operation (for example, by clicking Save), the save process begins. Listeners receive events to indicate the progress, success, or failure of the save operation.

FileReference save method has only to be invoked upon user interaction, for example by a mouse click or button press.

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” >
<mx:Script>
<![CDATA[
private var file:FileReference = new FileReference();
private function onCreate(e:Event):void
{
var Txt:String=”Hello World”
file.save(Txt,”Sample.txt”); // Initiates the save event and opens up a dialog box for user to enter filename and select a location. Once confirmed, it get saved
} ]]>
</mx:Script>
<mx:Button x=”133″ y=”209″ label=”Create File” click=”onCreate(event)”/>
</mx:Application>

January 5, 2011

Store Object in an Array

Storing Object into an Array

First Method

var Ar:Array=new Array() //Ar is an Array and obj is an object which have two identifiers fname and lname.
var Obj:Object={fname:”Steve”,lname:”Chan”} //Define obj with two identifiers(variables) fname and lname
Ar[0]=Obj // Store obj in Ar at 0 index
trace(Ar[0].fname) //Returns Steve

Second Method
var Ar:Array=new Array({fname:”Steve”,lname:”Chan”}) //Store object in Ar at 0 index
trace(Ar[0].fname) //Returns Steve

Third Method

var Ar:Array=new Array() //Ar is an Array
var Obj:Object={fname:”Steve”,lname:”Chan”} //Define obj with two identifiers(variables) fname and lname
Ar.push(obj) // Pushing (Storing Obj in ar) starts from 0 index
trace(Ar[0].fname) //Returns Steve

Fourth Method

var Ar:Array=new Array() //Ar is an Array
Ar[0].fname=”Steve” //creating an identifier named “fname” in an Array at 0 index.
Ar[0].lname=”Chan” //creating an identifier named “lname” in an array at 0 index
trace(Ar[0].fname) // return Steve