I first started with kind of a retro-ish look.

Then I kind of toyed with the radio tower idea in the Transmission name for a little bit:

It was OK, but I still wasn’t loving it.  So I went in a different direction:

Then finally I settled on a logo I liked.  Kind of coming full circle but with a more modern look.

I’m definitely not a designer and it’s pretty simple, but I kinda like it.  Let me know what you think!

We also have a forum set up for questions.

As always, the code is hosted here.

One pitfall I came across a few months ago dealt with the fact that Java applications always show up on the Mac dock, even while using Transmission. This is problematic because starting up an AIR application which starts up Java shows 2 applications running on the Mac dock. This might be confusing for users, plus it gives them the opportunity to kill the Java application which inhibits your AIR application from taking advantage of Java. To resolve this issue I have provided a fix. On the Windows side, you don’t need to worry. Java will only show itself in the windows toolbar if UI code is present. Otherwise it will be hidden by default.

The process to do this on a Mac is to wrap your application’s jars in a Mac OS X application. To do this, we need to use a Utility called Jar Bundler. This should be found here: /Developer/Applications/Utilities or you can pull it up in Spotlight. When you open the application, you should see a screen like this:

Jar Bundler allows jars to be wrapped as an OSX application

Here are the steps you’ll need to take in order to get an application:

1. Click on Choose next to the Main Class option. Next, navigate to Transmission.jar that came with the transmission project and select it. It should populate the Main Class field with transmission.Transmission automatically.

2. Under arguments type: -transmissionControllerPackage transmission.demo.TransmissionDemoController. For your own project replace the TransmissionDemoController package with your own TransmissionController’s package and class name (make sure your own TransmissionController implements ITransmissionController).

3. Select the Classpath and Files tab and choose all other jars that belong to your project besides the Transmission jar you added in step 1.

4. Choose some properties in the Properties tab.

5. Click Create Application and choose a destination for the new application.

Bam! Your application is completed. Now we need to make sure it hides itself when it is run. Right click on your application and choose “Show package contents”. Navigate to Contents and open the Info.plist file. This file contains the preferences you set in the Jar Bundler. To make the application hide we need to add a couple more. Before the Java item, add the following rows

1. LSUIElement (in the value column enter “1″)

2. NSUIElement (in the value column enter “1″)

Your plist should now look something like this:

The last thing we need to do is configure the application inside of your Flex Transmission configuration. In your Flex project, rather than doing Transmission.init() using the Java executable, the TransmissionController package, and the array of classpaths, simply do the following:

1

Transmission.getInstance().init("path/to/app/DemoApplication.app/Contents/MacOS/JavaApplicationStub");

Now everything should work!

Enjoy!

While architecting this, I decided I wanted to create an environment that would be familiar for people coming from Merapi. There is still a concept of Message objects and MessageHandlers which respond whenever a Message object with its registered type is passed across Transmission. The library is being hosted on Google Code and is licensed under the Apache 2.0 license which gives you the freedom to use it in commercial applications. I included a demo in the repo that should help you get started.

We decided to build Piano Marvel’s rich front-end with Adobe AIR because we have a lot of Flex expertise at Rain and the development time required to create beautiful UIs using this technology is very quick.  However, in order to make this application work, we also had to leverage Java in order to interact with a MIDI Keyboard since AIR is not able to do this natively.  Finally, we used Merapi to manage the communication between AIR and the invisible Java process through a socket.

Here are some of the amazing things we have been able to do with Piano Marvel:

1.  Create a rich interactive music notation engine.

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

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

4.  Create an environment that makes playing the piano addictive and entertaining

Piano Marvel has just hit the Adobe AIR Marketplace as the first application that is not a traditional completely AIR application.  There is a free trial (no credit card required) that lasts for a month and if you download the application from the AIR Marketplace, it costs $12/month (instead of the usual $15).

Please get a MIDI keyboard and USB/MIDI connector and try it out.  Let me know what you think below!

After a quick look through the styles and properties of Flex 3’s DataGrid, I discovered that I wouldn’t be able to do these three requests unless I (once again) subclassed the DataGrid to add these behaviors.

In this component, I added the following styles:


rollOverAlpha
selectionAlpha
alternatingItemAlphas (complements alternatingItemColors)
headerAlphas
headerSeparator (boolean -- draws the column separator on the header)


Note that the alternatingItemAlphas will not appear to work unless DataGrid’s backgroundAlpha style is set to zero.

To see an example with View Source enabled, click here.

YouTubeHTML Component

I discovered YouTube’s Embedded Player URL Parameters API and decided to investigate the possibility of using an HTML component to point to a video on YouTube and change several optional parameters until the video player met my needs.  Turns out that this approach was extremely simple and worked beautifully.  To ease the transition of other developers learning the YouTube’s API, I decided to extend AIR’s HTML component and open up properties which could set the parameters automatically.  Note that because this component is based on the HTML component, it only works in AIR.

Download the code here.

As of today, the NestedDataGrid can display and sort complex Nested XML dataFields such as:  “xml.node.nodeList[3].@attribute”.  I hope that this update helps ease the frustration of having to flatten XML trees, define custom label functions and/or sort functions, or create custom item renderers to get around this issue.

See the demo and get the source here (Right click to View and Download Source).

Finally, after screwing up a build-config.xml file because I didn’t notice a line was commented out when it shouldn’t have been, I went on a hunt for an XML syntax highlighter.  So, I got on Eclipse’s plugin site and started searching.

XMLBuddy for Eclipse

After trying a couple out, I found one that was compatible and had the features I was looking for… drum roll please… XMLBuddy!  This little buddy supports user configurable syntax highlighting for all sorts of XML tags.  It also offers XML code complete that is driven by the DTD or current document contents.  It also has a tree outline view that you can use and it even lets you generate a DTD from an example XML document.

To get it working with FlexBuilder, first go to XMLBuddy.com and select download.  Accept the agreement and choose XMLBuddy (there is also a professional version with even more features that you can pay for if you want — I decided to use the free one).  There are a few different versions of the plugin that you can use based on your version of Eclipse.  I found that 2.0.9 worked great with Flex Builder 3.  To install it, go to your FB install directory (Program Files/Adobe/FlexBuilder for PC or Applications/Adobe/FlexBuilder on Mac).  Then unzip the XMLBuddy files unto your plugins directory.

After you have installed XMLBuddy, restart Flex Builder if it is running.  Then try to open an XML file.  If it is highlighted, you are done.  If it isn’t, go to Window –> Preferences and search for “File Associations”.  Make sure that all *.xml or *.dtd files have XMLBuddy associated with them and that XMLBuddy is the default editor for these file types.  If you want to configure XMLBuddy, you can find it in Window –> Preferences –> XMLBuddy.

The first thing I noticed while trying to make a Mac installer with the bundled Adobe AIR Runtime is that there is relatively little out there that addresses this issue. While there are some resources provided by Adobe after applying for a distribution license, there were still some questions that I had to answer on my own. What will follow is a step-by-step approach that I took to create a Mac installer.

1. Create a Java Installer

The Java installer will serve as the core of our installer. It is responsible for copying class files and jars into the Applications directory and it is also responsible for executing the Adobe AIR Runtime installer which will install both the AIR Runtime on the user’s computer (if they don’t have it already), and installing the AIR-side of the application. Much of this portion I discovered through this post and I won’t go into as much detail as Dem Pilafian covers that material very well.

The tool that I used to initially create a bundled Java app is called “Jar Bundler”. It is located in Developer/Applications/Utilities and is part of XCode. This tool allows you to specify your Main Class, any additional Classes or Jars that are part of the library, an icon, and some configuration options. When you click on the “Create Application” button, you will see that a MyJavaApp.app bundle is created. If you right-click the app bundle and select “Show Contents”, you will see what Jar Bundler created for you. In the Contents folder you will see a PList file (XML-based file which contains the properties for the application), a folder called MacOS which contains the executable, and another folder called Resouces which contains your icon and a subfolder called Java with all the Class and Jar files contained in your Java Application.

At this point you may also have realized what a pain the Jar Bundler is! If you haven’t yet, you will realize it the ump-teenth time you need to create another version of the installer. It doesn’t save an XML configuration file like Launch4j does on the PC, nor does it remember where your previous files selections were so you have to navigate through your Java application looking for class and jar files every single time. Plus, Jar Bundler does not support every application configuration option for your application.  That means you have to go into the PList file and do it manually every time.

To solve this problem, I wrote a script which automatically builds the jar files I need and copies them into MyJavaApp.app/Contents/Resources/Java automatically. It also overwrites the PList file that is generated by Jar Bundler to give me more configuration options. Basically, the only thing that remains from Jar Bundler is the executable.

2. Include the AIR Application inside the bundle

After you get the Java bundle set up, it is time to include the AIR portion of the application. Inside of MyJavaApp.app/Contents/Resources, create a directory called AIR. This directory will contain the Adobe AIR Runtime and MyAirApp.air. During the install process we will run the AIR Runtime and pass it a reference to MyAirApp.air to be installed with the runtime.

3. Create an Install Package

With the application bundle in place, we now need to generate an installer. This can be done by using PackageMaker (Developer/Applications/Utilities) or a third party app called Iceberg. I prefer Iceberg due to its intuitive user interface and step-by-step process, however the choice is up to you although I will use Iceberg throughout this tutorial.

Mac install packages are very handy and much easier to create than Windows EXE executables in my opinion. However there are a few things to keep in mind. If you have any custom welcome text, license information, or README this can be displayed in the installer as well. Iceberg allows you to specify text files for each of these three functions in the Documents section. Also, there are Perl or Bash scripts that can be executed during different stages of the install process. You can find these in the Scripts section of Iceberg in their order of execution.

• preinstall:  This script is run before files are installed.
• preinstall:  This script is run after the preinstall script, but before files are installed.  This script is only run if the application has not been installed previously on the target machine.
• preupgrade:  This script is run after the preinstall script, but before files are installed.  This script is only run if the application has already been installed on the target machine.
• postinstall:  This script is run after files have been installed and before the postflight script.  This script is only run if the application has no been installed previously on the target machine.
• postupgrade:  This script is run after files have been installed and before the postflight script.  This script is only run if the application has already been installed on the target machine.
• postflight:  This script is run after files have been installed.

Also, keep in mind that each script must return zero.  If it doesn’t, the installer will determine that they have failed.  For my application, I created a preflight script that checked to see if there were any previous versions of the app and then I removed them.  I also created a postflight script that installed the .air application inside of the already created MyApp.air inside of the Applications directory.  The script contained a couple of lines that looked something like this:

1
2
3

cd /Applications/myApp.app/Contents/Resources/AIR
 
Adobe_AIR_Installer.app/Contents/MacOS/Adobe\ AIR\ Installer -silent -location /Applications/myApp.app/Contents/Resources/AIR MyAirApp.air

Now that I have explained some of the components of a Package, let’s open up Iceberg and get started.  First, create a new project and go through each of the steps customizing the installer to fit your specifications.  Add any custom text files or scripts and then define where your app will be installed.  I put MyApp.app under the Applications directory.  When you are finished configuring the package, go to the Build menu and select Build and Run.  This will allow you to test your package and scripts to see how well they work.  Also, make sure to save your project when you are finished.  This will keep your configuration settings as a .packproj file that you can use to make future builds.

I tried Adobe’s AutoComplete component first because I figured it would be the best. I mean, come on, it’s Adobe right? Didn’t they write the Flex framework or something? This component is based off of a ComboBox which allows for a slick looking animated dropdown, plus it comes with hooks to tie into Local Storage. After closer inspection, I noticed an annoying flickering whenever a key is pressed. Plus there were a few issues with it that I found here (make sure to read all the comments). Plus, since it is not based on TextInput, there are a few properties that got left out that I had to implement on my own (maxChars for example). In the end, I concluded that the component seemed a little underdeveloped and unstable.

The second place I went to was Yahoo’s AutoCompleteManager. This component is based off of EventDispatcher, allows you to reference 1 or multiple TextInput controls, and allows for Local Storage. Although it doesn’t have the glitz of Adobe’s AutoComplete animated dropdown, it doesn’t have the flicker either. All-in-all, I found this component to be much better and required me to do fewer modifications than Adobe’s component. However, there was still one issue — the defaultButton wasn’t firing on the Keyboard.ENTER event.

For those of you who are having issues with this, I have provided a fix. It resides in the keyDownHandler. Normally, when an enter key is pressed, the TextInput will notify the defaultButton that is should be clicked. However, AutoCompleteManager prevents the propagation of this event because ENTER is reserved for selecting an option from the autocomplete dropdown. Luckily, the fix is easy.

Here is the original code…

1
2
3
4
5
6
7
8
9
10
11

else if (event.keyCode == Keyboard.LEFT || event.keyCode == Keyboard.RIGHT || event.keyCode == Keyboard.ENTER)
{
    if (_currentDropdown && _currentCollection)
    {
        ... 4 lines of code I am too lazy to type ...
    }
 
    _inKeyDown = false;
    display(false, textInput);
    event.stopPropagation();
}

And here is the fix…

1
2
3
4
5
6
7
8
9
10
11
12

else if (event.keyCode == Keyboard.LEFT || event.keyCode == Keyboard.RIGHT || event.keyCode == Keyboard.ENTER)
{
    if (_currentDropdown && _currentCollection)
    {
        ... 4 lines of code I am too lazy to type ...
 
        event.stopPropagation();
    }
 
    _inKeyDown = false;
    display(false, textInput);
}

In case you don’t see it, I moved event.stopPropagation(); up into the if statement. This makes it so that the event is blocked only when the dropdown is showing. When the dropdown is not showing, ENTER is allowed to propagate to allow TextInput to receive the event and notify the defaultButton.