Mike Nimer's Blog - Flex Builder and ColdFusion

Follow the MAX updates, from across the web, from your desktop

Tue, 25 Aug 2009 21:33:00 -0400

You may of already seen the Adobe cards I created for some of the different adobe products. Now I've created a nomee card for all things MAX.. This card runs inside the nomee AIR application and monitors all of the sites on the card for updates. So when there is a new tweet, facebook post, blog post, etc.. You'll get an alert. So you know when something you care about has happened. And you can see it all merged together in the Newstream on the card. If your going to MAX you need this. Direct Link

Bye bye -services!

Wed, 10 Jan 2007 10:15:00 -0400

When you are building an application that uses the Flex FDS or ColdFusion servers as a back-end you need to define in your FlexBuilder project properties an additional compiler argument, -services. Why? FlexBuilder needs this argument/path to your services-config.xml file so it can pull just a few pieces of information out of the xml file. In turn, these pieces of information are what allows your flex client application to know what server to talk to and how. However, this has a few drawbacks.

You need to be able to access your services-config.xml file. Which can be difficult if you are developing against a remote Flex server. Confusion with the launch url in FlexBuilder.
By default endpoint urls in the services-config.xml use wildcards to define the host/port of the url "{server.host} and {server.port}". However, the default for FlexBuilder is to launch flex applications with a file://c:\ absolute path, easily corrected but still the default. Now the problem is that if your movie is launched with a file:// path, Flex can't use the {server.host}/{server.port} wildcards (there is no http url to pull the host and port from)
But, you can't hardcode the url in services-config.xml either. Otherwise your .swf will be compiled with a url that points back to your development server. And you don't want to recompile the .swf for production because then the .swf you tested is NOT the same .swf as the one you deploy. (you always want to deploy the same code you test). Context-root problems, if you develop with one context-root and deploy to production under a different context-root - Watch out!
Because the context-root needs to be hard coded in the services-config.xml or defined as a compiler argument in FlexBuilder too, it is compiled into the swf as a hard coded value. Which means, you need a different .swf for each platform you run one (a testing nightmare).

Alas, there is a solution! (You knew I was going there didn't you). All of this can be defined at runtime without the -services argument and the services-config.xml. Defining this at runtime also has a few advantages.

Your context-root can be defined at runtime as a FlashVar and your .cfm or .jsp can easily set that with a simple variable.
You can switch URL's as needed, for instance if the movie is loaded under an http:// url, use the wildcards. If it's loaded under a file:// or c:\.. path use a hard coded development url.
Different developer enviroments and configurations don't matter, everyone should be able to drop the code, sorry sync from source control, on their machine and run the application.

There are different ways to do this but how I do it is with 2 files; a ConfigModel class and a standard ServiceLocator class.

ConfigModel.as



package model
{
	import mx.core.Application;
	import mx.controls.Alert;
	import mx.utils.ObjectUtil;
	
	/**
	 * Used to store Application config settings, and the 
	 * FlashRemoting channel and endpoint url settings, with this you
	 * won't need define a -services compiler argument for the project.
	 * 
	 * @author: Mike Nimer
	 **/
	[Bindable(event="configChange")]
	public class ConfigModel
	{
		public static var TIMEZONEOFFSET:Number; //est=4 or 5, depending on DST
		
		// debug setting to switch between live and stub data
		public static const USE_STUB_DATA:Boolean = false;

		// Flash remoting config issues
		public static const CHANNELID:String = "orca-amf";		
		private static const default_context_root:String = "/"; // adjust as needed for your default server.


		/**
		 * pull the context-root out of the flash var, if it's defined in your  or  tags.
		 * ex: contextRoot=/flex
		 **/		
		private static function get CONTEXT_ROOT():String
		{
			var app:Application = Application.application as Application;
			if( app.parameters.contextRoot != null )
			{
				//Alert.show( ObjectUtil.toString(app.parameters) );
				return 	app.parameters.contextRoot;
			}
			return ConfigModel.default_context_root;
		}
		
		
		// return the correct endpoint, if this is server from an HTTP request
		// return the default localhost:8500 for development, if FlexBuilder launches 
		// the application locally with an absolute path (file://c:\...)
		public static function get AMFENDPOINT():String
		{
			var app:Application = Application.application as Application;
			if( app.url != null && app.url.indexOf("http:") != -1 )
			{
				return "http://{server.name}:{server.port}" + ConfigModel.CONTEXT_ROOT +"/messagebroker/amf";
				// for ColdFusion users
				// return "http://{server.name}:{server.port}" + ConfigModel.CONTEXT_ROOT +"/flex2gateway";
			}
			else
			{
				return "http://localhost:8500" + ConfigModel.CONTEXT_ROOT + "/messagebroker/amf";
				// for ColdFusion Users
				// return "http://localhost:8500" + ConfigModel.CONTEXT_ROOT + "/flex2gateway";
			}
		}

	}
}

ServiceLocator.as



package services
{
	import model.ConfigModel;
	import mx.messaging.Channel;
	import mx.messaging.ChannelSet;
	import mx.rpc.remoting.mxml.RemoteObject;
	import mx.rpc.events.ResultEvent;
	import mx.messaging.channels.AMFChannel;
	import mx.rpc.events.FaultEvent;
	import mx.rpc.AbstractService;
	import mx.messaging.config.ServerConfig;
	
	/**
	 * Create the RemoteObject tags used by the application service delegates
	 * @author: Mike Nimer
	 **/
	public class ServiceLocator
	{
		public var service:AbstractService;
		public var amfChannelSet:ChannelSet;
		public static var serviceLocator:ServiceLocator;
		
		public function ServiceLocator()
		{
			var amfChannel:Channel = new AMFChannel(ConfigModel.CHANNELID, ConfigModel.AMFENDPOINT);
			amfChannelSet = new ChannelSet();
			amfChannelSet.addChannel(amfChannel);
		}		
		
		public static function getInstance():ServiceLocator
		{
			if( ServiceLocator.serviceLocator == null )
			{
				ServiceLocator.serviceLocator = new ServiceLocator();
			}
			return ServiceLocator.serviceLocator;
		}
		
		
		/**
		 * Individual Services used by the Application.
		 **/				
		public function getSomeService():AbstractService
		{
			if( service != null )
			{
				return service;
			}			
			service = new RemoteObject('someDestination');
			service.channelSet = this.amfChannelSet;
			(service as RemoteObject).showBusyCursor = true;
			
			// service.source = "dot.path.to.cfc" // If you are using ColdFusion			
			//service.setCredentials(username, password); // if you need it
	return service;
		}
		
	}
}

Set Context-root FlashVar (ColdFusion)


// You'll find this in the default html flex generates, just make the html page a cfm and add this FlashVar.
// note: Use contextRoot=<%=request.getContextPath()%> for JSP pages.

	AC_FL_RunContent(
			"src", "Orca",
			"width", "100%",
			"height", "100%",
			"align", "middle",
			"id", "Orca",
			"quality", "high",
			"bgcolor", "#869ca7",
			"name", "Orca",
			"flashvars",'contextRoot=#getContextRoot()#&historyUrl=history.htm%3F&lconid=' + lc_id + '',
			"allowScriptAccess","sameDomain",
			"type", "application/x-shockwave-flash",
			"pluginspage", "http://www.adobe.com/go/getflashplayer"
	);

Flex Data Server and CF Flash Remoting together

Wed, 19 Jul 2006 19:35:00 -0400

A common configuration question with Flex2 developers who are trying to use the Flex Data Server and CF is "How do I use FDS and Flash Remoting calls with CF, in the same app?". The reason this gets confusing is because both Flex and CF have their own version of the services-config.xml file, and you can only point to one file in your flex builder project. So which one do you use? First off, do not try to merge the CF and Flex2 servers into the same instance. In other words if you find yourself trying to merge the web.xml files, like you did with CF and Flex 1.5 - STOP! Don't do it. You don't need to do it with flex2. Instead you want set up your servers and your project like this. 1) Configure CF on 1 instance/server
2) Configure FDS on 2nd instance/server
3) Point your project at the services-config.xml in the FDS instance.

Ok at this point you can easily call FDS destinations which uses CF (or not). Now to also make Flash remoting requests to CF.

4) Define the destination and channel with Actionscript, instead of letting the compiler do it when it is pointed at the CF version of the services-config.xml

To create you own ChannelSet the code would look something like this.



public var cSet:ChannelSet;
 
public function initApp()
{
    cSet = new ChannelSet();
    var customChannel:Channel = new AMFChannel("my-cfamf", http://localhost:8500/flex2gateway/);
    // Add the Channel to the ChannelSet.
    cSet.addChannel(customChannel);
    foo.channelSet = cSet;
}

Note: You can always use this ChannelSet technique instead of the -services compiler flag too. And you can use it, if you want to use something like FlashVars to dynamically change the endpoint url too.

Flex2 Debug Component

Wed, 05 Jul 2006 16:07:00 -0400

1/29/06 Update: I've updated this component for Flex 2.0.1. Go ahead and download the 1.0.5 version of the Flex Components for the update. Last week, at CFUnited, I showed off debug component for Flex2 development. As promised here is a download of the .swc and source code. Remember this is a work in progress but it is far enough along to be useful now. Keep watching this blog for updates. What is this debug component? First let me step back, Flex2 has a useful debug utility class and method called ObjectUtil.toString(). For those of you use to ColdFusion and the CFDUMP tag, this is a flex version of the same thing. However there is no way to easily view this data, I found myself doing a lot of Alerts, such as this: Alert.show(ObjectUtil.toString(event)); However, This works for the small stuff but not for large items, The Alert box doesn't grow to fit things like I would like. The 2nd problem, was that ColdFusion FlashRemoting requests return a lot of debug information about the request and there is no good way to make sense of it. So to kill two birds with one stone I put this component together. How to use it: In your Flex project; go to the project properties panel (Right-Click on the project), select the "Flex Build Path" page, select the "Library Path" tab, then add the .swc file to the project. Once this is done you can import and call the Debug class as needed. Syntax: The Debug component can be used in a few different ways, to view a single item or to debug multiple items. The single item example:


Debug.show(anyObject);

You can also add multiple items and view them later.


Debug.add(anyObject);
Debug.add(anotherObject);

//then later, perhaps in a button click handler

Debug.show();

Some screen shots:

The ColdFusion debug data:

CF and Flex presenation

Wed, 05 Jul 2006 13:52:00 -0400

Last week I did 2 presentations at CFUnited on ColdFusion and Flex2 integration. First off I have to say it was great conference, and 100% dedicated to ColdFusion and the tools CF developers use - how cool it that! Everyone should plan on attending next year, just tell your boss I said it was ok to book it now. ;) I also gave the same presentation about 2 weeks earlier for Steven Erat's online Meetup and Boston User Groups. As promised here are the powerpoint slides and examples from that presentation. And here is a URL to watch the recorded version from Steven Erats online meeting. http://stevenerat.breezecentral.com/p97229365/

Flex2 (beta 2), Flickr, Gooogle mashup

Mon, 24 Apr 2006 15:11:00 -0400

I thought I would share this photo/map application that I've been working on for a few a few weekends now. It's my buzzword bingo app, a Flex2, Flickr, Gooogle mashup. Snoopy in the desert
download the flex 2 beta 2 player
Some of you might remember a photo/map application I did a few years back. (Yes I'm a sucker for maps.) However, that was before the flick api and google maps were released. Not to mention it was very slow. With Flex2 and the flickr/google apis that are out there now, this was a lot easier to do. Thanks to flex2 I had a working prototype in just a few hours. And the experience is a lot better too. The first time around just finding and displaying a map was a pain, this time it was the easy part. And with the flickr api I didn't have to write any back end code to parse thousands of photos. Instead I just needed to spend many nights uploading them all to flickr (I still have more to upload but I reached my flickr monthly limit already, I need to wait for May to finish). I'm not done yet, some of my future plans include:

Allow others to link to this app, to show their own geotagged flickr photos. (I need to speed it up, and document the url params)
Speed up the flickr http calls with some server side threading. (flickr wants you to make a separate request for each photo to get the exif/tag data = SLOW)
Add support for Yahoo and ESRI maps too.
Add a regular flickr photo browser
Make a better looking slideshow popup (anyone have one already?)
Add some kind of timeline slider, like the one on google finance. (anyone have one already?)

CFForm/Flex Visio Stencil

Wed, 30 Nov 2005 11:43:00 -0400

Wireframe! Wireframe! Wireframe! - We all know it's a good idea. But up to now there wasn't any great way to do this for your RIA applications. Boxes on a napkin don't cut it, and using the next closest thing the WinXP UI Stencil in visio just didn't feel right, it just didn't look like the finished product. well...

Darren Houle, has finally done something about that. He has put together a Halo Visio Stencil for Visio 2002/2003. It has 43 different Flex Components that you can use to layout everything from a simple flash form to a full RIA application. I've been using this for the past week, and trust me you build better apps quicker if you stop and think about them first.

You can get it here, and it's only $20 bucks: http://63.135.103.199/ecomm/

FlexMail - Flex2 Sample Application

Fri, 04 Nov 2005 12:26:00 -0400

Ben Forta is at it again, Ben has created a new Sample Application which shows the power of ColdFusion and Flex2 working together. This application is an email client, which uses Flex2, CF Adapater, and CFPOP.

This is a great example of ColdFusion playing the role as a bridge, linking an RIA frontend with a POP email account.

Download it here

New CFAdapter bits (version 0.2)

Wed, 26 Oct 2005 14:05:00 -0400

For those of you who are trying out Zorn with ColdFusion, or plan to. We have updated the version of the Adapter on the macromedia labs site. The new version adds support for Application.cfc/cfm and a few other bug fixes.

You will also find 2 sample apps that use the ColdFusion adapter.

The 1st is a simple getData tester, it will call a CFC and get back a hard coded value for each type of data, and dump it. Good to use if you want to make sure your CFAdapter is configured and working correctly. And if you want to see what each ColdFusion datatype looks like to Flash.

The second example is the Basic User Manager I did the walk through with at MAX. So if you wanted to dig through the code I was showing on stage now you can.