Tour de LiveCycle ES2 now available!

•February 3, 2010 • Leave a Comment

Back in May, 2009 we launched Tour de LiveCycle (original blog post), a tool to help developers explore the vast array of features, tools and APIs  in LiveCycle.

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>

Flex 3.5 SDK bug impacted AIR auto-update now FIXED in 3.5a

•February 2, 2010 • 2 Comments

The Flex 3.5 SDK broke the ApplicationUpdaterUI, a commonly used component for enabling auto-update in AIR apps as described in my earlier blog post.

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.

We encourage all developers using SDK 3.5 to upgrade their build to SDK 3.5a to continue their development. The SDK 3.5a build can be found in the “Latest Milestone Release Build” table here: http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+3

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

:)

Real-time data visualization using Flex and publish/subscribe messaging

•February 1, 2010 • 1 Comment

When you hear the term “data visualization”, you probably immediately think of pie charts, bar charts, and line charts showing sales data, population data, or other historical data.   These charts and graphs help us to visualize the data, detect key trends, and make decisions moving forward.

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

Adobe is hiring a RIA / Flex Architect – interested?

•January 29, 2010 • Leave a Comment

Adobe is looking for a talented and highly motivated Architect or Technical lead to help deliver the next generation presentation services (composite RIA, Mashups and client architecture). A successful candidate will have a proven track record as a client side architect on enterprise applications and RIA frameworks. We are looking for bright, motivated individuals to join a high-caliber fast paced team.

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

More details here

Netflix API samples added to Tour de Flex

•January 27, 2010 • 1 Comment

Jonathan Campos wrote two samples that demonstrate the netflex-as3-api project, an ActionScript 3 utility library to simplify the Netflix API for ActionScript 3 based applications.

You’ll find two samples under “Cloud APIs” in Tour de Flex.

Have you looked at Tour de Flex lately?

•January 25, 2010 • 1 Comment

If you haven’t looked at Tour de Flex in the past few weeks, go check it out. We’ve added some cool new content in the last few weeks:

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!

Tampa Bay Adobe Developer Event this Thursday

•January 18, 2010 • 2 Comments

James Ward and Christophe Coenraets are in Tampa this week working with me on some big plans for 2010 and we thought it would be great to put together an informal event for the local Tampa bay developer community:

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!

tBlurb.com updated – simplified and improved – share code snippets, etc.

•January 16, 2010 • 1 Comment

Six months ago, I launched tBlurb.com (blog post), a site for sharing code snippets and other web content. A few weeks later, I added the ability to edit previously entered content and a traffic report page (blog post).   The concept is simple – you go to tBlurb.com, paste in your code snippet (or whatever) and get a short URL that you can use to share the content.  Source code is color syntax highlighted, etc.  Your page has no additional content, ads, etc.  What you paste is what you get.

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.

code snipping tblurb screenshot

tBlurb is free to use.  Enjoy.

LCDS 2.5 RTMP mx:Consumer not able to resubscribe after disconnect (ColdFusion 8)

•January 15, 2010 • 5 Comments

This post does not apply to most readers but just in case someone else runs into this bug, they will find some answers in this post and avoid wasting a lot of time hunting in search engines as I did. If you don’t run ColdFusion 8 and/or LCDS 2.5.1 using RTMP messaging, it doesn’t apply to you.

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! :)

Blending HTML and local content in an Adobe AIR app

•December 14, 2009 • Leave a Comment

I was recently able to take advantage of Adobe AIR’s HTML capabilities to blend server-fed HTML/JS content with rich local SWF/JPG/PNG content using a simple technique that I thought worthy of blogging.

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:

New MapQuest ActionScript APIs including a new enterprise offering

•November 11, 2009 • Leave a Comment

Early this morning, I added 29 new samples in Tour de Flex that were provided by MapQuest to show off their new APIs.   There are some really cool new capabilities so check them out!

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!

Adobe LiveCycle Developer Center gets a facelift!

•November 11, 2009 • Leave a Comment

The Adobe LiveCycle Developer Center website had a major upgrade today that I’m excited to see.  The new layout and content makes it much easier to get in and learn about LiveCycle.  As many of you know, LiveCycle can be a tough thing to get your head around…. the question “What is LiveCycle?” is a tough one for many!  The new content dramatically improves finding the answer.

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

Tour de Flex reaches 10,000,000 samples viewed – now what?!

•November 11, 2009 • 3 Comments

In just under a year, Tour de Flex has reached a milestone that many of us never imagined. As of this past weekend, over 10 million samples have been viewed in Tour de Flex. We launched on November 17th, 2008 at MAX as an attempt to better spread the word about Flex in a more scalable and efficient way…a sort of “downloadable Flex evangelist”. To see some of the history, check out my previous blog posts about Tour de Flex here.

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) ;-)

The making of ChessJam Flex/AIR + ColdFusion + LiveCycle DS = fun project!

•November 9, 2009 • 6 Comments

A few weeks ago, I unveiled a weekend project that I’ve been involved in for several months called ChessJam.  I am now making good on my promise to share why we the selected the technologies behind this desktop application for playing online head-to-head chess. Obviously this is primarily a personal project but there is a very good Adobe-technology basis to it, so I feel compelled to “evangelize”! My first instinct was to post all of the source code but my development partners quickly reminded me that this is a commercial product so I’m going to be walking a thin line in this post. :)

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.

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

New ChessJam blog created for game-specific posts

•October 24, 2009 • Leave a Comment

I’ve created a separate blog for ChessJam-specific news.  I will continue to blog about ChessJam here on Greg’s Ramblings but only when it’s relevant to the Adobe developer community.  For example, I’m working on a new post that goes into some details on how the app was built with Flex, AIR, ColdFusion and LiveCycle Data Services that will be posted here but posts about ChessJam’s new features, etc. will now go on the ChessJam blog at http://chessjam.blogspot.com.

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

ChessJam and Robots – A.I. saves the day

•October 19, 2009 • 3 Comments

A few days ago, I blogged about the roll-out of ChessJam, an online chess app built on Flex/AIR, ColdFusion and LiveCycle Data Services.  The roll-out has gone well but we have quickly learned that our real challenge is creating a new chess playing community!   From analyzing our logs, here is the typical experience over the past few days:

  • 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.

Adobe AIR Auto-Update – How to force some updates and make others optional

•October 16, 2009 • 17 Comments

If you are looking for information on how to add auto-update capabilities to your Adobe AIR app, start with my earlier blog post, “Adding auto update features to your AIR application in 3 easy steps“.

Most updates to software applications are optional for the user.  The typical flow is that the user is notified that an update is available and then given the choice to update now or later.  However, there are situations that warrant forcing the update.  For example, if you have made changes to server-side APIs that make existing client-side apps unusable, you obviously need all client apps to update themselves.  I recently ran into this situation with my online chess application.  I started reading through the AIR documentation to determine how to make some updates mandatory and others optional.  AIR provides an extensive set of APIs to control each step of the update process from comparing versions to downloading the update to managing the install but this was too much work for a lazy developer like me. :)

I typically use the ApplicationUpdaterUI version of the update framework because it’s easy to implement and the built-in dialogs that walk the user through the update are perfect.  To force an update with the ApplicationUpdatedUI, you simply disable two dialogs using the following code:

  • appUpdater.isDownloadUpdateVisible = false; // Disables (skips) this dialog:
  • appUpdater.isInstallUpdateVisible = false; // Disables (skips) this dialog:

With both of these dialogs disabled, the update immediately downloads and installs.   A dialog showing download and install progress is still displayed but you can turn these off too (I wouldn’t recommend turning this off).

My approach

I wrote some code that loads my server-side update.xml file (prior to initializing the application updater) and looks for a new tag I created called “FORCE”.  Once the file is loaded, I initialize the updater and toggle the dialog accordingly.   Now I can control whether an update is forced by simply updating my update.xml.

The sample code below builds on my original blog post.

Server-side xml file with <force>yes</force> added (update2.xml):

<?xml version="1.0" encoding="utf-8"?>
<update xmlns="http://ns.adobe.com/air/framework/update/description/1.0">
<version>v2</version>
<force>yes</force>
<url>http://tourdeflex.adobe.com/blogfiles/AIRAutoUpdateSample/server/AIRAutoUpdateSample-v2.air</url>
<description><![CDATA[
v2
  * These notes are displayed to the user in the update dialog
  * Typically, this is used to summarize what's new in the release
]]>
</description>
</update>

The modified source with code added to look for the FORCE tag.

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="200" height="70" creationComplete="preCheckForUpdate()">
	<mx:Script>
	<![CDATA[
		import flash.events.ErrorEvent;
		import flash.events.IOErrorEvent;
		import air.update.ApplicationUpdaterUI;
		import air.update.events.UpdateEvent;
		import mx.controls.Alert;

		private var appUpdater:ApplicationUpdaterUI = new ApplicationUpdaterUI();

		private var updateXMLURL:String = "http://tourdeflex.adobe.com/blogfiles/AIRAutoUpdateSample/server/update2.xml";

		// Pre-read the server-side XML file to look for <force>yes</force>
		private function preCheckForUpdate():void{
			var loader:URLLoader = new URLLoader();
			loader.addEventListener(Event.COMPLETE, checkForUpdate);
			loader.addEventListener(IOErrorEvent.IO_ERROR, onIOError); // Just in case we can't read the update.xml						

			loader.load(new URLRequest(updateXMLURL));
		}

		private function checkForUpdate(event:Event):void {
			setApplicationVersion(); // Find the current version so we can show it below

		    var myXML:XML = new XML(event.target.data);
			namespace items = "http://ns.adobe.com/air/framework/update/description/1.0";
		    use namespace items;
		    var forceUpdate:String = myXML.force;

			appUpdater.updateURL = updateXMLURL; // Server-side XML file describing update
			appUpdater.isCheckForUpdateVisible = false; // We won't ask permission to check for an update

			// If <force>yes</force> was found above, turn off the download and install dialogs
			if(forceUpdate.toLowerCase() == "yes") {
				appUpdater.isDownloadUpdateVisible = false;
				appUpdater.isInstallUpdateVisible = false;
			}
			appUpdater.addEventListener(UpdateEvent.INITIALIZED, onUpdate); // Once initialized, run onUpdate
			appUpdater.addEventListener(ErrorEvent.ERROR, onError); // If something goes wrong, run onError
			appUpdater.initialize(); // Initialize the update framework
		}

		private function onError(event:ErrorEvent):void {
			Alert.show(event.toString());
		}

		private function onIOError(event:IOErrorEvent):void
		{
			trace("Error loading URL.");
		}

		private function onUpdate(event:UpdateEvent):void {
			appUpdater.checkNow(); // Go check for an update now
		}

		// Find the current version for our Label below
		private function setApplicationVersion():void {
			var appXML:XML = NativeApplication.nativeApplication.applicationDescriptor;
			var ns:Namespace = appXML.namespace();
			ver.text = "Current version is " + appXML.ns::version;
		}
	]]>
	</mx:Script>

	<mx:VBox backgroundColor="blue" x="0" y="0" width="100%" height="100%">
		<mx:Label color="white" id="ver" />
	</mx:VBox>

</mx:WindowedApplication>
</code>

Keep in mind that forcing an update is borderline intrusive and should be done judiciously.

If you know of a better way to do this, please comment.

My pet project – ChessJam – live online chess with a fun attitude

•October 15, 2009 • 12 Comments

For the past eight months, I’ve been working with two friends, Todd Williams and Sean Carey, on a little side project called ChessJam.  This project started in February, 2009 when Sean and I decided to play a game of online chess with each other to finally resolve who was the better player.  We explored several online chess sites and to our surprise, we found all of them disappointing.  This led to a discussion about what we could potentially build ourselves.  We knew that UI design would be key, so we rounded out our team with Todd, artist, UI designer and ninja Flex developer.  All three of us have demanding day jobs so the journey has been a bit slow, but we are finally ready to show the world what we’ve built.

ChessJam is a desktop application that you can use to play live chess with other people via the Internet.  You will quickly notice that ChessJam is a bit different than the other online chess sites.  Our goal from day one was to create a user interface that is both functional and fun.

Features

  • Rich graphics and sound
  • Simple interface – pick a tower, pick a room, sit at a table and play on a 3D or 2D board
  • Multiple game parameters available (60 minutes, 30 minutes, 10 minutes and speed chess.  More coming soon)
  • Full disconnect/reconnect capabilities
  • Tracking of wins, losses and draws
  • Player to player chat
  • Watch any game in progress
  • Much more coming soon!

The Technology

The front end of ChessJam was built with Flex and deployed as an AIR application so it will run on Windows, Mac OS X and Linux.  The back end is ColdFusion and LiveCycle Data Services.  I am already working on a new blog post titled, The making of ChessJam where I will share why we chose this particular combination of technologies and the challenges we faced.  You might be surprised so stay tuned!

How We Monetize ChessJam

We knew from the start that we would need to charge something for ChessJam to offset the operating cost, but that’s only half the reason.  If you have tried any of the free online chess sites, you know that they are filled with many people that really aren’t there to play chess.  From my personal experience, I was only able to play a decent game about one out of four attempts!  Many users leave in-progress games without warning (especially when they start losing!).  Other users tried to get me to click a link to see their webcam and other garbage.  It was not the fun atmosphere that I had hoped for!  By charging a small fee, we hope to eliminate a lot of this noise.

The ChessJam application is free for 14 days.  After the 14 day trial, there is a one-time $15 charge for the application.  There are no recurring fees.  Basically, you pay $15 and you can play chess using ChessJam forever.

UPDATE 10/24/2009:  ChessJam is now free – see http://chessjam.blogspot.com/2009/10/big-changes-at-chessjam-app-now-free.html for details!

October Promotion

We realize that it’s very important to grow a good community of users, so to encourage people to use ChessJam during these early days, we are going to give away a free copy of ChessJam to the 20 people that play the most games between now and October 31, 2009.

Dates and times are subject to change based on my work/travel schedule.  In other words, be flexible and work with me.

If you are interested in challenging me to a game of chess, email chessjam@gmail.com with one or two preferred dates.  I’ll update this blog post as the timeslots are assigned.

If you beat me, you get a free copy of the app.  If I beat you, you have to pay triple for it and blog about how great it is! (just kidding :-) )

Links

Video demo (view in HD on Youtube for best viewing)

My next blog post on ChessJam will provide a tour of the stack, and I think you will find that this is an excellent use case for Flex, AIR, ColdFusion and LCDS.

Updated: Adding auto update features to your AIR application in 3 easy steps

•October 14, 2009 • 1 Comment

In August, 2008, I blogged “Adding auto update features to your AIR application in 3 easy steps“.  It gets many views every day so I spent a little time today updating it to be AIR 1.5 compatible and to include a few common mistakes that developers make when implementing auto-update.

I’ll do a new blog post in a couple of days on how to dynamically control whether an update is forced or optional.

Adobe Flex Certification – Attest Pro

•October 12, 2009 • Leave a Comment

At speaking events, I am often asked about Flex Certification.  As the demand for Flex developers increases, many employers are looking to certification programs as a means of pre-qualifying applicants.   I’m not a big fan of using a single test to pass or fail potential employees because some of us are just not good test takers  but, in many situations certification is a good indicator that can be considered along with experience, sample projects, etc., so I absolutely see the value.

Adobe has a page that explains the program at http://www.adobe.com/devnet/flex/articles/flex_certification.html

Basically, you take a test with 50 questions.  If you answer 34 or more correct, you’re certified.  Sounds easy, right?  Well, the questions are tough!

Here’s the breakdown of topics from the Exam Guide:

This is where Attest comes in.  Attest is a desktop application (build on Adobe AIR of course!) that provides mock/practice exams for the Flex certification test.  You can simulate the test to gauge how you’ll do, and if things don’t go well, you can put it in “learning mode” and access tons of resources to help sharpen your skills.

Attest Pro is available in the Adobe AIR Marketplace for $20.  There is a 3-day free trial available.

Holly Schinsky (twitter), co-creator of Attest, recently blogged about Attest Pro here.

David Flatley (twitter), the other co-creator of Attest, also blogged about Attest Pro here.

You can grab the Attest Pro trial from here.