Welcome!

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) {
		this._parent.onData(rawData);
	}
	csvLoad.load(csvPath);
}

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);
	onLoad();
}

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;
}
csvLoad.load('sampleData.csv');

Conclusion
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
In his session at @ThingsExpo, Chris Klein, CEO and Co-founder of Rachio, will discuss next generation communities that are using IoT to create more sustainable, intelligent communities. One example is Sterling Ranch, a 10,000 home development that – with the help of Siemens – will integrate IoT technology into the community to provide residents with energy and water savings as well as intelligent security. Everything from stop lights to sprinkler systems to building infrastructures will run ef...
SYS-CON Events announced today that Peak 10, Inc., a national IT infrastructure and cloud services provider, will exhibit at SYS-CON's 18th International Cloud Expo®, which will take place on June 7-9, 2016, at the Javits Center in New York City, NY. Peak 10 provides reliable, tailored data center and network services, cloud and managed services. Its solutions are designed to scale and adapt to customers’ changing business needs, enabling them to lower costs, improve performance and focus inter...
You think you know what’s in your data. But do you? Most organizations are now aware of the business intelligence represented by their data. Data science stands to take this to a level you never thought of – literally. The techniques of data science, when used with the capabilities of Big Data technologies, can make connections you had not yet imagined, helping you discover new insights and ask new questions of your data. In his session at @ThingsExpo, Sarbjit Sarkaria, data science team lead ...
Artificial Intelligence has the potential to massively disrupt IoT. In his session at 18th Cloud Expo, AJ Abdallat, CEO of Beyond AI, will discuss what the five main drivers are in Artificial Intelligence that could shape the future of the Internet of Things. AJ Abdallat is CEO of Beyond AI. He has over 20 years of management experience in the fields of artificial intelligence, sensors, instruments, devices and software for telecommunications, life sciences, environmental monitoring, process...
Increasing IoT connectivity is forcing enterprises to find elegant solutions to organize and visualize all incoming data from these connected devices with re-configurable dashboard widgets to effectively allow rapid decision-making for everything from immediate actions in tactical situations to strategic analysis and reporting. In his session at 18th Cloud Expo, Shikhir Singh, Senior Developer Relations Manager at Sencha, will discuss how to create HTML5 dashboards that interact with IoT devic...
So, you bought into the current machine learning craze and went on to collect millions/billions of records from this promising new data source. Now, what do you do with them? Too often, the abundance of data quickly turns into an abundance of problems. How do you extract that "magic essence" from your data without falling into the common pitfalls? In her session at @ThingsExpo, Natalia Ponomareva, Software Engineer at Google, will provide tips on how to be successful in large scale machine lear...
The IoTs will challenge the status quo of how IT and development organizations operate. Or will it? Certainly the fog layer of IoT requires special insights about data ontology, security and transactional integrity. But the developmental challenges are the same: People, Process and Platform. In his session at @ThingsExpo, Craig Sproule, CEO of Metavine, will demonstrate how to move beyond today's coding paradigm and share the must-have mindsets for removing complexity from the development proc...
SYS-CON Events announced today that Ericsson has been named “Gold Sponsor” of SYS-CON's @ThingsExpo, which will take place on June 7-9, 2016, at the Javits Center in New York, New York. Ericsson is a world leader in the rapidly changing environment of communications technology – providing equipment, software and services to enable transformation through mobility. Some 40 percent of global mobile traffic runs through networks we have supplied. More than 1 billion subscribers around the world re...
You deployed your app with the Bluemix PaaS and it's gaining some serious traction, so it's time to make some tweaks. Did you design your application in a way that it can scale in the cloud? Were you even thinking about the cloud when you built the app? If not, chances are your app is going to break. Check out this webcast to learn various techniques for designing applications that will scale successfully in Bluemix, for the confidence you need to take your apps to the next level and beyond.
There is an ever-growing explosion of new devices that are connected to the Internet using “cloud” solutions. This rapid growth is creating a massive new demand for efficient access to data. And it’s not just about connecting to that data anymore. This new demand is bringing new issues and challenges and it is important for companies to scale for the coming growth. And with that scaling comes the need for greater security, gathering and data analysis, storage, connectivity and, of course, the...
SYS-CON Events announced today that Fusion, a leading provider of cloud services, will exhibit at SYS-CON's 18th International Cloud Expo®, which will take place on June 7-9, 2016, at the Javits Center in New York City, NY. Fusion, a leading provider of integrated cloud solutions to small, medium and large businesses, is the industry's single source for the cloud. Fusion's advanced, proprietary cloud service platform enables the integration of leading edge solutions in the cloud, including cloud...
Digital payments using wearable devices such as smart watches, fitness trackers, and payment wristbands are an increasing area of focus for industry participants, and consumer acceptance from early trials and deployments has encouraged some of the biggest names in technology and banking to continue their push to drive growth in this nascent market. Wearable payment systems may utilize near field communication (NFC), radio frequency identification (RFID), or quick response (QR) codes and barcodes...
The increasing popularity of the Internet of Things necessitates that our physical and cognitive relationship with wearable technology will change rapidly in the near future. This advent means logging has become a thing of the past. Before, it was on us to track our own data, but now that data is automatically available. What does this mean for mHealth and the "connected" body? In her session at @ThingsExpo, Lisa Calkins, CEO and co-founder of Amadeus Consulting, will discuss the impact of wea...
SYS-CON Events announced today that DatacenterDynamics has been named “Media Sponsor” of SYS-CON's 18th International Cloud Expo, which will take place on June 7–9, 2016, at the Javits Center in New York City, NY. DatacenterDynamics is a brand of DCD Group, a global B2B media and publishing company that develops products to help senior professionals in the world's most ICT dependent organizations make risk-based infrastructure and capacity decisions.
The IoT has the potential to create a renaissance of manufacturing in the US and elsewhere. In his session at 18th Cloud Expo, Florent Solt, CTO and chief architect of Netvibes, will discuss how the expected exponential increase in the amount of data that will be processed, transported, stored, and accessed means there will be a huge demand for smart technologies to deliver it. Florent Solt is the CTO and chief architect of Netvibes. Prior to joining Netvibes in 2007, he co-founded Rift Technol...
We’ve worked with dozens of early adopters across numerous industries and will debunk common misperceptions, which starts with understanding that many of the connected products we’ll use over the next 5 years are already products, they’re just not yet connected. With an IoT product, time-in-market provides much more essential feedback than ever before. Innovation comes from what you do with the data that the connected product provides in order to enhance the customer experience and optimize busi...
SYS-CON Events announced today that Stratoscale, the software company developing the next generation data center operating system, will exhibit at SYS-CON's 18th International Cloud Expo®, which will take place on June 7-9, 2016, at the Javits Center in New York City, NY. Stratoscale is revolutionizing the data center with a zero-to-cloud-in-minutes solution. With Stratoscale’s hardware-agnostic, Software Defined Data Center (SDDC) solution to store everything, run anything and scale everywhere...
Angular 2 is a complete re-write of the popular framework AngularJS. Programming in Angular 2 is greatly simplified – now it's a component-based well-performing framework. This immersive one-day workshop at 18th Cloud Expo, led by Yakov Fain, a Java Champion and a co-founder of the IT consultancy Farata Systems and the product company SuranceBay, will provide you with everything you wanted to know about Angular 2.
SYS-CON Events announced today that Men & Mice, the leading global provider of DNS, DHCP and IP address management overlay solutions, will exhibit at SYS-CON's 18th International Cloud Expo®, which will take place on June 7-9, 2016, at the Javits Center in New York City, NY. The Men & Mice Suite overlay solution is already known for its powerful application in heterogeneous operating environments, enabling enterprises to scale without fuss. Building on a solid range of diverse platform support,...
Whether your IoT service is connecting cars, homes, appliances, wearable, cameras or other devices, one question hangs in the balance – how do you actually make money from this service? The ability to turn your IoT service into profit requires the ability to create a monetization strategy that is flexible, scalable and working for you in real-time. It must be a transparent, smoothly implemented strategy that all stakeholders – from customers to the board – will be able to understand and comprehe...