Pages

Search Site

Topics

Favorite Links

Archives

Entries for month: November 2008

Clearing framework RSLs from your Flash Player cache

November 29 2008 by Kalen Gibbons

Runtime Shared Libraries (RSLs) are a good way to reduce the size of your Flex applications.  A framework RSL, for example, is an external version of the Flex framework that can be stored in the user's Flash Player cache.  The great thing about this is that when a user downloads the RSL the first time it is stored in cache, and no matter what domain it was downloaded from, it can be used by all other Flex applications on the web.  The framework RSL is never downloaded again, meaning that your application doesn't need to contain any of the Flex framework code, thus reducing the size of your core application.

But this caching can also cause some difficulties while testing.  If you are creating a new application that will use an RSL, you will need to specify the path to it in your build options (of course, this local copy will only be referenced by users who don't already have the RSL in their cache).  Well, how do you know if this path is accurate if you already have the RSL in your cache?  When you test your application it will not try to access your local RSL if you already have it in cache. 

So what you need to do is clear out your Flash Player cache.  To do this, go to http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager03.html and uncheck "Store common Flash components to reduce download time."  When the pop-up box appears, click "Confirm" and your Flash Player cache will be cleared. 

Flash Player Setting Manager

Now that your cache is cleared you may re-check the box to restore your setting and turn caching back on. When you test your application for the first time it will require the framework to load from the RSL path you specified. You’ll know you have a problem if your application fails and gives you a message about unresolved RSL paths.

I prefer to keep caching turned off while testing, to get a better feel for what users will experience on their first visit to the application. However, don't forget to turn it back on after you're done testing.

1 comments Posted in Flex | How-To

How to drag, drop, and parse a CSV file in AIR

November 26 2008 by Kalen Gibbons

Drag and Drop a CSV file in Adobe AIRI've been playing around with Adobe AIR lately and I've really been enjoying it.  So I thought I'd put out this quick tutorial on how to drag and drop a file into your AIR application; in this case we will be using a CSV file, and then we will parse that file so that its data can be used in a datagrid.  You can download the full source code here.

Dragging a file into AIR:

First, we need to set up handlers to listen for the drag events.  We are going to set up two listeners, one for when an item is dragged over the app and one for when that item is dropped.

this.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER, dragEnterHandler);
this.addEventListener(NativeDragEvent.NATIVE_DRAG_DROP, dragDropHandler);

Then we'll set up the two handler function.  The dragEnterHandler function determines if the item is an acceptable file type.  You could use the different constants of the ClipboardFormats class to only accept specific file formats, but for now we will accept any valid file.

private function dragEnterHandler(evt:NativeDragEvent):void{
if(evt.clipboard.hasFormat(ClipboardFormats.FILE_LIST_FORMAT)){
NativeDragManager.acceptDragDrop(this);
}
}

Next, when the user drops the file, we will copy it from the clipboard, read its contents, and parse its values into a more usable data structure.

private function dragDropHandler(evt:NativeDragEvent):void{
NativeDragManager.dropAction = NativeDragActions.COPY;
//get an array of the files dropped in
var dropFiles:Array = evt.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;
//get the content of the file
var fileContent:String = getFileContent(dropFiles[0]);
//parse it to get an array of Orders
orders = parseCSV(fileContent);
}

 

Reading the content of the dropped file:

For this we will use the FileStream class.  The getFileContent function takes a generic file as its only parameter; it opens a FileStream, reads the contents of the file and returns that value as a string.

private function getFileContent(_file:File):String{
//open a fileStream to read the content of the file
var fileStream:FileStream = new FileStream();
fileStream.open(_file, FileMode.READ);
var fileContent:String = fileStream.readUTFBytes(fileStream.bytesAvailable);
fileStream.close();
return fileContent;
}

 

Parsing the CSV file:

Finally, we are going to take the content of the CSV file, which is now in the form of a string, and parse out its data to populate an Array.  We start by using the split() function to create an Array of line items. We use character code 10, which represents carriage returns, and character code 13, which represents new lines. to separate each line item.  Then we loop through the newly created array of line items and pull out each comma separated value.  At this point we have the information we need to populate the Order object and add that to our Array.

private function parseCSV(_content:String):Array{
//create temporary array to store the Orders
var csvArray:Array = new Array();
//break the csv into individual lines
var csvLines:Array = _content.split(String.fromCharCode(13,10));
//remove title row
csvLines.splice(0,1);
//loop over each line
for each(var s:String in csvLines){
var lineItems:Array = s.split(",");
var transaction:Order = new Order( lineItems[0],
new Date(lineItems[1]),
lineItems[2],
lineItems[3],
lineItems[4]);
csvArray.push(transaction);
}
return csvArray;
}

The data pulled from the CSV file is now in a more manageable form and can be used as a dataProvider for components or to populate AIR's built in SQLite database.  Of course, in this tutorial, for simplicity's sake, we assume that the file dropped into the application is a CSV file.  In your application you should have some trapping to determine the file type and process it accordingly.

0 comments Posted in Flex | ActionScript | AIR | How-To

My Flex workshop for the IECFUG

November 14 2008 by Kalen Gibbons

I recently presented a short beginner's workshop for the The Inland Empire ColdFusion User Group.  In the workshop we created a simple application that displayed hypothetical tracking data.  Through this application we covered many basic Flex topics and techniques, and I thought I would provide the files for anyone who wants them.  Download them here.

Tracker Styles Application

Here is a list of files you'll find the in ZIP folder, and a brief summary for each:

  1. tracker_start.mxml - view
    • This is where to get started.  With only 2 lines of mxml code, we create an application that displays all our data to the user. Pretty cool!  The sample XML data has been provided for you in the data folder.
  2. tracker_filters.mxml - view
    • This is the second file in the workshop.  Now that we are displaying the data to the user, we need to make it more usable. We want to make it easy for users to find the information they are looking for.  So, in this step we use the ArrayCollection's built in filterFunction capabilities to allow the user to easily and effeciently filter through the data. 
  3. tracker_charts.mxml
    • This is a charting component that will be used in the next step, the tracker_states application.  It charts the popularity of all the processes in our data.
  4. tracker_states.mxml - view
    • The third application in the workshop, in which we create a second state.  In this new state we add the tracker_charts component, giving users an alternative representation of the data.
  5. tracker_styles.mxml - view
    • The final step, in which we turn our bland, boring application into something more presentable.  All we do in this step is add a wonderful theme from ScaleNine.
  6. tracker_remoting.mxml
    • This file does not actually create a viewable application, it is just a reference file.  It is an example of how Flex can connect to ColdFusion; an alternative to using the Model data that we used in the preceeding applications.
  7. data folder
    • Contains the XML data used in all applications.
  8. assets folder
    • Includes the theme that was used in the tracker_styles application.

 

Copy the files into the src folder of your project and give it a crack.  I hope you find them useful.

 

0 comments Posted in Flex | How-To