Products Sample

This example shows step by step how to build a dynamic catalog with product information fetched from a database. We'll start by creating the database, which for simplicity will be a common Access database containing a table with product information:

The database is available on the products.mdb file.

We'll then create a template to display the product list, which should display a list box with the available products - this is implemented on the productlist1.swf file (source is available in productlist1.fla):

Next we'll create the ASP.NET script that will access the database and integrate the product list (name and id for each product) into the Flash template, filling the above ListBox component:

<%@Page language="c#" %>
<%@Import Namespace="System.Data" %>
<%@Import Namespace="System.Data.OleDb" %>
<%

// create the Turbine object:
Turbine.Turbine7 Turbine = new Turbine.Turbine7();

// load the template:
Turbine.Load("productlist1.swf");

// set current frame to 0, so that the list is filled right on the first frame:
Turbine.Frame=0;

// access the database:
String dbPath=Server.MapPath("products.mdb");
String strConnect = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + dbPath;
OleDbConnection objConnect = new OleDbConnection(strConnect);

String strQuery = "SELECT ProductName as label, ProductId as data FROM Products ORDER BY ProductName";
OleDbCommand objCommand = new OleDbCommand(strQuery, objConnect);
OleDbDataAdapter objDataAdapter = new OleDbDataAdapter(objCommand);

DataTable objDataTable = new DataTable();
objDataAdapter.Fill(objDataTable);

// load the .NET DataTable into a Turbine DataSet named ProductsDataSet:
Turbine.DataSetFromDataTable(objDataTable, "ProductsDataSet");

// fill the ProductListBox with the Turbine DataSet:
Turbine.InjectData("ProductsDataSet", "ProductListBox");

// now generate the movie to the web browser:
Turbine.GenerateFlash();

As result we obtain a list of products on the List Box component:

However on the movie generated above nothing happens when we click the "Display..." button - we'll add a simple handler function to this button that loads the product details through a loadMovie into the Display movie clip. The following Action Script is added to the above Flash template:

// This function will be called when the "Display..." button is clicked:
function ButtonClicked(){
_root.Display.loadMovie("productdisplay.aspx?id=" + ProductListBox.getValue() );
}

The above script will request the productdisplay.asp script passing the product id on the query string. The productdisplay.aspx script uses a simple Flash .swf template (productdisplay.swf) to display the product information:

For example, calling this script with id for the first product (id=1 - the Amaryllis flower) - that is, calling productdisplay.aspx?id=1 we obtain:

To fill the above template with product information fetched from the database we use the productdisplay.aspx script:

<%@Page language="c#" %>
<%@Import Namespace="System.Data" %>
<%@Import Namespace="System.Data.OleDb" %>
<%

// create the Turbine object:
Turbine.Turbine7 Turbine = new Turbine.Turbine7();

if (Request.Params["id"] == null){
// display a message complaining about missing id:
Turbine.Create("<Text pos='0,100'>Please select a Flower from the list...</Text>");

// now generate the movie to the web browser:
Turbine.GenerateFlash();
Response.End();
}

String strQuery = "SELECT ProductName, ProductDetails, ProductImage, ProductPrice FROM Products WHERE ProductId = " + Request.Params["id"];
OleDbCommand objCommand = new OleDbCommand(strQuery, objConnect);
OleDbDataAdapter objDataAdapter = new OleDbDataAdapter(objCommand);

DataTable objDataTable = new DataTable();
objDataAdapter.Fill(objDataTable);

// set Turbine variables from the query result values:
Turbine.Var["ProductName"] = objDataTable.Rows[0]["ProductName"];
Turbine.Var["ProductDetails"] = objDataTable.Rows[0]["ProductDetails"];
Turbine.Var["ProductPrice"] = objDataTable.Rows[0]["ProductPrice"];

// since images are on the common sub-directory we add "../common/"
Turbine.Var["ProductImage"] = "../common/" + objDataTable.Rows[0]["ProductImage"];

// load the template:
Turbine.Load("productdisplay.swf");

// now generate the movie to the web browser:
Turbine.GenerateFlash();

The complete example then becomes:

By selecting a flower and clicking on the "Display..." button, information about that product is displayed. From here we could extend the sample by adding a "Buy" option and a shopping cart, for example.