July 2016


          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            
 
FEEDS
 
ARCHIVES
 
RECENT ENTRIES
 
OTHER BLOGGERS
 
AGGREGATORS
 
SOCIAL NETWORKS
:: 04/13/2012 ::
Flex is King. Long live the King.
Back To Top
With all the hype of the latest buzzword, HTML5, and its evolving, under development nature (at least in the foreseeable future), leveraging Adobe Flex to front certain types of web applications is still a quite capable technology. With its ability to build complex RIA's (rich internet applications) that can use frameworks, a myriad of powerful ActionScript 3 (AS3) libraries, and the tag-based MXML (and AS3 in-line scripting), and that you can connect your end users to their important data in a multitude of ways – connecting with a server-side infrastructure (via ColdFusion, PHP, .NET are examples) and reading from a database, reading an XML file, reading from a web service, or creating a socket connection - Flex is all that and a bag of chips. Despite what you may have heard or read - Adobe's position on discontinuing Flash Player plugin development work for mobile phones – about the alleged demise of Flash - Flex runs on the web, and the Flash Player plugin for the web is still very much alive.

Read More
 
 
:: 04/12/2012 ::
Convert a Raster Image to Vector Formats with Flex and ColdFusion
Back To Top
I created this example after reading a job posting looking for the ability to first load an image, and then, by selecting a portion of the image (using a selection rectangle), to save it into a "OCR-like" TIF file.

Click to try the example.

Sceenshot of the app:

Example display

If you're a regular reader of my blog, you'll recognize my technique that combines an AS3 PNG encoder, an open-source utility (KVEC), the Apache Batik project, and of course, ColdFusion 9, enabling you to convert an image to the TIF/PNG/SVG/PDF formats.

This example allows you to upload any JPG, PNG, or GIF (up to 500 KB each upload), and convert it entirely (or select any portion of it with a ActionScript 3 selection rectangle) to all four file-types - a SVG, a PNG, a TIF, and a PDF. It works like this:

  • The uploaded image (or only a selected portion) is passed as binary data to a ColdFusion CFC function that saves a PNG to the ColdFusion server's file system.
  • Next, leveraging an open source tool, KVEC, the PNG, created in step one, is passed to another CFC function that converts the PNG to a SVG file.
  • Next, the SVG is passed to a CFC function that completes the final conversions - 1) to a PDF file and 2) to a TIF file, using the Apache Batik project's batik-rasterizer.jar.
  • Next, leveraging the ColdFusion 9 (available in CF 8 too) <cfzip> tag, a CFC function creates a zip archive containing the PNG, the SVG, the TIF, and the PDF files of the uploaded image.
  • Finally, to save on disk space, a final CFC function is called to delete the TIF, SVG, and PDF files (once the zip archive is safely created). The PNG is retained and used for display purposes.

Click to try the example.

        Tip Jar:

 
:: 03/17/2012 ::
Bitly, Flex, and ColdFusion 9
Back To Top
I use bitly.com for shortening some of my URLs. There are API Libraries and Documentation for bitly, so it is possible to write your own bitly-related applications. In this post, I'll show you two examples of such applications - one built in Flex and AS3 and another in ColdFusion's CFML.

Read More
 
 
:: 03/14/2012 ::
Flex-based and Node.js file uploads
Back To Top
Recently I was looking at Node.js and one of my Flex-based file upload examples, and thought it would be worthwhile to do a side-by-side comparison of the two techniques. As a huge fan of Flex, I really like to work with it, but Node.js is an interesting technology too.

Read More
 
 
:: 03/04/2012 ::
Create your own electronic signature with Flex or HTML5 and ColdFusion 9
Back To Top
Create your own electronic signature (Flex-based or HTML5-based)

In an updated example of a technique that combines an AS3 PNG encoder, an open-source utility (KVEC), the Apache Batik project, and of course, ColdFusion 9, you can create your very own electronic signature. You can also try the new HTML5 version.

Flex-based version  Flex SDK logo:

The electronic signature you create, by dragging your mouse across the signature canvas to, in effect, sign your 'John Hancock', works like this:

  • The signature drawing is passed as binary data to a ColdFusion CFC function that saves the PNG to the ColdFusion server's file system.
  • Next, leveraging an open source tool, KVEC, the PNG, created in step one, is passed to another CFC function that converts the PNG to a SVG file.
  • Next, the SVG is passed to a CFC function that completes the final conversion to a PDF file, using the Apache Batik project's batik-rasterizer.jar.
  • Next, leveraging the ColdFusion 9 (available in CF 8 too) <cfzip> tag, a CFC function creates a zip archive of the PNG, the SVG, and the PDF files of the signature just created.
  • Finally, to save on disk space, a final CFC function is called to delete the PNG and SVG files (once the PDF and zip archive are safely created).

Click to create your own electronic signature with the Flex-based version.

HTML5-based version  Flex SDK logo:

The electronic signature you create, by dragging your mouse across the HTML5 canvas to, in effect, sign your 'John Hancock', works like this:

  • The signature drawing is converted to a JSON array of points, via a modified Thomas J. Bradley's Signature Pad, collected, via James Moberg's sigJsonToImage ColdFusion UDF, and passed to a function in the UDF that saves the PNG (a raster-based graphic) to the ColdFusion server's file system.
  • Next, leveraging an open source tool, KVEC, the PNG, created in step one, is passed to CFML that converts the PNG to a SVG file.
  • Next, the SVG is passed to CFML that completes the final conversion to a PDF file, using the Apache Batik project's batik-rasterizer.jar.
  • Next, leveraging the ColdFusion 9 (available in CF 8 too) <cfzip> tag, and more CFML that creates a zip archive of the PNG, the SVG, and the PDF files of the signature just created.
  • Finally, to save on disk space, final CFML is used to delete the PNG and SVG files (once the PDF and zip archive are safely created).

Click to create your own electronic signature with the HTML5 version.

        Tip Jar:

Related Entries:
 
:: 12/23/2010 ::
AIR Videographer with the Camera class
Back To Top
Happy Holidays to everyone. Here's an early St. Nick present from my blog. This "Videographer" Adobe AIR application shows an example of leveraging the Camera class (flash.media.Camera) to capture an image from a desktop User's webcam, doing file uploads with AIR and ColdFusion, and automatically posting to facebook and flickr accounts. This example also uses the ImageShrinker.swc (ImageShrinker.swc) to manipulate the images prior to the actual physical upload and posting to facebook and flickr.

Here's the "Videographer" Adobe AIR application: Videographer.air. The source code is included in the installed application. You will need to install the Adobe AIR runtime if you do not already have it installed.

Read More
 
Related Entries:
 
:: 11/28/2010 ::
A Flex SDK 4.1 example of password recovery
Back To Top
I am not a fan of most forgot my password systems that force you to reset your password if you forget it. I prefer to be given the choice to simply email my current password to the email address that is on file. Once I receive the email, I can login and then change my password if I'm worried about the across the wires email that was sent to me with my original password. Of course, maybe that is not a good idea for a financial-related website, but for non-financial password-protected sites (e.g. TVGuide.com) there should be a choice to reset or recover a forgotten password.

I created an example of one approach that combines a Flex-based UI (leveraging Adobe Flash Builder and the Flex SDK 4.1), a mySQL database, and ColdFusion.

Read More
 
 
:: 11/25/2010 ::
A Simple Photo Uploader with an ImageShrinker.swc
Back To Top
Happy Thanksgiving to everyone. Here's an early black friday special for readers of my blog. This "Simple PhotoUploader" Adobe AIR application shows an example of doing file uploads with AIR and ColdFusion while leveraging a cool swc I found (ImageShrinker.swc) that allows you to manipulate the images prior to the actual physical upload. This allows you, the developer, to control the size and other properties of file uploads (height / width / output format / shrink ratio / etc.) before the file actually touches your server. Gone are the days of huge files tying up your server's storage space.

Here are the properties and methods available with the ImageShrinker.swc:

the

Here's the "Simple PhotoUploader" Adobe AIR application: Simple PhotoUploader.air. The source code is included in the installed application. You will need to install the Adobe AIR runtime if you do not already have it installed.

Read More
 
 
:: 11/19/2010 ::
Introducing a new Adobe Flex and AIR Developer
Back To Top
This may just be the best work I did in all of 2010. :-)

the newest employee of U Saw It Enterprises

the newest employee of U Saw It Enterprises

My son is very curious about everything, and this new lenova laptop caught his eye.

Read More
 
 
:: 09/22/2009 ::
Flex DVD Library - Revisited
Back To Top
I have been collecting DVD movies for years now, and on some occasions, I have forgotten that I already owned a movie. More times than I hate to admit, I have ended up with two copies. This past weekend, I revised my Flex DVD Library application. By combining Flex with a ColdFusion, CFC-based backend that allows me to store my DVD inventory in a mySQL database, I should no longer buy more than one copy of the same movie. :-)

This Flex application displays the inventory in a DataGrid with an itemRenderer that displays the DVD cover art, and it utilizes an updated Amazon Product API (as of August 15, 2009, you are required to send a security request authentication signature) webservice to dynamically locate the URL of a medium-sized image of the cover. I used Flex Builder's ColdFusion CFC Value Object Wizard to quickly create the server-side components and, bam, got er done - storing all the DVD's pertinent information in a mySQL 5 database. Leveraging the YouTube API, the application also captures the DVD's trailer link. A final call to an IMDB webservice, and the app grabs the movie's running time and genre. I added the edit capability to allow easy updating of the DVD archive's information. The source code is provided.

Try It

Source code

Documentation that you may find helpful:

The mySQL script for generating the database table is:
http://labs.insideflex.com/flextraining/movies/tbl_movie.zip

        Tip Jar:

 
:: 09/19/2009 ::
Flex / ColdFusion FAQ Admin Tool Example
Back To Top
Utilizing Flex Builder's ColdFusion CFC wizard, a mySQL database, and the ease of the Flex / ActionScript 3 language, I put together a sample FAQ Administration Tool. This tool can be easily deployed on any site where a frequently asked questions repository is needed. As usual, the source code is provided.

Try it out

        Tip Jar:

 
:: 09/02/2009 ::
Create your own electronic signature with Flex and ColdFusion 8
Back To Top

Create your own electronic signature

In an enhanced example of a technique that works well - combining an AS 3 PNG encoder, an open-source utility, the Apache Batik project, and of course, ColdFusion 8, you can create your very own electronic signature.

The electronic signature you create, by dragging your mouse across the signature canvas to, in effect, sign your 'John Hancock', works like this:

  • The signature drawing is passed as binary data to a ColdFusion CFC function that saves the PNG to the ColdFusion server's file system.
  • Next, leveraging an open source tool, KVEC, the PNG, created in step one, is passed to another CFC function that converts the PNG to a SVG file.
  • Next, the SVG is passed to a CFC function that completes the final conversion to a PDF file, using the Apache Batik project's batik-rasterizer.jar.
  • Next, leveraging the ColdFusion 8 <cfzip> tag, a CFC function creates a zip archive of the PNG, the SVG, and the PDF files of the signature just created.
  • Finally, to save on disk space, a final CFC function is called to delete the PNG and SVG files (once the PDF and zip archive are safely created).

Create your personal signature

        Tip Jar:

Related Entries:
 
:: 08/04/2009 ::
Have you ever wanted to take the UI display of your Flex application and convert it directly to a PDF?
Back To Top

Have you ever wanted to take the UI display of your Flex application and convert it directly to a *PDF?

In an example of one technique that works, using an AS 3 PNG encoder, I pass an NDA signature drawing as binary data to a ColdFusion CFC function and save the PNG to disk. Next, leveraging a cool open source tool, KVEC, I pass the PNG filename, created in step one, to another CFC function that converts the PNG to a SVG file. Finally, the filename of the SVG is passed to a CFC function that completes the final conversion to a *PDF file, using the Apache Batik project's batik-rasterizer.jar (that converts SVG to a PDF). To save on disk space, I use one final CFC function to delete the PNG and SVG files, once the *PDF is created.

* The PDF contents of your Flex UI are no longer subject to pixelation when enlarged, the graphics now being vector-based.

Try It

Related Entries:
 
:: 07/25/2009 ::
Flex and MSSoap: The Right Tool At The Right Time
Back To Top
I had an interesting week with a Flex prototype I started working with. A .NET web service and a missing crossdomain.xml file made for a challenging situation - trying to retrieve the data with the Flash Player 9 security model doing such an excellent job. A business associate of mine told me about a tool that I had not used before - MSSoap Toolkit. I downloaded the 3.0 version on my Windows Vista OS, and in no-time, had my data displayed in my Flex UI. Here's how:

1. Once I downloaded and installed the MSSoap toolkit, I ran the executable (mine was located at C:\Program Files\MSSOAP\Binaries\MSSoapT.exe).

2. Next, with the MSSoap UI, I pointed my port 8080 to the .NET server's domain name, and

3. Finally, I tweaked my Flex web service call to include the 8080 port.

Now, running my Flex UI returned data via this 'proxied' approach. Cool beans.

 
:: 07/12/2009 ::
Flash Builder Beta Code Example
Back To Top
Just a quick peek at the type of code you will become familiar with once you transition from Flex Builder 3 to the upcoming Flash Builder release:

Click here to see the code.

* Note the fx:Style, fx:Script, and fx:Declarations tags, new to the beta's Flex SDK.

 
:: 11/30/2008 ::
Flex 4: Data-centric Application Development
Back To Top

This, currently, imaginary book title is more than just a teaser for a book about the next version of Flex. It is my way of asking the designer and developer communities what has been the biggest hurdle you faced in wiring an Adobe Flex-based UI to a server-side infrastruture for your data-driven applications (e.g. the pain points or frustrations you had to overcome to get to your server's data)? Do you use ColdFusion, JAVA, PHP, .NET, or another back-end? Would you be interested in a book that focuses on this specific topic - a comprehensive, deep examination of any new Flex 4 features that address the issues you are facing in providing a Flex front-end with a data-intensive connection to your flavor of back-end server infrastructure?

 
:: 12/18/2007 ::
Snow Ball Fight 2007 featuring Adobe Flex 2 and Flex Data Services
Back To Top
It's officially the start of Snow Ball Fight 2007 guest-starring Adobe Flex 2 and Flex Data Services.

This is a quick, holiday example of what Flex 2 and Flex Data Services simplify.

1) Flex 2 Data Services' real-time publish/subscribe capability. I am using two producers and two consumers to message the the days until December 25 2007, and allowing connected clients to message back and forth (humorously called throwing a snowball).

Tip: You can either open two browser windows or have a friend go to the same demo to try the messaging back and forth.

2) Loading and playing MP3's (as well as muting and re-playing the sound)

3) Using a non-default preloader (a snowflake)

4) Adding a backgroundImage Flash swf (snowing effect)

5) Utilizing a ColdFusion CFC to communicate with a mySQL database backend to store the messages in the snowballs thrown.

I hope this example helps you with your Flex 2 coding and further entices you to experiment with Flex 2 and Flex 2 Data Services.

Happy Holidays and Merry Christmas (Feliz Navidad, Joyeux Noel, Frohe Weihnachten, Natale allegro, Christmas Alegre, God Jul, Glaedelig Jul, Vrolijk kerstfeest, Hauskaa Joulua, Boas Festas, Maligayang Pasko)

Mike Givens
December 2007

Oh yeah, here's the link Try It     * Source code is included.

 
:: 03/09/2007 ::
Limit Access By IP Address(es) to Content
Back To Top
My Flex Cookbook post, Get a Client IP Address with a RemoteObject Call, shows one way to limit access to some Flex content on your internal network or by selected IP addresses. I use the ColdFusion CFML CGI.Remote_Addr variable passed to the Flex UI via AMF.

View the post

By the way, don't forget to post your Flex tips or examples to the Adobe Flex 2 Cookbook: http://www.adobe.com/go/flex_cookbook

 
:: 03/07/2007 ::
360Flex and E4X Flex 2 Musings
Back To Top
Reporting from the 360Flex Conference and fresh from Danny Patterson's Tuesday E4X Session, here is a quick example of E4X at work plus a dash of ColdFusion. This demo displays a Flex 2 TextArea of a simple XML data structure read in with the HttpService as E4X and, utilizing a Repeater, a dynamic amount of buttons (labeled with friends of Joey's names) are displayed. Adding to or editing the XML in the TextArea and saving the changes makes a RemoteObject call to a ColdFusion CFC that writes out the data.xml file, and the buttons are updated through a Bindable ArrayCollection - the dataProvider of the Repeater.

Try It

 
:: 03/01/2007 ::
Flex Your Way To Laughter
Back To Top
First off, I must say that this is a simple example of combining Flex 2 and a ColdFusion, CFC-based back-end. The example will make every Designer cringe in disgust with its ugliness. With that said, and despite the actual silly functionality that this application solves, it still demonstrates the simplicity in calling a CFC function with the Flex 2 RemoteObject tag.

Try It

 
:: 02/21/2007 ::
Flex 2 and ColdFusion - A Poor Man's CF Mapping Tool
Back To Top
Have you ever needed to add a new ColdFusion mapping and you did not have access to the CF Administrator? I put together an example with a Flex 2 UI and a ColdFusion CFC-based utility that allows local access to the coldfusion.server.ServiceFactory, and ultimately, the getMappings() method of the ServiceFactory to add or delete a ColdFusion mapping. I have a check to only allow access to this method if you are connected to the CF Server on the local network, so the demo's screen shots are included below:

add mapping screen shot

add mapping success screen shot

delete mapping screenshot

Larger View    View Source

 
:: 02/14/2007 ::
ActionScript 3 Cookbook Book Review
Back To Top
The "ActionScript 3.0 Cookbook" was a great read. In fact, I read most of it in a local bookstore in the course of one evening. The code samples were immediately useful and easy to follow - I have already put them to use in my current Flex 2 projects. Chapter 6 (Display List), Chapter 15 (Programming Sound), and Chapter 16 (Video) were especially useful to me. I found that looking up ActionScript-related keywords in the index allowed me to quickly get to the "good stuff" on a particular topic. For instance, I needed some help on adding a TextInput control to a Canvas using only ActionScript (e.g. not with the MXML tag). I found "adding item to display list, 141-145" in the index, and the detailed explanation of the solution was exactly what I needed - no fluff, just stuff. Thank you to O'Reilly and the authors, Joey Lott, Darron Schall, and Keith Peters for the inspiration.
 
:: 02/14/2007 ::
Updated Flex 2 / ColdFusion eSignature Conversion to PDF
Back To Top
If you recall, two weeks ago, I settled on a three-part conversion process. Using an AS 3 PNG encoder, I passed an NDA Signature as binary data to a ColdFusion CFC function, saved the PNG to disk. In part two of the conversion, I passed the PNG filename, created in part one, to another CFC function that converted the PNG to a SVG file. Finally, the filename of the SVG was passed to a CFC function that completed the final conversion to a PDF file.

Realizing that this three-step process was a bit inefficient, I wrote an AS 3 class for Flash-vector drawing conversion directly to a SVG. I now take the SVG and convert it directly to a PDF. By eliminating the conversion to a PNG step, the PDF contents are no longer subject to pixelation, the graphics now being vector-based.

Try It

Related Entries:
 
:: 02/03/2007 ::
Flex 2 / ColdFusion eSignature Conversion to PDF
Back To Top
Late last week I was asked to take an electronic signature from a NDA web application I blogged about last year and convert it to an Adobe Acrobat PDF. After spending a short while trying to find a direct BMP to PDF encoder of sorts, I settled on, at least for this demo, a three-part conversion process. Using the same PNG encoder that I utilized to transform an NDA signature to a PNG, I passed the PNG binary data via that sweet AMF inherent to CFMX 7.0.2 and saved the PNG to disk. In part two of the conversion, I pass the PNG filename, created in part one, to another CFC function that converts the PNG to a SVG file. Finally, the filename of the SVG is passed to a CFC function that does the final conversion to a PDF file.

I already realize that this three-step process is a little bit whacked out, inefficient, and slower than it should be. I would love to hear from anyone that has written an AS 3 class for Bitmap conversion to SVG, or Flash-vector conversion to SVG, or even better an AS 3 class for Flash-vector conversion directly to a PDF. :-)

Try It

Related Entries:
 
:: 01/20/2007 ::
My Flex 2 Streaming Video Player
Back To Top
Flex 2 is so, so cool, and by the way, so is the Flash Media Server. This simple example demonstrates the ease of combining a Flex 2 UI and the streaming capability of the Flash Media Server. Utilizing a HTTPService to load a XML file containing a list of videos that are deployed in a FMS application populates the dataProvider of a Combobox. Selection of a video from the Combobox immediately starts the video streaming. Adding the standard Play, Pause, Stop, and Mute buttons' functionality could not have been easier.

Try It

 
:: 01/09/2007 ::
Flex 2 Days Until 24 Day 6 Premier
Back To Top
I'm a huge fan of the Fox series 24, so I put together a quick Flex 2 count down timer, utilizing the SWFLoader tag to load a swf from the www.24day6.com site that displays the days, hours, minutes, and seconds until the 24 Day 6 season premier - Sunday, January 14, 2007.

I also included a MP3 radio that plays some of the show's brilliant sound track by Sean Callery

24 Day 6 Timer

 
:: 12/06/2006 ::
My Flex 2 Streaming MP3 Player
Back To Top
Cool beans. I'm streaming MP3's now with some help from my friends, Flex 2 and Flash Media Server. During this past summer, I put together a Flex 2 MP3 Player that did not stream the MP3's, so it had to download the one selected from a ComboBox completely before the 'Play' button was enabled. Depending on the song, this delayed the playback 30 seconds or more. This release utilizes my Flash Media Server and streams the MP3, so it can now be played immediately. Additionally, the ID3 information is displayed for those MP3's containing this data. I found that I had to drop the visualizer feature as the streaming MP3 does not seem to provide visualizer-friendly data. If anyone has successfully tied the NetStream to a visualizer-type component in Flex 2, I would love to see how you did it.

Try It     * Source code is included.

NOTE: Flash Player Version: 9.0.28.0 seems to work better with Firefox and my no-ip web forwarding.

Flex Training Announcement

360Flex Conference - March 5-7, 2007
360Flex is a Flex conference by developers for developers. Learn from industry leading Flex developers at this exclusive event in Silicon Valley. There is no better way to learn Flex than 360Flex.

Cost: $100*

When: March 5 - 7, 2007

Where: eBay's Town Hall Center, San Jose, CA

Tracks:
Flex 101 - Learning Flex A-Z
Application - Building real-world Flex applications
Integration - Connect Flex to any server (CF,PHP,.NET,JAVA,FDS).
Components - Extend Flex with UI Components

Registration Site: http://360flex.eventbrite.com/
Conference Site: http://360flex.com/

Related Entries:
 
:: 11/23/2006 ::
Snow Ball Fight 2006 featuring Adobe Flex 2 and Flex Data Services
Back To Top
It's officially the start of Snow Ball Fight 2006 guest-starring Adobe Flex 2 and Flex Data Services.

This is a quick, holiday example of what Flex 2 and Flex Data Services simplify.

1) Flex 2 Data Services' real-time publish/subscribe capability. I am using two producers and two consumers to message the the days until December 25 2006, and allowing connected clients to message back and forth (humorously called throwing a snowball).

Tip: You can either open two browser windows or have a friend go to the same demo to try the messaging back and forth.

2) Loading and playing MP3's (as well as muting and re-playing the sound)

3) Using a non-default preloader (a snowflake)

4) Adding a backgroundImage Flash swf (snowing effect)

5) Utilizing a ColdFusion CFC to communicate with a mySQL database backend to store the messages in the snowballs thrown.

I hope this example helps you with your Flex 2 coding and further entices you to experiment with Flex 2 and Flex 2 Data Services.

Happy Holidays and Merry Christmas (Feliz Navidad, Joyeux Noel, Frohe Weihnachten, Natale allegro, Christmas Alegre, God Jul, Glaedelig Jul, Vrolijk kerstfeest, Hauskaa Joulua, Boas Festas, Maligayang Pasko)

Mike Givens
November 2006

Oh yeah, here's the link Try It     * Source code is included.

NOTE: Flash Player Version: 9.0.28.0 seems to work better with Firefox and my no-ip web forwarding.

 
:: 11/11/2006 ::
Flex Banner Ads: A ColdFusion MX 7.0.2/RemoteObject Demo
Back To Top
Banner ads. Love em or hate em? I'll leave that for others to discuss. In the meantime, here's a quick Flex 2 example of using the tag to communicate with a ColdFusion CFC method that queries a banner ad database. The data returned to Flex includes an image URL, the "go to" URL when the ad is clicked on, and the alt text that is displayed when you mouse over the ad's image.

The Demo

For FireFox, see the link below:

Read More
 
Related Entries:
 
:: 11/06/2006 ::
Flex 2 / ColdFusion FAQ Admin Tool Example
Back To Top
Fresh off the presses and after recovering from MAX, I put in practice the lessons learned from Leo Schuman's Hands-on-training session, "Building a Rich Internet Application with Flex 2 and ColdFusion". Utilizing the CFC wizard, a bit of additional SQL syntax, and the ease of the Flex 2 / ActionScript 3 language, I put together a sample FAQ Administration Tool. As usual, the source code is provided.

Try it out

* NOTE: My DNS web-forwarding service, no-ip, breaks the Flex 2 html-wrapper, so please use Internet Explorer if at all possible. Opening the link in a new tab when using Firefox seems to help in some cases.

 
:: 10/19/2006 ::
A Flex 2 Signature Panel at MAXUP
Back To Top
I plan to present a quick demo of a Flex 2 and ColdFusion CFC-based signature panel. Stop by MAXUP and sign your autograph. :-)

See you there

 
:: 09/08/2006 ::
I'm going to MAX for Fun
Back To Top
My entry for the "We Demo You Going to MAX" contest - see Ben Watson's IMHO Blog for more details is my Flex-based "Fun" component for an online dating service a buddy and I are working on. This piece showcases Flash Player 8's (as well as Flash Player 9) file upload capability to allow Users to upload "funny" pictures. The fine-grained control of size of images as well as type are easily controlled in ActionScript. I will soon be porting the component to Flex 2 / ActionScript 3, by the way. Stay tuned for updates.

Try it out...

By the way, I'm going to MAX 2006 for both the fun of networking with my peers and to learn more about Flex 2 and advanced CFMX techniques. This will be my 7th MAX-like Developer's Conference (includes the 2000 D.C. Allaire Developer's Conference, 2001 & 2002 MAX in Orlando, MAX 2003 Salt Lake City, MAX 2004 New Orleans, MAX 2005 Anaheim)

Read More
 
 
:: 08/17/2006 ::
Flex 2 / ColdFusion e-Signature to a PNG
Back To Top
Leveraging the work that James Ward blogged about on cayambe.com, I retooled the backend 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 might be suitable for online NDA agreements or e-signatures. Try it

Calling the CFC methods as a web service: Try it

* source code included

 
:: 07/29/2006 ::
An Example Flex 2 MP3 Player
Back To Top
Revisiting my Flex 1.5 code to port my MP3 Player to Flex 2 was a bit of a challenge. It doesn't stream the MP3s (yet), so it has to download the one selected from the ComboBox completely before the 'Play' button is enabled, and depending on the song, it might take some time (30 seconds or more). I plan on utilizing my Flash Media Server once I figure out how to make it work with Flex 2, so it will be able to be played immediately. Until then, here's my first effort:

Try my Flex 2 MP3 Player

Try my Flex 1.5 and FMS MP3 Player

* A shout-out to BenStucki.net for his Free Audio Visualization Component for Flex 2. Thanks!

 
:: 07/27/2006 ::
Flex 2 and CFC Harmony
Back To Top
Just a quick sample of a remote object call to a CFC method (so easy now thanks to the CFMX 7.0.2 Updater):

Try It

* Source code is included

 
:: 05/16/2006 ::
Flex and Rotating Styles
Back To Top
I received a question from a former business associate asking if it was possible to display a Flex page with a different style each time the page was loaded, and if so, how to do it? I recalled that Manish Jethani had blogged about this before. As an example, I decided to roll the technique into one of my Flex applications. I load one of five css stylesheets on creationComplete and rotate a different style each 60 seconds using setInterval.

Try it

 
:: 03/30/2006 ::
ActionScript - bitAnd CFML Function
Back To Top
I happened to see an interesting article at the new site www.flexcf.com where a post to the forum asked "I am trying to do in AS what I usually do in ColdFusion with a bitAnd(2,64)"

Here's how I did it:

Try It

 
:: 11/22/2005 ::
Flex 2 Alpha Code Example
Back To Top
As practice for porting existing Flex 1.5 applications to the Flex 2 Alpha / ActionScript 3 paradigm, I created this demonstration code of my banner ad rotator including a Captivate sample of it running on my laptop.

View the Flex 2 Code

 
:: 11/15/2005 ::
My Multi-personality Flex Servers
Back To Top
A Captivate Demo illustrates my laptop's new ability to run Flex 1.5 on one instance of CFMX 7 and Flex 2.0 Alpha on the second instance. This allows me to continue developing my Flex 1.5 applications (browse in Firefox / FP 8) and continue testing the Flex 2 Alpha (browse in IE / FP 8.5). My configuration includes a multi-instance JRun type of CFMX 7 install, Apache HTTP Server, Flex 1.5 running integrated with the first CFMX instance, Flex 2.0 Alpha running in the second instance.
 
:: 11/08/2005 ::
What? Not Another Yahoo Map Flex Example
Back To Top
Tonight I decided to try out some of the main Yahoo! Maps Web Services - FlexTM API methods resulting in a quick map of my company's location.

Try It

 
:: 09/28/2005 ::
Flex & FP8 Uploads
Back To Top
I had a recent business requirement (The PalCafe Project, managed by Alexander Tsoukias) to allow Users to upload files while leveraging the new FP8 upload feature (e.g. not the "old" Flash/Javascript way). Here's a sample:

Try It

* Requires FlashPlayer 8 browser plugin

 
:: 08/31/2005 ::
What? Not Another Google Map Flex Example
Back To Top
Today I decided it was time for me to combine a Flex call to a ServiceObject webservice, Address Geocode, and the Google Map API. The webservice returns a latitude and a longitude for a United States address. I take these coordinates and pass them to a ColdFusion page that encapsulates some of the main Google Map API methods resulting in a quick map of the location.

Try It

 
:: 08/29/2005 ::
Flex Banner Ads Revisited
Back To Top
Here's a quick revisit to displaying database-driven banner ads in Flex: I was recently asked to display a list of rotating banner ads using an effect that slides the ads up from the bottom of the page. I repurposed my CFC-based banner ad web application - available on the Macromedia Exchange Gallery - and called a remote method that grabs the banner ads housed in a mySQL database. Four ads rotate every five seconds.

Try It

 
:: 08/24/2005 ::
Flex Your PayPal Muscles
Back To Top
I've been working on a Flex UI for accepting payments utilizing PayPal's "Website Payments Pro (USA Only)." It's a little cumbersome getting going, but with patience and an insider's experience, you can be accepting payments with PayPal doing the heavy lifting for credit card validation. PayPal remains invisible, so you control the customer experience with your Flex UI.

I have a quick example that is using a test account - what PayPal refers to as a Sandbox account (duplicates the same processing as the Live site, but does not do any actual credit card charges). To try it out with a successful simulated payment, use this Visa number: ; expiration date: 1/2007; CVV2: 000. To simulate a failure, change either the expiration date: 1/2006 or the CVV2: 1234

* NOTE: Part of the process in accepting payments is running SSL. On my site, you will get a SSL warning because the certificate I generated has a mismatch in the name on it (M Givens) and the name of the site (webmxml.no-ip.info). Feel free to trust my certificate's credentials - I'm here to help.

Try It

 
:: 08/21/2005 ::
Flex Popup Goes the Weasel
Back To Top
I saw a post on the flexcoders list Tuesday evening entitled, 'TitleWindow passing vars back to another TitleWindow', that caught my eye. It seems the 'poster' needed the following help "I want Window2 to populate recpName.text which can be found in Window1 when the input field in Window2 is changed." I created the basic example that follows. * Source code is included:

Try It

 
:: 08/21/2005 ::
Flex & FCS MP3 Part Deux
Back To Top
I revisited my simple Flex and Flash Communication Server MP3 player. I have added the code that reads the ID3 information embedded in the MP3 files (e.g. artist, album, etc.).

My MP3 Player with ID3 Info

* NOTE: Once the example loads, you may right-click on the page, choose 'View Source' or click on the i-button (4th one), and you will see the updated code color-coded in orange.

 
:: 08/21/2005 ::
Play that funky music Flex boy
Back To Top
I saw a post on the flexcoders list Tuesday evening entitled, 'embedded sounds', that caught my eye. It seems the 'poster' was "trying to embed a number of mp3 sounds and play them back in various ways. The first way is to select the sound names from a comboBox." Having made my laptop's speakers squawk before with a datagrid of mp3 ringtones, I just had to take a try at utilizing a combobox to hear "hello moto" one more time. I created the basic example that follows. * Source code is included:

Try It

 
:: 08/21/2005 ::
Toggling Flex Validation - On & Off
Back To Top
Flex validation is pretty cool - especially when you find that you need a form item to be required based on a User's interaction with the Flex-based form. For example, say you have a business rule that goes something like this: two countries, United States and Canada, require a State or Province to be selected, but other countries do not require a State selection. Here's an example:

Try It

 
:: 08/21/2005 ::
Flex TextArea Validation
Back To Top
Another quick example (prompted by a question I read on the flexcoder's list) that shows character limit validation for a TextArea. Here goes:

Try It

 
:: 08/21/2005 ::
Flex Login with a bit-o-honey... err cookie
Back To Top
As you may know, the Flex UI can leverage Flash shared objects (call them Flash cookies if you like) for prefilling forms that a User may need to fill out when they visit your site. A login screen, for example, may be presented the first time with the traditional username/password challenge. For subsequent visits, you could fill the Username from the Flash shared object you stored on the User's PC the first time they logged in successfully. Here's an example:

Try It.

I'm also using this method at work to store a User's last selections for combobox choices. In effect leveraging the shared object storage to remember the selectedIndex chosen most recently. Storing the selectedIndex instead of the usually more "lengthy" selectedItem keeps the shared object smaller. If I recall correctly, the normal size limitation for a domain's shared object (without prompting the User with a request for more room) is 100K.

 
:: 08/21/2005 ::
Double-click your pleasure with Flex
Back To Top
On the richinternet.blog, I found an entry concerning doubleclicks and one of the comments posted was "If user doubleclicks multiple times a new window opens evertime[sic]. Thus after some time there are a lot of windows to close". This caught my eye as I use a double-click dispatched event on some of my work. Unless I'm too sleepy to double-click properly (afterall it is 1:00 AM as I type this :-), my code seems to be immune from this phenomenom.

Try It

Let me know if you see things differently.

* UPDATE - I no longer get any multiple image popups (only a single alert and image), so it seems this is an improved strategy over the example on the richinternet.blog - the gauntlet is now cast :-p

 
:: 08/21/2005 ::
Flex RO in a PopUp TitleWindow
Back To Top
I saw a post on the flexcoders list Saturday morning entitled, 'Code not executing in a Popup Window' that caught my eye. It seems the 'poster' was having trouble getting a remote object call to work inside his PopUp Window. Having made remote object calls in many of my PopUps, I just had to take a peak at their code. I grabbed a copy of the posted code and recreated the basic example that follows. * Source code is included:

Try It

I noted two approaches that I do differently than the flexcoder's example:
1. I'm not using creationComplete to call the RO, though I know this is not the issue.
2. I actually use the dataProvider attribute in my <mx:List> tag instead of up in the ActionScript. I var an array, reviews_List, set the array equal to the RO result in the RO's result handler, and then databind this array to the List tag.

 
:: 08/21/2005 ::
Flex'n in a Tight Corner
Back To Top
I find that in some Flex apps you simply don't have enough room to display all the data in the allotted space. Here's something that I feel is a nice compromise - I truncate the data to the desired size, add some ellipses (as a visual clue that the data is abbreviated), and use the toolTip to display the entire data field.

Try It

Here's the sample code:

AS Code:

var sCompany:String = 'This Really Long Company Name Takes Up Too Much Space';

function abbrevi(sText) {
var CoName:String = sText;
var tmpCoNameLetter:String = '';
var tmpCoNameWord:String = '';
if (CoName.length > 23) {
CoName = CoName.toLowerCase();
tmpCoNameWord = CoName.substring(0, 1).toUpperCase();
//mx.controls.Alert.show(CoName);
var N:Number = (CoName.length);
for(var i=1; i<N; ++i) {
tmpCoNameLetter = CoName.substring(i, i+1);
if (tmpCoNameLetter == " ") {
tmpCoNameLetter = ' ' + CoName.substring(i, i+2).toUpperCase();
i++
}
tmpCoNameWord = tmpCoNameWord + tmpCoNameLetter;
}
sText = tmpCoNameWord.substring(0, 22) + '...';
} else {
sText = CoName;
}
return sText;
}

MXML Code:

<mx:TextInput id="tiCompany" text="{abbrevi(sCompany)}" toolTip="{sCompany}" />

* Update - Kevin Hoyt has an example of taking this idea to the next level here.

 
:: 08/21/2005 ::
Flex & CFMX 7 Named RO's
Back To Top
I have been wondering about being able to use named remote objects every since MAX 2004, where I learned that because CFMX 6.1 uses an "older" Flash Remoting Gateway it was not possible with Flex 1.5. Now that CFMX 7 utilizes a "newer" Flash Remoting Gateway, I finally took the time over the holiday weekend to try a named remote object call from my Flex 1.5 (running under a Tomcat install) to a CFMX 7 CFC function. In a few days, I plan to try the same thing with an integrated CFMX 7 / Flex 1.5 installation. UPDATE: This also works with an integrated Flex 1.5 and CFMX 7 installation. Here's what I did to make it work:

"Old Way":

<mx:RemoteObject id="BannerRO" endpoint="http://your_domain/flashservices/gateway" source="adbanner.components.flexBanner" showBusyCursor="true">
  <mx:method name="flexAuthenticate" result="Login(event)" />
  <mx:method name="GetBannerFlex" result="ChooseBanner(event)" />
</mx:RemoteObject>

"New way":

<mx:RemoteObject id="BannerRO" named="flexBanner" showBusyCursor="true">
  <mx:method name="flexAuthenticate" result="Login(event)" />
  <mx:method name="GetBannerFlex" result="ChooseBanner(event)" />
</mx:RemoteObject>

Here's the changes I made to enable this:

1. Modified the gateway-config.xml in my CFMX 7 WEB-INF folder (in my case, this was found at C:\JRun4\servers\cfusion\cfusion-ear\cfusion-war\WEB-INF).

<security>
  <whitelist>
    <unnamed>
      <source>*</source>
    </unnamed>
    <named>
      <object name="flexBanner">
        <source>
          adbanner.components.flexBanner
        </source>
      </object>
    </named>

  </whitelist>
</security>

2. Modified the flex-config.xml in my Flex 1.5 WEB-INF\flex folder (in my case, this was found at D:\Program Files\Apache Group\Tomcat 5.0\webapps\my_flex\WEB-INF\flex).

<remote-objects>
  <!-- The location of the AMF Gateway. The value below is used when
  calling a page over http or when protocol is specified as http -->
  <amf-gateway>http://your_domain/flashservices/gateway</amf-gateway>
  <whitelist>
    <named>
      <object name="flexBanner">
        <source>foo.bar</source>
      </object>
    </named>

  </whitelist>
</remote-objects>

* NOTE: the source (I used foo.bar) can be anything you like, as it's only a placeholder for the named object

3. Restarted CFMX 7 and Flex 1.5.
4. Ran my Flex apps successfully.

 
:: 08/21/2005 ::
Flex & Banner Ads
Back To Top
Recreating my CFMX-based banner ad web application in Flex was a nice way to combine both a simple Flex UI and a ColdFusion-CFC backend. Check it out if you would like a simple banner ad rotator that displays in a Flex app. Source code is included

Flex Banner Ads

 
:: 05/24/2005 ::
Flex & Structure of Queries
Back To Top
I found an interesting nugget of truth today or as I like to say, a "FleX-File". It seems that when referencing members of a ColdFusion structure of queries as an Object in something other that a Flex Datagrid or TileList (both of which have the dataProvider attribute), you should use a _items prefix in your ActionScript code - something like this:

var objMy:Object; // my Object from a CFC Struct-o-Query
for (var i=0; i<=objMy.length; i++) {
  mx.controls.Alert.show("Field Data: " + objMy._items[i].your_field_name);
}

Sample Struct-o-Query   |   Let's Flex It

Sample Struct-o-Array   |   Let's Flex It

 
:: 05/24/2005 ::
Puting That IFrame To Use
Back To Top
After reviewing the Christophe Coenraets' example of "iframeing" a HTML page, here's an example of utilizing an iframe to include a swf that resembles one we're using at work. My IFrame Example
 
:: 05/21/2005 ::
Flex & FCS MP3 Example
Back To Top
Last weekend, I started building a simple Flex and Flash Communication Server MP3 player. When I say simple, I really mean simple. It's not very pretty either.

My MP3 Player

Needs work I know - for instance, the countdown timer is using a kludgy, 1000 ms setInterval timer that does not reflect the true time remaining for each song. Just couldn't quite find the correct touch-point with the FCS data. Stay tuned for improvements.

Almost forgot... this is simply the personal edition of FCS, so it's definitely IP restricted as well as bandwidth limited.

 
:: 04/28/2005 ::
Flexing Languages
Back To Top
After reading Manish Jethani's blog about resource bundles in Flex, I decided to try out the new knowledge. Manish's Blog entry Here are some examples of my efforts (oh yeah, please forgive any butchering of the languages): My Native language Chinese
Hello World The first two examples make use of Manish's third approach (load it dynamically using HTTP) plus a little useage of my friend, setInterval, to protect against the resource strings not being available once the components have been rendered on the screen. The last example embeds six separate models for each language (compile it all in).
 
:: 04/09/2005 ::
View Source in Flex
Back To Top
Thanks to Mike Chambers and Daniel Dura, I've implemented their method for adding a 'View Source' and 'View License' menu items to the default right-click menu for a Flex UI.

Mike's Blog entry
Daniel's Blog entry

Here's an example of our implementation.

 
:: 04/09/2005 ::
setInterval Rocks
Back To Top
I really like the setInterval method... Let me explain: I have found a couple of uses already - well actually three cases. Case One - I load an object (from a CFML structure of arrays) of ad banner data (the image URL, the link URL, and text for the ALT tag) via a Remote Object call to a CFC, and using the setInterval method and a little math madness, I'm able to display a new ad every 20 seconds. Here's the code: MXML snippet (Try it  |  View Code) Case Two - I load an object of Bush Quotes data via a Web Service call, and use the setInterval method to grab another quote (trigger the web service call) every 20 seconds. Here's the code: MXML snippet (Try it  |  View Code) Case Three - I load an array of Supplier's data via a Remote Object call of a CFC, and use the setInterval method to grab another refresh of the data every 6 hours. Code not shown as this blog is getting way too long. (Try it)
 
:: 01/25/2005 ::
My Flex Examples
Back To Top
I've been playing with Flex quite a bit lately - both at the day job as well as on my own server. With the Non-Commercial Flex License, I've converted all my trial versions of Flex 1.5 to non-expiring versions now. Here's some examples of some Flex mini-apps: Try it
Related Entries:
 
:: 12/21/2004 ::
Flex Builder 1.5 is Golden
Back To Top
The final release of Macromedia Flex Builder is available now at:

http://www.macromedia.com/cfusion/tdrc/index.cfm?product=flex

Related Entries: