Welcome!

You will be redirected in 30 seconds or close now.

ColdFusion Authors: Yakov Fain, Jeremy Geelan, Maureen O'Gara, Nancy Y. Nee, Tad Anderson

Related Topics: ColdFusion, Adobe Flex

ColdFusion: Article

Creating a Flex 2 Signature Grabber

My MAXUP Experience

By the time you read this, another MAX will be in the history books. In fact, with a record attendance of around 3,500 developers and designers, this MAX in Vegas will also be in the record books.

Along with the usual great conference sessions, this year there was a special event referred to as the "BarCamp - The unconference event" called MAXUP. I presented a MAXUP demo, A Flex 2 Signature Panel at MAXUP, where I showed the audience how easy it was to combine a Flex 2 UI for capturing a mouse-created signature with the ActionSript 3 Drawing API and a remote object call to a ColdFusion component. Leveraging work that James Ward blogged about on cayambe.com, I retooled the back-end as a ColdFusion CFC (I make remote object calls to the CFC's functions), and made some minor UI changes to create a signature panel that could be used for online NDA agreements or e-signatures.

Adobe Flex 2 Builder allowed me to lay out very quickly a simple UI where a user can use a mouse (or even better a drawing pen) to write out messages (See Figure 1).

The signature pad captures a visitor's IP address via a remote object call to a CFC method getVisitorIP() during the Flex application's initialize event:

MXML:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize=" roSign.getVisitorIP()"
creationComplete="setColor()" styleName="plain" viewSourceURL="srcview/index.html" horizontalAlign="center"
verticalAlign="top">

<mx:RemoteObject id="roSign"
destination="ColdFusion"
source="flex2_training.components.signature"
fault="mx.controls.Alert.show(event.fault.faultDetail.toString(), 'Alert');"
showBusyCursor="true">
<mx:method name="getVisitorIP" result="my_IP_handler(event.result)"/>
<mx:method name="doUpload" result="my_CFC_handler(event.result)"/>
</mx:RemoteObject>

CFC:
<cffunction name="getVisitorIP" displayname=
"Get IP Address" hint="Returns Visitor's' IP address" access="remote" returntype="string">
<cfset sIP = "#CGI.Remote_Addr#">
<cfreturn sIP />
</cffunction>

Clicking the 'Accept' button triggers the click event that calls the remote object doUpload and corresponding CFC method:

MXML:
<mx:RemoteObject id="roSign"
destination="ColdFusion"
source="flex2_training.components.signature"
fault="mx.controls.Alert.show(event.fault.faultDetail.toString(), 'Alert');"
showBusyCursor="true">
<mx:method name="getVisitorIP" result="my_IP_handler(event.result)"/>
<mx:method name="doUpload" result="my_CFC_handler(event.result)"/>
</mx:RemoteObject>

<mx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
import flash.events.Event;

private var sIP:String;
private function doSave():void {
var bd:BitmapData = new BitmapData(canvas.width,canvas.height);
bd.draw(canvas);
var ba:ByteArray = PNGEnc.encode(bd); // See the PNGEnc.as code
roSign.doUpload(ba,sIP); // pass the ByteArray and the Visitor's IP address
}
]]>
</mx:Script>
CFC:
<cffunction name="doUpload" displayname=
"Save Signature" hint="Saves a PNG Signature" access="remote" output="false" returntype="any">
<cfargument name="sigbytes" required="true" type="binary">
<cfargument name="ip_suffix" required="true" type="string">
<cfscript>
var myUUID = "";
    var SigFileName = "";
</cfscript>
<!--- create a FileOutputStream --->
<cfobject type="java" action="CREATE" class="java.io.FileOutputStream" name="oStream">
<cfscript>
    myUUID = CreateUUID(); // create a unique id

// call init method, passing in the full path to the desired jpg
oStream.init(expandPath("../converted_pngs/signature_#arguments.ip_suffix#_#myUUID#.png"));
oStream.write(arguments.sigbytes);
oStream.close();

SigFileName = getSigFileName("#arguments.ip_suffix#_#myUUID#");
</cfscript>
<cfreturn SigFileName />
</cffunction>

Once the doUpload method is complete, the event.result is returned (the dynamic file name [including both an IP address and a UUID] of the stored PNG image file) and assigned to a Flex string variable, SigFileName:

MXML:
<mx:Script>
<![CDATA[
........ abbreviated for space saving ........
    private var SigFileName:String;

private function my_CFC_handler(result:Object):void {
SigFileName = result.toString();
btnView.enabled = true;
}
]]>
</mx:Script>

Clicking on the 'View' button triggers the click event and the function doView(), which opens the page and the saved PNG image as shown in Figure 2:

MXML:
<mx:Script>
<![CDATA[
........ abbreviated for space saving ........

private function doView():void {
var u:URLRequest = new URLRequest("../welcome.cfm?sig=" + SigFileName + ".png");
navigateToURL(u,"_self");
}
]]>
</mx:Script>

The complete code listing is available at: http://webcfmx.no-ip.info/flextraining/signature/bin/srcview/index.html

PNGEnc.as:
package {

    import flash.geom.*;
    import flash.display.*;
    import flash.utils.*;

    public class PNGEnc {

    public static function encode(img:BitmapData):ByteArray {
      // Create output byte array
      var png:ByteArray = new ByteArray();
      // Write PNG signature
      png.writeUnsignedInt(0x89504e47);
      png.writeUnsignedInt(0x0D0A1A0A);
      // Build IHDR chunk
      var IHDR:ByteArray = new ByteArray();
      IHDR.writeInt(img.width);
      IHDR.writeInt(img.height);
      IHDR.writeUnsignedInt(0x08060000); // 32bit RGBA
      IHDR.writeByte(0);
      writeChunk(png,0x49484452,IHDR);
      // Build IDAT chunk
      var IDAT:ByteArray= new ByteArray();
      for(var i:int=0;i < img.height;i++) {
        // no filter
        IDAT.writeByte(0);
        var p:uint;
        if ( !img.transparent ) {
          for(var j:int=0;j < img.width;j++) {
          p = img.getPixel(j,i);
          IDAT.writeUnsignedInt(
            uint(((p&0xFFFFFF) << 8)|0xFF));
          }
        } else {
        for(var k:int=0;k < img.width;k++) {
        p = img.getPixel32(k,i);
        IDAT.writeUnsignedInt(
          uint(((p&0xFFFFFF) << 8)|
          (p>>>24)));
        }
      }
    }
    IDAT.compress();
    writeChunk(png,0x49444154,IDAT);
    // Build IEND chunk
    writeChunk(png,0x49454E44,null);
    // return PNG
    return png;
    }

    private static var crcTable:Array;
    private static var crcTableComputed:Boolean = false;

    private static function writeChunk(png:ByteArray,
      type:uint, data:ByteArray):void {
    if (!crcTableComputed) {
      crcTableComputed = true;
      crcTable = [];
      for (var n:uint = 0; n < 256; n++) {
        var c:uint = n;
        for (var k:uint = 0; k < 8; k++) {
        if (c & 1) {
          c = uint(uint(0xedb88320) ^
            uint(c >>> 1));
         } else {
            c = uint(c >>> 1);
         }
         }
         crcTable[n] = c;
      }
    }
    var len:uint = 0;
    if (data != null) {
      len = data.length;
    }
    png.writeUnsignedInt(len);
    var p:uint = png.position;
    png.writeUnsignedInt(type);
    if ( data != null ) {
      png.writeBytes(data);
    }
    var e:uint = png.position;
    png.position = p;
    var d:uint = 0xffffffff;
    for (var i:int = 0; i < (e-p); i++) {
      d = uint(crcTable[
        (d ^ png.readUnsignedByte()) &
        uint(0xff)] ^ uint(d >>> 8));
    }
    d = uint(d^uint(0xffffffff));
    png.position = e;
    png.writeUnsignedInt(d);
      }
    }
}

MAXUP was a great success. Although somewhat nervous before my presentation, I was grinning ear-to-ear afterwards from Adobe's Ted Patrick's encouragement. He said, "Mike, I like the way you used AMF to pass the byte-array to the server-side code." Thanks, Ted. (Figure 3)

Reflecting on how much easier it was to create this example compared to the two-month-long project of doing it with the Flash 7 IDE/Flex 1.5/CFMX 6.1/Apache Batik, I am simply amazed by Flex 2's versatility and efficiency in getting the job done quickly. If you still haven't had a chance to try out the Flex 2-CFMX 7.0.2 dynamic duo, I hope this example helps lure you in a bit further.

More Stories By Michael Givens

Mike Givens is the CTO of U Saw It Enterprises, a Web technology consulting firm based in Marietta, GA. He is an Adobe Corporate Champion known to share his experience and evangelism of all things Adobe. Certified in both ColdFusion 5 and as an Advanced CFMX Developer, he has been using ColdFusion since the days of Allaire Spectra. For the last 11 years, he has been seen with his head down - deep in the code.

Comments (1) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


Most Recent Comments
Todd Cullen 12/25/06 01:48:45 PM EST

Great Article! I've always thought it'd be a nice feature to capture someones signature digitally. I had no idea it would be that easy, relatively speaking. Thanks for the post.

IoT & Smart Cities Stories
The challenges of aggregating data from consumer-oriented devices, such as wearable technologies and smart thermostats, are fairly well-understood. However, there are a new set of challenges for IoT devices that generate megabytes or gigabytes of data per second. Certainly, the infrastructure will have to change, as those volumes of data will likely overwhelm the available bandwidth for aggregating the data into a central repository. Ochandarena discusses a whole new way to think about your next...
CloudEXPO | DevOpsSUMMIT | DXWorldEXPO are the world's most influential, independent events where Cloud Computing was coined and where technology buyers and vendors meet to experience and discuss the big picture of Digital Transformation and all of the strategies, tactics, and tools they need to realize their goals. Sponsors of DXWorldEXPO | CloudEXPO benefit from unmatched branding, profile building and lead generation opportunities.
All in Mobile is a place where we continually maximize their impact by fostering understanding, empathy, insights, creativity and joy. They believe that a truly useful and desirable mobile app doesn't need the brightest idea or the most advanced technology. A great product begins with understanding people. It's easy to think that customers will love your app, but can you justify it? They make sure your final app is something that users truly want and need. The only way to do this is by ...
Digital Transformation and Disruption, Amazon Style - What You Can Learn. Chris Kocher is a co-founder of Grey Heron, a management and strategic marketing consulting firm. He has 25+ years in both strategic and hands-on operating experience helping executives and investors build revenues and shareholder value. He has consulted with over 130 companies on innovating with new business models, product strategies and monetization. Chris has held management positions at HP and Symantec in addition to ...
DXWorldEXPO LLC announced today that Big Data Federation to Exhibit at the 22nd International CloudEXPO, colocated with DevOpsSUMMIT and DXWorldEXPO, November 12-13, 2018 in New York City. Big Data Federation, Inc. develops and applies artificial intelligence to predict financial and economic events that matter. The company uncovers patterns and precise drivers of performance and outcomes with the aid of machine-learning algorithms, big data, and fundamental analysis. Their products are deployed...
Dynatrace is an application performance management software company with products for the information technology departments and digital business owners of medium and large businesses. Building the Future of Monitoring with Artificial Intelligence. Today we can collect lots and lots of performance data. We build beautiful dashboards and even have fancy query languages to access and transform the data. Still performance data is a secret language only a couple of people understand. The more busine...
Cell networks have the advantage of long-range communications, reaching an estimated 90% of the world. But cell networks such as 2G, 3G and LTE consume lots of power and were designed for connecting people. They are not optimized for low- or battery-powered devices or for IoT applications with infrequently transmitted data. Cell IoT modules that support narrow-band IoT and 4G cell networks will enable cell connectivity, device management, and app enablement for low-power wide-area network IoT. B...
The hierarchical architecture that distributes "compute" within the network specially at the edge can enable new services by harnessing emerging technologies. But Edge-Compute comes at increased cost that needs to be managed and potentially augmented by creative architecture solutions as there will always a catching-up with the capacity demands. Processing power in smartphones has enhanced YoY and there is increasingly spare compute capacity that can be potentially pooled. Uber has successfully ...
SYS-CON Events announced today that CrowdReviews.com has been named “Media Sponsor” of SYS-CON's 22nd International Cloud Expo, which will take place on June 5–7, 2018, at the Javits Center in New York City, NY. CrowdReviews.com is a transparent online platform for determining which products and services are the best based on the opinion of the crowd. The crowd consists of Internet users that have experienced products and services first-hand and have an interest in letting other potential buye...
When talking IoT we often focus on the devices, the sensors, the hardware itself. The new smart appliances, the new smart or self-driving cars (which are amalgamations of many ‘things'). When we are looking at the world of IoT, we should take a step back, look at the big picture. What value are these devices providing. IoT is not about the devices, its about the data consumed and generated. The devices are tools, mechanisms, conduits. This paper discusses the considerations when dealing with the...