Data Binding Components in Flash MX 2004 Pro: browsing a catalog

Data Binding Components in Flash MX 2004 Pro: browsing a catalog
By: Jorge Solis

The Data Components

Flash MX 2004 Pro comes with a lot of new data components, allowing developers to connect and use databases and XML documents without a great scripting effort. Data components have different tasks, but two major features: managing and binding data sources to show it through UI elements and keeping everything in sync. So if we have a combobox and we select different things the labels will change in turn causing the text in a textfield to change, and so on. If we change data, the changes will be reflected in a consistent way, if we carefully plan we will not have to worry about the scripting in the future.

Data Components are divided into a couple of categories:

Connector (XMLConnector and WebServicesConnector) which are used to connect to a data sources.
Holders (DataHolder, DataSet) to store data.
Resolvers (RDBMSResolver and XUpdateResolver) to update data.

All of these are non-visual components. The dataGrid is not listed as a Data component in the Flash IDE but clearly related. It can display Recordsets from a dataSet or any other structured source (dataProvider).

Our goal is not to explain in detail each one, but to build a simple example, so we can achieve a better understanding in how to work with them. You can refer to Macromedia documentation for a more in-depth explanation.

The database

So let's begin creating our database. You only need to run setup.php to create the database, table, and insert the data (modify User, Password and Host to match your needs at the very beginning, lines 17-18-19).. Here's a screen shot of our two table structures as we can see by looking at phpMyAdmin, and the SQL statement that is used to create it. If you decide to setup the example without running setup.php, you can use catalog.sql file which holds all the necessary SQL.

		
CREATE TABLE products (
	PkProduct int(11) NOT NULL auto_increment,
	FkFamily int(11) NOT NULL default '0',
	Name varchar(255) NOT NULL default '',
	Content int(11) NOT NULL default '0',
	Weigth decimal(4,2) NOT NULL default '0.00',
	Price decimal(4,2) NOT NULL default '0.00',
	Image varchar(255) NOT NULL default '',
	PRIMARY KEY (PkProduct)
) TYPE=MyISAM;

CREATE TABLE family (
	PkFamily int(11) NOT NULL auto_increment,
	Name varchar(255) NOT NULL default '',
	Image varchar(255) default NULL,
	Description mediumtext NOT NULL,
	PRIMARY KEY (PkFamily)
) TYPE=MyISAM;

The only important thing to observe is that we use the FkFamily column in the products database as a key to join it with the family table, so we can select different kinds of products. Ok, this is our database. Now let's move on on our Flash side.