ActionScript Developement
Socialbloom A Look At Flex Data Driven Applications by Walt Schlender This tutorial is designed for people with beginner to intermediate Flex experience.If you have prior programming experience, you should have no trouble following along.
What you will learn...
What you should know...
• Data driven applications • MVC (Model, View, Controller) architecture design patterns • Flex DataBinding • Some of the cool Flex visual effects
• What a class is • How events are dispatched within ActionScript 3 • How to read the Flex API reference
Level of difficulty
A
bout 2 years ago I was working as a contractor in San Francisco.One of my clients approached me and asked me to create a Social Network Map. It would show all of the users in a social network and their relationships with their friends.The project was a blast! I have always thought it would be interesting to apply something like this to say, Facebook to show who is hot, single and available in your friends networks. Since this article is on Flex, I will not actually be writing any server-side code.I will, however show you how to write an XML-powered view that can easily be connected to server-side code to visually display social networks.The basic process we will go through should help you understand how to architect and build datadriven views; the bulk of what I have done in my contracting practice.
Step 1. Build out the data model We will begin with a dummy XML dump of an imaginary database – a data driven application that takes data from a database and sends it to a client-side application running in a web browser. Data in a database is not directly available to Flash, which resides on some server a million miles away from the user’s computer.Somehow the data has to get into the Flash application. 32
One way it is commonly done is to use formatted markup languages like XML or JSON. XML and JSON are ways to format data so that data can be transmitted across the Internet from a server sitting in Timbuktu to a client’s web browser. With a bit of code it is relatively simple to take chunks of data sitting in a database, turn them into a string of text and whip them across the Internet. On the other end, Flex can take that string of text, and interpret it to figure out what information should be presented to the user. Because building server-side code is outside the scope of this article, I am going to show you how to load XML files from your hard disk. We will create the XML dummy file first. Here is what the dummy XML file looks like: see (Listing 1).
Step 2. Set up Your Project Using FlexBuilder, create a new FLEX project and save it with a name that you choose. Copy the XML from above and save it as friends.xml and place it into the bin/debug folder (which should now exist) within your Flex project. My project is titled SocialMapperII and my file SocialMapperII.mxml is the root file of the project. I will not be putting much code in there because I like to use files at the root for testing the rest of the code. This allows me to package collections of code into swcs and reuse them later. First, create a folder in the src folder called – com (right click->new in the src folder in the File Navigator). Inside of that a folder create another folder called walta and within that folder,
create another folder called socialviz. The code files, which will be placed into this folder, will have a package name of com.walta.socialviz. If you did not know, packages make it so that if there are two code files both having the same name (i.e., Loader (com.walta.Loader and flash.display.Loader) then they can both be used within this application. I am going to create another couple of folders within the socialviz folder. The first is view that will be used to store the cool visualization view files and the other, model that will hold the code, which loads the XML file. If you do not know about MVC architectures I highly recommend you learn about them. They will make you be able to build larger applications more efficiently. A good place to begin, if you are a Flex developer, is the PureMVC framework, which you can find at http://www.puremvc.org. I will split the code for this tutorial into a logical model layer and a view layer. We will start off with the XML loader.
Step 3. Build The XMLLoader and VO Objects Create a new class under the model folder called XMLLoader.
Figure 1. The end result will look something like this + will animate like the iPhone
01/2009 (3)