Today we launched Adobe AIR Launchpad, a desktop tool that helps Adobe Flex developers get started building desktop applications deployed on Adobe AIR. Simply run Adobe AIR Launchpad and select the capabilities you need; Adobe AIR Launchpad will create a ready-to-import Flex project with your selected features implemented in a way that can be easily modified and extended. You can use the resulting project as a starting point for your AIR application.

Adobe AIR Launchpad creates a folder structure that contains a ready-to-compile AIR application with the selected features implemented. It also creates a ZIP file in the parent folder that can be imported directly into Adobe Flash Builder. If you select auto update as an option, a “server” subfolder will be created that contains the XML file needed on the server to control auto-update. If you select the install badge option, a “install_badge” subfolder will be created containing the files needed to create an install badge.

The generated code is well commented and clearly written.  I think you will find that using this tool will dramatically accelerate learning AIR.

The Adobe AIR Launchpad is free and available now at http://labs.adobe.com/technologies/airlaunchpad

If you like Launchpad and have never looked at Tour de Flex, check it out at http://flex.org/tour – there are over 500 Flex samples including a lot of AIR-specific samples.

CREDITS:  Holly Schinsky (blog / twitter) built nearly all of the application including the generated code and comments.  Holly has a unique sense of what developers need when learning a new language or API.  Her blog has a large and growing following because her blog posts are very useful and written from one developer to another in a no-nonsense style.  Holly has often discussed building code templates that developers can use as a learning resource so this project was a perfect fit for her.   Christophe Coenraets, James Ward, Michael Chaize, Ben Forta and I contributed to the overall design and concept.

James Ward created a great demo video:

Michael Chaize also created a demo video:

As enterprise IT administrators start getting requests for AIR applications to be deployed in their environments, they immediately start asking questions about how they can control the deployment, auto-updates, etc.

Many people are not aware that Adobe has an AIR Administrator’s Guide.  In this guide you’ll learn how to do the following:

• Perform silent installs of the AIR runtime and AIR applications using Microsoft SMS, IBM Tivoli and other deployment tools
• Prevent installation of additional AIR applications
• Prevent installation of untrusted AIR applications
• Disable automatic updates of the AIR runtime

You can download the guide in PDF format from http://help.adobe.com/en_US/air/admin/air_admin_guide.pdf or read it online here.

Topics:

• Find out why we chose the technology stack:  Ubuntu Linux, MySQL, ColdFusion, LiveCycle Data Services, Flex, AIR
• Learn how to use publish/subscribe messaging techniques to enable multi-player communications
• Hear about the challenges we faced as we dealt with users in remote areas of the globe with poor networking conditions and how we addressed it (we have users from more than 200 countries)
• Learn how to take advantage of ColdFusion remoting in Adobe Flex — soooo easy and soooo fast!
• Explore various collaboration techniques employed throughout ChessJam from in-game chat to synchronized views

I’m really looking forward to presenting this session.  This project has been a lot of fun and I am excited to share.  To prepare for this session, go grab the app and play! — http://chessjam.com

CFUnited Session: 7/29 Thursday 4:00PM – 5:00PM Faulkner

Topics:

• Explore multiple techniques to tap into your app/site’s activity data (swf, “magic png”, server-side, etc.)
• Learn how to convert an IP Address to latitude, longitude, city and country
• Use ColdFusion’s sendGatewayMessage() to broadcast the data
• Learn how to configure publish/subscribe messaging using BlazeDS (included with CF9) and LiveCycle Data Services (I’ll explain the differences)
• Learn how to build amazing data visualizations using Adobe Flex
• Take a deep dive into two visualization examples:
  • Use Google Map Flash 3D APIs (amazing features)
  • Use IBM ILOG Elixir’s heat map component and gauges

I’ll be sharing the full source-code for the whole thing.

CFUnited Session: 7/30 Friday 3:15PM – 4:15PM Ballroom A

I hope to see you there!

Here’s a list – check them out – the each include a video:

• Video Chat for Android in 30 Lines of Code — 30 lines of code and you can do multi-user video chat!   Takes advantage of Adobe LiveCycle Collaboration Services
• Android Trader Desktop with Flex and AIR – real-time data updates with live charting, etc.
• Employee Directory Sample Application Using Flex and AIR for Android – every company has an employee directory – a great use case and a great example of using SQLite with AIR on Android
• “VoiceNotes for Android”: Sample App using Flex, AIR, and the Microphone API – Cool demo of the new microphone API in AIR for Android

You can join the AIR on Android beta by going to http://labs.adobe.com/technologies/air2/android/

Even if you don’t yet have an Android devices capable of running AIR, you can use the emulator and still have fun!  I blogged about this recently.

I’ve been involved in web development since the early betas of Netscape.  I’ve used Java Servlets, JSPs, ASPs, Perl/CGI, PHP, ColdFusion and other means of dynamically generating web content and have always worked to push browser capabilities to the limit.   From day one I was excited about what web browsers could do, but like many web developers, I was almost instantly frustrated by the limitations and the painfully slow progress of web standards.  It has taken 15 years to reach the capabilities reflected in the HTML 5 spec.  These features should have been in HTML 2 or at least HTML 3!   Many other standards have innovated dramatically faster, so for me personally, HTML 5 is at least 10 years overdue!

The Flash/HTML overlap – Would you replace your <IMG/> tags with Flash?

Flash was added to our toolbox to extend the capabilities of web developers beyond what HTML provided.   It basically has helped developers fill the gap that exists between the desires of our application design and the capabilities of existing web technologies.   The intent of Flash has never been to compete with HTML.  The intent is to help developers realize the goals of our applications.  If HTML and related technologies provided everything we needed, Flash would not exist.

As complementary technologies evolve, there are inevitably overlapping capabilities.  Adobe has never promoted the use of Flash to do things that HTML can do without Flash.  Have you ever heard anyone promoting the use of Flash to display images?  You could replace all of your <IMG> tags with Flash but why would you use a plugin where no plugin is really needed?!   Although Flash would do a great job at displaying your images and even provide some unique features, it’s very unlikely that you need these features so you would be nuts to use Flash!  If Adobe told me to promote this idea, I would move to the Lightroom team!

This is a trivial example of where there is overlap, but because web developers fully understand the requirements and capabilities of displaying images, it’s obvious which technology to use!   The currently debated overlapping features are a bit more complex resulting in confusion for many.

HTML 5 increases the overlap

I remember the first time I saw DHTML used to make cascading menus (2002 I think?), I was impressed!  I could build UI controls that respond to mouse rollover events, dynamically display dropdown menus and all sorts of cool things.  Amazing!  Although this could already be done with Flash, it was nice to see HTML technologies evolve to this level.  (I’ll skip the history lesson about the huge pains we went through to make sure this new coolness worked on multiple browsers.  It was a mess until JQuery and other AJAX frameworks evolved!).

If you look at what HTML 5 is bringing us, you’ll see that the overlap between Flash and HTML 5 is indeed increasing.   HTML 5 introduces animations, drawing capabilities, video, audio,  and many other things that we usually rely on Flash to deliver, so yes, the overlap is obviously larger in many ways.  However, there is a high probability that the overlap is probably not as big as you may think.  Let’s start with the obligatory video debate.

The center of attention in the current debate – Video!

Now I’m going to say something that might surprise you.   If your video needs are met by HTML 5 and your target audience has an HTML 5 capable browser, you SHOULD use the new video tag instead of Flash!   Like I said before, why use a plugin for something that a plugin is not needed for!?  It’s no different than my <IMG/> analogy above.

However, before you draw any conclusions about video… be sure that you completely understand the implications:

1: Does your target audience have an HTML 5 compatible browser capable of viewing your video?

If not, I can assure you that they almost certainly have Flash, therefore, it’s an obvious choice for playback of video on non-HTML5-ready browsers.  Read my prior article, “HTML 5 and Flash – A Reality Check“.  Are you surprised to see that more people use IE6 than Safari?  I was!  Of course there are new devices that support the HTML 5 video tag and some of these new devices do not have Flash support for various reasons (no, I’m not going there), so it basically creates more work for us developers to support 100% of the audience.  Now we find ourselves writing code that handles video playback differently based on the user agent.  It’s reminiscent of the early 2000s and I believe that it’s going to get worse before it gets better because the number of devices, browsers, screen resolutions, OSes, etc. is dramatically larger than ever before.

2: Do your video requirements go beyond simply pointing to a video file with the new video tag?

You would be surprised at how many customers have much more complex requirements.   Here are a few comments made yesterday by John Harding, Software engineer at YouTube on the YouTube blog that illustrates my point:

“It’s important to understand what a site like YouTube needs from the browser in order to provide a good experience for viewers as well as content creators. We need to do more than just point the browser at a video file like the image tag does – there’s a lot more to it than just retrieving and displaying a video. The <video> tag certainly addresses the basic requirements and is making good progress on meeting others, but the <video> tag does not currently meet all the needs of a site like YouTube”

The article goes on to explain multiple technical reasons why Flash will continue to be the video player for YouTube.   You can read the full article at http://apiblog.youtube.com/2010/06/flash-and-html5-tag.html.  Hulu recently made a similar blog post -http://blog.hulu.com/2010/05/13/pardon-our-dust/ that mentions a few other interesting points.   Although HTML 5 provides video playback, many customers find a gap between their requirements and what HTML 5 offers….so once again, Flash fills the gap!

Did you know that there was such a vast difference between the capabilities of HTML 5′s proposed video tag and Flash?  Have you really looked at the complete feature set of Flash video?

Assuming the HTML 5 video format war finally gets resolved (it has a long ways to go), we will indeed see more videos delivered by the browser without the use of Flash, and that is the way it is supposed to be.  However, when you need advanced video capabilities, you will find that Flash once again complements HTML very nicely.

Video is just one aspect of Flash and only one aspect of HTML 5.  I used it as an example of how disconnected people are from the reality of the debate.

As HTML technologies expand, so do the capabilities of Flash

The ever increasing overlap between Flash and HTML 5 is just one part of what’s happening right now.  The other part that is seldom mentioned is the continually increasing capabilities of Flash.   As HTML 5 is slowly realized, Flash continues to innovate at a very fast pace so that it can continue to fill the gap between what HTML technologies offer and what developers want to build.  You should see what’s coming in future versions!  Flash will continue to complement HTML and help developers realize capabilities not possible otherwise.  Can Adobe continue to innovate to fill the gap?  Can Flash evolve fast enough to continue complementing HTML?  You bet.  I’ve seen it!  Eventually, we will be debating HTML 6 vs Flash Player X and we’ll see whole new set of hot topics. Fun times!

Get educated!

Spoken in my stern teacher voice — It is impossible for you to evaluate the future of HTML 5 and Flash unless you are fully educated on both technologies.  I keep meeting developers who have a decent understanding of HTML5 but think Flash is nothing more than simple video and animated ads.  I also meet developers who have a decent understanding of Flash but think HTML 5 is only about adding video, audio and canvas tags to today’s HTML.  In both cases, the person is VERY misinformed and is lacking the required education to make any future-looking statement about either technology.  However, both uneducated groups tend to be very loud!  It reminds me of a political election where people vote based on what they have learned from political ads!  STOP IT!

Whether you are debating technology or politics, it’s an absolute requirement to be equally knowledgeable on all topics involved.

Where to learn more

Hopefully you are now inspired to learn more.  Below are the resources I found while learning about HTML 5.  I’ve also listed some resources about Flash and related technologies.  Go read everything below and let’s have an intelligent and fun discussion about the future.

HTML 5:

• Google’s http://html5rocks.com – fantastic resource with tons of live demos – my favorite resource for showing off HTML 5
• Microsoft’s IE 9 test drive home page – includes some very impressive HTML 5 demos – http://ie.microsoft.com/testdrive/ – it’s great to see Microsoft innovating around HTML 5.
• Apple’s Safari technology demos – some impressive demos of HTML 5, but a bit too “Apple owned” feeling – http://developer.apple.com/safaridemos/ – the original demos only ran in Safari but now also run in Chrome.
• CanvasDemos – an entire site devoted to the new canvas tag in HTML 5 – some very impressive stuff – http://www.canvasdemos.com/
• HTML 5 Test site – gives your browser a HTML-readiness score and list the capabilities.  Each listed capability is a hyperlink to the HTML 5 spec – http://html5test.com/
• HTML 5 Readiness site – shows current status of most modern browsers (anything not listed has no HTML 5 support) – http://html5readiness.com/
• HTML 5 Demos – a decent set of HTML 5 demos – http://html5demos.com/
• HTML 5 Video tag browser support matrix – a very up to date article on which browsers support which video formats/codecs, etc. – http://en.wikipedia.org/wiki/HTML5_video
• Adobe Dreamweaver HTML5 Pack – an amazing set of HTML 5 capabilities you can use today – http://labs.adobe.com/technologies/html5pack/

Adobe Flash Platform:

• Adobe Flash Platform Home Page – http://www.adobe.com/flashplatform/
• Flex.org – great starting point for learning about Flex, a developer’s toolkit for creating Flex content.  If you have never looked at Flex, you are missing a big piece of the Flash Platform, especially when it comes to complex application development.  Be sure to check out the showcase (“What’s possible”).  You’ll see that Flex is used to build very complex mission critical apps in the enterprise.  These apps run on the Flash platform.
• Tour de Flex – a gallery of nearly 500 code samples illustrating everything from simple UI controls to complex data visualizations and real-time data handling – http://flex.org/tour
• Top Flash Misconceptions by Mike Chambers – addresses some very recent false claims about Flash – http://www.mikechambers.com/blog/tag/flash_myths/
• What’s new in the latest release of Flash Player 10.1 – a very substantial release – http://labs.adobe.com/technologies/flashplayer10/features.html
• Adobe AIR home page – a runtime that enables desktop applications built with either Flash, Flex or HTML/JavaScript – http://www.adobe.com/products/air/ – supports Windows, MacOS, Linux, Android (beta) and more on the way.  If you have never looked at AIR, you need to check this out.
• Flash Media Server home page – http://www.adobe.com/products/flashmediaserver/

Go learn!

Tour de ColdFusion is a desktop application built on Adobe AIR that provides quick access to hundreds of ColdFusion code samples.   Live running samples combined with the source code that you see running is the fastest way to learn!

Over the next few days, we will be adding additional samples.  Tour de ColdFusion will automatically reflect the latest sample database each time you run it so you know that you are seeing the latest, greatest stuff.

Help us make Tour de ColdFusion better by helping us add new samples.   If you have any code samples, techniques, frameworks, etc., that you think would make Tour de ColdFusion an even better learning tool, please contact us at submit@tourdecoldfusion.com.

Please report any issues to bug@tourdecoldfusion.com.

Go to the Tour de ColdFusion Beta home page to download and install.

Filed under: Adobe ColdFusion, Tour de ColdFusion Tagged: CF, ColdFusion, tdcf, tour de cf, tour de coldfusion ]]> http://gregsramblings.com/2010/06/24/tour-de-coldfusion-beta-launched/feed/ 2 Greg Tour de ColdFusion Beta! http://gregsramblings.com/2010/06/18/tour-de-flex-2-0-air-and-flex-component-and-api-explorer-launched/ http://gregsramblings.com/2010/06/18/tour-de-flex-2-0-air-and-flex-component-and-api-explorer-launched/#comments Fri, 18 Jun 2010 17:26:58 +0000 gregorywilson http://gregsramblings.com/?p=1576 ]]> We just posted Tour de Flex 2.0.  If you already have a previous version of Tour de Flex, it should auto-update to 2.0.   This latest version has several bug fixes and now requires AIR 2.0 to support many new AIR 2.0 samples.   Go grab it and check out the new samples in the AIR Applications folder!  There is some great stuff!

THANK YOU to Holly Schinsky (twitter) for building the majority of these new samples in addition to fixing many of the bugs in the Tour de Flex application.

There are now 490 samples in Tour de Flex!

If you don’t already have Tour de Flex, go to http://flex.org/tour.  Tour de Flex is a desktop application for exploring Flex capabilities and resources, including the core Flex components, Adobe AIR, data integration, and a variety of third-party components, effects, skins, and more.

“Sorry, an error has occurred. The application could not be installed because an application with that name already exists at the selected installation location. Try installing to a different location.”

This also breaks auto-update.  You’ll get the following error:

“This application cannot be installed because this installer has been mis-configured.  Please contact the application author for assistance.“

After doing a bit of research, I discovered that a change was made starting with AIR 1.5.3 with how publisher IDs are generated.  When you switch from a namespace prior to 1.5.3 to 1.5.3 or later, the assigned publisher ID will be different unless you override.

The solution is simple and documented here.

Here’s the quick version of what you need to do:

1. Determine your application’s current publisher ID. In an installed application, this is found in the META-INF/AIR/publisherid file.
2. Add a <publisherID></publisherID> element in your descriptor, and copy your publisher ID into it.
3. Update your application’s namespace to 1.5.3, 2.0 or whatever

Now when I try to install, it recognizes it as a newer version and gives me the dialog and upgrade experience I expected.

To find out what browsers people are using, I decided to go find some data.  I quickly discovered some interesting stats at http://w3schools.com/browsers/browsers_stats.asp .  There are twice as many people using IE6 than Safari??!!  Wow.  After studying the data, I was reminded that w3schools doesn’t really provide good data for my purposes because your mom, daughter, doctor, dentist, accountant, and coworkers in HR never visit w3schools.com.  It’s a site for technical people looking to learn more about web development!  The data is still interesting but keep reading…

I recently discovered a goldmine of information maintained by our new friends from Omniture called SiteCatalyst NetAverages, an online service that provides insight into current Internet usage trends. The data is based on anonymous aggregate unique visits across the majority of Omniture customers.  These sites are the big leagues and they are visited daily by your mom, daughter, doctor, dentist, accountant and co-workers in HR.

I won’t waste your time analyzing the results.  Take a look for yourself.  The charts below are from last month (May 2010).

After looking at this data, I realize that we are dealing with two different challenges.  The first challenge is getting all vendors to agree on the numerous aspects of the standard and implement them consistently across all supported platforms (I have to admit that I’m skeptical.  History does not build any confidence).  The second challenge is the rate of adoption.   Although Flash Player 10 was quickly adopted (over 90% in only a few months), new browser technology moves much slower.  I do think that HTML 5 will be adopted faster than previous browser advancements because the new features are compelling, but the reality is that it will take some serious time.  Keep in mind that IE 6 was introduced in 2001 and it still appears in the chart!  It’s depressing!

If you would like to take a look at the data from NetAverages, go sign up!    It’s part of CSLive and is complementary for 12 months when you register your Creative Suite 5 product or sign up online before April 11, 2011.  You can signup now at http://adobe.com/go/cslive.  There are other charts showing OS’s (Win XP is nearly 50% still!…geez), screen resolution, JavaScript versions, etc.   It’s fascinating to explore.

If you would like to see data from another source, check out NetMarketShare – the results are even more surprising (they show IE 6 at 17.6%!).  Check out their OS version chart – Windows XP still at 62%??!!  Now that I think about it, my accountant does still use Windows XP.  Thankfully my mom has a loving son that upgrades her often.  :)

You can read about all of the incredible new features of AIR 2.0 here but the bottom line is that you want this upgrade.  The memory and CPU usage is improved so much, we were able to change the machine requirements for ChessJam!  We have users that use low-end Netbooks that could not play ChessJam with AIR 1.5 but with AIR 2.0, it now works great.  The improvements are not trivial!

I have over 45 AIR applications installed on several systems and 100% of them run perfectly under AIR 2.0 so compatibility is great.  You do NOT have to recompile your apps to take advantage of the improved memory and CPU.  Once your users upgrade to AIR 2, they benefit instantly.  The AIR runtime checks once a week for updates so your users will get prompted soon.

In addition to the performance improvements, AIR 2 now has support for calling native code and support for creating a native installer so the opportunities for AIR just exploded.

Tons of new capabilities and uses less memory and CPU?  A no brainer!  ;)

From the Flexicious website:
The Flexicious Flex DataGrid/Advanced DataGrid controls are extensions of the mx.controls.DataGrid and mx.controls.AdvancedDataGrid, with UI to provide filter, paging, sorting, Select All Checkbox, and footer operations. It provides support for SERVER and CLIENT based data manipulation. With client data manipulation, all operations (filter,page,sort) are performed by the grid internally, without a SINGLE line of code. For server manipulation, the grid fires an event with all the necessary information to fetch data from the server. It also supports Flex DataGrid Print, Excel Export and a host of other features!

The Flexicious Flex DataGrid/Advanced DataGrid controls were designed with Line of Business applications in mind, so most features you would expect for enterprise application development are built into it. Compatible with any flex framework (Mate/PureMvc/Cairngorm) as well as any backend techonology! Integration examples with popular backends, including Java/Spring/Hibernate as well as .NET/Entity Framework/IIS/SQL Server are included!

The Flexicious samples are under the “Other Components” section. Check it out!

if(Geolocation.isSupported)
{
	geo = new Geolocation();
	geo.addEventListener(GeolocationEvent.UPDATE,geoUpdate);
	geo.setRequestedUpdateInterval(10000); // update my location every 10 seconds
}
...
...
private function geoUpdate(g:GeolocationEvent):void
{
	// everything you need about the location is in the passed event
	// g.latitude, g.longitude, g.speed, etc.
}

I’m currently playing around with a mobile app that polls my location every few minutes and uses a RemoteObject to send it to a ColdFusion CFC on my server. The server saves the location data in a local database and publishes the location on a data services message queue. I then use a simple Flex app utilizing the Google 3D Maps API to visualize both my recent location history and update in real-time with any new location transmissions:
       

I’m going to add some code soon to log the location data to a on-device SQLite database when there is no network connectivity (probably using the fault event handler of the RemoteObject) and re-attempt on the next poll.

Once I’m done with the app, I’ll post the full client and server source code.

Resources:

• Adobe AIR on Android – http://labs.adobe.com/technologies/air2/android/
• flash.sensors.Geolocation docs – http://help.adobe.com/en_US/FlashPlatform/beta/reference/actionscript/3/flash/sensors/Geolocation.html
• Google Maps API for Flash developers (includes links to the 3D maps) – http://code.google.com/apis/maps/documentation/flash/intro.html
• Tour de Flex – includes samples with source for Google Maps API and other mapping providers – http://flex.org/tour
• Wanna play but dont’ have an Android device yet? Use the emulator! – http://gregsramblings.com/2010/05/24/get-started-with-air-on-android-before-you-get-an-android-device/ – there is a way to feed it geo data for testing – see the emulator docs for details.

WARNING:  The emulator is SLOW.  Not just frustratingly slow… it’s painfully slow… so don’t judge the performance of AIR or Android based on the emulator.  When you’re ready to see good performance, go get a real Android device.

Getting started:

• Download and install the Android SDK from http://developer.android.com/sdk/index.html
• Sign up for the Adobe AIR for Android prerelease program at http://labs.adobe.com/technologies/air2/android
• Learn how to get the emulator running at http://developer.android.com/guide/developing/tools/emulator.html
• Read the docs from the AIR for Android prerelease site (once you are granted access – very fast)
• Go write some Flex or Flash apps and feel the rush of building apps for mobile!

RUN ON MY DEVICE:  If you live in the Tampa bay area and you build a cool AIR app for Android and want to see it on a real device, contact me and I’ll meet you and we’ll try it out on my Google Nexus One.  If it’s cool, I’ll buy lunch.  If not, you buy.

Christophe Coenraets recently blogged Employee Directory app built with Flex on AIR for Android:

However, two months ago, I upgraded my service to 35/35 (it was now less expensive than 20/20!) and suddenly, the pauses were back.

I started researching the high-end consumer routers and found that the Netgear WNDR3700 had a 680Mhz processor and claimed to support gaming, video streaming, etc., so I decided to give it a shot.   It was a bit pricey ($149 at Best Buy) but when you pay for 35/35 service, you gotta do what you gotta do.

I’ve been running it for 3 days now and am very satisfied.  I’ve seen no network pauses and the various speed test sites all show a faster throughput than with the Linksys and Actiontec routers.

There are some other features that I’ve yet to try including USB Drive support, media server, QOS and more.  It even includes a wireless repeater feature which I’ve not seen in anything other than Apple’s Airport Express or more advanced software stacks like DD-WRT.

The router is dual band (802.11g/802.11n).  Using 802.11n with my Macbook Pro, I get the full 35Mbps throughput wirelessly.

If you have found other routers that handle 35/35 or faster, please comment.  I had a hard time finding anything online about consumer-grade routers for very fast throughput, so hopefully this post will be a decent resource.

Here are some highlights:

Go to Tour de LiveCycle ES2 Web version at http://www.adobe.com/devnet/livecycle/tourdelivecycle/web

One nice feature is that you can bookmark specific content.  For example, to learn about LiveCycle Workbench, go to http://www.adobe.com/devnet/livecycle/tourdelivecycle/web/#illustIndex=0;sampleId=3610;docIndex=-1

If you are curious about LiveCycle, this is a great starting point.  Check it out!

Our WindowedApplication tag was setup as follows:

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" width="1019" height="680" applicationComplete="init()" ...>

Our first instinct was to rework the UI to eliminate some vertical space.  We also considered making a dramatic change to the artwork to make all backgrounds tileable. Unfortunately, both of these options are very time consuming and since we have “real day jobs”, time is scarce.

A few nights ago, I had a crazy idea….maybe I could simply scale everything.  As an experiment, I changed the WindowedApplication scaleX and scaleY to 80%:

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" width="1019" height="680" scaleX="0.8" scaleY="0.8" applicationComplete="init()" ...>

Amazingly, everything looked fantastic and scaled nicely (with the exception of the HTML overlaid content which I discuss later in this post)!

I then decided to add a little code to determined how much to scale the app based on the user’s resolution. Here’s the code:

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" width="1019" height="680" preinitialize="initScreenSize()" applicationComplete="init()" ...>
...
...
			private function initScreenSize():void{
				var thisScreen:Screen = Screen.mainScreen;
				var newScaleX:Number = thisScreen.visibleBounds.width / 1019 * 0.98;
				var newScaleY:Number = thisScreen.visibleBounds.height / 680 * 0.98;
				var newScale:Number = Math.min(newScaleX,newScaleY,1);
				this.scaleX = newScale;
				this.scaleY = newScale;
				this.height = this.height * newScale;
				this.width = this.width * newScale;
			}
...
...

Here’s a walkthrough of the code:

• Line 1: All of this needs to happen before anything is displayed, so I use the preinitialize event to trigger my initScreenSize() method.
• Line 5: Using the AIR screen API, I grab the main screen (Tour de Flex has some additional samples using the screen API)
• Line 6 and 7: Using the visible width and height of the screen, determine what the new width and height should be proportionally. I added the “0.98″ factor so that the app doesn’t fit too tightly. 98% gives it a nice tight margin.
• Line 8: Because I need to maintain the aspect ratio, I need the lowest scale factor required to make it fit on the screen. If the user has a very large screen, the scale factor will be greater than 1.0. I don’t want to scale the app larger than the original size so I added “1″ to the list of values to consider. This guarantees that I will never scale larger than the original size.
• Line 9 and 10: Set the scaleX and scaleY to my new computed scale factor
• Line 11 and 12: Set the new application height and width

To see the results, check out a full-resolution triple-screenshot by clicking the image below:

The largest image is the original 1019×680 app (scaleX/scaleY=1.0). The other two images are scaled for smaller resolutions. Notice that the graphics, fonts, etc. scaled nicely.

There is a catch to this if you are using any HTML in your application with the mx:HTML component:
All of the Flash content scales nicely, especially since we used embedded scalable fonts. However, our app also utilizes HTML overlays for some of the dynamic content. Notice the signs hanging on the doors in the screenshot above. Those signs are actually loaded into a transparent mx:HTML control (I blogged about this a few months ago here). The HTML content looked horrible because the HTML is rendered first, then it’s scaled, so I was seeing the results of image scaling of my text. At first I thought this might be the end of my brainstorm, but, later that night, I had a crazy idea… the kind of idea you only get after 2am:

This sounds nuts, but, I scaled the HTML control to the inverse of the application scaling which basically puts it back to full-scale. For example, if my app is scaled to 0.8 (80%), I scale the HTML control to 1/0.8 = 1.25. I then took advantage of a new CSS3 zoom property and set it to 80% in my CSS:

<style>
body {
   zoom: 80%;
}
</style>

Confused?   Basically, I let AIR scale the Flash content and I let CSS scale the HTML content. The results are not perfect, but it’s darn close.

IMPORTANT:  The CSS zoom property is part of CSS3 which requires AIR 2.0.  It will NOT work with AIR 1.5.x.  Our app has a version check of AIR before it does the scaling.  Since AIR 2.0 is going to be available very soon, it’s a short-term issue.

Our latest release is now “netbook friendly” without changing any artwork. I even tested it at 640×480 and it looks great!

Our next challenge is to make sure that everything is touch-friendly so it will run nicely on a tablet.  I don’t expect this to be much of a challenge.  The real challenge is getting my hands on a nice test tablet!

Apps I use on my Google Nexus One (running Android 2.1-update1) in no particular order: http://gregsramblings.com/gregsandroidapps/

• English – http://help.adobe.com/en_US/AS3LCR/Flex_4.0/ (download full doc zip from here)
• French – http://help.adobe.com/fr_FR/AS3LCR/Flex_4.0/ (download full doc zip from here)
• German – http://help.adobe.com/de_DE/AS3LCR/Flex_4.0/ (download full doc zip from here)
• Russian – http://help.adobe.com/ru_RU/AS3LCR/Flex_4.0/ (download full doc zip from here)
• Japanese – http://help.adobe.com/ja_JP/AS3LCR/Flex_4.0/ (download full doc zip from here)
• Chinese – http://help.adobe.com/zh_CN/AS3LCR/Flex_4.0/ (download full doc zip from here)

We’ve also included links to all six languages in every Flex 4 component sample in Tour de Flex (screenshot below):

Be sure to check out the new Flex showcase (click “What’s Possible“).   Every time we add an application to the showcase, we tweet it on http://twitter.com/flexshowcase so follow us!

Now when you want to show your boss, friends and co-workers what Flex is about, you have a good place to send them for a quick introduction.

Today we released a version of Tour de LiveCycle that has been updated to the recently released LiveCycle ES2. This tool covers the entire LiveCycle ES 2 suite which is far more than simply data services.  Topics include process management, rights management, document security, developer tools, end user interfaces and much more.  There are over 1,000 pages of content and samples!

If you are curious about LiveCycle, this is a great exploration tool.

If you are already a LiveCycle ES2 user, this is a great reference tool.

Tour de LiveCycle ES2 is a desktop app built on Adobe AIR.  You can download it from http://www.adobe.com/devnet/livecycle/tourdelivecycle.

If you blog frequently on topics related to LiveCycle ES, please share the install badge by adding the following HTML:

<iframe width="216" height="182" frameborder=0 scrolling="no" src="http://tourdelc.adobe.com/badge/"></iframe>

Today, the Flex SDK team post version 3.5a that addresses this bug.  Here are the notes from QA on the bug:

The Flex team has updated the 3.5 SDK with a small update that addresses this issue. The refreshed build, SDK 3.5a, has only a few files modified in order to fix this issue and this change does not affect the signing and caching of the SDK 3.5 RSLs originally released in December.

Thank you for your patience as we worked to address this issue.

While charts are great for understanding historical data, real-time data can benefit from visualization also. For example, financial transaction data can contain immediately useful trending information that is undetectable without some visualization.  The same goes for credit card transactions, website traffic, etc.

Although Flex is fantastic for traditional data visualization, it is uniquely qualified for visualizing real-time data.

Holly Schinsky and I took the content from our MAX 2009 session on this subject and published it on DZone.  It describes some common techniques for collecting data in real-time, visualizing it using traditional charting controls, and applying some more advanced location/mapping controls to further improve the user experience.

The article along with lots of code for you to try is available at – http://ria.dzone.com/articles/flex-data-visualization

This position has great career potential.  Come be a rock star at Adobe!

More details here

• Flex 4 Preview samples by Holly Schinsky
• AIR 2.0 / Flash Player 10.1 samples by Holly Schinsky
• Data Visualization Samples by See4th Design
• YouTube API samples by Holly Schinsky
• Chris Callendar’s resizable containers, tiled border box, tree icon spinner, tree lines and string word validator

Every time you run Tour de Flex, it checks to see if new samples are available and installs them automatically.

We’re up to 362 samples throughout Tour de Flex with more coming very soon!

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

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

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

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

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

Bring your developer friends!

Since launching tBlurb, I’ve realized that the number of clicks required to post code is simply too high.  Many people come to the site, paste their code and walk away disappointed because it’s not color coded, etc.  The developer side of me asks, “Why didn’t you read the instructions?”… but… the user side of me never reads anything and firmly believes that intuitiveness should always obviate the need for documentation.

I spent a little time today simplifying the work flow.  Now you simply go to tBlurb.com, choose the content type from a drop down menu, paste your code and click a button.  Next time you visit tBlurb, it will remember what content type you selected last time saving you another click.  The rich text editor and other features are still available but not as the default.  So what was a 4 click flow is now either a 1 or 2 click flow.

tBlurb is free to use.  Enjoy.

ColdFusion 8.x comes bundled with LiveCycle Data Services 2.5.1 (2 versions behind the current 3.0). If you are using this combo for publish/subscribe messaging with RTMP (only available in LCDS, not in BlazeDS), you need to be aware of a bug. If in your Flex code you create a consumer (<mx:Consumer id=”c” …) and then do a c.subscribe(), all is well and the consumer will receive messages as expected. However, if your client app becomes disconnected, even for a split second, it will not be able to resubscribe. In my particular case I had c.resubscribeInterval=5000 and c.resubscribeAttempts=-1 which should enable auto-resubscribing for the consumer in case the connection is broken. In LCDS 2.6.1 and 3.0 this works perfectly. However, in 2.5.1 there is a bug and your consumer will become deaf because it is basically resubscribing to an invalid session that the server failed to clear after the disconnect. Even a c.unsubscribe()/c.disconnect()/c.subscribe() doesn’t put things back in working order. The code runs fine with no unusual events so everything appears to be re-subscribed. Even the c.subscribed boolean property will be true… but the consumer is never going to receive another message. The workaround is extremely hackish – you have to send a garbage message (that will not be received by the broken consumer). The server will try to broadcast the published message to its consumers and discover that the old session is invalid and then clean it up. After this occurs, you can do a c.subscribe() and be back in business. However, this is not as easy as it sounds because there are timing issues and you can’t attempt to disconnect/resubscribe until the garbage message is acknowledged. You end up with code full of temporary event listeners, timers, etc. which goes way beyond an acceptable hack IMO.

This bug is only with LCDS 2.5.1 RTMP-based messaging.

The best solution is to upgrade to ColdFusion 9 and install LiveCycle Data Services 2.6.1 (instructions here) if you need RTMP messaging. This will handle disconnects/resubscribes perfectly. If you are running LCDS 2.5.1 without ColdFusion, you should upgrade to 3.0.

Currently LCDS 3.0 is not supported with ColdFusion 9 but that will change in the next version of ColdFusion. LCDS 3.0 introduces additional pub/sub messaging features including reliable messaging, message throttling and other goodies. More on this topic soon.

Lastly – if you are running ColdFusion 8, it’s time to upgrade anyways!

I recently blogged about a project that I’ve been involved with called ChessJam, an AIR app for playing online chess.  We recently added some new screens to the app to show stats such as the top 20 ranked players, top countries, game history and so on.  We could have built these views directly into the application but we wanted the ability to dramatically change the stats and related content as-needed without having to roll out a new app every time.   We decided to use another great feature of AIR, the mx:HTML control.  Basically, we built a web browser directly into the app with a single line of MXML.

The screenshot below shows the ChessJam app with HTML content loaded in our STATS view.  Basically, we have a mx:Canvas with our nice garden image sitting on top of it (the image is baked into the app and loaded with mx:Image).  On top of that is our mx:HTML control configured to be transparent.  The navigation at the top (TOP USERS, TOP COUNTRIES, ALL COUNTRIES, GAME HISTORY) and other content is simple HTML content being served up by our  back-end Apache/ColdFusion server.

The mx:HTML control provides full web-browser capabilities including JavaScript and CSS so we can expand the game stats simply by modifying the back-end HTML/CF.

Making the necessary pieces transparent:

To illustrate this technique, I’ve provided the code of a small transparent AIR app that loads some HTML content into a transparent mx:HTML control.  Simply create a new Flex/AIR project and paste in the mxml and then modify the two lines in your app-config.xml as indicated below.

To make your AIR app transparent, set the app’s transparent setting in the app-config to “true”,  set SystemChrome to “none” and turn off the default Flex chrome by setting showFlexChrome to “false” in the WindowedApplication tag.

To make the mx:HTML transparent, you need to set the backgroundAlpha to “0″ and the paintsDefaultBackground to “false”.

If you run this app, the content from http://tourdeflex.adobe.com/blogfiles/transparentdemo.html will display on top of your desktop.

Be sure that your HTML content does not set backgrounds or bgcolor. Otherwise, your content will have a background.

TransparentBrowser.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	width="800" height="600" showFlexChrome="false">

		<mx:HTML id="leaderHTML" x="1" y="1" width="100%"  height="100%" backgroundAlpha="0" paintsDefaultBackground="false"
		horizontalScrollPolicy="off" verticalScrollPolicy="auto"
		location="http://tourdeflex.adobe.com/blogfiles/transparentdemo.html" />

</mx:WindowedApplication>

TransparentBrowser-app.xml (only displaying the lines that were modified):

<!-- The type of system chrome to use (either "standard" or "none"). Optional. Default standard. -->
<systemChrome>none</systemChrome>

<!-- Whether the window is transparent. Only applicable when systemChrome is none. Optional. Default false. -->
<transparent>true</transparent>

The resulting transparent web browser:

MapQuest is hosting a webinar on November 18th  at 11AM EST and December 2nd at 11AM EST.  To sign up, go to http://platform.mapquest.com/webinar-interest.html

Here is some additional information directly from MapQuest:

MapQuest is committed to providing the best mapping experience in the Flex environment and are continuing to innovate our AS3 and Flex toolkits.  MapQuest provides not only mapping, but industry-leading geocoding, routing and spatial search capabilities, all within easy-to-use Flex components that allow for drag and drop creation of your mapping interface.

We have also been hard at work on Version 6 of our platform.

Last month we released a new Directions web service, available on our Developer Network , and this week, we also launched the new Geocoding service.

Don’t forget to check out our beta page to use the new MapQuest map style, try draggable routes in the latest beta of the AS3/Flex 6.0 SDK, and see what other new services and SDKs we are busy rolling out!

The MapQuest Platform is available to everyone for free (Free Edition).  The Enterprise Edition includes everything available for free, plus account management, live support, service level commitments and  enhanced data offerings.  If you wish to try the full power of the Enterprise Edition before buying, A Developer License is also freely available and can be accessed here.

Premium Data Sets are also available with MapQuest Platform Enterprise Edition, for both display and search.  Datasets in North America include business listings, neighborhoods, parcels, zip codes, counties, demographics, school districts and school points.  See more at http://platform.mapquest.com.

Questions?  Send them to sales@mapquest.com and you’ll see how easy it is to work with MapQuest!

Check it out at http://www.adobe.com/devnet/livecycle/

So, what do we do next? How do we top this in 2010? I’ll start with some self-grading:

What we did right:

• A+ : Successful launch at MAX – this definitely put Tour de Flex on the map, especially when Kevin Lynch showed it on a 20ft screen! Many of us worked some crazy hours to get Tour de Flex ready. We tried to get upper management to postpone MAX 3 weeks to give us more time, but they refused <cough> so we had to work double-shifts to get it done!
• A+ :Included 3rd party components and samples – one of our primary goals with Tour de Flex was to go well beyond the old component explorer and really show off what is possible with Flex. With any technology, it’s always the developer community that does the really cool stuff. We launched with many cool 3rd party samples and continue to add more. This is what keeps people coming back to Tour de Flex week after week. From our own data we see that many developers use Tour de Flex regularly.
• A+ : Good solid samples – we worked hard to make sure that every sample was relevant and to the point.
• A: Desktop and web versions – Although the desktop version has more samples and an Eclipse plugin, sometimes people want to simply hit a web page.
• A: The Tour de Flex dashboard – I’m not sure this had a huge impact external to Adobe but internally, it was an eye-opener on who is learning Flex. If you view the dashboard at any time of day or night, you see a LOT of activity. It’s exciting to watch. It’s also one of our primary demos for data visualization and publish subscribe messaging with LiveCycle Data Services and BlazeDS.
• A: Early access to Flex 4 and AIR 2.0 samples – We have been rolling out new Flex 4 beta samples for several weeks. More are coming and we’ve already started to work on new AIR 2.0 samples.

Where we suck Opportunities for improvement:

• C-: I’ll start by whining a bit…. Maintaining Tour de Flex is a time-consuming job! Not only are there often new samples to deploy, but we have also have to make sure that existing samples still work. I’ll give us a C- in this area. This primarily falls on my shoulders so I can be as critical of myself as I want! As I write this, I have over 25 samples I need to roll out. I’m sure that a few authors have been a bit frustrated at my slow response at times, but my “day job” simply gets in the way (as I write this, I am in a hotel room in LA after a long day in Sacramento after a week in Tokyo!). One of the issues is that I have no tools to maintain the sample database. I basically hand-edit a huge XML file, which seems a bit silly, right? Well, we’re working on a new tool for this that will be ready soon. I’m also working on some other ways to improve our response time. My goal is to have a consistent one-week turnaround in 2010.
• C+: No clear path for submitting new samples. I’ll give us a C+ in this area. Although we have a sample submission form mentioned on the main download page, many people don’t notice it. There needs to be a way to submit new samples and ideas directly from Tour de Flex! This is on my Tour de *** v2 wish-list for early next year.
• B+: Fresh samples – I’ll give us a B+ for this one. We have rolled out a bunch of new samples fairly often, but I’m convinced that there are many 3rd party components out there that should be showcased in Tour de Flex. If I had a solid week to go hunting for Flex components, I bet I could find some great ones to include in Tour de Flex that would benefit all of us. I blogged in early 2009 that I hoped to have 1,000 samples by the end of the year and although we have a good inventory, we are only 1/3rd of the way to that goal.

What’s next?

Since rolling out Tour de Flex, we also rolled out Tour de LiveCycle and now we are actively working on Tour de ColdFusion! Now that we are seeing more integration between Flex and LiveCycle and ColdFusion, it’s becoming apparent that we should somehow combine these tools. It’s been suggested to me many times that we combine them but I’ve always resisted because I wanted the Flex community to own Tour de Flex and the LiveCycle community to own Tour de LiveCycle, etc. I’m convinced that the community-feel of these tools is a big factor in their success. However, now that all of our products are overlapping more and more, it has me re-thinking where we should go next. Maybe it’s possible to have an explorer-like tool for developers that covers all of the above yet still maintain the individual community feel for each technology. It would also give us the opportunity to provide additional samples in some other areas such as Pixel Bender, Text Layout Framework, Catalyst components, and more.

We have some great ideas on how we can improve the interface and accomplish all of these goals. Also, I would like the next version of the Tour de whatever-we-call-it framework to be code that we can openly share, maybe even as open-source (no promises – I have a few legal hurdles to work out on this).

In the meantime, SEND MORE SAMPLES (and be patient)

Technology Choices

User Interface / Front-end

This was by far the easiest decision we made. Adobe Flex was a no-brainer. We simply didn’t have time to do it in anything else!   We considered doing a browser-based game but Adobe AIR offered some compelling advantages:

• Network detection – we can detect network connectivity issues and react accordingly
• Idle user detection – we can detect if the user has stopped using their keyboard and mouse and cleanly log them out
• UI control – we can better control the user experience by managing every aspect of the UI including position, size, chrome, etc.

We didn’t have the time (nor the desire) to write our own AI engine that understands the rules of chess,  so we purchased a third-party library for this. Our first build vs. buy decision.

Server-side Platform

Choosing the right server technology required a bit of discussion. I knew that I would be the primary developer for the back-end so this decision was a big one for me! The main purpose of the server-side code was to act as an interface between the client app and the database. The server would also be a message “dispatcher” to the multiple clients notifying them of other user’s activities such as moving pieces in the game, entering rooms, initiating challenges, and so on.

We considered the following technologies:

• Java – I have prior Java experience and have built multiple products, both commercial and free using Java. I also knew that Java was well suited for Flex but I was concerned about the time it would take.
• PHP – My development partners have some prior PHP experience but my PHP experience is only at the hacker level, so I felt that the learning curve would add too much time to the schedule.
• ColdFusion – Despite the fact that I work for Ben Forta, I wasn’t sure ColdFusion was a good fit for our project. I had only a little experience with ColdFusion and did not consider myself an expert. During a conversation with Ben about our back-end requirements, he made some very good points. (1) Writing ColdFusion to do basic database work is super-fast and easy to learn. (2) ColdFusion and Flex work very well together. (3) ColdFusion has good messaging support with LCDS or BlazeDS. (4) ColdFusion administration is simple. After this conversation, I did some additional research and decided that ColdFusion might actually be the right choice. I grabbed a copy of the 3-book  “ColdFusion 8 Web Application Construction Kit” series and did some selective speed reading. At the time of this decision, ColdFusion 9 was not even in beta yet so I decided to stick with 8. When it comes to production software, I tend to be a bit conservative. A side effect of my newly found affection for ColdFusion was that I participated in the CF user group tour for CF9 which was a lot of fun. I refuse to get on stage in front of a bunch of developers and “evangelize” about something I’ve never seriously used but now that I was doing the CF deep-dive, I finally felt I was qualified.

Server-side OS

There’s not really much to say here other than I love the stability, efficiency and flexibility of Linux. I have many years of experience developing and managing large-scale applications built on Unix-based operating systems so it’s definitely my comfort zone. I chose 64-bit Ubuntu 8.x (was the latest at the time – I have yet to upgrade to 9.x).

Server-side database

We selected MySQL for the database engine. It’s solid, fast, easy to setup and administer, and it just works. I’ve never used MySQL in a large-scale application with this many anticipated transactions so we’ll see how it holds up. The data model itself is fairly straightforward. I avoided triggers and stored procs to keep our options open moving forward. So far MySQL is doing well. I’m even using a couple of memory-only tables for very transitional/temporary data such as a list of who is logged in, etc. I typically would create a memory structure for this but using a memory-only table reduced the amount of code I had to write.

Messaging

Flex applications can make remote calls to ColdFusion out-of-the box with no additional software so we were set. However, we needed a middleware technology for sending messages from client to client and server to client. These messages are used for player-to-player chat, notifications that a move has been made and many other game events.

BlazeDS vs. LiveCycle Data Services (LCDS):

Both BlazeDS and LCDS offer publish/subscribe messaging. ColdFusion 8 comes bundled with LCDS (although a separate license purchase is required if you use it for more than one CPU) so this was the path of least resistance. LCDS also supports RTMP (real-time messaging protocol), a very high-performance, scalable option.

Note: ColdFusion 9 now comes with BlazeDS, not LCDS, but LCDS can be integrated. We used ColdFusion 8 so no additional integration work was needed.

Proof of Concept

At this point, we had selected the tools and technologies we would use to build ChessJam.  However we still were not 100% convinced that we had what it would take to build this complex application so we decided to build a series of mini proof-of-concept apps.

• Flex calling a CFC that returns data of various types – check!
• Subscribing to a real-time message feed using a Flex mx:Consumer – check!
• Publishing real-time messages from Flex using mx:Producer – check!
• Publishing real-time messages from ColdFusion using an Event Gateway (DataServicesMessaging) and receiving them in Flex – check!

Framework

Todd Williams (twitter) and I had several discussions about how this application should be structured. There were many factors to consider because our long-term plans were lofty. We wanted to support multiple simultaneous games, multi-level chat, auto-reconnection to ongoing games, tournament play, team play and much more. We agreed that this project was well beyond the scope of the “just sit and code” approach. We needed a plan!

I’ve worked with Holly Schinsky (twitter) for over 10 years on several very large projects and I know that she has a good sense for architecture and design patterns so I shared our basic requirements with her and asked for recommendations. A couple of days later, Holly sent us a skeleton Flex project based on a MVCS architecture that she felt would be a good starting point for us. Todd and I studied it and decided that it was a great starting point.

So, with our lists of requirements, screen mockups, mind maps and weekend enthusiasm, we started coding!

Some code snippets

I wish I could post the entire Flex project and CFCs but that’s not possible. However, I at least want to give you a flavor of it.

Flex calling ColdFusion

Below is a snippet of code showing how we call backend ColdFusion functions defined in several CFCs. There are backend functions for user validation, logging of moves, game initiation and much more. Calling ColdFusion from Flex is super-easy. Once you get it working for one function, it only takes a few seconds to implement new ones. Most of our functions return a string, number or query result (array collection). You’ll find tons of additional information on ColdFusion remoting at http://www.adobe.com/devnet/flex/flex_cf.html. There are additional resources on Adobe TV including one that Ben Forta created that helped me get started at http://tv.adobe.com/watch/adc-presents/building-flex-applications-powered-by-coldfusion

Implementing pub/sub messaging for client-to-client communications via LCDS

We use pub/sub messaging extensively in ChessJam for game event notifications and chat. Below is a simple example of how we implemented in-game chat.

Implementing pub/sub messaging for server to client communications via LCDS

There are several features in ChessJam that require messaging from the server to the client app. For example, every time someone enters a room in ChessJam, the server broadcasts the event so that anyone monitoring the room will see the person enter. We also use server-produced messages for other notifications, message broadcasts and automated chat messages. Below is a snippet from both the ColdFusion side and Flex side. In order for the ColdFusion sendGatewayMessage() function to work, you’ll need to set up an instance of the DataServicesMessaging gateway type in the ColdFusion administrator. Here’s our setup (with certain data obfuscated of course):

Once configured, I can use the ColdFusion sendGatewayMessage() function to produce messages that any subscribed Flex consumers can consume:

From proof of concept to production

The first few development milestones were ugly and simple web-based clients that allowed a basic game to be played between two users. Here’s a rough list of early milestones:

• Person to person game in a browser (no artwork yet)
• Basic chat capabilities
• Game reconnects (if you shutdown your app and reconnect while the game is still going, you will automatically rejoin the game)
• Game observe functionality (you can watch someone else’s game being played – useful for tournaments, etc.)
• Towers and rooms – real-time updates to the clients when other users leave and enter.
• Idle user detection (server-side) – a simple CFM that goes through a bunch of queries every 5 minutes to manage timeouts of idle games, etc.
• Artwork and our first AIR build. This was a fun one! Todd completely blew us away with his designs
• Login, create profile, update profile, reset password and other boring things that had to be done
• Extensive server-side logging of activity so we could keep an eye on things in real-time
• The first ChessJam Shakedown – we invited 20 friends and family members to install our early build and play so we could see how things worked. As we expected, we found tons of bugs! For example, a game observer could click the forfeit button and end a game that they were not participating in! This is one of about 100 bugs we found.
• Code, build, test, code, build, test, code, build, test, code, build test, …
• Auto-update, idle user detection (client-side), network connectivity monitoring, etc.
• 1.0 complete!
• Robots! – blogged about here – 24 computer-based players for practicing your skills
• Challenge court and buddy lists – blogged about here
• More coming soon! We need more weekends!

A few stats

We continue to see good, consistent growth of our user base with practically zero marketing. We wanted to ramp up slowly so we could get a few more features implemented and bugs flushed out. As of this writing, here are some stats:

• 80,000 moves made! This is one of our primary metrics since it is a direct indication of how much people are playing.
• Between 5,000 and 6,000 moves a day with consistent growth
• 1900 games played
• Almost 1,000 users from over 88 countries (less than 50% are from USA, which surprised us considering that we’ve done no marketing)

What’s broken

I’m not going to share all of our dirty laundry but like any new application, we have a few open issues. Memory management is a bit of a challenge for us, especially for users that stay in the game for several hours. We continue to make progress in this area so I’m not worried about it. We also occasionally see issues with players who have low-bandwidth/high-latency connections when making rapid moves, although for now, the latest version seems to be holding up well.

What’s next?

As time allows, we’re working on some new things:

• Simultaneous game play – a tab-like interface that allows you to play multiple games at once.
• Correspondence chess – for people that don’t have time for live play. This feature allows each player to move when they can. You can play several games at once and make a move only once per day.
• Tournaments! We have some fun plans for tournaments. We already have enough “regulars” to put together our first tournament. Based on my personal game record, I can tell you that I will most likely NOT be the winner of this tournament! When I do have time to play a game on ChessJam, I typically get destroyed.
• User game tracking and reporting. The data is there now. We just need some time to build out a nice interface.
• A few surprises that I won’t unveil here
• From a technology stack point of view, I’ll be upgrading to ColdFusion 9 soon. I usually don’t jump on the latest version of anything this soon but so far, I’m hearing very good reports from other ColdFusion administrators. ColdFusion 9 will buy us a bit more performance and we are eager to take advantage of some of the new features such as an expanded cfscript support, improved CFC performance, default data sources, and some of the new EXT2 functionality including an improved datagrid. For now, I’ll probably stick with Ubuntu 8.x since there is no compelling reason to go to 9 for our app. If it ain’t broke, don’t fix it! We will definitely be testing with AIR 2.0 soon. AIR 2.0 promises to improve memory consumption, CPU consumption and offers a lot of new APIs.

If you haven’t tried ChessJam, check it out. It’s free for now. We do intend to monetize this some day for the obvious reasons but for now, we’re focused on building a fun community.

• Home page
• ChessJam Blog
• ChessJam on Twitter

UPDATE:  ChessJam is now upgraded to ColdFusion 9 / LCDS 2.6.1.

Not all chess players want to hear about Flex and ColdFusion and not all developers want to hear about an online chess game, so this seems to make sense.

You can also follow ChessJam on twitter – http://twitter.com/chessjam

• User installs the app, creates a profile
• User clicks around looking for someone to play with but finds nobody so they don’t even get the gaming experience
• User leaves the app after spending an average of 90 seconds
• Five minutes later, another user logs in and repeats the cycle!

We discussed a few options:

1. Hiring middle-school kids to staff the room for $1/hr
2. Me take a sabbatical now and play chess 24/7
3. Employ some robots!

We went with option #3.   If you were one of the users that went through the 90 second experience described above, come back and play a bot.  Hopefully you’ll also see a few humans hanging out to play.

If your trial has run out, email us at chessjam -at- gmail -dot- com and we’ll get you going again.

To learn more about ChessJam, read my previous post.