Excel export from datagrid in flex

The following code is used to export data from datagrid to excel in flex.

Code:
            private function ExportToExcel(FileName:String)
            {
                try
                {
                    var fields:Array = new Array();
                    var sheet:Sheet;
                   
                    fields = [];
                    sheet = new Sheet();
                   
                    var rowCont:int = gridRpt.dataProvider.source.length;
                    var dataprovd:ArrayCollection = new ArrayCollection(gridRpt.dataProvider.source);
                   
                    sheet.resize(rowCont + 9,gridRpt.columnCount);
                   
                    var Col:Array = gridRpt.columns;
                    var Ex:int = 0;
                    var ExStr:String = TopPanel.title.toString();
                    var CurrentDateTime:Date = new Date();
                    var CurrentDF:DateFormatter = new DateFormatter();
                    CurrentDF.formatString = "LL:NN:SS A"
                    var DateTimeString:String = CurrentDF.format(CurrentDateTime);
                    sheet.setCell(0,0,"ABIS~PRO");
                    sheet.setCell(2,6,ExStr);
                    sheet.setCell(0,12,"Date :");
                    sheet.setCell(0,13,Perd.text);
                    sheet.setCell(1,12,"Time :");
                    sheet.setCell(1,13,DateTimeString);

                        for each(var DGField:DataGridColumn in Col)
                        {
                            fields.push(DGField.dataField.toString());
                            sheet.setCell(8,Ex,DGField.headerText.toString());
                            Ex++;
                        }

                        for(var r:int = 0;r< rowCont;r++)
                        {
                            var Rec:Object = dataprovd.getItemAt(r);
                            var Erow:int = r+1;
                            //insertRecordInSheet(Erow,sheet,Rec);
                            //var ColCount:int = ColsArr.length;
                            var Exc:int = 0;
                            for(var c:int = 0; c<fields.length; c++)
                            {
                                var ExFld:String =fields[c];
                                if(Rec[ExFld] != null)
                                {   
                                    sheet.setCell(Erow+8,Exc,Rec[ExFld].toString());
                                }
                                Exc++;
                            }                   
                        }

                    var Exls:ExcelFile = new ExcelFile();
                    Exls.sheets.addItem(sheet);
                    var Byt:ByteArray = Exls.saveToByteArray();
                    var FileRef:FileReference = new FileReference();
                    FileRef.addEventListener(Event.SELECT,alert);
                    var ExcStr:String = FileName;
                    FileRef.save(Byt,ExcStr);
                }
                catch(ex:Error)
                {
                    Alert.show(ex.toString());
                }
                finally{}
            }

Redirect from one mxml to another mxml in Flex

The following code explains how to redirect from one mxml to another mxml.


<mx:ViewStack width="100%" height="100%" id="Stack" width.allCollapsed="1168"        height.allCollapsed="495">
              <local:MXML NAME1 width="250%" height="100%"/>
              <local:MXML NAME2 width="250%" height="100%"/>
              <local:MXML NAME3 width="250%" height="150%"/>
              <local:MXML NAME4 width="250%" height="150%"/>
 </mx:ViewStack>

Generate multiple pages in PDF in flex

The following code is used to explain, How to generate multiple pages in PDF in flex.

            private function generatePDF():void
            {
                myPDF = new PDF(Orientation.PORTRAIT, Unit.MM, Size.A4);
                myPDF.setDisplayMode(Display.FULL_PAGE,Layout.SINGLE_PAGE);
                var newPage:Page = new Page(Orientation.PORTRAIT,Unit.MM,Size.A4);
                myPDF.addPage(newPage);
                for(var i:int=0;i<pageCount;i++)
                {                   
                    myPDF.addImage(datagridname,0,0,198,0,"PNG",100,1,"None","Normal",true,"");
                    datagridname.nextPage();
                    myPDF.addPage();
                }
                var bytes:ByteArray = myPDF.save(Method.LOCAL);
                var f:FileReference = new FileReference();
                f.save(bytes,"test.pdf");
            }

How to display reports in Flex

The following code generates reports in two tabs.In first tab reports generated in DataGrid and in second tab reports generated in Fusion Charts Using AdvancedDataGrid.

Code:
<?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:ProComp="ProComp.*"
               creationComplete="application1_creationCompleteHandler(event)">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script source="\\Common\\CommonScripts.as"/>
    <fx:Style source="\\Common\\ApplicationSkin.css" />
    <fx:Script>
        <![CDATA[
            import COMMON.*;

            import mx.charts.BarChart;
            import mx.charts.events.ChartItemEvent;
            import mx.collections.ArrayCollection;
            import mx.events.AdvancedDataGridEvent;
            import mx.events.FlexEvent;
            import mx.events.ListEvent;

            import com.adobe.fiber.runtime.lib.StringFunc;
            import com.as3xls.xls.ExcelFile;
            import com.as3xls.xls.Sheet;
           
            import mx.events.FlexEvent;
            import mx.utils.UIDUtil;
           
            import org.alivepdf.colors.RGBColor;
            import org.alivepdf.display.Display;
            import org.alivepdf.drawing.Joint;
            import org.alivepdf.fonts.FontFamily;
            import org.alivepdf.fonts.Style;
            import org.alivepdf.images.PNGImage;
            import org.alivepdf.layout.Layout;
            import org.alivepdf.layout.Orientation;
            import org.alivepdf.layout.Size;
            import org.alivepdf.layout.Unit;
            import org.alivepdf.pages.Page;
            import org.alivepdf.pdf.PDF;
            import org.alivepdf.saving.Method;
            import org.osmf.metadata.Metadata;
           
            private var myPDF:PDF;
            private var RowId:String = "";
           
            private var pdfData:ByteArray;
            private var contacts:ArrayCollection;
           
            [Bindable] public var collection:ArrayCollection = new ArrayCollection();

            [Bindable]
            private var AdvGrdArrCol:ArrayCollection= new ArrayCollection
            private var ParentArrCol:ArrayCollection= new ArrayCollection
            private var Sal:int;
            private var BarChartArr:ArrayCollection = new ArrayCollection

            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {
                TbRc.selected = true;
                Act.selected = true;
                Res.selected = true;
            }

            protected function Btn_Prv_clickHandler(event:MouseEvent):void
            {
                var a:int;
                RowId = UIDUtil.createUID().toString();
                var startDS:String = StringFunc.replaceAll(Perd.text,"/","");
                //var sDate:Date = DateField.stringToDate(startDS,"MMDDYYYY");
                var mm:String = StringFunc.left(startDS,2) //StringFunc.substring(sDate.toString(),4,3);
                var year:String = StringFunc.right(startDS,4);
                var FinYr:String = year + mm;
                if (Res.selected = true)
                    a = 0;
                else if (Acts.selected = true)
                    a = 1;
                useWebService("Test_Test", "Report", "", "", FinYr, RowId, a.toString(), "");
                addEventListener("DBExeComp",OnGridLoad)
            }
           
            private function OnGridLoad(evt:Event):void
            {
                removeEventListener("DBExeComp",OnGridLoad)
                collection = RepArrCol[0];
                dynamicColumn();
                gridRpt.dataProvider = RepArrCol[1];
               
                var TmpAct:String = "";
                var TmpActNew:String = "";
                for (var Loop:int=0; Loop<=RepArrCol[2].length-1;Loop++)
                {
                    var obj:Object = new Object();
                    var tmpArrNew:ArrayCollection = new ArrayCollection();
                    var CustArr:ArrayCollection = new ArrayCollection();
                    Sal = 0;
                    if (TmpAct != RepArrCol[2][Loop].ACT)
                    {
                        var objnew:Object = new Object();
                        tmpArrNew = new ArrayCollection();
                        obj['ACT'] = RepArrCol[2][Loop].ACT
                        TmpAct = RepArrCol[2][Loop].ACT
                        for (var i:int=0; i<=RepArrCol[2].length-1;i++)
                        {
                            if (TmpAct == RepArrCol[2][i].ACT)
                            {
                                /* BAR CHART */
                                var barobj:Object = new Object();
                                barobj['CUST'] = RepArrCol[2][i].CUST
                                barobj['VALUE'] = RepArrCol[2][i].VAL
                                tmpArrNew.addItem(barobj)
                            }
                        }
                        //obj['VAL'] = Sal 
                        objnew['detail2'] = tmpArrNew
                        CustArr.addItem(objnew)
                        obj['children'] = CustArr                           
                        ParentArrCol.addItem(obj)
                    }
                }
            }
           
            private function dynamicColumn():void
            {
                this.gridRpt._hideHdnColumn = true;
                this.gridRpt._headerText = StringFunc.replaceAll(collection.source[0].headerText.toString(),"~",",");
                this.gridRpt._columnType = StringFunc.replaceAll(collection.source[0].coltyp.toString(),"~",",");
                this.gridRpt._fontSize = 10;
                this.gridRpt._fontName = "Arial";
                this.gridRpt._columnWidth = StringFunc.replaceAll(collection.source[0].width.toString(),"~",",");
                this.gridRpt._dataField = StringFunc.replaceAll(collection.source[0].dataField.toString(),"~",",");
            }

            protected function cmdExport_clickHandler(event:MouseEvent):void
            {   
                if(gridRpt.dataProvider.source.length != 0 )
                {
                    ExportToExcel("Test.xls");
                }
                else
                {
                    Alert.show("Report is Empty!","Information");
                    return;
                }
            }
           
            private function ExportToExcel(FileName:String)
            {
                try
                {
                    var fields:Array = new Array();
                    var sheet:Sheet;
                   
                    fields = [];
                    sheet = new Sheet();           
                   
                    var rowCont:int = gridRpt.dataProvider.source.length;
                    var dataprovd:ArrayCollection = new ArrayCollection(gridRpt.dataProvider.source);
                   
                    sheet.resize(rowCont + 9,gridRpt.columnCount);
                   
                    var Col:Array = gridRpt.columns;
                    var Ex:int = 0;
                    var ExStr:String = "Test.xls";
                    sheet.setCell(2,1,ExStr);
                    //sheet.setCell(4,0,"Date From: " + dt_From.text + " " + "To: " + dt_To.text);
                   
                    for each(var DGField:DataGridColumn in Col)
                    {
                        fields.push(DGField.dataField.toString());
                        sheet.setCell(8,Ex,DGField.headerText.toString());
                        Ex++;
                    }
                   
                    for(var r:int = 0;r< rowCont;r++)
                    {
                        var Rec:Object = dataprovd.getItemAt(r);
                        var Erow:int = r+1;
                        //insertRecordInSheet(Erow,sheet,Rec);
                        //var ColCount:int = ColsArr.length;
                        var Exc:int = 0;
                        for(var c:int = 0; c<fields.length; c++)
                        {
                            var ExFld:String =fields[c];
                            if(Rec[ExFld] != null)
                            {
                                sheet.setCell(Erow+8,Exc,Rec[ExFld].toString());
                            }
                            Exc++;
                        }
                       
                    }
                    var Exls:ExcelFile = new ExcelFile();
                    Exls.sheets.addItem(sheet);
                    var Byt:ByteArray = Exls.saveToByteArray();
                    var FileRef:FileReference = new FileReference();
                    FileRef.addEventListener(Event.SELECT,alert);
                    var ExcStr:String = FileName;
                    FileRef.save(Byt,ExcStr);
                }
                catch(ex:Error)
                {
                    Alert.show(ex.toString());
                }
                finally{}
            }
           
            private function alert(event:Event):void
            {   
                Alert.show(event.currentTarget.name + " has been exported successfully!","Information");
            }

        ]]>
    </fx:Script>

    <mx:TabNavigator x="38" y="84" width="1108" height="417">
        <s:NavigatorContent label="SegmentwiseCOst" width="100%" height="100%">
            <s:BorderContainer width="1086" height="373" id="brd" depth="1" x="10" y="4">
                <ProComp:DataGridPro id ="gridRpt" depth="1" _showHScroll = "true"
                                     tabIndex="6" showDataTips="true" doubleClickEnabled="true" visible="true"
                                     _filter="true" _headerHeight="50" top="10" left="10" right="10" bottom="10" _lockColumnCount="1"/>
            </s:BorderContainer>
        </s:NavigatorContent>
        <s:NavigatorContent label="Charts" width="100%" height="100%">
            <mx:AdvancedDataGrid id="ChDg"
                                 width="1008" height="346"
                                 variableRowHeight="true" x="40" y="10">
                <mx:dataProvider>
                    <mx:HierarchicalData source="{ParentArrCol}"/>
                </mx:dataProvider>
                <mx:rendererProviders>
                    <mx:AdvancedDataGridRendererProvider
                        dataField="detail2"
                        renderer="BarChartRenderer"
                        />        
                </mx:rendererProviders> 
                <mx:columns>
                    <mx:AdvancedDataGridColumn dataField="ACT" headerText="Act" width="50"/>
                    <!--<mx:AdvancedDataGridColumn dataField="detail2" headerText="Bar" width="150"/>-->
                </mx:columns>      
            </mx:AdvancedDataGrid>
        </s:NavigatorContent>
    </mx:TabNavigator>
    <s:Label x="726" y="6" text="Period"/>
    <s:Label x="73" y="16" text="Report Group"/>
    <s:Label x="322" y="12" text="Account Type"/>
    <s:Label x="491" y="10" text="Report Type"/>
    <s:RadioButton x="172" y="12" label="TbRecon" id="TbRc" groupName="RepGrp"/>
    <s:RadioButton x="172" y="38" label="TbRecon with FgWip" id="TbFg" groupName="RepGrp"/>
    <s:RadioButton x="408" y="12" label="Actual" id="Act" groupName="AccTyp"/>
    <s:RadioButton x="408" y="38" label="Budget" id="Bud" groupName="AccTyp"/>
    <s:RadioButton x="408" y="64" label="Standard" id="Std" groupName="AccTyp"/>
    <s:RadioButton x="573" y="10" label="ResourceWise" id="Res" groupName="RepTyp"/>
    <s:RadioButton x="573" y="38" label="ActivityWise" id="Acts" groupName="RepTyp"/>
    <s:Button x="726" y="43" label="Preview" id="Btn_Prv" click="Btn_Prv_clickHandler(event)"/>
    <s:Button x="808" y="43" label="Export" id="Btn_Exp" click="cmdExport_clickHandler(event)"/>
    <s:Button x="891" y="43" label="Generate PDF" id="Btn_Pdf"/>
    <mx:DateField x="771" y="6" id="Perd"/>
</s:Application>

Output:

Sliding Menu Bar

The following code is used to display the Sliding  Menu Bar.Here Menus can be viewed when needed and hidden when not.......


<?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"
               width="100%" height="100%" xmlns:local="*">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;
            import mx.events.ListEvent;
           
             [Embed (source="/../Img/Plus.gif")]
            public var Plus:Class;

            [Embed (source="/../Img/Minus.gif")]
            public var Minus:Class;

            [Embed (source="/../Img/bar_arrow_right.png")]
            public var barright:Class;
           
            [Embed (source="/../Img/bar_arrow_left.png")]
            public var barleft:Class;

           
            [Bindable]
            private var ArrCol:ArrayCollection = new ArrayCollection
                ([
                    {item:'Master', children:['AccountCodeGrouping','AdvancedDataGrid']},
                    {item:'Charts', children:'FusionCharts'}
                ]); 
           
            private function showPanel():void
            {
                currentState=(currentState == 'PanelExpanded') ? 'allCollapsed' : 'PanelExpanded';

                if (pin.source == barleft)
                    pin.source = barright;
                else
                    pin.source = barleft;
            }

            protected function pin_clickHandler(event:MouseEvent):void
            {   
                showPanel();
            }
           
            private function load(event:MouseEvent):void
            {
                var a:int;

                if(Tree.selectedItem.toString() == 'AdvancedDataGrid')
                    a = 0;
                else if(Tree.selectedItem.toString() == 'AccountCodeGrouping')
                    a = 1;
                else if(Tree.selectedItem.toString() == 'FusionCharts')
                    a = 2;
                Stack.selectedIndex = a;
            }
           
            private function tree_itemClick(event:ListEvent):void
            {
                var item:Object = (event.currentTarget).selectedItem;
                if(Tree.dataDescriptor.isBranch(item))
                {
                    Tree.expandItem(item, !Tree.isItemOpen(item), true);
                }
            }
                   
        ]]>
    </fx:Script>

    <s:transitions>
        <s:Transition toState="PanelExpanded">
            <s:Parallel >
                <s:Resize target="{leftPanel}" duration="500"/>
                <s:Fade target="{leftPanel}"  duration="500" startDelay="250"/>
            </s:Parallel>
        </s:Transition>
    <s:Transition toState="allCollapsed">
            <s:Parallel>
                <s:Fade target="{leftPanel}" duration="500"/>
                <s:Resize target="{leftPanel}" duration="500" />
            </s:Parallel>
        </s:Transition>
    </s:transitions>

    <s:states>
        <s:State name="allCollapsed"/>
        <s:State name="PanelExpanded"/>
    </s:states>

    <s:VGroup width="100%" height="100%" gap="0" horizontalAlign="center" verticalAlign="middle">   
            <s:Group width="100%" height="100%" depth="2" >
            <s:Group width="100%" height="100%">
                <s:VGroup width="100%" height="100%" top="10" left="25" right="25">
                    <s:HGroup width="100%" height="100%" gap="1">
                        <s:VGroup width="175" height="100%" id="leftPanel" alpha.allCollapsed="0" width.allCollapsed="0"> <!--width.allCollapsed="0"-->
                                    <s:Group  bottom="10" height="100%" width="100%" >
                                        <mx:Tree id="Tree" dataProvider="{ArrCol}" labelField="item" width="200" height="100%" borderSkin="{null}"
                                                 folderClosedIcon="{null}" folderOpenIcon="{null}" click="load(event)" defaultLeafIcon="{null}"
                                                  useHandCursor="true" buttonMode="true" itemClick="tree_itemClick(event);" itemRenderer="ProComp.lblItem">
                                        </mx:Tree>
                                                 <!-- defaultLeafIcon="{Minus}" disclosureOpenIcon="{Minus}" disclosureClosedIcon="{Plus}" labelFunction="{fnTreeLable}" itemRenderer="ProComp.lblItem"-->       
                                    </s:Group>                   
                        </s:VGroup>
                        <s:VGroup width="7" height="100%" verticalAlign="middle" gap="0" horizontalAlign="center">
                            <s:BorderContainer width="2" height="100%" backgroundColor="blue" cornerRadius="0" mouseOut="showPanel()" visible="true" />
                            <mx:Image source="{barright}" click="pin_clickHandler(event)"
                                      id="pin" width.allCollapsed="10" x.allCollapsed="0" useHandCursor="true" buttonMode="true"/>
                            <s:BorderContainer width="2" height="100%" backgroundColor="blue" cornerRadius="0" mouseOut="showPanel()" visible="true"/>
                        </s:VGroup>
                        <s:VGroup width="100%" height="100%" paddingLeft="-1" top="5" bottom="5" right="10" gap="0">
                            <!--<s:HGroup id="HRptLink" width="100%" height="0%" />-->
                            <s:HGroup id="grpDGrid" width="100%" height="100%" width.allCollapsed="1168" height.allCollapsed="493">
                                <mx:ViewStack width="100%" height="100%" id="Stack" width.allCollapsed="1168" height.allCollapsed="495">
                                    <local:AdvanceDataGrid width="250%" height="100%"/>
                                    <local:AccountCodeGrouping width="250%" height="100%"/>
                                    <local:Charts width="250%" height="150%"/>
                                </mx:ViewStack>                           
                            </s:HGroup>
                        </s:VGroup>
                    </s:HGroup>
                </s:VGroup>       
            </s:Group>
        </s:Group>
</s:VGroup>
</s:Application>



Output:

True3D Chart

The following XML is used to generate True3D chart and it requires MSCombi3D.swf to generate the output.And the chart can be rotated in any direction.


<!-- 500 x 500 -->
<chart palette='2' caption='Country Comparison' showLabels='1' showvalues='0' decimals='0' numberPrefix='$' clustered='0' exeTime='1.5' showPlotBorder='0' zGapPlot='30' zDepth='90' divLineEffect='emboss' startAngX='10' endAngX='18' startAngY='-10' endAngY='-40'>
    <categories>
        <category label='Austria' />
        <category label='Brazil' />
        <category label='France' />
        <category label='Germany' />
<category label='USA' />
    </categories>
    <dataset seriesName='1998' color='8BBA00' showValues='0'>
        <set value='45000.65' />
        <set value='44835.76' />
        <set value='18722.18' />
        <set value='77557.31' />
        <set value='92633.68' />
    </dataset>
    <dataset seriesName='1997' color='F6BD0F' showValues='0'>
        <set value='57401.85' />
        <set value='41941.19' />
        <set value='45263.37' />
        <set value='117320.16' />
        <set value='114845.27' />
    </dataset>
 <dataset seriesName='1996' color='AFD8F8' showValues='0'>
        <set value='25601.34' />
        <set value='20148.82' />
        <set value='17372.76' />
        <set value='35407.15' />
        <set value='38105.68' />
    </dataset>
    <styles>
        <definition>
            <style name='captionFont' type='font' size='15' />
        </definition>
        <application>
            <apply toObject='caption' styles='captionfont' />
        </application>
    </styles>
</chart>

Output:

Angular Guage Chart

The following XML is used to generate Angular Guage chart and it requires Angularguage.swf to generate the output.

<chart manageResize="1" origW="340" origH="340" bgColor="FFFFFF" upperLimit="100" lowerLimit="0" showLimits="1" baseFontColor="666666"  majorTMNumber="11" majorTMColor="666666"  majorTMHeight="8" minorTMNumber="5" minorTMColor="666666" minorTMHeight="3" pivotRadius="20" showGaugeBorder="0" gaugeOuterRadius="100" gaugeInnerRadius="90" gaugeOriginX="170" gaugeOriginY="170" gaugeStartAngle="250" gaugeEndAngle="-70" placeValuesInside="1" gaugeFillMix="" pivotFillMix="{F0EFEA}, {BEBCB0}" pivotBorderColor="BEBCB0" pivotfillRatio="80,20" showShadow="0">
    <colorRange>
        <color minValue="0" maxValue="80" code="00FF00" alpha="0"/>
        <color minValue="80" maxValue="100" code="FF0000" alpha="50"/>
    </colorRange>
    <dials>
        <dial value="65" bordercolor="FFFFFF" bgColor="bebcb0, f0efea, bebcb0" borderAlpha="0" baseWidth="10" topWidth="3"/>
    </dials>
    <annotations>
        <annotationGroup x="170" y="170" >
        <!-- Draw the upper White Rounded Border -->
            <annotation type="circle" x="0" y="0" radius="150" borderColor= "bebcb0" fillAsGradient="1" fillColor="f0efea, bebcb0"  fillRatio="85,15"/>
            <annotation type="circle" x="0" y="0" radius="120" fillColor="bebcb0, f0efea" fillRatio="85,15" />
            <annotation type="circle" x="0" color="FFFFFF" y="0" radius="100" borderColor= "f0efea" />
        </annotationGroup>
    </annotations>
</chart>

Output: