ActionScript.com The Flash/Flex ActionScript Developer Community

Saturday, May 17, 2008

You are here : Article

Building our Image List

Most of the time, people relate Flash Remoting with returning information from a database. However it can also be used to leverage other Cold Fusion methods. For this application
we will build a CFC that utilizes the cfdirectory tag. Here is the component:

Basically all this CFC does is create an array of file information named myThumbs. The file information returned to Flash is very comprehensive but we will be most concerned with the first item in our array: name. Save this file as slides.cfc.

Flash Front End

Building our image list was easy. Now to the Flash side of the equation.
First of all we need to connect to our service: slides.cfc as so:

#include "NetServices.as" 
// Connect to the gateway and create a service object 
if (connected == null) { 
  connected = true; 
NetServices.setDefaultGatewayUrl("http://www.bizwerk.net/flashservices/gateway");
  var my_conn = NetServices.createGatewayConnection(); 
  var myService = my_conn.getService("slides",this); 
  trace ("connection made");
}

Test your movie and you should see the words "connection made" in the
output window.

Next we need to call our service and handle the results returned from our CFC.
Add a datagrid component to the stage and give it an instance name of myDataGrid_dg.
Add a new layer to the timeline and name it actions. Select frame one of this layer and
attach the following code:

function getThumbs_Result (result_rs) { 
  var temp = ""; 
  temp +=  result_rs.getLength(); 
  trace(temp);
  myDataGrid_dg.dataProvider = result_rs;
//The array passed from our CFC has a lot
//of stuff in it that we do not need
//we only want the image name which appears
//in column one so we remove the other columns
myDataGrid_dg.removeColumnAt(1);
myDataGrid_dg.removeColumnAt(2);
myDataGrid_dg.removeColumnAt(3);
myDataGrid_dg.removeColumnAt(4);
myDataGrid_dg.removeColumnAt(1);
myDataGrid_dg.removeColumnAt(1);
myDataGrid_dg.getColumnAt(0).headerText = "Thumbnail Image";
myDataGrid_dg.setStyle("alternatingRowColors",[0xD8F9FC,0xeeeee2]); 
}

 myService.getThumbs();

Test your movie and see that the names of your image files appear in the grid.
Now we need to use the returned image names to load the corresponding jpegs
into our datagrid.

Enter the Cell Renderer

Cell Renderers have two parts; a MovieClip and the Class that tells the MovieClip what
to do. We will employ a cell renderer here to enable our datagrid to display images.

The first thing we need to do is create our MovieClip. Go to the Library and click on the plus sign. Choose new MovieClip and give it an name of imageCellRender. Now click on the linkage Export for Actionscript. The identifier field will automatically populate but you will need to type in the AS 2.0 class of imageCellRender - imageCellRender will be the name of our .as file that we will write next. Click OK.

Next create an empty MovieClip manually and name it imageCont and click OK. Re-open our imageCellRender MovieClip and place an instance of our imageCont MovieClip on frame one. Give this instance a name of img .We will load our images into this empty MovieClip.

We are done with our Flash Movie for the time being.

Create our Actionscript File

Now we need to create our new Actionscript Class and name it imageCellRender.as. Save this file in the same directory as our Flash Movie. This AS file will control the actions of our MovieClip imageCellRender in our Flash movie. It can do this because we set AS 2.0 linkage
when we created the MovieClip imageCellRender.

Go to Flash and choose File .. New .. Actionscript File. You are presented with an editor that allows you to type in you actionscript code. Type the following:

import mx.core.UIComponent;
class imageCellRender extends UIComponent {
	var img:MovieClip;
	var url:String;
	var getDataLabel:Function;
	function IconCellRenderer() {
		
	}
	function createChildren(Void):Void {
		size();
	}
	// the setValue function is called  when the component
	// is first drawn and whenever a user interacts with the datagrid
	function setValue(str:String, item:Object, sel:Boolean):Void {
		img._visible = (item[getDataLabel()] != undefined);
		// do not render a cell if the data label is undefined
		if(item[getDataLabel()] != undefined){
		// do not re-draw cell if data label is unchanged
		if(item[getDataLabel()] != this.url){
		// load the appropriate jpg into our img MovieClip instance
			img.loadMovie(item[getDataLabel()]);
	// if the user interacts with a cell we need to see if the image needs to be redrawn
	// if this.url is unchanged this code tells the datagrid not to redraw
			this.onEnterFrame = function(){
	//make sure that the image has fully loaded
	//set this.url to image name returned for the corresponding cell
	//so that we can check if data label has changed
				if(img.getBytesLoaded() >= img.getBytesTotal()) {
					this.url = item[getDataLabel()];
				}
				}
				}
			}
		}
// use the size function to postion our empty MovieClip img
	function size(Void) : Void
	{
		img._y = -48;
		img._x = 40;
	}	
}

The cell renderer script is commented with all of the explanations you should need.
Again, save this AS file as imageCellRender.as in the same directory as your Flash movie.

Putting our Cell Renderer to Work

We now have our cell renderer script complete. All that is left is to put it to work in our Flash movie. Re-open our datagrid_iamges.fla file and open our actions code. If you tested your Flash application earlier, you will remember that the datagrid listed the names of our image files. We need to tweak our code so that column one renders the images themselves and not just their names. Inside the function that handles our remoting results add the following line right above the code that removes our unwanted columns:

myDataGrid_dg.getColumnAt(0).cellRenderer="imageCellRender";

All this does is tell the datagrid to use our AS class that we created in the imageCellRenderer.as file to redender the contents of column one. To make sure our datagrid properly displays the images select it and give it a rowHeight of 120. Now test your movie and you should see the images fill you grid.

To finish this example place a loader component on the stage and give it an instance name of cont and place a progress bar component on the stage and give it an instance name of pBar.
Lastly, attach the following code to frame one of the main timeline:

function getDetails(){
counter = myDataGrid_dg.getSelectedIndex();
_root.pic_name.text = myDataGrid_dg.getItemAt(counter).Name;
cont.autoLoad = false;
cont.contentPath = myDataGrid_dg.getItemAt(counter).Name;
pBar.source = cont;
cont.load();
}

myDataGrid_dg.addEventListener("cellPress", getDetails );

This code gets the selection from the datagrid and load the corresponding image into our loader component. The progress bar monitors the loading of the image.

I hope that this will help you in your development of RIA's. Being able to extend the existing components is a powerful tool and now you hopefully have a better understanding of how to start.

del.icio.us || Digg It || Technorati