For the last year and a half at Rain I’ve been working on Studio J, Close To My Heart‘s flagship online scrapbooking application. It’s been quite a ride but the result is really quite revolutionary.

Here’s how it works. Hop onto Studio J. You don’t even need an account. You can log in anonymously on the left side of the login page. Once the application opens, create a project. Upload some photos. Choose the kit (set of papers) you would like to use. Choose the pattern (orientation of papers). Choose from a few pre-designed mixes that will get you started out with a great-looking scrapbook spread. Now drop in photos, brads, clasps, ribbons, and stickers. Distress or swap papers at will. Add some text. The amount of customization possible for each of these elements really is amazing and Close To My Heart did their best to make it a powerful experience. Once your spread is complete, you can order a copy that will be printed using CTMH’s super-high-quality printing process and materials and it will be shipped to your door.

I know it may sound like a sales pitch, but I really do think is a fantastic application of technology and CTMH put a lot of focus on giving customers what they want. It was really fun to work on an app that gives users so much control. To read a very fair review of Studio J, check out this article by Craft Critique.

The Juicy Details

You know how much I just loooove to talk about scrapbooking. But oh how I love to talk tech so much more. Here are some interesting tech aspects of Studio J particularly related to the frontend since that’s the portion with which I’m most acquainted:

For the most part, StudioJ is developed in Flex for the frontend and PHP on the backend. The backend and assets are hosted on Amazon’s cloud infrastructure. This provided some unique challenges but resulted in big scalability benefits. For speed, some assets like user photos are uploaded directly to the cloud which requires an ActionScript Amazon API adapter and a little trickery for integration with the rest of the backend.

To store a user’s spread data to be later edited and printed, we utilize SVG. Every element on the spread in ActionScript has a counterpart element in an SVG document. This translation and all the rotating, scaling, panning, colorizing, and other editing tools are provided by our in-house Rain SVG library. This to me is the most powerful and distinctive part of the app.

To improve the user experience, we developed a queuing and caching system. It allows us to cache assets (re-use the same bitmap data in multiple parts of the app and avoid Flex image item renderer flickering issues), prioritize HTTP requests (make sure whatever the user is viewing gets top priority), and even trigger timeouts and/or retry requests. I talked in-depth about this system at the 360|Flex conference and Adobe is adding a similar system to the new Spark image component in Flex 4.5.

The new Text Layout Framework was used in providing text editing functionality on user spreads. This got a little tricky when loading fonts at runtime. It got even trickier when consolidating the undo history for multiple text flows into the spread’s overall undo/redo system. Then we integrated custom support for sizing text to a container.

We used modules to reduce some of the initial app size and provide some domain logic distinction. We added image editing tools so you don’t have to drop into Photoshop to make some simple tweaks to your photos. And the list goes on.

In the end, it’s an ambitious application and I’m glad I could contribute. We have a lot of ideas for additional features and improvements and wish the best for its success. Now go try it out and let me know what you think!

Before we get too far, be aware that these JavaUtils are currently for Windows only. Macs have their own version of the JRE that’s deployed through the Software Update feature so the process of detecting and installing the JRE is very different and is left for another day.

The Short Story

To get started with the utilities, first download the source by checking out the git repository or installing the sample application. If you choose to install the sample application, run the app and right-click on the stage to view the source.

The utilities include two executables:

1. whereis.exe – This is used internally by the tools. See the juicy details below if you care to learn more about this.
2. jre-blah-blah-blah.exe – This is the Windows JRE online installer found here: http://www.java.com/en/download/manual.jsp. This is the installer that is used to install a JRE of your choice if the user’s system does not have an adequate JRE already installed. Because it’s the “online” installer, it’s lightweight and lets you avoid bundling an entire JRE with your AIR app.

There are two main utility classes:

1. JavaValidationUtil – This is used to determine if the user has an adequate JRE installed. Call validate() and it will dispatch an event letting you know if the user has a JRE installed and if the version is sufficient.
2. JavaInstallUtil – This is used to install the JRE if needed. Call install() and it will dispatch an event letting you know when the installation is complete.

The Juicy Details

Let’s dig into the details of how this works. Support for running other executables as described below comes from the new NativeProcess in AIR 2.0.

Validation. The first chore is to validate whether the user has a JRE installed and, if so, whether the JRE is sufficient for the application’s needs. The developer provides the validation utility with a minimum acceptable version broken into four segments: major, minor, revision, and update.

Now we need to find the version of the installed JRE to compare. But first we need to find out where the JRE is installed if one exists. On Windows there’s an environment variable called PATH which contains several directories that should be searched to find an application when a command is executed in the command shell. When you open up cmd, for example, you can type “notepad” and hit enter. The fact that it’s able to open notepad isn’t magic. Windows simply searches the PATH directories for notepad.exe and then executes it.

We need to do the same thing to find the java executable (java.exe). On *nix operating systems this is pretty easy. There’s a simple tool called whereis that comes with the operating system that searches the paths to find a given executable. On Windows, not so much. Luckily, our friends over at Synesis have released a similar tool for Windows that allows us to do the same thing. We bundle whereis.exe with our AIR application.

We execute whereis.exe, passing in name of the executable we’d like to find (java.exe) as an argument. If we don’t find java.exe, the user doesn’t have a JRE installed–at least not in the PATH paths. And if a JRE does exist that’s not in those paths it could take a long time to find and we probably don’t want to mess with it anyway. If java.exe is found, we then execute it passing in the -version argument. Java will then output the version in a specified format that we can then parse. After we parse the version, we compare with the minimum acceptable version and dispatch appropriate events.

Installation. If no JRE is installed or the one installed isn’t adequate, the application would then generally notify the user they need a newer JRE and ask if they’d like to proceed with the installation.

If the user chooses to proceed, it’s time to execute the installer. But there’s a catch. In Windows, installer applications require “elevated privileges” before executing which means Windows nags the user asking for permission to install the JRE. If I were to double-click the installer when it was on the desktop, it would appropriately nag. However, if I execute the installer using AIR’s NativeProcess, nothing happens. No error, no output, no nagging, no installing, nothing. Is this a bug in AIR? Eight ball says signs point to yes, but who knows, maybe Windows is to blame.

In my search for a workaround I found that by executing the installer from the command shell, Windows again appropriately nagged. So then I tried executing cmd from AIR and having cmd execute the JRE installer by passing the path of the installer into cmd as an argument. What do you know–Windows nagged appropriately and off goes the installation as planned. When presenting this problem on the Adobe AIR forums, not receiving a response, then proposing the workaround, a member of the AIR engineering team seemed to think it was a good trick–nay, a great trick–so I guess that’s just the way we have to do things for now.

So first we use our trusty whereis.exe to find the location to cmd.exe. Then we use cmd.exe to execute our Java installer by passing the installer path into cmd as an argument. Windows prompts the user for permission and after permission is granted the installation proceeds as expected. After the installation is complete, we dispatch an appropriate event. Of course we also stay aware of fringe cases (like if the user cancels the installation) and likewise dispatch appropriate events.

Hopefully that’ll give you some good direction as you start your journey pairing your AIR app with Java. Now go make something freaking fetching awesome.

What is it?

RedLiteGreenLite is a small, simple app that allows a group of people to communicate the status of something. The status can be either red or green and the subject can be whatever. That may sound a bit general, but that’s the point. It can be used for whatever purpose your crazy mind can come up with. I’ll get you started:

1. At work, we have a single shower and a lot of shweaty guys after soccer. So we know when the shower’s available, someone can turn the status red when he enters the shower and turn it green when he exits. This way nobody has to keep stopping by the shower to see if it’s available. When it’s green, it’s available. When it’s red, it’s not.
2. At a call center, representatives are split into groups. When one group is on break, no other group is allowed to go on break. Again, when the status is red, a group is on break and other groups must continue attending the phones. When the lite is green, the next group is free to take a break.

The process is pretty simple: join a group. Other people join the same group. When others in the group change the status, you’ll be notified. When you change the status, others in the group will be notified. The status of the group will be persisted across sessions. In other words, if everyone logs out and then logs back in a week later, the status will remain as it was the last time it was set.

There’s no need to explicitly create a group. When you attempt to join a group, the group will automatically be created if it does not already exist.

The app is free. As in free free.

What technologies are used?

RedLiteGreenLite has a client portion and a server portion.

The client is the app users download and install on their computers. It’s built in Flex and published for AIR. It uses the RobotLegs MVCS framework and makes use of AMF remoting and messaging.

The server portion is built in Java using BlazeDS and is hosted on Google Apps Engine.

Ooh, that’s simply juicy. Tell me more.

Don’t mind if I do. First of all, BlazeDS is an open source implementation of AMF-based remoting and messaging. Natively it’s not compatible with Google Apps Engine, but I wanted to use GAE because it’s extremely scalable, it’s free (let’s be honest–I’m cheap like that–this is the main reason), and I wanted the challenge.

To get BlazeDS working on GAE, I recommend following Martin Zoldano’s blog post. Not only does he outline the steps you’ll need to take but he provides a critical patch to flex-messaging-core.jar as well. While you can find this patch re-distributed elsewhere, I recommend posting a comment requesting that he email you the patched jar. That’s how he seems to want to distribute his patch and I respect that. He’s really helpful and quick to respond so it shouldn’t be much trouble.

Once BlazeDS was set up and configured, I started to plan the architecture. First of all, I needed one client in the group to be able to send a message to the rest of the clients in the group. This could be achieved through the messaging service BlazeDS provides. However, messaging doesn’t store state; it just redistributes messages to clients. I needed the group’s status to be persisted to storage so (1) when a new client joins a group it can retrieve the group’s current status and (2) the group’s status can be retained even when no clients are connected.

By default, BlazeDS’s messaging configuration uses ActionScriptAdapter to receive and distribute messages between clients. It doesn’t persist messages. To do so, I extend ActionScriptAdapter and persist the status to Google Storage before sending the message out to the other clients. When clients connect to BlazeDS, they use remoting (not messaging) to retrieve the most recently persisted status for the group. After the initial status is retrieved, the client talks to other clients using the messaging service. You can see how this is set up in messaging-config.xml and PersistentASAdapter.java in the server code.

While GAE has been really nice to get the app up and running, it does have its downsides. To send messages between clients, BlazeDS can use a few different techniques:

• Simple polling. The client, at a standard interval, simply asks the server if there is any new information. The server responds to the request immediately regardless of whether there is new information.
• Long polling. The client sends a request to the server. The server holds onto the request until it has something useful to tell the client at which time it sends back the response.
• Streaming. The client opens an HTTP connection and the connection remains open. The server shoots messages down the connection whenever it has something to say. It’s an “infinate response”.

While each approach has its pros and cons, simple polling leaves a lot to be desired as it creates a lot of HTTP traffic. Unfortunately, from my testing and research, GAE doesn’t seem to support either of the other two methods. But hey, it’s free. If any of you have a java environment and would like to host RedLiteGreenLite so we can step up our game, let me know.

Last but not least, RedLiteGreenLite is open source. I’d love for you to fork the project and do something cool with it.

Now go have fun! Install the client using the badge at the top of the post or fork the project using the link below.

Take the following XML:

<catalog xmlns:ah="http://aaronhardy.com/music">
	<cd>
		<title>Empire Burlesque</title>
		<artist ah:verified="false">Bob Dylan</artist>
		<country>USA</country>
		<company>Columbia</company>
		<price>10.90</price>
		<year>1985</year>
	</cd>
	<cd>
		<title>Hide your heart</title>
		<artist>Bonnie Tyler</artist>
		<country>UK</country>
		<company>CBS Records</company>
		<price>9.90</price>
		<year>1988</year>
	</cd>
	<cd>
		<title ah:verified="true">Greatest Hits</title>
		<artist>Dolly Parton</artist>
		<country>USA</country>
		<company>RCA</company>
		<price>9.90</price>
		<year>1982</year>
	</cd>
	<cd ah:verified="false">
		<title ah:verified="true">Still got the blues</title>
		<artist>Gary Moore</artist>
		<country>UK</country>
		<company>Virgin records</company>
		<price>10.20</price>
		<year>1990</year>
	</cd>
	<cd>
		<title>Eros</title>
		<artist>Eros Ramazzotti</artist>
		<country ah:verified="false">EU</country>
		<company>BMG</company>
		<price>9.90</price>
		<year>1997</year>
	</cd>
</catalog>

In this case I’m trying to find all nodes that have a “verified” attribute. Again, I don’t care if the attribute’s value is true or false. If the attribute weren’t in the “ah” namespace I would use this line of code:

var nodes:XMLList = myXML..*.(hasOwnProperty('@verified'));

However, since the attribute is in the “ah” namespace, the query takes this form:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="cc()">
	<mx:Script>
		<![CDATA[
			protected function cc():void
			{
				var myXML:XML = 
					<catalog xmlns:ah="http://aaronhardy.com/music">
						<cd>
							<title>Empire Burlesque</title>
							<artist ah:verified="false">Bob Dylan</artist>
							<country>USA</country>
							<company>Columbia</company>
							<price>10.90</price>
							<year>1985</year>
						</cd>
						<cd>
							<title>Hide your heart</title>
							<artist>Bonnie Tyler</artist>
							<country>UK</country>
							<company>CBS Records</company>
							<price>9.90</price>
							<year>1988</year>
						</cd>
						<cd>
							<title ah:verified="true">Greatest Hits</title>
							<artist>Dolly Parton</artist>
							<country>USA</country>
							<company>RCA</company>
							<price>9.90</price>
							<year>1982</year>
						</cd>
						<cd ah:verified="false">
							<title ah:verified="true">Still got the blues</title>
							<artist>Gary Moore</artist>
							<country>UK</country>
							<company>Virgin records</company>
							<price>10.20</price>
							<year>1990</year>
						</cd>
						<cd>
							<title>Eros</title>
							<artist>Eros Ramazzotti</artist>
							<country ah:verified="false">EU</country>
							<company>BMG</company>
							<price>9.90</price>
							<year>1997</year>
						</cd>
					</catalog>;
 
				var ns_ah:Namespace = new Namespace('http://aaronhardy.com/music');
				var verified:QName = new QName(ns_ah, '@verified');
				var nodes:XMLList = myXML..*.(hasOwnProperty(verified));
				trace(nodes.toXMLString());
			}
		]]>
	</mx:Script>
</mx:Application>

Hope that helps someone!

A while back, Guitar Hero hit the gaming industry by storm and kids flocked to learning the guitar. Sure, it wasn’t a real guitar, but it was still an instrument of sorts and kids were still learning hand-eye-ear coordination, rhythm, and other music essentials. The game was a huge success, bringing in over $1 billion in sales in the first 26 months and set an industry record.

Why such a difference in my experience learning how to play the piano years ago and kids learning the pseudo-guitar with Guitar Hero? Guitar Hero provides objectivity, benchmarking, competition, and addiction. You can play with your friends in a fun atmosphere. Piano Marvel takes these concepts and applies them to learning the piano. Students play along to accompaniment, see exactly which notes they hit and when they hit them, and earn trophies as they complete increasingly difficult exercises. They can practice whenever they choose and can even battle it out with their piano-playing comrades.

Now to the gushy technical stuff.

First, Piano Marvel is built using Adobe AIR and Java. Adobe AIR provides the high level of interactivity needed for such an application. Java provides the ability to communicate with a MIDI keyboard. Both are bridged using Transmission–AIR talks to Java, Java talks to AIR. All are deployed onto the user’s desktop with a single installer. Both Windows and Mac are supported.

Second, all the exercise content can be easily managed by the administrator. Let’s say the administrator wants to add an exercise. He plays a little ditty in Finale using his keyboard, saves the musical notation as a MusicXML file, saves the accompaniment in MIDI format, and uploads both files using an online admin panel. The next time students log in, they have a new exercise to conquer.

Third, all music notation is dynamic. In other words, an exercise is not just a big graphic of sheet music. Instead, MusicXML is loaded from the server at runtime. The XML is immediately parsed and notes, accidentals, lines, dots, and all notation the user sees is drawn to the screen at that moment. Resize the window and the music is redrawn, not simply scaled, to fit into the available space in the most elegant and readable way possible. Because the MusicXML is very comprehensive in describing a musical piece, we can also use the XML to determine pitch and timing for evaluating a user’s performance.

Fourth, the user can tweak the tempo, only play a portion of an exercise, toggle accompaniment and metronome sounds, get note hints, watch tutorial videos, and more.

Fifth, the application was recently nominated as an Adobe Max 2009 Awards finalist in the education category. Yeah, we’re kind of a big deal.

If that isn’t enough, you can watch my ugly cakehole yack about Piano Marvel below:

You can use a free demo account to get hooked then pay a low monthly fee after your trial period is over. If you check it out using this link you’ll only pay $12/month if you choose to sign up. That’s less than the gas you’d pay for to visit a piano teacher. All you need is a MIDI keyboard and a MIDI-to-USB adapter to get started.

Here are several screenshots of the app and its features. Props go out to Nate Ross for letting me steal his screenshots and captions.

Create a rich interactive music notation engine.

Display immediate feedback on all correct and incorrect notes that were played.

Have the ability to specify tempo, make music selections, and toggle fun accompaniment and metronome playback.

Create an environment that makes playing the piano addictive and entertaining

As a primer, the app challenges your singing abilities by allowing you to sing along with Kelly karaoke style. You’re able to sing songs from her latest album, All I Ever Wanted, and then be scored based on pitch and timing. If you’ve got singing skillz with a z then you might just win a chance to sing at Kelly Clarkson’s soundcheck, win tickets to the show, and go to a meet & greet event.

Props back to Josh Buhler for gracing me with his singing abilities while testing the app. Or so he says it was for testing anyway…

So there you go. Buy it and try out your singing abilities. Then send me a message from your iPhone telling me how exhilarating it was and make sure it says “sent from my iPhone” so I become increasingly more jealous. Enjoy!

Suppose we create a simple product designer containing a single rectangle. The user can rotate, scale, position, and color the rectangle. The rectangle will then be printed in spectacular fashion on the customer’s very own poster. So, Jim hops into the application and moves the rectangle to the center of the poster, doubles its size, colors it blue, then rotates it 45 degrees. He then saves his design.

How is Jim’s design saved? That is, how is Jim’s design described in such a way that (1) he can later re-open it and continue modifying his rectangle and (2) a printing shop can print his poster at virtually any size without degrading its quality?

The most common way to save an image is by using a raster format such as gif or jpg. While there are very good use cases for such formats, this is not one of them. A raster format describes an image by using a grid of pixels with each pixel carrying a color value. For example, the pixel at 1, 1 is red; the pixel at 1, 2 is green; and so on. Put all the pixels together and your eye sees an image.

Raster images don’t fulfill our requirements for a couple reasons. First, raster images have no knowledge of internal elements. It doesn’t store information about which pixels belong to a rectangle and which belong to a circle. An application may be able to analyze the pixels and make a good guess, but because the “grid of pixels” is only two-dimensional, once elements begin to overlap and become more complex even guessing turns impossible. This would greatly restrict the ability for our application to re-load a user’s work for further editing.

Second, because raster images are a grid of pixels with each pixel carrying a color value, the image cannot scale to an arbitrary size without loss of apparent quality, otherwise known as pixelation. To illustrate, imagine an image one inch wide that has 300 pixels on the first row of the pixel grid. You later decide you would like to print the image at two inches wide instead of one inch wide. The 300 pixels now must be spread across an area twice as wide as the original. While the image is made larger, no additional detail is available for the added area. The human eye begins to notice this extrapolation of data resulting in a loss of apparent quality.

So how do we store the data then? We use a vector format. Rather than storing image data in a pixel grid, vector graphics store data by using points, lines, curves, and shapes. Because the descriptors are all based on mathematics, the image can be enlarged to an infinite size without loss of quality. Likewise, a certain knowledge of the design’s individual elements is retained and can be used when loading a design for further editing. Below is a graphical comparison of vector and raster (bitmap) art:

In 1999, a group of industry leaders collaborated to make a vector specification called Scalable Vector Graphics (SVG). Although other vector formats existed previously, they each carried various restrictions or encumbrances. SVG was designed as a lightweight, open standard that could easily be used amongst a variety of applications on a variety of platforms. Design and printing applications could easily store and exchange vector design information.

While SVG is a great format for storing design data, users still need an environment where they can interact with design elements and have all the functionality of a full application. Using Flex, Rain is able to leverage both the ubiquitous Flash player browser plugin for interactivity and SVG for persistent storage. Rain has developed a library which translates what users see in the browser to a SVG file stored on the server. If users wish to continue editing their design, the SVG can be loaded back into the product designer. When the user is ready to order, the SVG document can then be shipped off to the printer.

While that might seem impressive, the real power of Rain’s SVG library comes from the complementary tools built to empower clients and their users. For starters, users can rotate, scale, crop, pan, color, add text, mask, draw, and drag-and-drop. Clients can guide users by specifying specific areas to drag-and-drop photos, enabling or disabling certain tools for individual elements or types of elements, and providing pre-built design templates.

Because the library is our own, we can tweak it as necessary. We understand that every product designer is unique and carries its own set of business rules and capabilities. We have experience implementing product designers for a wide variety of products from logos to shirts to sports trading cards to keychains. Dream away and we’ll make it happen, cap’n.

Recently I received a comp from a designer that looked more or less like this:

If you analyze it a bit, you’ll notice it calls for padding around the internal contents of a TileList. This padding isn’t meant to surround each item renderer individually, but instead around all the visible renderers collectively. In the TileList component that comes with Flex, setting the built-in padding styles does the former. Doing the latter is a more difficult task.

The comp also shows grid lines, that is, lines separating the rows and columns of the item renderers. The lines not only cross through the item renderer area but through the padding to the edge of the TileList, minus the scrollbars. Unlike a DataGrid, TileList doesn’t provide any styles or properties to support this. Then again, if you know something I don’t, let me hear about it.

So here we go. I’ll save you the headache–you just kick back and enjoy. See the example here and right-click for the full source.

For those who don’t know, Nimbus is a Flex MVC framework (or micro-architecture for the technically-inclined). Sponsored by Rain, we develop it primarily for use on our applications but make it available for public use and encourage the community to contribute.

Nimbus pulls core concepts from Cairngorm but is meant to cut out a lot of the plumbing developers groan about when they hear “Cairngorm.” It’s light, but it’s not fluffy. Baked in are those rare and tasty flavor morsels you thought only existed in those Funfetti cupcakes your grandmother bakes with love on your birthday.

Until the end of 2008, Nimbus had been shaped, re-shaped, patched, and plugged. A complete re-write was merited so that’s what we did. And really, what makes for a better Christmas than sitting down with your stocking stuffed with jelly beans and re-writing an MVC framework. A few months later, the code is settling down along with the sugar and we’re ready for action.

Here are some features of Nimbus:

• Notification system of command completion so portions of the application can know when a command has finished executing.
• Nestable “macro” commands. Think “I want commands A and B to run in parallel, then C, then D and E in parallel, but inside D I want F and G to run sequentially…”
• Undo/Redo functionality.
• Progress feedback system. You as a developer can associate a processing message with each command or macro command to provide feedback to users.
• Interaction blocking system. While commands are executing, easily disable user interaction to protect your service calls.
• Combinable commands. Ensure that similar command instances can be grouped appropriately in the undo/redo history.

Nimbus may not be right for everyone. Call your system administrator if your scalability problem worsens or is not better within 7 to 10 days. This may mean that there is another condition causing your RTE problems. Do not take Nimbus with alcohol. Call your system administrator right away if after taking Nimbus you are unable to walk, drive, eat, or engage in other activities. In rare cases, severe allergic reactions can occur. Most MVC frameworks carry some risk of dependency. Do not use MVC frameworks for extended periods without first talking to your system administrator. You are encouraged to report negative side effects of Nimbus. Visit http://code.google.com/p/nimbus-as3 for more information.