Christophe Coenraets

FlexStore Revisited: Building an Animated Spark Layout

Christophe Coenraets — Tue, 02 Feb 2010 15:29:08 +0000

Six years ago, I wrote the FlexStore sample application for Flex 1.0 (code name Royale at the time). The original version is still running here and shows the progress we have made in six years! Two years later, I rewrote the application for Flex 2. One major difference in the Flex 2 version was that the product Tile List was animated to visually represent the items being filtered out or filtered back in. The animations were helpful, but I was never too happy with the code: the layout animation logic was tightly coupled to the container logic and therefore wasn’t very reusable.

In Flex 4, the new Spark component architecture cleanly separates containers from their layouts: You declare a container and plug a layout into it. You can use existing Layout classes (VerticalLayout, HorizontalLayout, TileLayout, LayoutBase), or create your own custom layout classes. So, I thought it would be nice to revisit the AnimatedList component I had written for the FlexStore 2 and take advantage of this new architecture. I created a custom layout class called “FilteredTileLayout” that you can plug in Flex 4 list classes. i.e. List or DataGroup.

The application also provides a simple example of the new two-way data binding feature in Flex 4:

Here is the running application. The phones are old, but the code is fresh.

More Information

You can view the complete source code for the application here.

You can download the source code here.

For more information on Spark layouts, read Evtim Georgiev article on Devnet:
Spark layouts with Flex 4 beta.

More Flex 4 / Spark ItemRenderer Samples

Christophe Coenraets — Tue, 02 Feb 2010 03:24:18 +0000

Here are a few additional examples of Flex 4 / Spark ItemRenderers. They are similar to the examples I provided in my previous post with a different set of items.

Here is a first example using the new “depth” attribute, the new States syntax and a PostLayoutTransform:

A second example showing a different approach to “zoom” the hovered ItemRenderer:

A third showing a Rotate3D effect:

You can view the complete source code for the application here.

You can download the source code here.

Cool ItemRenderers Made Easy in Flex 4

Christophe Coenraets — Thu, 28 Jan 2010 15:37:52 +0000

Flex 4 makes a lot of things a lot easier to build. After looking at custom components and skins in my previous post, here are a couple of samples focusing on ItemRenderers, States, and Animations.

In this first example, I use the new “depth” attribute together with the new States syntax to make sure that the hovered ItemRenderer is always on top of the other ones. I also use a PostLayoutTransform to “zoom” the hovered ItemRenderer without any impact on the position of the other ItemRenderers in this TileLayout.

Here is the source code for the ItemRenderer.

In this second example, the ItemRenderer uses a simple Rotate3D effect.

Here is the source code for the ItemRenderer.

You can view the complete source code for the application here.

You can download the source code here.

Creating a Custom Component and Skins in Flex 4

Christophe Coenraets — Fri, 22 Jan 2010 18:46:30 +0000

The basic idea behind the Spark component model in Flex 4 is to entirely decouple the behavior of a component from its visual representation. You code the behavior of a component in one class and its visual representation in interchangeable MXML skin classes. This new architecture leads to lighter weight and easier to customize components.

As a simple example, I created a Spark version of the PhotoInput component I built for some of my Flex 3 samples (Salesbuilder and inSync). The PhotoInput component allows the user to take pictures using the webcam.

Here is the PhotoInput component with a minimalistic skin. Click the Start Camera button to start your webcam, and the Take Picture button to take a picture.

… and here is the same PhotoInput component with a different skin. Click the small webcam icon in the upper left of the component to start the webcam.

As you can see in the main application class, this is the same PhotoInput component used with two different skins: PhotoInputSkin and PhotoInputSkin2.

PhotoInputSkin.mxml is defined as follows:




	
	
		[HostComponent("components.PhotoInput")]

… and PhotoInputSkin2.mxml is defined as follows:




	
		
	

	
		
	

	
		
		
	

	
	
		[HostComponent("components.PhotoInput")]

The PhotoInput class provides the basic behavior of the component (start and stop the camera, take the picture, etc.) and is defined as follows:

package components
{
	import flash.display.BitmapData;
	import flash.events.MouseEvent;
	import flash.media.Camera;

	import mx.controls.VideoDisplay;
	import mx.graphics.ImageSnapshot;

	import spark.components.Button;
	import spark.components.supportClasses.SkinnableComponent;
	import spark.primitives.BitmapImage;

	[SkinState("capturing")]
	public class PhotoInput extends SkinnableComponent
	{
		private var camera:Camera;

		private var isCameraOn:Boolean = false;

		[SkinPart(required="true")]
		public var videoDisplay:VideoDisplay;

		[SkinPart(required="true")]
		public var image:BitmapImage;

		[SkinPart(required="false")]
		public var takePictureButton:Button;

		[SkinPart(required="false")]
		public var startCameraButton:Button;

		[SkinPart(required="false")]
		public var stopCameraButton:Button;

		public function PhotoInput()
		{
			super();
		}

		override protected function partAdded(partName:String, instance:Object):void
		{
			super.partAdded(partName, instance);

			if (instance == startCameraButton)
			{
				startCameraButton.addEventListener(MouseEvent.CLICK, startCameraButton_click);
			}
			if (instance == stopCameraButton)
			{
				stopCameraButton.addEventListener(MouseEvent.CLICK, stopCameraButton_click);
			}
			if (instance == takePictureButton)
			{
				takePictureButton.addEventListener(MouseEvent.CLICK, takePictureButton_click);
			}
		}

		override protected function partRemoved(partName:String, instance:Object):void
		{
			super.partRemoved(partName, instance);

			if (instance == startCameraButton)
			{
				startCameraButton.removeEventListener(MouseEvent.CLICK, startCameraButton_click);
			}
			if (instance == stopCameraButton)
			{
				stopCameraButton.removeEventListener(MouseEvent.CLICK, stopCameraButton_click);
			}
			if (instance == takePictureButton)
			{
				takePictureButton.removeEventListener(MouseEvent.CLICK, takePictureButton_click);
			}
		}		

		override protected function getCurrentSkinState():String
		{
			if (isCameraOn)
			{
				return "capturing";
			}

			return "normal";
		}

		private function startCamera():void
		{
			isCameraOn = true;
			invalidateSkinState();
			callLater(attachCamera);
		}

		private function attachCamera():void
		{
			camera = Camera.getCamera();
			videoDisplay.attachCamera(camera);
		}

		private function stopCamera():void
		{
			isCameraOn = false;
			invalidateSkinState();
			videoDisplay.attachCamera(null);
		}

		private function takePicture():void
		{
			var bd:BitmapData = ImageSnapshot.captureBitmapData(videoDisplay);
			image.source = bd;
		}		

		private function startCameraButton_click(event:MouseEvent):void
		{
			startCamera();
		}

		private function stopCameraButton_click(event:MouseEvent):void
		{
			stopCamera();
		}

		private function takePictureButton_click(event:MouseEvent):void
		{
			takePicture();
		}

	}
}

Source Code

You can download the source code of the application here.

More Information

To learn more about skins, make sure you read Ryan Frishberg’s great article on DevNet.

Tampa Bay Adobe Developer Event this Thursday

Christophe Coenraets — Mon, 18 Jan 2010 22:50:59 +0000

I’ll be in Tampa with James Ward and Greg Wilson this week, and we thought it would be great to put together an informal event for the local Tampa bay developer community. The details below are from Greg’s original post.

When: Thursday, Jan 21 6:30pm-8:30pm
Location: Taverna Opa Tampa – Channelside – next to Splitsville – http://tavernaopatampa.com/info.html
Map: http://bit.ly/5kF4aR (Google Maps)

No slides and no presentations – just informal chat/Q&A

IMPORTANT PART –> Beer is on James, Christophe and me for the first hour! How can you resist now?!

Between the 3 of us and some of our local friends, we can answer questions on a wide variety of topics:

General questions about Flex, AIR, LiveCycle Data Services, BlazeDS, ColdFusion and more
Connecting applications built on the flash platform (Flex, AIR, etc.) to backend systems such as .NET, Java, PHP, ColdFusion, etc.
What’s new in LiveCycle data services 3.0
What’s new in ColdFusion 9 and ColdFusion Builder
What’s coming in Flex 4, AIR 2.0 and Flash Player 10.1
Everything you wanted to know about Augmented Reality
How to compute the volume of a cone and other mathematical puzzles (just making sure you are still reading)
What’s the deal with the announcement last October about Flash and iPhone?

AIR 2.0 Web Server using the New Server Socket API

Christophe Coenraets — Mon, 07 Dec 2009 19:46:21 +0000

After exploring Java integration using the new Native Process API (here and here), Excel integration using the new file.openWithDefaultApplication(), and the new Microphone API, here is another application I wrote, this time to explore the new Adobe AIR 2.0 Server Socket API.

The “Mini AIR Web Server” is a simplistic implementation of an HTTPServer. Needless to say that it is far from being a production quality Web Server. The goal here is simply to use the well understood mechanics of a web server to learn how to use server sockets in AIR 2.0.

Installation Instructions

Download the AIR 2.0 beta runtime here.
Download MiniAIRWebServer.air here.
Double-click MiniAIRWebServer.air in Explorer or Finder to start the installation process.

To test the application, open a browser and test the sample HTML pages provided with the application:

NOTE: You may have to change the port number in these URLs depending on the port number you enter in the application.

You can add your own content in the webroot folder in the applicationStorageDirectory.

View Source is enabled, but if you just want to take a quick peak at the code, here is MiniAIRWebServer.mxml:




	
		
	

	
		Page Not Found");
					}
					socket.flush();
					socket.close();
				}
				catch (error:Error)
				{
					Alert.show(error.message, "Error");
				}
			}

			private function getMimeType(path:String):String
			{
				var mimeType:String;
				var index:int = path.lastIndexOf(".");
				if (index > -1)
				{
					mimeType = mimeTypes[path.substring(index)];
				}
				return mimeType == null ? "text/html" : mimeType; // default to text/html for unknown mime types
			}

		]]>

Embedding Tomcat and BlazeDS in an AIR 2.0 Application

Christophe Coenraets — Wed, 02 Dec 2009 19:41:58 +0000

In my previous post, I demonstrated how to create a simple Tomcat Launcher using the new AIR 2.0 Native Process API. The assumption in that sample was that Tomcat was already installed on your machine.

In this new sample application, I’m taking that idea a little further by embedding Tomcat as part of the native installer. The first time you run the application, Tomcat is automatically copied to your applicationStorageDirectory from where the AIR application starts it. In this sample, I still provide a simple console for the user to start and stop Tomcat manually, but in a real life application, you would probably want to start Tomcat automatically when the AIR application starts.

Why would you want to embed Tomcat as part of an AIR application? First of all, I’m not saying that you should… This is just part of my exploration of new capabilities in AIR 2.0. That being said, I can think of a number of use cases where this could make sense. For example:

Tighter communication with Java code using BlazeDS locally as a way to directly invoke methods on remote Java classes.
Provide an offline mode for an application that closely mimics the online infrastructure.

Installation Instructions

Download the AIR 2.0 beta runtime here.
Because Tomcat Launcher uses the Native Process API, I had to create native installers:
- To install the application on Windows, download and run AIRAppWithEmbeddedTomcat.exe.
- To install the application on a Mac, download and run AIRAppWithEmbeddedTomcat.dmg.

After starting the application, enter the path to your Java home folder, then click the Start button. The application will remember the folder you entered the next time you use the application. Try the “Embedded JSP Example” and “Embedded RemoteObject Example”. If you get a BindingException when you start Tomcat, make sure it isn’t already started. You can also click the Stop button to stop a running instance.

You can download the project here: AIRAppWithEmbeddedTomcat.fxp.zip. If you just want to take a quick peak at the code, here is AIRAppWithEmbeddedTomcat.mxml:




	
		
	

	
		 -1)
				{
					// default/sample values for Windows users
					javaHome.text = "C:\\Program Files\\Java\\jdk1.6.0";
				}
				else if (Capabilities.os.toLowerCase().indexOf("mac") > -1)
				{
					// default/sample values for Mac users
					javaHome.text = "/System/Library/Frameworks/JavaVM.framework/Versions/1.6.0";
				}

			}

			public function startTomcat():void
			{
				// Write the Java home path to config.xml so that it can be presented
				// to the user the next time the application is started
				writeConfig();

				log.text = "Starting Tomcat..." + File.lineEnding;
				startTomcatProcess = new NativeProcess();
				execute(startTomcatProcess, "start");
			}

			public function stopTomcat():void
			{
				log.text = "Stopping Tomcat..." + File.lineEnding;
				stopTomcatProcess = new NativeProcess();
				execute(startTomcatProcess, "stop");
			}

			public function execute(process:NativeProcess, arg:String):void
			{
				// Get a file reference to the JVM
				var file:File = new File(javaHome.text);
				if (Capabilities.os.toLowerCase().indexOf("win") > -1)
				{
					file = file.resolvePath("bin/javaw.exe");
				}
				else
				{
					file = file.resolvePath("Home/bin/java");
				}

				// Start the process
				try
				{
					var nativeProcessStartupInfo:NativeProcessStartupInfo = new NativeProcessStartupInfo();
					nativeProcessStartupInfo.executable = file;
					nativeProcessStartupInfo.workingDirectory = tomcatHomeDir.resolvePath("bin");
					var processArgs:Vector. = new Vector.();
					processArgs[0] = "-Dcatalina.home="+tomcatHomeDir.nativePath;
					processArgs[1] = "-classpath";
					processArgs[2] = tomcatHomeDir.resolvePath("bin/bootstrap.jar").nativePath;
					processArgs[3] = "org.apache.catalina.startup.Bootstrap";
					processArgs[4] = arg;
					nativeProcessStartupInfo.arguments = processArgs;
					startTomcatProcess = new NativeProcess();
					startTomcatProcess.start(nativeProcessStartupInfo);
					startTomcatProcess.addEventListener(ProgressEvent.STANDARD_OUTPUT_DATA,
						outputDataHandler);
					startTomcatProcess.addEventListener(ProgressEvent.STANDARD_ERROR_DATA,
						errorOutputDataHandler);
				}
				catch (e:Error)
				{
					Alert.show(e.message, "Error");
				}
			}

			public function outputDataHandler(event:ProgressEvent):void
			{
				var process:NativeProcess = event.target as NativeProcess;
				var data:String = process.standardOutput.readUTFBytes(process.standardOutput.bytesAvailable);
				log.text += data;
			}

			public function errorOutputDataHandler(event:ProgressEvent):void
			{
				var process:NativeProcess = event.target as NativeProcess;
				var data:String = process.standardError.readUTFBytes(startTomcatProcess.standardError.bytesAvailable);
				log.text += data;
			}

			private function readConfig():XML
			{
				var file:File = File.applicationStorageDirectory.resolvePath("config.xml");
				if (file.exists)
				{
					var fileStream:FileStream = new FileStream();
					fileStream.open(file, FileMode.READ);
					var xml:XML = XML(fileStream.readUTFBytes(fileStream.bytesAvailable));
					fileStream.close();
					return xml;
				}
				else
				{
					return null;
				}
			}

			private function writeConfig():void
			{
				var xml:String = '' + File.lineEnding;
				xml += "" + File.lineEnding;
				xml += "" + javaHome.text + "" + File.lineEnding;
				xml += "" + tomcatHome.text + "" + File.lineEnding;
				xml += "" + File.lineEnding;

				var file:File = File.applicationStorageDirectory.resolvePath("config.xml");
				var fileStream:FileStream = new FileStream();
				fileStream.open(file, FileMode.WRITE);
				fileStream.writeUTFBytes(xml);
				fileStream.close();
			}

			private function openWithDefaultEditor():void
			{
				var file:File =
					File.createTempDirectory().resolvePath("tomcat_launcher_console.txt");
				var fileStream:FileStream = new FileStream();
				fileStream.open(file, FileMode.WRITE);
				fileStream.writeUTFBytes(log.text);
				fileStream.close();
				file.openWithDefaultApplication();
			}

		]]>

Tomcat Launcher: Sample Application using the AIR 2.0 Native Process API

Christophe Coenraets — Wed, 02 Dec 2009 17:24:48 +0000

I have been playing with the new Native Process API of AIR 2.0, and here is a first sample application I wrote. “Tomcat Launcher” is like a mini Tomcat Console that allows you to start / stop Tomcat and view the standard output log without opening a DOS box or Terminal window. It also allows you to open that log in your default Text Editor which is another new feature of AIR 2.0 that I already explored in my “Open in Excel” sample application. Tomcat Launcher also provides a generic example showing how to use the AIR 2.0 native process API to execute Java code.

Installation Instructions

Download the AIR 2.0 beta runtime here.
Because Tomcat Launcher uses the Native Process API, I had to create native installers:
- To install the application on Windows, download and run TomcatLauncher.exe.
- To install the application on a Mac, download and run TomcatLauncher.dmg.

After starting the application, enter the paths to your Java home folder and to the Tomcat installation you want to start, then click the Start button. The application will remember the folders you entered the next time you use the application. If you get a BindingException, make sure Tomcat isn’t already started. You can also click the Stop button to stop a running instance.

You can download the project here: TomcatLauncher.fxp.zip. If you just want to take a quick peak at the code, here is TomcatLauncher.mxml:



	
		
	

	
		 -1)
				{
					// default/sample values for Windows users
					javaHome.text = "C:\\Program Files\\Java\\jdk1.6.0";
					tomcatHome.text = "C:\\tomcat";
				}
				else if (Capabilities.os.toLowerCase().indexOf("mac") > -1)
				{
					// default/sample values for Mac users
					javaHome.text = "/System/Library/Frameworks/JavaVM.framework/Versions/1.6.0";
					tomcatHome.text = "/Applications/tomcat/";
				}

			}

			public function startTomcat():void
			{
				// Write the Java and Tomcat home paths to config.xml so that they can be presented
				// to the user the next time the application is started
				writeConfig();

				log.text = "Starting Tomcat..." + File.lineEnding;
				startTomcatProcess = new NativeProcess();
				execute(startTomcatProcess, "start");
			}

			public function stopTomcat():void
			{
				log.text = "Stopping Tomcat..." + File.lineEnding;
				stopTomcatProcess = new NativeProcess();
				execute(startTomcatProcess, "stop");
			}

			public function execute(process:NativeProcess, arg:String):void
			{
				// Get a file reference to the JVM
				var file:File = new File(javaHome.text);
				if (Capabilities.os.toLowerCase().indexOf("win") > -1)
				{
					file = file.resolvePath("bin/javaw.exe");
				}
				else
				{
					file = file.resolvePath("Home/bin/java");
				}

				var tomcatHomeFile:File = new File(tomcatHome.text);

				// Start the process
				try
				{
					var nativeProcessStartupInfo:NativeProcessStartupInfo = new NativeProcessStartupInfo();
					nativeProcessStartupInfo.executable = file;
					nativeProcessStartupInfo.workingDirectory = tomcatHomeFile.resolvePath("bin");
					var processArgs:Vector. = new Vector.();
					processArgs[0] = "-Dcatalina.home="+tomcatHome.text;
					processArgs[1] = "-classpath";
					processArgs[2] = tomcatHomeFile.resolvePath("bin/bootstrap.jar").nativePath;
					processArgs[3] = "org.apache.catalina.startup.Bootstrap";
					processArgs[4] = arg;
					nativeProcessStartupInfo.arguments = processArgs;
					startTomcatProcess = new NativeProcess();
					startTomcatProcess.start(nativeProcessStartupInfo);
					startTomcatProcess.addEventListener(ProgressEvent.STANDARD_OUTPUT_DATA,
						outputDataHandler);
					startTomcatProcess.addEventListener(ProgressEvent.STANDARD_ERROR_DATA,
						errorOutputDataHandler);
				}
				catch (e:Error)
				{
					Alert.show(e.message, "Error");
				}
			}

			public function outputDataHandler(event:ProgressEvent):void
			{
				var process:NativeProcess = event.target as NativeProcess;
				var data:String = process.standardOutput.readUTFBytes(process.standardOutput.bytesAvailable);
				log.text += data;
			}

			public function errorOutputDataHandler(event:ProgressEvent):void
			{
				var process:NativeProcess = event.target as NativeProcess;
				var data:String = process.standardError.readUTFBytes(startTomcatProcess.standardError.bytesAvailable);
				log.text += data;
			}

			private function readConfig():XML
			{
				var file:File = File.applicationStorageDirectory.resolvePath("config.xml");
				if (file.exists)
				{
					var fileStream:FileStream = new FileStream();
					fileStream.open(file, FileMode.READ);
					var xml:XML = XML(fileStream.readUTFBytes(fileStream.bytesAvailable));
					fileStream.close();
					return xml;
				}
				else
				{
					return null;
				}
			}

			private function writeConfig():void
			{
				var xml:String = '' + File.lineEnding;
				xml += "" + File.lineEnding;
				xml += "" + javaHome.text + "" + File.lineEnding;
				xml += "" + tomcatHome.text + "" + File.lineEnding;
				xml += "" + File.lineEnding;

				var file:File = File.applicationStorageDirectory.resolvePath("config.xml");
				var fileStream:FileStream = new FileStream();
				fileStream.open(file, FileMode.WRITE);
				fileStream.writeUTFBytes(xml);
				fileStream.close();
			}

			private function openWithDefaultEditor():void
			{
				var file:File =
					File.createTempDirectory().resolvePath("tomcat_launcher_console.txt");
				var fileStream:FileStream = new FileStream();
				fileStream.open(file, FileMode.WRITE);
				fileStream.writeUTFBytes(log.text);
				fileStream.close();
				file.openWithDefaultApplication();
			}

		]]>

“Open in Excel”: Another AIR 2 Mini Sample

Christophe Coenraets — Tue, 24 Nov 2009 17:44:02 +0000

In Adobe AIR 1.0 and 1.5, there were different options to “open” the data of a Flex DataGrid in Excel. For example, you could leverage the AIR native drag-and-drop support to drag rows from the DataGrid to an open Excel spreadsheet. You could also drag rows to the desktop (or anywhere on the file system) as an .xls file. These two approaches are demonstrated in my Salesbuilder sample application. Another approach was to use a server roundtrip to download the generated .xls file from the server and force Excel to open with the data.

There was however no immediate way to implement a straight (client-side only) “Open in Excel” feature (aka click a button to open your DataGrid data in Excel). With AIR 2.0 and the new File.openWithDefaultApplication() method this becomes extremely easy to implement. In the sample below, I provide an example of this new feature. The sample also supports the drag-and-drop approach from the AIR application to Excel and from the AIR application to the desktop (or anywhere else on the file system). This sample uses the as3xls library to create the Excel spreadsheet. View Source is enabled.

Installation Instructions

Download the AIR 2.0 beta runtime here.
Download AIR2Excel.air here.
Double-click AIR2Excel.air in Explorer or Finder to start the installation process.

“Voice Notes”: Record Voice Notes and Persist them in SQLite with AIR 2

Christophe Coenraets — Wed, 18 Nov 2009 13:42:57 +0000

As you probably already know, the Flash Player 10.1 and AIR 2 betas are now available on Adobe Labs. I’ve been playing with the Microphone API in AIR 2 while working on the booth here at Devoxx, and built this small sample application that allows you to record voice notes and store them in the embedded SQLite database so that you can replay them later.

No rocket science here (and no designer involved), just one more microphone API sample. You can install the application here (AIR 2 required):

Installation Instructions

Download the AIR 2.0 beta runtime here.
Download voicenotes.air here.
Double-click voicenotes.air in Explorer or Finder to start the installation process.

View Source (right click) is enabled.