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
SYS-CON Events announced today that SoftLayer, an IBM Company, has been named “Gold Sponsor” of SYS-CON's 18th Cloud Expo, which will take place on June 7-9, 2016, at the Javits Center in New York, New York. SoftLayer, an IBM Company, provides cloud infrastructure as a service from a growing number of data centers and network points of presence around the world. SoftLayer’s customers range from Web startups to global enterprises.
SYS-CON Events announced today that Technologic Systems Inc., an embedded systems solutions company, will exhibit at SYS-CON's @ThingsExpo, which will take place on June 6-8, 2017, at the Javits Center in New York City, NY. Technologic Systems is an embedded systems company with headquarters in Fountain Hills, Arizona. They have been in business for 32 years, helping more than 8,000 OEM customers and building over a hundred COTS products that have never been discontinued. Technologic Systems’ pr...
SYS-CON Events announced today that Auditwerx will exhibit at SYS-CON's 20th International Cloud Expo®, which will take place on June 6-8, 2017, at the Javits Center in New York City, NY. Auditwerx specializes in SOC 1, SOC 2, and SOC 3 attestation services throughout the U.S. and Canada. As a division of Carr, Riggs & Ingram (CRI), one of the top 20 largest CPA firms nationally, you can expect the resources, skills, and experience of a much larger firm combined with the accessibility and attent...
SYS-CON Events announced today that CA Technologies has been named “Platinum Sponsor” of SYS-CON's 20th International Cloud Expo®, which will take place on June 6-8, 2017, at the Javits Center in New York City, NY, and the 21st International Cloud Expo®, which will take place October 31-November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. CA Technologies helps customers succeed in a future where every business – from apparel to energy – is being rewritten by software. From ...
SYS-CON Events announced today that HTBase will exhibit at SYS-CON's 20th International Cloud Expo®, which will take place on June 6-8, 2017, at the Javits Center in New York City, NY. HTBase (Gartner 2016 Cool Vendor) delivers a Composable IT infrastructure solution architected for agility and increased efficiency. It turns compute, storage, and fabric into fluid pools of resources that are easily composed and re-composed to meet each application’s needs. With HTBase, companies can quickly prov...
SYS-CON Events announced today that Loom Systems will exhibit at SYS-CON's 20th International Cloud Expo®, which will take place on June 6-8, 2017, at the Javits Center in New York City, NY. Founded in 2015, Loom Systems delivers an advanced AI solution to predict and prevent problems in the digital business. Loom stands alone in the industry as an AI analysis platform requiring no prior math knowledge from operators, leveraging the existing staff to succeed in the digital era. With offices in S...
Buzzword alert: Microservices and IoT at a DevOps conference? What could possibly go wrong? In this Power Panel at DevOps Summit, moderated by Jason Bloomberg, the leading expert on architecting agility for the enterprise and president of Intellyx, panelists peeled away the buzz and discuss the important architectural principles behind implementing IoT solutions for the enterprise. As remote IoT devices and sensors become increasingly intelligent, they become part of our distributed cloud enviro...
SYS-CON Events announced today that T-Mobile will exhibit at SYS-CON's 20th International Cloud Expo®, which will take place on June 6-8, 2017, at the Javits Center in New York City, NY. As America's Un-carrier, T-Mobile US, Inc., is redefining the way consumers and businesses buy wireless services through leading product and service innovation. The Company's advanced nationwide 4G LTE network delivers outstanding wireless experiences to 67.4 million customers who are unwilling to compromise on ...
SYS-CON Events announced today that Infranics will exhibit at SYS-CON's 20th International Cloud Expo®, which will take place on June 6-8, 2017, at the Javits Center in New York City, NY. Since 2000, Infranics has developed SysMaster Suite, which is required for the stable and efficient management of ICT infrastructure. The ICT management solution developed and provided by Infranics continues to add intelligence to the ICT infrastructure through the IMC (Infra Management Cycle) based on mathemat...
SYS-CON Events announced today that Interoute, owner-operator of one of Europe's largest networks and a global cloud services platform, has been named “Bronze Sponsor” of SYS-CON's 20th Cloud Expo, which will take place on June 6-8, 2017 at the Javits Center in New York, New York. Interoute is the owner-operator of one of Europe's largest networks and a global cloud services platform which encompasses 12 data centers, 14 virtual data centers and 31 colocation centers, with connections to 195 add...
SYS-CON Events announced today that Cloudistics, an on-premises cloud computing company, has been named “Bronze Sponsor” of SYS-CON's 20th International Cloud Expo®, which will take place on June 6-8, 2017, at the Javits Center in New York City, NY. Cloudistics delivers a complete public cloud experience with composable on-premises infrastructures to medium and large enterprises. Its software-defined technology natively converges network, storage, compute, virtualization, and management into a ...
In his session at @ThingsExpo, Eric Lachapelle, CEO of the Professional Evaluation and Certification Board (PECB), will provide an overview of various initiatives to certifiy the security of connected devices and future trends in ensuring public trust of IoT. Eric Lachapelle is the Chief Executive Officer of the Professional Evaluation and Certification Board (PECB), an international certification body. His role is to help companies and individuals to achieve professional, accredited and worldw...
In his General Session at 16th Cloud Expo, David Shacochis, host of The Hybrid IT Files podcast and Vice President at CenturyLink, investigated three key trends of the “gigabit economy" though the story of a Fortune 500 communications company in transformation. Narrating how multi-modal hybrid IT, service automation, and agile delivery all intersect, he will cover the role of storytelling and empathy in achieving strategic alignment between the enterprise and its information technology.
Microservices are a very exciting architectural approach that many organizations are looking to as a way to accelerate innovation. Microservices promise to allow teams to move away from monolithic "ball of mud" systems, but the reality is that, in the vast majority of organizations, different projects and technologies will continue to be developed at different speeds. How to handle the dependencies between these disparate systems with different iteration cycles? Consider the "canoncial problem" ...
The Internet of Things is clearly many things: data collection and analytics, wearables, Smart Grids and Smart Cities, the Industrial Internet, and more. Cool platforms like Arduino, Raspberry Pi, Intel's Galileo and Edison, and a diverse world of sensors are making the IoT a great toy box for developers in all these areas. In this Power Panel at @ThingsExpo, moderated by Conference Chair Roger Strukhoff, panelists discussed what things are the most important, which will have the most profound e...
Keeping pace with advancements in software delivery processes and tooling is taxing even for the most proficient organizations. Point tools, platforms, open source and the increasing adoption of private and public cloud services requires strong engineering rigor - all in the face of developer demands to use the tools of choice. As Agile has settled in as a mainstream practice, now DevOps has emerged as the next wave to improve software delivery speed and output. To make DevOps work, organization...
My team embarked on building a data lake for our sales and marketing data to better understand customer journeys. This required building a hybrid data pipeline to connect our cloud CRM with the new Hadoop Data Lake. One challenge is that IT was not in a position to provide support until we proved value and marketing did not have the experience, so we embarked on the journey ourselves within the product marketing team for our line of business within Progress. In his session at @BigDataExpo, Sum...
Web Real-Time Communication APIs have quickly revolutionized what browsers are capable of. In addition to video and audio streams, we can now bi-directionally send arbitrary data over WebRTC's PeerConnection Data Channels. With the advent of Progressive Web Apps and new hardware APIs such as WebBluetooh and WebUSB, we can finally enable users to stitch together the Internet of Things directly from their browsers while communicating privately and securely in a decentralized way.
DevOps is often described as a combination of technology and culture. Without both, DevOps isn't complete. However, applying the culture to outdated technology is a recipe for disaster; as response times grow and connections between teams are delayed by technology, the culture will die. A Nutanix Enterprise Cloud has many benefits that provide the needed base for a true DevOps paradigm.
What sort of WebRTC based applications can we expect to see over the next year and beyond? One way to predict development trends is to see what sorts of applications startups are building. In his session at @ThingsExpo, Arin Sime, founder of WebRTC.ventures, will discuss the current and likely future trends in WebRTC application development based on real requests for custom applications from real customers, as well as other public sources of information,