Adobe Flex Authors: Matthew Lobas, PR.com Newswire, Shelly Palmer, Kevin Benedict

Related Topics: Adobe Flex

Adobe Flex: Article

CSV in Flash MX 2004

Make your classes easy and flexible

CSV is a format that has been around for a long time. It's a simple way to store multiple rows with multiple columns and it can be easily imported into a variety of commonly used desktop applications. This article examines the use of CSV-formatted data in Flash. We will write a class in ActionScript 2.0 to handle all of our CSV functionality and then we will use this class to populate the Macromedia v2 Data Grid Component.

Why Use a CSV File?
CSV is a very simple format. At its core it is essentially a large string that has rows separated by a delimiter and columns within each row delimited by a comma. Because of its use of rows and columns, this data format is perfectly suited for record sets, whereas an XML-formatted record set is more complicated.

Another good reason to use CSV is that it can be viewed by many common desktop applications. Any spreadsheet program, such as Microsoft Excel, can view, modify, or create CSV files. Unlike an XML-formatted record set, users can open a CSV file and easily read the information.

Like XML, CSV is data formatted within a file. It's not tied to any specific software or platform and it doesn't need a server in order to deliver it to the client. This makes CSV and XML files a very portable way to handle data. You could build a Web- based Flash application using a CSV or XML file and then easily use that same code to build a CD-ROM-based application.

CSV will not always be the right solution for your project. XML is usually a better solution for delivering data to the client because of its versatility. Any time your data is not formatted in a series of rows and columns, CSV should be avoided. You should also refrain from using the CSV format if you have multiple levels of complex data types. For example, if you have an array or a list in one of your cells, you should probably use XML to define your data. XML is better at separating out different data types and handling multiple levels of embedded data. CSV should only be used for primitive data types (String, Number, and Boolean) that are housed in the row-and-column format.

CSV Specifications
The first thing you'll notice about a CSV file is that it has rows and columns. The rows are delimited by a line break, a carriage return, or a combination of the two. The columns within each row are separated by a comma. Many times the first row of the file is used to define the column headers; we'll talk more about that when we begin parsing the data in our custom class.

Many CSV files will use something called a qualifier, the most common qualifier being the double quote ("). This character is used to surround each column's data. Below you can see the difference between a file with a qualifier and one without a qualifier.

CSV data without a qualifier:
Field 1,Field 2,Field 3,Field 4
Field 5,Field 6,Field 7,Field 8

CSV data with a qualifier:
"Field 1","Field 2","Field 3","Field 4"
"Field 5","Field 6","Field 7","Field 8"

Building the CSV Class
Before we begin programming our CSV class, we need to define exactly what we need this class to do:

  1. The class will need to load in an external CSV file.
  2. The class will need to parse the data into a Flash object. The format we want to get the CSV data into would be an array of objects (or associative arrays), with the object's key being the column header.
  3. The parsing will need to be able to pull the column headers from the first row of the CSV; however, we will also want to give the user the option to override this feature by specifically defining the columns in an array prior to parsing the file.
  4. We also need the parser to be able to handle qualifiers. We will allow the user to define the qualifier prior to parsing the CSV data.
We'll start our class by defining it. Our class won't be using the constructor for anything, so we can leave that method empty.

class CSV {
	function CSV() {}

Next we need to define our class's parameters:

  • csvData is a private array that will hold the parsed CSV data.
  • onLoad is a public method that the user can overwrite to get a callback when the data is loaded and parsed.
  • columns is a public array that the user can define prior to parsing the CSV data to manually define the column headers.
  • qualifier is a public string that the user can define prior to parsing the CSV data. Qualifiers assist with more accurate parsing. We will default this value to an empty string.

private var csvData:Array;
public var onLoad:Function;
public var columns:Array;
public var qualifier:String = '';

The first task that we need our class to do is load data in from a file. We'll accomplish this by creating a load method, which will simply take in the CSV file's path as its only parameter. The load method will use the LoadVars class to load the file into Flash, but we will actually incorporate an undocumented method within the LoadVars class, called onData. This method works exactly like the XML.onData method. It allows us to get the raw file data without having it parsed by the LoadVars class.

public function load(csvPath:String):Void {
	var csvLoad:LoadVars = new LoadVars();
	csvLoad._parent = this;
	csvLoad.onData = function(rawData:String) {

Notice that in our LoadVars.onData method we are calling a method within our class, called onData. We will create that method to handle the parsing of the CSV data after the file has loaded. Once the data is parsed it will pass it back to the user through the onLoad method. We won't actually define the onLoad method. To handle the load method callback, the user will define this method. Users could also override the onData method if they didn't want the data parsed right away.

public function onData(rawData:String):Void {
	csvData = parseCSV(rawData);

Next we'll add the parser method. We'll make this method public so users can utilize it without loading in the CSV data from a file. The parser is the most complicated part of this class - it is also the part of the class where the most can go wrong.

Our parser method will take a raw CSV string as its sole parameter and return the parsed data as an array of objects. The first two things our parser method must do is determine the row and column delimiters. We already know that the row delimiter is a carriage return (\r), a new line (\n), or both (\r\n). A quick search of the string will help us determine what the actual row delimiter is. The column delimiter is always a comma in the CSV specification; however, we can make our parsing more accurate by adding the qualifier before and after the delimiter. This new concatenated string will be our column delimiter.

To begin parsing the CSV string we will split the string into an array of its rows. This will allow us to loop through the rows and parse each row individually.

If the column's parameter has not been defined prior to running this parser method, then we can assume the first row in the CSV file holds the column headings. We will populate the column's array from this row.

As we loop through the rows we will split each row into an array of its columns. If the row doesn't have the same number of columns as the columns parameter, then we will skip that row. As we loop through the columns within each row we will place the data into an object using the column heading as the key. We will then append this object to the end of the array that we will be returning (see Code I).

We also need to create a private method called removeQualifier that supports the parser. This method will pull out the qualifier at the beginning and end of each row (see Code II).

In order to expose the private csvData parameter, we will create a getter method called data. This method will simply return the parsed data to the user. We do this to protect the csvData parameter from being set outside the class.

public function get data():Array {
	return csvData;

Using the CSV Class with the Data Grid Component
In this example we will use Macromedia's Data Grid Component to display our CSV data. The data grid's dataProvider parameter accepts an array of objects as a valid value, so we won't have to manually populate the grid. The first thing we need to do is place an instance of the data grid on the stage, then give it an instance name of dataGrid_mc. Then we will create a new layer and name it Actions. We will put all of our code in frame 1 of the Actions layer. Make sure your CSV.as class file is in the same folder as your FLA file.

In frame 1 of our Actions layer we will begin writing our code, creating an instance of the CSV class.

var csvLoad:CSV = new CSV();

Next we define our columns and qualifier parameters before we parse the CSV file.

csvLoad.columns = new Array('Column 1', 'Column 2', 'Column 3');
csvLoad.qualifier = '"';

We then define our onLoad method, where we populate the data grid with the parsed CSV data. Finally, we call the load method and send it the path to our CSV file as an argument.

csvLoad.onLoad = function() {
	dataGrid_mc.dataProvider = this.data;

I hope this article gives you an idea of how you can use CSV data within your Flash application. But more important, I hope it has given you a concrete example of how you can build an ActionScript 2.0 class and how you can make your class easy and flexible to the developers that implement it. This CSV class may not be the solution for your application, but the principles of object-oriented programming should be used in nearly every application you build with Flash.

Note: Class code can be downloaded from www.sys-con.com/mx/sourcec.cfm.

More Stories By Danny Patterson

Danny Patterson is a Consultant
specializing in Flash and Web technologies. Danny is a Partner and
Author at Community MX (communitymx.com) and a member of Team Macromedia
Flash. He is a Certified Advanced ColdFusion MX, Flash MX and Flash MX
2004 Developer. You can check out his weblog at DannyPatterson.com.

Comments (5) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.

Most Recent Comments
kalavati 05/27/09 07:31:00 AM EDT

According to my current requirement I want to know is there simple Flex compatible parser for use in parsing CSV (comma separated value) format files. This may already be available in Flex Builder. If not what is the best way to parse these files.

kalavati 05/27/09 01:17:00 AM EDT

According to my current requirement I want to know is there simple Flex compatible parser for use in parsing CSV (comma separated value) format files. This may already be available in Flex Builder. If not what is the best way to parse these files.

Raul Justiniano 07/25/07 06:52:20 PM EDT

The link: www.sys-con.com/mx/sourcec.cfm. in this blog entry is not a available on the server. It is supposed to be a link to download the class.

Abel 07/25/07 11:05:29 AM EDT

Link to cownload the class not available.

Nermeen Elhelw 06/13/06 07:50:03 AM EDT

so u managed to load data from csv file,

i want to make the user write a word then hit search, and flash searches a certain field in the .csv file and have it display the other fields that are related to the search term

do u know how to do that?????

please help

@ThingsExpo Stories
November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA. Penta Security is a leading vendor for data security solutions, including its encryption solution, D’Amo. By using FPE technology, D’Amo allows for the implementation of encryption technology to sensitive data fields without modification to schema in the database environment. With businesses having their data become increasingly more complicated in their mission-critical applications (such as ERP, CRM, HRM), continued ...
SYS-CON Events announced today that Enzu will exhibit at the 19th International Cloud Expo, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA. Enzu’s mission is to be the leading provider of enterprise cloud solutions worldwide. Enzu enables online businesses to use its IT infrastructure to their competitive advantage. By offering a suite of proven hosting and management services, Enzu wants companies to focus on the core of their online busine...
For basic one-to-one voice or video calling solutions, WebRTC has proven to be a very powerful technology. Although WebRTC’s core functionality is to provide secure, real-time p2p media streaming, leveraging native platform features and server-side components brings up new communication capabilities for web and native mobile applications, allowing for advanced multi-user use cases such as video broadcasting, conferencing, and media recording.
SYS-CON Events announced today that Cloudbric, a leading website security provider, will exhibit at the 19th International Cloud Expo, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA. Cloudbric is an elite full service website protection solution specifically designed for IT novices, entrepreneurs, and small and medium businesses. First launched in 2015, Cloudbric is based on the enterprise level Web Application Firewall by Penta Security Sys...
Established in 1998, Calsoft is a leading software product engineering Services Company specializing in Storage, Networking, Virtualization and Cloud business verticals. Calsoft provides End-to-End Product Development, Quality Assurance Sustenance, Solution Engineering and Professional Services expertise to assist customers in achieving their product development and business goals. The company's deep domain knowledge of Storage, Virtualization, Networking and Cloud verticals helps in delivering ...
The best way to leverage your Cloud Expo presence as a sponsor and exhibitor is to plan your news announcements around our events. The press covering Cloud Expo and @ThingsExpo will have access to these releases and will amplify your news announcements. More than two dozen Cloud companies either set deals at our shows or have announced their mergers and acquisitions at Cloud Expo. Product announcements during our show provide your company with the most reach through our targeted audiences.
In the next five to ten years, millions, if not billions of things will become smarter. This smartness goes beyond connected things in our homes like the fridge, thermostat and fancy lighting, and into heavily regulated industries including aerospace, pharmaceutical/medical devices and energy. “Smartness” will embed itself within individual products that are part of our daily lives. We will engage with smart products - learning from them, informing them, and communicating with them. Smart produc...
SYS-CON Events announced today that 910Telecom will exhibit at the 19th International Cloud Expo, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA. Housed in the classic Denver Gas & Electric Building, 910 15th St., 910Telecom is a carrier-neutral telecom hotel located in the heart of Denver. Adjacent to CenturyLink, AT&T, and Denver Main, 910Telecom offers connectivity to all major carriers, Internet service providers, Internet backbones and ...
SYS-CON Events announced today that Coalfire will exhibit at the 19th International Cloud Expo, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA. Coalfire is the trusted leader in cybersecurity risk management and compliance services. Coalfire integrates advisory and technical assessments and recommendations to the corporate directors, executives, boards, and IT organizations for global brands and organizations in the technology, cloud, health...
SYS-CON Events announced today that Transparent Cloud Computing (T-Cloud) Consortium will exhibit at the 19th International Cloud Expo®, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA. The Transparent Cloud Computing Consortium (T-Cloud Consortium) will conduct research activities into changes in the computing model as a result of collaboration between "device" and "cloud" and the creation of new value and markets through organic data proces...
The Internet of Things (IoT), in all its myriad manifestations, has great potential. Much of that potential comes from the evolving data management and analytic (DMA) technologies and processes that allow us to gain insight from all of the IoT data that can be generated and gathered. This potential may never be met as those data sets are tied to specific industry verticals and single markets, with no clear way to use IoT data and sensor analytics to fulfill the hype being given the IoT today.
WebRTC defines no default signaling protocol, causing fragmentation between WebRTC silos. SIP and XMPP provide possibilities, but come with considerable complexity and are not designed for use in a web environment. In his session at @ThingsExpo, Matthew Hodgson, technical co-founder of the Matrix.org, discussed how Matrix is a new non-profit Open Source Project that defines both a new HTTP-based standard for VoIP & IM signaling and provides reference implementations.
In his general session at 18th Cloud Expo, Lee Atchison, Principal Cloud Architect and Advocate at New Relic, discussed cloud as a ‘better data center’ and how it adds new capacity (faster) and improves application availability (redundancy). The cloud is a ‘Dynamic Tool for Dynamic Apps’ and resource allocation is an integral part of your application architecture, so use only the resources you need and allocate /de-allocate resources on the fly.
We're entering the post-smartphone era, where wearable gadgets from watches and fitness bands to glasses and health aids will power the next technological revolution. With mass adoption of wearable devices comes a new data ecosystem that must be protected. Wearables open new pathways that facilitate the tracking, sharing and storing of consumers’ personal health, location and daily activity data. Consumers have some idea of the data these devices capture, but most don’t realize how revealing and...
A completely new computing platform is on the horizon. They’re called Microservers by some, ARM Servers by others, and sometimes even ARM-based Servers. No matter what you call them, Microservers will have a huge impact on the data center and on server computing in general. Although few people are familiar with Microservers today, their impact will be felt very soon. This is a new category of computing platform that is available today and is predicted to have triple-digit growth rates for some ...
SYS-CON Events announced today that MathFreeOn will exhibit at the 19th International Cloud Expo, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA. MathFreeOn is Software as a Service (SaaS) used in Engineering and Math education. Write scripts and solve math problems online. MathFreeOn provides online courses for beginners or amateurs who have difficulties in writing scripts. In accordance with various mathematical topics, there are more tha...
In past @ThingsExpo presentations, Joseph di Paolantonio has explored how various Internet of Things (IoT) and data management and analytics (DMA) solution spaces will come together as sensor analytics ecosystems. This year, in his session at @ThingsExpo, Joseph di Paolantonio from DataArchon, will be adding the numerous Transportation areas, from autonomous vehicles to “Uber for containers.” While IoT data in any one area of Transportation will have a huge impact in that area, combining sensor...
SYS-CON Events announced today that SoftNet Solutions will exhibit at the 19th International Cloud Expo, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA. SoftNet Solutions specializes in Enterprise Solutions for Hadoop and Big Data. It offers customers the most open, robust, and value-conscious portfolio of solutions, services, and tools for the shortest route to success with Big Data. The unique differentiator is the ability to architect and ...
More and more brands have jumped on the IoT bandwagon. We have an excess of wearables – activity trackers, smartwatches, smart glasses and sneakers, and more that track seemingly endless datapoints. However, most consumers have no idea what “IoT” means. Creating more wearables that track data shouldn't be the aim of brands; delivering meaningful, tangible relevance to their users should be. We're in a period in which the IoT pendulum is still swinging. Initially, it swung toward "smart for smar...
@ThingsExpo has been named the Top 5 Most Influential Internet of Things Brand by Onalytica in the ‘The Internet of Things Landscape 2015: Top 100 Individuals and Brands.' Onalytica analyzed Twitter conversations around the #IoT debate to uncover the most influential brands and individuals driving the conversation. Onalytica captured data from 56,224 users. The PageRank based methodology they use to extract influencers on a particular topic (tweets mentioning #InternetofThings or #IoT in this ...