YOUR FEEDBACK
José D'Andrade wrote: "...it may never be released..." Why? "...if Midori isn’t heir to Windows Mi...


2007 West
GOLD SPONSORS:
Active Endpoints
Your SOA Needs BPEL for Orchestration
BEA
Virtualized SOA: Adaptive Infrastructure for Demanding Applications
Nexaweb
Overcoming Bandwidth Challenges with Nexaweb
TIBCO
What is Service Virtualization?
SILVER SPONSORS:
WSO2
Using Web Services Technologies and FOSS Solutions
Click For 2007 East
Event Webcasts

2008 East
PLATINUM SPONSORS:
Appcelerator
Think Fast: Accelerate AJAX Development with Appcelerator
GOLD SPONSORS:
DreamFace Interactive
The Ultimate Framework for Creating Personalized Web 2.0 Mashups
ICEsoft
AJAX and Social Computing for the Enterprise
Kaazing
Enterprise Comet: Real–Time, Real–Time, or Real–Time Web 2.0?
Nexaweb
Now Playing: Desktop Apps in the Browser!
Sun
jMaki as an AJAX Mashup Framework
POWER PANELS:
The Business Value
of RIAs
What Lies Beyond AJAX?
KEYNOTES:
Douglas Crockford
Can We Fix the Web?
Anthony Franco
2008: The Year of the RIA
Click For 2007 Event Webcasts
SYS-CON.TV
MXDJ TOP LINKS YOU MUST CLICK ON !


Binary Data, ColdFusion & Flex
Sending BitmapData to a server and saving it as a JPG file

If you aren't using remoting, you can save the data using Web Services or HTTP services. Most seasoned ColdFusion developers might stop me here and say... "If you're using CFCs as Web Services, why wouldn't you just use them as RemoteObject methods since they are faster?" My response is this: This is just an example. You may be able to take this method and apply it to other technologies where it may be applicable (.NET, Java, PHP, etc.).

<cfcomponent name="ImageSave" displayname="ImageSave" output="false">
    <cffunction name="WSsave" access="remote" output="false" returntype="void">
       <cfargument name="data" type="string" required="true" />
       <cffile action="write" file="c:\temp\ws_data.jpg"
output="#ToBinary(arguments.data)#" />
    </cffunction>
</cfcomponent>

You can see that the code for the Web Service method is very similar to the previous example. The only difference is that the toBinary method is being used to convert the data from a Base64-encoded string into binary data. The CFC's WSsave (Web Service save) method is expecting a Base64-encoded string as a parameter. When executed, the data is also written to the file system using the <CFFILE /> "write" method.

In Flex, we need an instance of a mx:WebService to save the data:

<mx:WebService
id="ws"
    showBusyCursor="true"
    wsdl="/BinaryData/cf/ImageSave.cfc?wsdl">

<mx:operation name="WSsave"
result="onResult('Data Saved via mx:WebService')"
fault="onFault(event)" />
</mx:WebService>

To save the data, we first need to Base64-encode it. The following function will take care of that for us:

private function base64Encode( data : ByteArray ) : String
{
var encoder : Base64Encoder = new Base64Encoder();
    encoder.encodeBytes( data );
    return encoder.flush();
}

We'll then invoke the WSsave method and pass the Base64-encoded ByteArray as a parameter:

var bd : BitmapData = getUIComponentBitmapData( paintCanvas );
var encoder : JPEGEncoder = new JPEGEncoder(75);
var data : ByteArray = encoder.encode( bd );
ws.WSsave( base64Encode( data ) );

If you want to save the binary data without using RemoteObjects or Web Services, you can always use a standard HTTP post method. In Flex, you'll have to create an instance of an HTTPService object, with the method set to "POST":

<mx:HTTPService
id="hs"
    showBusyCursor="true"
    useProxy="false"
    method="POST"
    resultFormat="text"
    url="/BinaryData/cf/HTTPImageSave.cfm"
result="onResult('Data Saved via mx:HTTPService')"
fault="onFault(event)" />

The file HTTPImageSave.cfm is actually very simple. The save occurs with only two lines of code:

<cfparam name="data" type="string" default="">
<cffile action="write" file="c:\temp\http_data.jpg" output="#ToBinary( data )#" />

You'll notice in this case that the data is also being written to the file system using the toBinary method (to convert the Base64-encoded string back into binary data). When invoking the HTTPService, you'll have to create an object containing the parameters for the HTTPService and send it as the parameter of the HTTPService.send method (note "hs" is the id of the HTTPService instance):

var bd : BitmapData = getUIComponentBitmapData( paintCanvas );
var encoder : JPEGEncoder = new JPEGEncoder(75);
var data : ByteArray = encoder.encode( bd );
var params : Object = { data : base64Encode( data ) };
hs.send( params );

...and that is how you save binary image data using RemoteObjects, Web Services, or HTTPServices. This doesn't just apply to images. This applies to any kind of binary data; the only difference is that the image data first gets encoded to a JPG ByteArray. The AS3 corelib project on Adobe Labs/Google Code also includes class libraries that enable you to save data as PNG images instead of JPG images, so JPG isn't your only option.

A few things to keep in mind for real-world applications... It's best practice to use <CFFILE /> in a <CFTRY/> statement to catch any file system errors that may occur (not enough space, permissions, etc.). It's also best practice to use <CFLOCK /> with <CFFILE /> to prevent any errors due to data synchronization, threading access, or deadlock scenarios.

A working example and the source code from this article can be viewed online at www.cynergysystems.com/blogs/blogs/andrew.trice/binary_data_example/ or downloaded from www.cynergysystems.com/blogs/blogs/andrew.trice/binary_data_example/BinaryData.zip.

About Andrew Trice
Andrew Trice is a consultant with Cynergy Systems in Washington, DC, where he specializes in development of Flex-based Rich Internet Applications. Andrew has over 5 years of proven experience in the RIA industry, including application design and development using Flex, Flash, ColdFusion, J2EE and .NET architectures.

YOUR FEEDBACK
riccardo molti wrote: So web developers are now 'Front-end engineers' - I like it! Let em start looking at Yahoo! UI, sounds cool.
LATEST FLEX STORIES & POSTS
Vaulthouse has launched its flagship product aimed at companies that deal with insurance claims. ClaimAble is an innovative claims management solution based on the Adobe AIR framework, enabling a desktop-like experience to be delivered over the web.
I recently gave a presentation on Flex frameworks at the New York Flex Users Group. More than 50 people showed up, which proves that this is an important topic. By the end of the presentation the temperature in the room had increased because an innocent talk had turned into a heated di...
Mike Neil is general manager for virtualization strategy in the Windows Server Division at Microsoft. Mike is focused on the delivery of the Windows virtualization technology, including Windows Server 2008 Hyper-V, Microsoft Hyper-V Server and Virtual PC 2007. Mike also directs the tec...
Two of the biggest launches in Rich Internet Application history took place in 2007/2008 when Adobe launched AIR 1.0 in February '08 and Microsoft launched Silverlight (September '07). At the 6th International AJAXWorld RIA Conference & Expo in October SYS-CON Events is delighted to be...
4D announced the release of 4D Web 2.0 Pack v11 Release 2. The new version, a combination of two products - 4D AJAX Framework and 4D for Flex - brings a powerful set of tools, plug-ins, and components that allow 4D developers to harness the power of Web 2.0 technologies, and deliver li...
Read about Forrester's findings on RIA security included in a Forrester Research paper valued at $775 titled 'Securing Rich Internet Applications' by Jeffrey Hammond, plus find out about Curl's Security Architecture in a new Curl white paper titled 'Developing Secure Rich Internet Appl...
SUBSCRIBE TO THE WORLD'S MOST POWERFUL NEWSLETTERS
SUBSCRIBE TO OUR RSS FEEDS & GET YOUR SYS-CON NEWS LIVE!
Click to Add our RSS Feeds to the Service of Your Choice:
Google Reader or Homepage Add to My Yahoo! Subscribe with Bloglines Subscribe in NewsGator Online
myFeedster Add to My AOL Subscribe in Rojo Add 'Hugg' to Newsburst from CNET News.com Kinja Digest View Additional SYS-CON Feeds
Publish Your Article! Please send it to editorial(at)sys-con.com!

Advertise on this site! Contact advertising(at)sys-con.com! 201 802-3021


SYS-CON FEATURED WHITEPAPERS

MOST READ THIS WEEK
ADS BY GOOGLE