FLEX Tutorial / Flex Examples

How to use Column Chart / How to Use Pie Chart

2012-07-17T22:54:00.002-07:00

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

2012-07-17T04:42:00.000-07:00

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>

</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

2012-07-17T04:06:00.000-07:00

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

2012-07-17T03:24:00.001-07:00

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>

</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

2012-07-17T02:51:00.003-07:00

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

How To Use Popup Window in Flex

2012-07-12T06:34:00.002-07:00

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>

<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>

</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

2012-07-12T05:58:00.001-07:00

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

Download Project Here : Download
Enjoy..

Using Google Maps in a Flex / Flex + Google Map

2012-07-11T04:04:00.000-07:00

Google Map API is available in For various Languages say for java script, Action Script

before we get started download Google API for Flex

Download Google API HERE : Download

Get Google Map API Key

Get the Google Maps ActionScript 3.0 component.

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="absolute" width="100%" height="100%"

viewSourceURL="srcview/index.html">

<mx:Panel title="Google Maps Flash API Marker Creator Demo"

backgroundColor="#FFFFFF" width="100%" height="100%"

creationComplete="init();">

</mx:Panel>

<mx:Script>

<![CDATA[

import com.google.maps.LatLng;

import com.google.maps.Map;

import com.google.maps.MapEvent;

import com.google.maps.controls.MapTypeControl;

import com.google.maps.controls.PositionControl;

import com.google.maps.controls.ZoomControl;

import com.google.maps.services.ClientGeocoder;

import com.google.maps.services.GeocodingEvent;

import com.google.maps.services.GeocodingResponse;

import com.google.maps.services.Placemark;

import mx.controls.Alert;

import mx.events.ResizeEvent;

private var googleMap:Map;

private var geocoder:ClientGeocoder;

private function init():void {

googleMap = new Map();

googleMap.key = "ABQIAAAAvZMU4-DFRYtw1UlTj_zc6hT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQcT1h-VA8wQL5JBdsM5JWeJpukvw";

googleMap.addEventListener(MapEvent.MAP_READY, googleMap_mapReady);

googleMap.setSize(new Point(mapContainer.width, mapContainer.height));

googleMap.addControl(new ZoomControl());

googleMap.addControl(new MapTypeControl());

mapContainer.addChild(googleMap);

}

private function geocoder_geocodingSuccess(evt:GeocodingEvent):void {

var result:Placemark = GeocodingResponse(evt.response).placemarks[0];

googleMap.setCenter(result.point, 13);

}

private function geocoder_geocodingFailure(evt:GeocodingEvent):void {

Alert.show("Unable to geocode address: " + evt.name);

}

private function googleMap_mapReady(evt:MapEvent):void {

geocoder = new ClientGeocoder();

geocoder.addEventListener(GeocodingEvent.GEOCODING_SUCCESS, geocoder_geocodingSuccess);

geocoder.addEventListener(GeocodingEvent.GEOCODING_FAILURE, geocoder_geocodingFailure);

geocoder.geocode(textInput.text);

}

private function button_click(evt:MouseEvent):void {

geocoder.geocode(textInput.text);

}

private function mapContainer_resize(evt:ResizeEvent):void {

if (googleMap) {

googleMap.setSize(new Point(mapContainer.width, mapContainer.height));

}

]]>

</mx:Script>

<mx:String id="APP_ID" source="appid.txt" />

<mx:ApplicationControlBar dock="true">

<mx:Form styleName="plain">

<mx:FormItem label="Address:"

direction="horizontal">

<mx:TextInput id="textInput"

text="India,pune" />

<mx:Button id="button"

label="Submit"

click="button_click(event);" />

</mx:FormItem>

</mx:Form>

</mx:ApplicationControlBar>

<mx:UIComponent id="mapContainer"

width="100%"

height="100%"

resize="mapContainer_resize(event);" />

</mx:Application>

How to use Item Renderer in Flex

2012-07-11T03:15:00.001-07:00

Item Renderer Is a greate feature provided by Flex. Using Item-Renderer you can Display Data In required manner. item-Renderer basically used with List Base Controls .i.e Data Grid, Combobox etc.

In addition to controlling the display of data using an item renderer, the DataGrid, List, and Tree controls let users edit the data. For example, you could let users update the Quantity column of a DataGrid control

In our Example we will see how to use renderers with

1)Use Item Renderer with Combobox.

2)use Item Renderer with DataGrid.

Like This You can also use it with different controls.

<?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" width="100%" height="100%" viewSourceURL="srcview/index.html">

<fx:Declarations>

</fx:Declarations>

<fx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

[Bindable]public var _data:ArrayCollection = new ArrayCollection([{name:"Rabit",file:"a.gif"},

{name:"Bird",file:"b.gif"},{name:"Dyno",file:"c.jpg"},{name:"Fire",file:"d.jpg"}]);

]]>

</fx:Script>

<mx:VBox width="100%" height="100%">

<mx:DataGrid dataProvider="{_data}" width="100%" height="50%">

<mx:columns>

<mx:DataGridColumn dataField="name" headerText="File Name"/>

<mx:DataGridColumn dataField="File">

<mx:itemRenderer>

<fx:Component>

<mx:Image width="100" height="100" source="{data.file}"/>

</fx:Component>

</mx:itemRenderer>

</mx:DataGridColumn>

</mx:columns>

</mx:DataGrid>

<mx:ComboBox dataProvider="{_data}" text="">

<mx:itemRenderer>

<fx:Component>

<mx:Image width="100" height="100" source="{data.file}"/>

</fx:Component>

</mx:itemRenderer>

</mx:ComboBox>

</mx:VBox>

</s:Application>

How to Export into PDF/ / Flex + PDF / Generate PDF From Flex

2012-07-10T22:58:00.000-07:00

To generate PDF files from Flex all you need is some external liberies like AlivePDF.swc or generatePdf.swc.
Im my Example i use Alive PDF as its Free and easy to use.
Get AlivePDF.swc
use following save structure to add images or Ui Container to add in PDF file
Get AlivePDF Here : AlivePDF
protected function savePDF():void
{
var myPDFEncoder:PDF = new PDF (Orientation.LANDSCAPE, Unit.MM);
myPDFEncoder.setDisplayMode(Display.FULL_PAGE);
myPDFEncoder.addPage();
myPDFEncoder.addImage(ChartDetails,null,0,0,myPDFEncoder.getMargins().width,myPDFEncoder.getMargins().height);

var bytes:ByteArray = myPDFEncoder.save(Method.LOCAL);
var fx:FileReference = new FileReference();
fx.save(bytes,"ABC.pdf");
}

2012-07-05T22:31:00.001-07:00