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
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 ...
"My role is working with customers, helping them go through this digital transformation. I spend a lot of time talking to banks, big industries, manufacturers working through how they are integrating and transforming their IT platforms and moving them forward," explained William Morrish, General Manager Product Sales at Interoute, in this SYS-CON.tv interview at 18th Cloud Expo, held June 7-9, 2016, at the Javits Center in New York City, NY.
WebRTC is bringing significant change to the communications landscape that will bridge the worlds of web and telephony, making the Internet the new standard for communications. Cloud9 took the road less traveled and used WebRTC to create a downloadable enterprise-grade communications platform that is changing the communication dynamic in the financial sector. In his session at @ThingsExpo, Leo Papadopoulos, CTO of Cloud9, discussed the importance of WebRTC and how it enables companies to focus...
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 LeaseWeb USA, a cloud Infrastructure-as-a-Service (IaaS) 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. LeaseWeb is one of the world's largest hosting brands. The company helps customers define, develop and deploy IT infrastructure tailored to their exact business needs, by combining various kinds cloud solutions.
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 Venafi, the Immune System for the Internet™ and the leading provider of Next Generation Trust Protection, will exhibit at @DevOpsSummit at 19th International Cloud Expo, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA. Venafi is the Immune System for the Internet™ that protects the foundation of all cybersecurity – cryptographic keys and digital certificates – so they can’t be misused by bad guys in attacks...
ReadyTalk has expanded the capabilities of the FoxDen collaboration platform announced late last year to include FoxDen Connect, an in-room video collaboration experience that launches with a single touch. With FoxDen Connect, users can now not only engage in HD video conferencing between iOS and Android mobile devices or Chrome browsers, but also set up in-person meeting rooms for video interactions. A host’s mobile device automatically recognizes the presence of a meeting room via beacon tech...
The cloud market growth today is largely in public clouds. While there is a lot of spend in IT departments in virtualization, these aren’t yet translating into a true “cloud” experience within the enterprise. What is stopping the growth of the “private cloud” market? In his general session at 18th Cloud Expo, Nara Rajagopalan, CEO of Accelerite, explored the challenges in deploying, managing, and getting adoption for a private cloud within an enterprise. What are the key differences between wh...
It’s 2016: buildings are smart, connected and the IoT is fundamentally altering how control and operating systems work and speak to each other. Platforms across the enterprise are networked via inexpensive sensors to collect massive amounts of data for analytics, information management, and insights that can be used to continuously improve operations. In his session at @ThingsExpo, Brian Chemel, Co-Founder and CTO of Digital Lumens, will explore: The benefits sensor-networked systems bring to ...
On Dice.com, the number of job postings asking for skill in Amazon Web Services increased 76 percent between June 2015 and June 2016. Salesforce.com saw its own skill mentions increase 37 percent, while DevOps and Cloud rose 35 percent and 28 percent, respectively. Even as they expand their presence in the cloud, companies are also looking for tech professionals who can manage projects, crunch data, and figure out how to make systems run more autonomously. Mentions of ‘data science’ as a skill ...
Manufacturers are embracing the Industrial Internet the same way consumers are leveraging Fitbits – to improve overall health and wellness. Both can provide consistent measurement, visibility, and suggest performance improvements customized to help reach goals. Fitbit users can view real-time data and make adjustments to increase their activity. In his session at @ThingsExpo, Mark Bernardo Professional Services Leader, Americas, at GE Digital, discussed how leveraging the Industrial Internet a...
Amazon has gradually rolled out parts of its IoT offerings in the last year, but these are just the tip of the iceberg. In addition to optimizing their back-end AWS offerings, Amazon is laying the ground work to be a major force in IoT – especially in the connected home and office. Amazon is extending its reach by building on its dominant Cloud IoT platform, its Dash Button strategy, recently announced Replenishment Services, the Echo/Alexa voice recognition control platform, the 6-7 strategic...
In addition to all the benefits, IoT is also bringing new kind of customer experience challenges - cars that unlock themselves, thermostats turning houses into saunas and baby video monitors broadcasting over the internet. This list can only increase because while IoT services should be intuitive and simple to use, the delivery ecosystem is a myriad of potential problems as IoT explodes complexity. So finding a performance issue is like finding the proverbial needle in the haystack.
There will be new vendors providing applications, middleware, and connected devices to support the thriving IoT ecosystem. This essentially means that electronic device manufacturers will also be in the software business. Many will be new to building embedded software or robust software. This creates an increased importance on software quality, particularly within the Industrial Internet of Things where business-critical applications are becoming dependent on products controlled by software. Qua...
Big Data, cloud, analytics, contextual information, wearable tech, sensors, mobility, and WebRTC: together, these advances have created a perfect storm of technologies that are disrupting and transforming classic communications models and ecosystems. In his session at @ThingsExpo, Erik Perotti, Senior Manager of New Ventures on Plantronics’ Innovation team, provided an overview of this technological shift, including associated business and consumer communications impacts, and opportunities it ...
The 19th International Cloud Expo has announced that its Call for Papers is open. Cloud Expo, to be held November 1-3, 2016, at the Santa Clara Convention Center in Santa Clara, CA, brings together Cloud Computing, Big Data, Internet of Things, DevOps, Digital Transformation, Microservices and WebRTC to one location. With cloud computing driving a higher percentage of enterprise IT budgets every year, it becomes increasingly important to plant your flag in this fast-expanding business opportuni...
IoT is rapidly changing the way enterprises are using data to improve business decision-making. In order to derive business value, organizations must unlock insights from the data gathered and then act on these. In their session at @ThingsExpo, Eric Hoffman, Vice President at EastBanc Technologies, and Peter Shashkin, Head of Development Department at EastBanc Technologies, discussed how one organization leveraged IoT, cloud technology and data analysis to improve customer experiences and effi...
The Internet of Things 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, demonstrated how to move beyond today's coding paradigm and shared the must-have mindsets for removing complexity from the develo...
SYS-CON Events announced today that MangoApps 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. MangoApps provides modern company intranets and team collaboration software, allowing workers to stay connected and productive from anywhere in the world and from any device.