RSS feed for InstantSpot - (AIR)

WhenWhatHowLong - A Simple Time and Task Tracker

Tue, 12 May 2009 13:30:00 GMT

Over the weekend, out of necessity, I threw together a very simple AIR app for tracking tasks, when they were done and how long they took. It's basically a glorified stopwatch with historical logging. If this is something that interests you I encourage you to check it out and leave me some feedback.

Enjoy! slantsoft.com/index.cfm/products/wwhl

Moving Images Between CF 8 and Flex 3 (AIR 1.5) - Part 2 of 2

Tue, 03 Feb 2009 17:01:00 GMT

In my previous post I covered the ColdFusion 8 half of moving image data between CF8 and Flex 3, AIR 1.5 in this example. This post will be a bit longer since there is a bit more ActionScript (and MXML) than there was CFML. I am going to assume that you know how to setup a new AIR / Flex project as that falls out of the scope of this topic.

I started with a pretty basic layout for my application. I have a ComboBox that displays the names of the available images, a button to browse and select a new image to add to the server, a TextInput to display the name of the selected image, an upload button to set the image data to the server and a delete button, obviously, to delete the selected image. Below all that I have a canvas with it’s height and width set to 100% which I will use to contain and display the image I’ve selected.

<mx:HBox width="100%">
	<mx:ComboBox id="imageSelect" prompt="Select an image..." dataProvider="{_imageArray}" change="onImageSelect()"/>
	<mx:Button label="Add Image (Preview)" click="selectImage()"/>
	<mx:TextInput id="imageNameTI" text="{this.previewFileName}" enabled="false"/>
	<mx:Button id="uploadBtn" label="Upload" enabled="false" click="uploadImage()"/>
	<mx:Button id="deleteBtn" label="Delete Selected Image" enabled="false" click="deleteSelectedImage()"/>
</mx:HBox>

Next I’ve defined my RemoteObject and the methods I want to call. Note that since I am working with AIR I need to specify an endpoint for my RemoteObject, in my case http://localhost:8302/flex2gateway . Without the endpoint the RemoteObject will not know where your CFC lives. Also, note the ‘/flex2gateway’ at the end of my url. This is how the RemoteObject talks to CF and it is required when connecting an Adobe ColdFusion server, I can’t speak for the other projects like OpenBD or Railo since I haven’t used remoting with them.

<mx:RemoteObject id="RO" endpoint="http://localhost:8302/flex2gateway" destination="ColdFusion"
	source="ImageService" fault="onROFault(event)">
	
	<mx:method name="getImageArray" result="onGetImageArrayResult(event)"/>
	<mx:method name="getImage" result="onGetImageResult(event)"/>
	<mx:method name="setImage" result="this.RO.getImageArray()"/>
	<mx:method name="deleteImage" result="this.RO.getImageArray()"/>
	
</mx:RemoteObject>

Each of the methods in my RemoteObject correspond to it’s counterpart in the CFC. In both the getImageArray and getImage methods I am calling an actionscript method and passing the ResultEvent as an argument. Rather than calling a method when a result is returned from the setImage and deleteImage methods I am directly invoking the getImageArray method on the RemoteObject, this will just update my list of available images in the ComboBox.

ActionScript methods.

The init() method is called when the creationComplete event is dispatched by the application. In it I am making a call to the getImageArray method.

private function init():void{
	this.RO.getImageArray();
}

The onROFault() method handles any fault events from the RO RemoteObject. I’m just popping up an Alert with the fault strings and clearing the busy cursor if we have one.

private function onROFault(event:FaultEvent):void{
	Alert.show(event.fault.faultString,event.fault.faultDetail);
	cursorManager.removeBusyCursor();
}

The onGetImageArray() method is called when a result is returned from the getImageArray() method. I am casting the event.result into a bindable array that I’ve defined at the top of my script block. The array, _imageArray, is set as the dataProvider for my ComboBox, and because it is bindable any changes made to _imageArray will be reflected in the contents of the ComboBox’s drop down. I am also removing the busy cursor if we are displaying one.

private function onGetImageArrayResult(event:ResultEvent):void{
	_imageArray = event.result as Array;
	cursorManager.removeBusyCursor();
}

The onImageSelect() method is called when an image name is selected from the ComboBox. I’m calling another method, clearPreview(), to sort of reset the application, more on this later. Next I call the getImage() method passing the selected image name from the ComboBox as an argument and showing the busy cursor.

private function onImageSelect():void{
	clearPreview();
	
	this.RO.getImage(this.imageSelect.selectedItem);
	this.cursorManager.setBusyCursor();
}

The onGetImageResult() method is the handler called by the result event from calling getImage(). Here’s where we start to see how we handle the image data returned from ColdFusion.

private function onGetImageResult(event:ResultEvent):void{
	var tempImg:Image = new Image;
	tempImg.height = event.result.Height;
	tempImg.width = event.result.Width;
	tempImg.data = event.result.Data;
	this.imgCanvas.removeAllChildren();
	this.imgCanvas.addChild(tempImg);
	cursorManager.removeBusyCursor();
	this.deleteBtn.enabled = true;
}

First I create a new Image and set it’s height and width to the returned Height and Width values.

var tempImg:Image = new Image;
tempImg.height = event.result.Height;
tempImg.width = event.result.Width;

Next we set the data property of the Image equal to the returned binary blob. This was the data we got when we used the ImageGetBlob() function in our CFC. Binary data in ColdFusion is the same as a ByteArray in Flex, and since the data attribute of our image expects a ByteArray we can pass the returned value right in without any data casting or translation. Pretty cool huh?

tempImg.data = event.result.Data;

After setting up the image I remove any children the canvas might have so that Flex doesn’t just stack the images one on top of the other. Next I add the image as a child to the canvas, remove the busy cursor and enable my delete button.

this.imgCanvas.removeAllChildren();
this.imgCanvas.addChild(tempImg);
cursorManager.removeBusyCursor();
this.deleteBtn.enabled = true;

The selectImage() method is called when the “Add Image” button is clicked. I create an array of image file types the application will accept, I defined the values in a variable at the top of the script block, all other file types will not be selectable in the file browser. Next I open the native file browser, I set the default directory as the user’s documents directory at the top of the script block. Then i add an event listener for when a file is selected.

private function selectImage():void{
	var imageTypesArray:Array = new Array(this.imageTypes);
	this.imageFile.browse(imageTypesArray);
	this.imageFile.addEventListener(Event.SELECT,imageSelected);
}

The imageSelected() method is called when a file has been chosen through the native file browser. Here again I am using ByteArrays to store the image data. I’m also using a FileStream to read the bytes from the selected image and store them in my ByteArray.

private function imageSelected(event:Event):void{
	this.ImageByteArray = new ByteArray();
	this.ImageFileStream = new FileStream();
	this.ImageFileStream.open(this.imageFile,FileMode.READ);
	this.ImageFileStream.readBytes(this.ImageByteArray);
	
	this.imgPreview = new Image;
	this.imgPreview.data = this.ImageByteArray;
	this.imgCanvas.removeAllChildren();
	this.imgCanvas.addChild(imgPreview);
	
	this.uploadBtn.enabled = true;
	this.imageNameTI.enabled = true;
	
	this.previewFileType = event.currentTarget.type;
	this.previewFileName = event.currentTarget.name.replace(this.previewFileType,'');
}

Next I create a new Image much like i did before, however, since I haven’t figured out how to read the image metadata with Flex / AIR I am letting Flex figure out the image’s dimensions based on just the image created by the ByteArray. Then I remove any children from the canvas, giving me a clear work area in which to add my new image.

this.imgPreview = new Image;
this.imgPreview.data = this.ImageByteArray;
this.imgCanvas.removeAllChildren();
this.imgCanvas.addChild(imgPreview);

Next I enable my Upload button and the TextInput so the user can rename the image if they want.

this.uploadBtn.enabled = true;
this.imageNameTI.enabled = true;

Lastly I store the image format (extension) and strip the extension from the file name, giving the user the ability to only rename the file, but not change it’s format. If you want to let your users change the format you can, it’s just a matter of giving them the options your server can read.

this.previewFileType = event.currentTarget.type;
this.previewFileName = event.currentTarget.name.replace(this.previewFileType,'');

At this point I haven’t actually sent the image data to the server, this is simply a preview mode so that the user can see the image selected. From reading a few other blog posts it seems that this behavior should also be possible in Flash Player 10 apps, where the client side application is able to store the ByteArray in memory and manipulate it without having to interact with the server. As I understand it, Flash Player 9 would require the data to be sent to the server then returned from the server in order to work with it. Please correct me if my assumption is incorrect.

The uploadImage() method is called when the upload button is clicked. In it I make a call to the setImage() method in my RemoteObject, passing the image ByteArray, image name and image format (extension) as arguments. Then I call the clearPreview() method to ‘reset’ my application and show the busy cursor.

private function uploadImage():void{
	this.RO.setImage(this.ImageByteArray,this.imageNameTI.text,this.previewFileType);
	clearPreview();
	this.cursorManager.setBusyCursor();
}

The clearPreview() method removes all children from the canvas, disables the upload button and text input and sets the file name to null.

private function clearPreview():void{
	this.uploadBtn.enabled = false;
	this.imageNameTI.enabled = false;
	this.previewFileName = null;
	this.imgCanvas.removeAllChildren();
}

The deleteSelectedImage() method calls the deleteImage() in the RemoteObject, passing the selected image name as an argument. Then it disables the delete button and removes all children from the canvas.

private function deleteSelectedImage():void{
	this.RO.deleteImage(this.imageSelect.selectedItem);
	this.deleteBtn.enabled = false;
	this.imgCanvas.removeAllChildren();
}

And here is the completed MXML file.

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" horizontalAlign="left" creationComplete="init()">
	<mx:Script>
		<![CDATA[
			import mx.controls.Image;
			import mx.rpc.events.ResultEvent;
			import mx.rpc.events.FaultEvent;
			import mx.controls.Alert;
			
			[Bindable] private var _imageArray:Array;
			private var imageFile:File = File.documentsDirectory;
			private var imageTypes:FileFilter = new FileFilter("Images (*.jpg; *.jpeg; *.gif; *.png)" ,"*.jpg; *.jpeg; *.gif; *.png");
			private var ImageByteArray:ByteArray;
			private var ImageFileStream:FileStream;
			private var imgPreview:Image;
			private var previewFileType:String;
			[Bindable] private var previewFileName:String;
			
			private function init():void{
				this.RO.getImageArray();
			}
			private function onROFault(event:FaultEvent):void{
				Alert.show(event.fault.faultString,event.fault.faultDetail);
				cursorManager.removeBusyCursor();
			}
			private function onGetImageArrayResult(event:ResultEvent):void{
				_imageArray = event.result as Array;
				cursorManager.removeBusyCursor();
			}
			private function onImageSelect():void{
				clearPreview();
				
				this.RO.getImage(this.imageSelect.selectedItem);
				this.cursorManager.setBusyCursor();
			}
			private function onGetImageResult(event:ResultEvent):void{
				var tempImg:Image = new Image;
				tempImg.height = event.result.Height;
				tempImg.width = event.result.Width;
				tempImg.data = event.result.Data;
				this.imgCanvas.removeAllChildren();
				this.imgCanvas.addChild(tempImg);
				cursorManager.removeBusyCursor();
				this.deleteBtn.enabled = true;
			}
			private function selectImage():void{
				var imageTypesArray:Array = new Array(this.imageTypes);
				this.imageFile.browse(imageTypesArray);
				this.imageFile.addEventListener(Event.SELECT,imageSelected);
			}
			private function imageSelected(event:Event):void{
				this.ImageByteArray = new ByteArray();
				this.ImageFileStream = new FileStream();
				this.ImageFileStream.open(this.imageFile,FileMode.READ);
				this.ImageFileStream.readBytes(this.ImageByteArray);
				
				this.imgPreview = new Image;
				this.imgPreview.data = this.ImageByteArray;
				this.imgCanvas.removeAllChildren();
				this.imgCanvas.addChild(imgPreview);
				
				this.uploadBtn.enabled = true;
				this.imageNameTI.enabled = true;
				
				this.previewFileType = event.currentTarget.type;
				this.previewFileName = event.currentTarget.name.replace(this.previewFileType,'');
			}
			private function uploadImage():void{
				this.RO.setImage(this.ImageByteArray,this.imageNameTI.text,this.previewFileType);
				clearPreview();
				this.cursorManager.setBusyCursor();
			}
			private function clearPreview():void{
				this.uploadBtn.enabled = false;
				this.imageNameTI.enabled = false;
				this.previewFileName = null;
				this.imgCanvas.removeAllChildren();
			}
			private function deleteSelectedImage():void{
				this.RO.deleteImage(this.imageSelect.selectedItem);
				this.deleteBtn.enabled = false;
				this.imgCanvas.removeAllChildren();
			}
		]]>
	</mx:Script>
	
	<mx:RemoteObject id="RO" endpoint="http://localhost:8302/flex2gateway" destination="ColdFusion"
		source="ImageService" fault="onROFault(event)">
		
		<mx:method name="getImageArray" result="onGetImageArrayResult(event)"/>
		<mx:method name="getImage" result="onGetImageResult(event)"/>
		<mx:method name="setImage" result="this.RO.getImageArray()"/>
		<mx:method name="deleteImage" result="this.RO.getImageArray()"/>
		
	</mx:RemoteObject>
	
	<mx:HBox width="100%">
		<mx:ComboBox id="imageSelect" prompt="Select an image..." dataProvider="{_imageArray}" change="onImageSelect()"/>
		<mx:Button label="Add Image (Preview)" click="selectImage()"/>
		<mx:TextInput id="imageNameTI" text="{this.previewFileName}" enabled="false"/>
		<mx:Button id="uploadBtn" label="Upload" enabled="false" click="uploadImage()"/>
		<mx:Button id="deleteBtn" label="Delete Selected Image" enabled="false" click="deleteSelectedImage()"/>
	</mx:HBox>
	
	<mx:Canvas id="imgCanvas" width="100%" height="100%"/>
	
</mx:WindowedApplication>

So there you have it, you can now move image data between CF8 and Flex 3 apps without having to make http post or get calls from the Flex app. Delivering content via binary data / ByteArrays makes it possible to deliver content to your Flex applications without having to expose that content to the public web via a URL, combined with using RemoteObject over SSL you could make a pretty slick and secure application.

Moving Images Between CF 8 and Flex 3 (AIR 1.5) - Part 1 of 2

Tue, 03 Feb 2009 06:45:00 GMT

<mx:HBox width="100%">
	<mx:ComboBox id="imageSelect" prompt="Select an image..." dataProvider="{_imageArray}" change="onImageSelect()"/>
	<mx:Button label="Add Image (Preview)" click="selectImage()"/>
	<mx:TextInput id="imageNameTI" text="{this.previewFileName}" enabled="false"/>
	<mx:Button id="uploadBtn" label="Upload" enabled="false" click="uploadImage()"/>
	<mx:Button id="deleteBtn" label="Delete Selected Image" enabled="false" click="deleteSelectedImage()"/>
</mx:HBox>

<mx:RemoteObject id="RO" endpoint="http://localhost:8302/flex2gateway" destination="ColdFusion"
	source="ImageService" fault="onROFault(event)">
	
	<mx:method name="getImageArray" result="onGetImageArrayResult(event)"/>
	<mx:method name="getImage" result="onGetImageResult(event)"/>
	<mx:method name="setImage" result="this.RO.getImageArray()"/>
	<mx:method name="deleteImage" result="this.RO.getImageArray()"/>
	
</mx:RemoteObject>

ActionScript methods.

The init() method is called when the creationComplete event is dispatched by the application. In it I am making a call to the getImageArray method.

private function init():void{
	this.RO.getImageArray();
}

The onROFault() method handles any fault events from the RO RemoteObject. I’m just popping up an Alert with the fault strings and clearing the busy cursor if we have one.

private function onROFault(event:FaultEvent):void{
	Alert.show(event.fault.faultString,event.fault.faultDetail);
	cursorManager.removeBusyCursor();
}

private function onGetImageArrayResult(event:ResultEvent):void{
	_imageArray = event.result as Array;
	cursorManager.removeBusyCursor();
}

private function onImageSelect():void{
	clearPreview();
	
	this.RO.getImage(this.imageSelect.selectedItem);
	this.cursorManager.setBusyCursor();
}

The onGetImageResult() method is the handler called by the result event from calling getImage(). Here’s where we start to see how we handle the image data returned from ColdFusion.

private function onGetImageResult(event:ResultEvent):void{
	var tempImg:Image = new Image;
	tempImg.height = event.result.Height;
	tempImg.width = event.result.Width;
	tempImg.data = event.result.Data;
	this.imgCanvas.removeAllChildren();
	this.imgCanvas.addChild(tempImg);
	cursorManager.removeBusyCursor();
	this.deleteBtn.enabled = true;
}

First I create a new Image and set it’s height and width to the returned Height and Width values.

var tempImg:Image = new Image;
tempImg.height = event.result.Height;
tempImg.width = event.result.Width;

tempImg.data = event.result.Data;

this.imgCanvas.removeAllChildren();
this.imgCanvas.addChild(tempImg);
cursorManager.removeBusyCursor();
this.deleteBtn.enabled = true;

private function selectImage():void{
	var imageTypesArray:Array = new Array(this.imageTypes);
	this.imageFile.browse(imageTypesArray);
	this.imageFile.addEventListener(Event.SELECT,imageSelected);
}

private function imageSelected(event:Event):void{
	this.ImageByteArray = new ByteArray();
	this.ImageFileStream = new FileStream();
	this.ImageFileStream.open(this.imageFile,FileMode.READ);
	this.ImageFileStream.readBytes(this.ImageByteArray);
	
	this.imgPreview = new Image;
	this.imgPreview.data = this.ImageByteArray;
	this.imgCanvas.removeAllChildren();
	this.imgCanvas.addChild(imgPreview);
	
	this.uploadBtn.enabled = true;
	this.imageNameTI.enabled = true;
	
	this.previewFileType = event.currentTarget.type;
	this.previewFileName = event.currentTarget.name.replace(this.previewFileType,'');
}

this.imgPreview = new Image;
this.imgPreview.data = this.ImageByteArray;
this.imgCanvas.removeAllChildren();
this.imgCanvas.addChild(imgPreview);

Next I enable my Upload button and the TextInput so the user can rename the image if they want.

this.uploadBtn.enabled = true;
this.imageNameTI.enabled = true;

this.previewFileType = event.currentTarget.type;
this.previewFileName = event.currentTarget.name.replace(this.previewFileType,'');

private function uploadImage():void{
	this.RO.setImage(this.ImageByteArray,this.imageNameTI.text,this.previewFileType);
	clearPreview();
	this.cursorManager.setBusyCursor();
}

The clearPreview() method removes all children from the canvas, disables the upload button and text input and sets the file name to null.

private function clearPreview():void{
	this.uploadBtn.enabled = false;
	this.imageNameTI.enabled = false;
	this.previewFileName = null;
	this.imgCanvas.removeAllChildren();
}

private function deleteSelectedImage():void{
	this.RO.deleteImage(this.imageSelect.selectedItem);
	this.deleteBtn.enabled = false;
	this.imgCanvas.removeAllChildren();
}

And here is the completed MXML file.

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" horizontalAlign="left" creationComplete="init()">
	<mx:Script>
		<![CDATA[
			import mx.controls.Image;
			import mx.rpc.events.ResultEvent;
			import mx.rpc.events.FaultEvent;
			import mx.controls.Alert;
			
			[Bindable] private var _imageArray:Array;
			private var imageFile:File = File.documentsDirectory;
			private var imageTypes:FileFilter = new FileFilter("Images (*.jpg; *.jpeg; *.gif; *.png)" ,"*.jpg; *.jpeg; *.gif; *.png");
			private var ImageByteArray:ByteArray;
			private var ImageFileStream:FileStream;
			private var imgPreview:Image;
			private var previewFileType:String;
			[Bindable] private var previewFileName:String;
			
			private function init():void{
				this.RO.getImageArray();
			}
			private function onROFault(event:FaultEvent):void{
				Alert.show(event.fault.faultString,event.fault.faultDetail);
				cursorManager.removeBusyCursor();
			}
			private function onGetImageArrayResult(event:ResultEvent):void{
				_imageArray = event.result as Array;
				cursorManager.removeBusyCursor();
			}
			private function onImageSelect():void{
				clearPreview();
				
				this.RO.getImage(this.imageSelect.selectedItem);
				this.cursorManager.setBusyCursor();
			}
			private function onGetImageResult(event:ResultEvent):void{
				var tempImg:Image = new Image;
				tempImg.height = event.result.Height;
				tempImg.width = event.result.Width;
				tempImg.data = event.result.Data;
				this.imgCanvas.removeAllChildren();
				this.imgCanvas.addChild(tempImg);
				cursorManager.removeBusyCursor();
				this.deleteBtn.enabled = true;
			}
			private function selectImage():void{
				var imageTypesArray:Array = new Array(this.imageTypes);
				this.imageFile.browse(imageTypesArray);
				this.imageFile.addEventListener(Event.SELECT,imageSelected);
			}
			private function imageSelected(event:Event):void{
				this.ImageByteArray = new ByteArray();
				this.ImageFileStream = new FileStream();
				this.ImageFileStream.open(this.imageFile,FileMode.READ);
				this.ImageFileStream.readBytes(this.ImageByteArray);
				
				this.imgPreview = new Image;
				this.imgPreview.data = this.ImageByteArray;
				this.imgCanvas.removeAllChildren();
				this.imgCanvas.addChild(imgPreview);
				
				this.uploadBtn.enabled = true;
				this.imageNameTI.enabled = true;
				
				this.previewFileType = event.currentTarget.type;
				this.previewFileName = event.currentTarget.name.replace(this.previewFileType,'');
			}
			private function uploadImage():void{
				this.RO.setImage(this.ImageByteArray,this.imageNameTI.text,this.previewFileType);
				clearPreview();
				this.cursorManager.setBusyCursor();
			}
			private function clearPreview():void{
				this.uploadBtn.enabled = false;
				this.imageNameTI.enabled = false;
				this.previewFileName = null;
				this.imgCanvas.removeAllChildren();
			}
			private function deleteSelectedImage():void{
				this.RO.deleteImage(this.imageSelect.selectedItem);
				this.deleteBtn.enabled = false;
				this.imgCanvas.removeAllChildren();
			}
		]]>
	</mx:Script>
	
	<mx:RemoteObject id="RO" endpoint="http://localhost:8302/flex2gateway" destination="ColdFusion"
		source="ImageService" fault="onROFault(event)">
		
		<mx:method name="getImageArray" result="onGetImageArrayResult(event)"/>
		<mx:method name="getImage" result="onGetImageResult(event)"/>
		<mx:method name="setImage" result="this.RO.getImageArray()"/>
		<mx:method name="deleteImage" result="this.RO.getImageArray()"/>
		
	</mx:RemoteObject>
	
	<mx:HBox width="100%">
		<mx:ComboBox id="imageSelect" prompt="Select an image..." dataProvider="{_imageArray}" change="onImageSelect()"/>
		<mx:Button label="Add Image (Preview)" click="selectImage()"/>
		<mx:TextInput id="imageNameTI" text="{this.previewFileName}" enabled="false"/>
		<mx:Button id="uploadBtn" label="Upload" enabled="false" click="uploadImage()"/>
		<mx:Button id="deleteBtn" label="Delete Selected Image" enabled="false" click="deleteSelectedImage()"/>
	</mx:HBox>
	
	<mx:Canvas id="imgCanvas" width="100%" height="100%"/>
	
</mx:WindowedApplication>

dlog private beta

Sun, 12 Oct 2008 13:56:00 GMT

I'm going to be releasing version 0.1.0b of dlog as a private beta. To be part of it, shoot me a DM on twitter (@stevegood), or hit the Contact Form button below my picture here on the blog. Either way, send me your email address and I'll make sure to get you included in the beta.

Things to expect in the 0.1.0b release:

Basic Twitter functionality
Ability to create a blog post (currently only for InstantSpot blogs) and assign categories to it.

Things to expect, in addition to above, before the public beta release (0.5.0b):

RegEx filtering and blocking for twitter / pownce / friendfeed messages and RSS feeds
Ability to create mashups of twitter /pownce / friendfeed with filters
Ability to edit or view blog entries
Support for more XMLRPC MetaWeblog API blog sites, like blogspot and blogger
Light weight RSS reader

I didn't include Jaiku in any of my features since, at the time of this posting, I still have not been sent an invitation to the service, which means no API access either. If anyone knows a way for me to get an account on the service shoot me an email sgood [at] lanctr [dot] com or hit the contact form button on my blog.

Thanks for readin'!

dlog preview

Fri, 26 Sep 2008 18:32:00 GMT

Here's a preview of dlog, my AIR (desktop) app for blogging and microblogging built completely in Flex. Currently it handles service interfaces to twitter and instantspot. It's final release will include the ability to interact with twitter, pownce, friendfeed and jaiku for microblogging and any blogging site that uses the MetaWeblog API (XMLRPC). If you have any suggested services that could be integrated in please let me know, I'm always open to adding more functionality.

Here's the video!

dlog - v0.0.2b - 9-26-2008 from Steve Good on Vimeo

Here's a link to the uncompressed version, just a little over 6MB.
dl.getdropbox.com/u/208899/dlog-preview.mp4

Subeclipse in Flexbuilder

Tue, 20 May 2008 15:01:00 GMT

I wanted to intergrate SVN into Flexbuilder. As flexbuilder doesn't include all the java plugins installing SubEclipse took 1 or 2 extra steps. I found this blog post which worked for me without issue:

http://www.flexer.info/2008/04/30/how-to-install-subclipse-on-flex-builder-3/

It's working great. Now to find a MS SQL explorer plugin so I don't need Enterprise manager open as well.

Adobe Air Camp

Sat, 17 May 2008 15:13:00 GMT

I recently attended Adobe's Air Camp ( Melbourne Australia ). There was quite a large turn out and a surprising amount of interest. I spoke with a few people and, as noted by Adobe, one of the key points is due to Adobes push for cross platform frameworks.

I'd say 70% of laptops I saw there were Macs and 100% of the Adobe staff were on Macs. I sat with a few guys who basically said if this didnt run on Linux then they wouldn't have been there that day. I think this is a good thing for Adobe. I have personally been using Flexbuilder in OSX, Windows and I played with it in Linux all with great success.

One of the nice things Adobe is doing is working hard to integrate its products and although I don't use CS3, others at work do and now they can design UI in Flash and Fireworks then pass that onto a developer to implement the logic.

The presenters and their blogs were:

Andrew Spaulding - http://www.flexdaddy.com/

Mark Blair - http://www.blairsblog.com/

Matt Voerman - http://blog.schematic.com.au/

Coldfusion on OSX ( again )

Sun, 20 Apr 2008 00:56:00 GMT

Well the CF 8 install on leopard was working well the constant wifi drop outs I was experiencing were just not worth the price on the "newest and shiniest" OS. So today I wiped the old partition and reinstalled OSX 10.4. Ill follow the same steps as before on hopefully have my setup running again soon.

Coldfusion and Flex a perfect harmony.

Fri, 18 Apr 2008 05:09:00 GMT

A new site has been launched to give examples and short tutorials on how Coldfusion and Flex communicate. Anyone can submit a tutorial and request specific examples.

www.flexcf.com is the sister site to www.learncf.com

My notes on Adobe's Flex 3 presentation: D-Flex UG kickoff meeting

Fri, 01 Feb 2008 15:54:00 GMT

Last night was the kickoff meeting for D-Flex which is the Dallas Flex User Group. This meeting was planned in conjunction with the Flex 3 Launch and featured a presentation by local Flex guru Mark Pillar, of Midnight Coders, Inc who delivered a presentation that was created by Adobe. As he went through the presentation, I took some very high level notes in bullet point format.

One thing of note specific to ColdFusion - Not *once* in Adobe's presentation materials did they even give the slightest mention to CF and how gracefully it natively interacts with Flex. As a CF developer, I find this a bit troublesome and makes me wonder a bit about Adobe's commitment to promoting ColdFusion outside of the ColdFusion community itself.

Here are my notes...

Mark Piller - Midnight Coders, Inc

General demo of features of Flex Builder
- Design view
- Descriptions of XMXL & AS
Adobe RIA technology principles
- Deploy consistently no all browsers, and now on the desktop
- Engaging, highly interactive, expressive experiences
- Highly productive environment
Description of Adobe's stack of tools
Adobe reaches 700+ million PCs and 200+ devices
99% reach on connected PCs. 8 million installs per day
250,000,000 PDF Files on the internet
Discussion of the Designer Developer Workflow - Fw, Fx, Ps, Fl, Ai
- Thermo
Some interesting Flex implementations
- Buzzword - very cool web based Flex word processing app (url: http://www.buzzword.com )
- Small Worlds - Virtual 3d world written in Flex (url: http://www.smallworlds.com/beta/ )
Rich library of common UI Controls
- video playback components
- datagrids, date, controls, etc
- charting components
Extensible model
- CSS support
- skinnable components
price for Flex Builder - $249 standard, professional $649 (upgrade pricing: Standard - 99 plugin, 249 standalone... I may have recorded the upgrade pricing incorrectly as I was still typing when he changed slides)
Import Skin Assets into Flex Builder
- CS3 makes it easy to create custom skins, then use the Flex Import Wizard
New in Flex 3
- visual CSS editor
- view all component states in one view
Design view enhancements
- Enhanced Constraints Model
  - align components with edges of any vertical of horizontal coordinate
  - support for basline alignment
- Skinning Model Improvements
  - New skin states simplify styling
  - Enhanced control over individual components
- OpenType Font support
Advanced Data Grid
- New "Grouping" including multiple grouping in datagrids in Fx3. Looks like an expandable folder tree view
Charting enhancments
New list and detail enhancements
Working with Data
- Web Services Introspection
  - Generate client proxy classes from wsdl signatures
  - Includes support for complex types returned from web services
  - enables complete code hinting for service methods and custom types
- Introductory Data Wizards
  - generates crud, etc but is mostly only useful to those just getting started
AIR
- Previously named Apollo
- Cross-OS application engine that enables hybrid desktop-internet application
  - New capabilities
    - Native OS drag and drop support
    - multi-windowed apps
    - access local file sys
    - local database storage
    - complete rendering support for html
- Flex Builder support for AIR apps
- Platform evolution
  - Reduced application size
  - users only need to download the Adobe-signed F3 platform component once
  - Flash player cache stores it for use by any flex-enabled site
  - enter flex apps can no be as small as 50K (used to be around 250K)
  - Flex 3 RSL - runtime shared library
  - RSL is potentially pulled from any Flex app.
    - question about the case where someone might modify the RSL on their site? Handshake from the player maybe? No answer
Example of the Flex Builder profiler that allowed visibility to bottle necks & high memory spots in the application. Also shows how many instances of objects have been created.
JavaScript and Ajax Wrappers
Deep Linking
- updates browser URL to represent application state
- enables user to bookmark particular points in the app or share urls
- standalone web-tier compiler modules for IIS and Apache
- Mark questioned how usable it is in its current state and insinuated that there may be some issue with using this
AIR application stack
- walk through of Seamless install (after you have AIR runtime installed which makes this a bit less than "seamless" for first timers)
- web launcher
- AIR installer contans
- Privileges - AIR apps have full desktop application privileges
  - read/write files, background execution, network access
  - There is apparently some setting in the AIR runtime environment to limit this... (an operating system where the default user doesn't have admin rights is my personal suggestion)
- Window Chrome
  - use native OS window chrome
  - use custom chrome implemented by application
- Local File Access
  - create delete copy move, list directoreis, get system info on files, dirs
- Local database
  - SQL Lite
    - supports ACID transactions
    - zero-config allowing for embedded solution
- AIR desktop integration
  - install/uninstall
  - task manager or process list
  - application shortcuts, drag/drop
  - clipboard
  - app can run in background, can show on taskbar
- Adobe Reader integration
- AIR limitations
  - limited hardware accessibility
  - no access to native libraries/executables
  - no USB or serial port
  - limited support for accessibility,
  - limited printing support
  - limited localization
    - English only for 1.0
    - Japanese, German, French for 1.1
Flex Remoting, Data Management and Messaging
- Java,.NET, PHP and Ruby solutions... no ColdFusion in your preso Adobe???
- first connectivity for Java was FDS,
  - JAVA -open source on elater Granite Data Service, Red5, WebORB ***matches LiveCycle features***, BlazeDS
  - .NET - WebORB for .NET, Flourine, AMF.Net
  - PHP - WebORB for PHP, AMFPHP, SabreAMF
  - Ruby - WebORB for Rails, RubyAMF (*stronger than WebORB for Rails*)
- Introducing Open Source BlazeDS
  - Capabilites
    - Easily connects FLex and AIR apps to existing server logic
    - high performance data transfer
    - real-time data push over standard http
    - full pub/sub messaging that extends existing messaging infrastructure
    - publication of AMF3
- bottom line: there is a free connector for almost every solution
- Remoting performance example - significant performance with remoting vs http/web services - james ward google "Blaze Bench" ???
ILOG Elixir Components (charting)
- advanced charting components
Thermo - Convert Artwork to Functional Components

Recap of the Dallas stop of the on AIR Bus Tour

Thu, 19 Jul 2007 11:56:37 GMT

Last night was the 5th stop in the on AIR Bus tour as the brought their traveling show to Big D. Unfortunately I was unable to attend, so I was glad to see this complete and detailed recap by DFWCFUG member Chris Jordan.

Thanks Chris!

Adobe OnAir Bus Tour

Wed, 18 Jul 2007 16:03:51 GMT

If you have a spare 4 hours tonight (ya right) you should definitely come down and check out the AIR bus tour.

http://onair.adobe.com/schedule/cities/dallas.php

Ted Patrick along with Mike Downey and Mike Chambers will be on hand to show you what you can do with Flex and HTML based AIR applicaitons.

BTW - free Red Bull, food, Adobe Software (including Flex Builder) and Master Collections.