Sunday, October 23, 2011

Exporting to excel with AS3XLS

Straight to the point. Code below shows how to do it. I guess I have added enough comments to explain the flow.


<?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%" initialize="init()">
    <fx:Script>
        <![CDATA[
import com.as3xls.biff.BIFFVersion;
import com.as3xls.biff.BIFFWriter;
import com.as3xls.biff.Record;
import com.as3xls.xls.ExcelFile;
import com.as3xls.xls.Formatter;
import com.as3xls.xls.Sheet;
import com.as3xls.xls.Type;

import mx.collections.ArrayCollection;
import mx.collections.ListCollectionView;
import mx.core.UIComponent;

import utils.ExcelExportUtil;

            private function init():void
   {
                var data:Array = new Array();
                for(var r:uint = 0; r < 50; r++)
{
                    data.push({col1:"Col1: " + r, col2:"Col2: " + r, col3:(r+1), col4:new Date(), col5:"Col5: " + r});
                }
                dataGrid.dataProvider = new ArrayCollection(data);
            }

    private function export():void
    {

var s:Sheet = new Sheet();
s.resize(datagrid.dataprovider.length, datagrid.columns.length);
                        var row:*;

for(var r:uint = 0; r < datagrid.dataprovider.length; r++)
{
for(var c:uint = 0; c < s.cols; c++)
{
row = datagrid.dataprovider.getItemAt(r);
rowValue = row[c];
s.setCell(r, c, (rowValue != null ? rowValue : ""));
}
}

var xls:ExcelFile = new ExcelFile();
xls.sheets.addItem(s);
var bytes:ByteArray = xls.saveToByteArray();

var fr:FileReference = new FileReference();
fr.save(bytes, "ExcelFile.xls");

    }
        ]]>
    </fx:Script>
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    <s:Button label="Export" click="export()"/>
    <mx:DataGrid id="dataGrid" width="100%" height="100%" />
</s:Application>

Friday, October 21, 2011

Closing PopUp on Esc Press

A nice to have feature that I was implementing, brought me to this. As it turns out, this actually is very easy to implement. Code below.

The Application File


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

<fx:Script>
<![CDATA[
import components.TestPopUp;

import mx.core.FlexGlobals;
import mx.managers.PopUpManager;

private function addPopUp(event:MouseEvent):void
{
var popup:TestPopUp = new TestPopUp();
PopUpManager.addPopUp(popup, FlexGlobals.topLevelApplication as DisplayObject, true);
PopUpManager.centerPopUp(popup);
}

]]>
</fx:Script>
<s:Button id="addPopBtn" label="Add Pop Up" click="{this.addPopUp(event)}"/>
</s:Application>

Custom Pop Up

<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow 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="400" height="300" creationComplete="init()"
  close="onClose(event)">
<fx:Script>
<![CDATA[
import mx.events.CloseEvent;
import mx.managers.PopUpManager;
private function init():void
{
stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
}
private function onKeyDown(event:KeyboardEvent):void
{
if(event.keyCode == Keyboard.ESCAPE)
{
PopUpManager.removePopUp(this);
}
}
private function onClose(event:CloseEvent):void
{
PopUpManager.removePopUp(this);
}
]]>
</fx:Script>
<s:Label text="Hi There. Press Esc to close me."/>
</s:TitleWindow>

Monday, October 17, 2011

Understanding Spark Skinning - Part 3

This is the third and final part of the 3 part series to understand Skinning in Spark.
PART 1 - Introduction to Skinning

Skinning a Button Component

In this part we'll take a simple Spark Button and see if we can do something interesting with it. So let us take a moment to figure out what we want to do with the button. What I am planning to do is to give my button a custom shape and change the colors. The code below just does that. We use the Spark Skin class and extend it to create our custom skin.
The final product looks something like this. 
Default

On Hover


I hope I have added enough comments.. :) 

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
minWidth="40" minHeight="40">

        <!-- Add the HostComponent for the skin -->
<fx:Metadata>
[HostComponent("spark.components.Button")]
</fx:Metadata>

        <!-- Define the states for the component -->
<s:states>
<s:State name="up"/>
<s:State name="down"/>
<s:State name="over"/>
<s:State name="disabled"/>
</s:states>

        <!-- 
                 The Path tag allows to draw custom shapes. This currently draws a star.
                 With the filters we add the background for the button
                 This draws the default skin that will be used for all states
        -->
<s:Path data="M 50 0 L 70 30 H 100 L 80 60 L 100 100 L 50 80 L 0 100 L 20 60 L 0 30 H 30 L 50 0">
<s:filters>
<s:DropShadowFilter blurX="20" blurY="20" alpha="0.5" distance="11" angle="90"/>
</s:filters>
<s:stroke>
<s:LinearGradientStroke weight="1">
<s:GradientEntry color="0x0000FF" ratio=".25"/>
<s:GradientEntry color="0xFFFFFF"/>
</s:LinearGradientStroke>
</s:stroke>
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFFFFFF"/>
<s:GradientEntry color="0x0000FF"/>
</s:LinearGradient>
</s:fill>
</s:Path>


        <!-- 
                 The Path tag allows to draw custom shapes. This currently draws a star.
                 With the filters we add the background for the button
                 This draws a custom layout for the "over" state
        -->
<s:Path data="M 50 0 L 70 30 H 100 L 80 60 L 100 100 L 50 80 L 0 100 L 20 60 L 0 30 H 30 L 50 0" includeIn="over">
<s:stroke>
<s:LinearGradientStroke weight="1">
<s:GradientEntry color="0x0000FF" ratio=".25"/>
<s:GradientEntry color="0xFFFFFF"/>
</s:LinearGradientStroke>
</s:stroke>
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFFFFFF"/>
<s:GradientEntry color="0x0000FF" ratio=".25"/>
</s:LinearGradient>
</s:fill>
</s:Path>


        <!--
                 The label is added to add the text for the button
        -->
<s:Label id="labelDisplay" horizontalCenter="0" verticalCenter="-5"/>

</s:SparkSkin>