Tuesday 17 July 2012

How to use Column Chart / How to Use Pie Chart

Here You will see how to use Pie Chart  in Flex.
How to Use Column Chart Chart in Flex.

Following example Demonstrate how to use chart control in flex.

Download Source Code Here 

How To Use Filter Function In Flex

How To Use Filter Function In Flex

We Can use Filter Function Filer Data In Array Collection.

Go through The Code Following Example Filter Data For
Name and Salary Fields


<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:local="*" viewSourceURL="srcview/index.html" initialize="init()">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import com.as3xls.xls.Cell;
import com.as3xls.xls.ExcelFile;
import com.as3xls.xls.Sheet;

import mx.collections.ArrayCollection;
import mx.controls.Alert;

private var fileReference:FileReference;
private var xls:Class;
private var sheet:Sheet;

[Bindable]
public var ItemDGDataProvider:ArrayCollection = new
ArrayCollection([
{name:"Ajay",salary:"25000",jDate:"5-Jun-2010",desg:"Soft Engineer"},
{name:"Mayur",salary:"28000",jDate:"13-Sep-2010",desg:"Soft Tester"},
{name:"Ashish",salary:"34500",jDate:"5-Jan-2011",desg:"Project manager"},
{name:"Deepak",salary:"28000",jDate:"17-Feb-2011",desg:"Business Analyst"},
{name:"Ravi",salary:"22400",jDate:"7-Mar-2010",desg:"Graphics Designer"},
{name:"Summet",salary:"18000",jDate:"5-Jun-2010",desg:"Trainee"},
{name:"Sanket",salary:"35000",jDate:"18-July-2011",desg:"QA Lead"},
{name:"Arun",salary:"15000",jDate:"4-Apr-2012",desg:"Graphics Designer"},
{name:"Dinesh",salary:"25000",jDate:"5-Jun-2010",desg:"Soft Engineer"},
{name:"Mrunal",salary:"28000",jDate:"13-Sep-2010",desg:"Soft Tester"},
{name:"Sanjay",salary:"34500",jDate:"5-Jan-2011",desg:"Project manager"},
{name:"Abhishek",salary:"28000",jDate:"17-Feb-2011",desg:"Business Analyst"},
{name:"Shiv",salary:"22400",jDate:"7-Mar-2010",desg:"Graphics Designer"},
{name:"Raja",salary:"18000",jDate:"5-Jun-2010",desg:"Trainee"},
{name:"Pratic",salary:"35000",jDate:"18-July-2011",desg:"QA Lead"},
{name:"Vishal",salary:"15000",jDate:"4-Apr-2012",desg:"Graphics Designer"}

]);
public function init():void
{
ItemDGDataProvider.filterFunction = filterForTestData ;
}
private function filterForTestData(item:Object):Boolean{
var isMatch:Boolean = false
if(item.name.toLowerCase().search(txtFilter.text.toLowerCase()) != -1){
isMatch = true
}
if(item.salary.search(txtFilter.text.toLowerCase()) != -1){
isMatch = true
}
return isMatch;
}

/* the filter funcion is called when refresh() method is invoked on
the collection */
private function applyFilter():void{
ItemDGDataProvider.filterFunction = filterForTestData
ItemDGDataProvider.refresh();
}


]]>
</fx:Script>
<mx:TextInput id="txtFilter" x="4" y="2" width="202" change="applyFilter()"/>
<mx:DataGrid id="rebateByItemDG"
includeInLayout="true"
visible="true"
dataProvider="{ItemDGDataProvider}" width="100%"
editable="true" x="1" y="28"/>
</s:Application>



How to Play Video and Mp3 Files in Flex

How to Play Video and Mp3 files in Flex.


Flash Builder has it own VideoPlayer Control to play your Flv files, all you need is just set the source property.
ex :
<s:VideoPlayer id="myVidPlayer" source="/a.flv" autoPlay="true"/>


But for playing Mp3 Files Flex does not provide any special player for it.
To play Mp3 files you need to use
SoundTransform class : Contains properties for volume and panning.
Sound object to load your sound files, still there are no visuals available to display status for record we are playing.

In Following Example You will get skin Mp3 Player
with PAUSE-PLAY, Volume Controller. And Video  Player.
 You just Need to Set
myVideos List of all your video Url
myMp3 List of all your Mp3 Url.

Download Project Here



Export Data In Excel using Flex



How to export data in Excel Using Flex
To export data in Excel all you need is as3xls.swc.

Download as3xls Here
Drag and Drop This  as3xls.swc file in your Lib folder.


Refer The Following Code To Create Excel File From Your Flex Application.



<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:local="*" viewSourceURL="srcview/index.html">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import com.as3xls.xls.Cell;
import com.as3xls.xls.ExcelFile;
import com.as3xls.xls.Sheet;

import mx.collections.ArrayCollection;
import mx.controls.Alert;

private var fileReference:FileReference;
private var xls:Class;
private var sheet:Sheet;

[Bindable]
public var ItemDGDataProvider:ArrayCollection = new
ArrayCollection([
{name:"Ajay",salary:"25000",jDate:"5-Jun-2010",desg:"Soft Engineer"},
{name:"Mayur",salary:"28000",jDate:"13-Sep-2010",desg:"Soft Tester"},
{name:"Ashish",salary:"34500",jDate:"5-Jan-2011",desg:"Project manager"},
{name:"Deepak",salary:"28000",jDate:"17-Feb-2011",desg:"Business Analyst"},
{name:"Ravi",salary:"22400",jDate:"7-Mar-2010",desg:"Graphics Designer"},
{name:"Summet",salary:"18000",jDate:"5-Jun-2010",desg:"Trainee"},
{name:"Sanket",salary:"35000",jDate:"18-July-2011",desg:"QA Lead"},
{name:"Arun",salary:"15000",jDate:"4-Apr-2012",desg:"Graphics Designer"},
{name:"Dinesh",salary:"25000",jDate:"5-Jun-2010",desg:"Soft Engineer"},
{name:"Mrunal",salary:"28000",jDate:"13-Sep-2010",desg:"Soft Tester"},
{name:"Sanjay",salary:"34500",jDate:"5-Jan-2011",desg:"Project manager"},
{name:"Abhishek",salary:"28000",jDate:"17-Feb-2011",desg:"Business Analyst"},
{name:"Shiv",salary:"22400",jDate:"7-Mar-2010",desg:"Graphics Designer"},
{name:"Raja",salary:"18000",jDate:"5-Jun-2010",desg:"Trainee"},
{name:"Pratic",salary:"35000",jDate:"18-July-2011",desg:"QA Lead"},
{name:"Vishal",salary:"15000",jDate:"4-Apr-2012",desg:"Graphics Designer"}

]);

[Bindable]
private var rebateDGDataProvider:ArrayCollection = new
ArrayCollection();

private function fileReference_Select(event:Event):void
{
fileReference.addEventListener(Event.COMPLETE,fileReference_Complete);
fileReference.load();  
}



private function fileReference_Complete(event:Event):void
{
var fileData:ByteArray  = fileReference.data;
var excelFile:ExcelFile = new ExcelFile();
var noOfRows:int;
var noOfColumns:int;
if(fileData!=null && fileData.length > 0){
excelFile.loadFromByteArray(fileData);
var sheet:Sheet = excelFile.sheets[0];
if(sheet!=null)
{
noOfRows=sheet.rows;
noOfColumns = sheet.cols;
for(var row:int = 0; row<noOfRows;row++)
{
var cellObject:Object ={};
for(var
col:int=0;col<noOfColumns;col++)
{
var cell:Cell = new Cell();
var cellValue:String = new
String();
cell = sheet.getCell(row,col);
if(cell!=null)
{
cellValue
=(cell.value).toString();

addProperty(cellObject,col,cellValue);
}
}// inner for loop ends

rebateDGDataProvider.addItem(cellObject);
} //for loop ends
}  
}
fileReference = null;
}
private function
addProperty(cellObject:Object,index:int,cellValue:String):void
{
if(index == 0)
cellObject.name = cellValue;
else if(index == 1)
cellObject.value = cellValue;
else if(index == 2)
cellObject.qty = cellValue;
else if(index == 3)
cellObject.cost = cellValue;
}

private function exportToExcel():void
{
sheet = new Sheet();
var dataProviderCollection:ArrayCollection = rebateByItemDG.dataProvider as ArrayCollection;
var rowCount:int =  dataProviderCollection.length;
sheet.resize(rowCount+4,10);
sheet.setCell(0,0,"Name");
sheet.setCell(0,1,"Salary");
sheet.setCell(0,2,"Joining Date");
sheet.setCell(0,3,"Designation");

for(var r:int=0;r<rowCount;r++)
{
sheet.setCell(r+1,0,String(ItemDGDataProvider[r].name));
sheet.setCell(r+1,1,String(ItemDGDataProvider[r].salary));
sheet.setCell(r+1,2,String(ItemDGDataProvider[r].jDate));
sheet.setCell(r+1,3,String(ItemDGDataProvider[r].desg))
}

var xls:ExcelFile = new ExcelFile();
xls.sheets.addItem(sheet);

var bytes: ByteArray = xls.saveToByteArray();
var fr:FileReference = new FileReference();
fr.save(bytes,"SampleExport.xls");
}

private function insertRecordInSheet(row:int,sheet:Sheet,
record:Object):void
{
var colCount:int = 4;
for(var c:int;c<colCount;c++)
{
sheet.setCell(row,c,record.name);
sheet.setCell(row,c,record.salary);
sheet.setCell(row,c,record.jDate);
sheet.setCell(row,c,record.desg);
}
}
]]>
</fx:Script>
<mx:DataGrid id="rebateByItemDG"
includeInLayout="true"
visible="true"
dataProvider="{ItemDGDataProvider}" width="100%"
editable="true" x="0" y="26"/>
<mx:Button label="Export To Excel"
  click="exportToExcel();" width="128" height="24"/>
</s:Application>



Flex 4 Tutorial Document

Get Flex-4 tutorial document provided by ADOBE.
Here you will find all the required specification to build a application in Flex.
Download

Thursday 12 July 2012

How To Use Popup Window in Flex

Popup window is used when You need to display certain action over your main application.
while using popup window all you need a Display Control that must be of type TitleWindow, otherwise you need to type cast it.
from your main application
create a instance of PopUpManager
Add your Display object in it.
While Adding your Display Object PopupManger Accept Three parameter
PopUpManager.addPopUp(window:iDisplayObject,parentObject,Model)
window:iDisplayObject : Your Window need to PopUp
parentObject                : Parent Which hold This PopUp
Model                          : If true backgroung Application is not  accessible, if false  accessible


Here You get your window code.

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx" layout="absolute" width="400" height="222"
title="Popup Window Example."
showEffect="{wD}" hideEffect="{wU}" visible="false" creationComplete="titlewindow1_creationCompleteHandler(event)">

<fx:Script>
<![CDATA[
import flashx.textLayout.factory.TruncationOptions;

import mx.events.FlexEvent;
protected function button1_clickHandler(event:MouseEvent):void
{
this.visible = false;
}

protected function titlewindow1_creationCompleteHandler(event:FlexEvent):void
{
this.visible = true;
}

]]>
</fx:Script>

<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<mx:WipeDown duration="500" id="wD"/>
<mx:WipeUp duration="500" id="wU"/>
</fx:Declarations>
<mx:Button x="120" y="152" label="Ok" click="button1_clickHandler(event)"/>
<mx:Label x="9" y="21" text="Old Password" width="91"/>
<mx:Label x="10" y="62" text="New Password" width="90"/>
<mx:Label x="12" y="97" text="Confirm" width="100"/>
<mx:TextInput x="119" y="20"/>
<mx:TextInput x="119" y="60"/>
<mx:TextInput x="120" y="97"/>

</mx:TitleWindow>

Main App Code

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx" layout="absolute" minWidth="500" minHeight="500" width="569" height="374">
<fx:Script>
<![CDATA[
import examples.PopUpWin;

import mx.containers.TitleWindow;
import mx.managers.PopUpManager;
protected function button1_clickHandler(event:MouseEvent):void
{
var _disPlayObj:PopUpWin = new PopUpWin;
PopUpManager.addPopUp(_disPlayObj,this,true);
PopUpManager.centerPopUp(_disPlayObj);
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<mx:Button x="235" y="183" label="Change Password" width="100" click="button1_clickHandler(event)"/>
</mx:Application>
Example





Gauge Control In Flex / DegrafaGauge


DegrafaGauge is a very interactive tool to display your data in visual form.



Download Project Here : Download
Enjoy..