Application - Source

Shortcuts:

1. Go to Definition:  Ctrl+Click on function name or variable to go to it's definition.
2. Auto Complete:  Ctrl+Space will bring up that handy list of auto-completion options.
3. Ctrl+/:  Comments or uncomments the selected line(s).
4. Ctrl+Shift+C:  Adds or removes block comment to selection.
5. Quick Outline:  Press Ctrl+O when editing an .as or .mxml file to get a list of class variables and functions.  You can type a few characters to filter the list, and when you select one, the editor will jump to the definition.  This is way faster than using the outline window or Ctrl+F to search for something.
6. Ctrl+Shift+T:  Browse all class types, select one to view the class definition.
7. Alt+Down & Alt+Up:  Moves the selected line(s) up or down.  This is great for re-ordering variable declarations, mxml attributes, etc.
8. Ctrl+Alt+Down & Ctrl+Alt+Up:  Copies the selected line(s) and pastes them above or below.  Combines 3 steps (select, copy, paste) into one!
9. Alt+Left & Alt+Right:  Work like your browser's back and forward buttons for your navigation history.  This is especially useful when you are control-clicking or "quick-outlining" to function or variable definitions.

Other Savory Tips:

1. To create a series of nested folders in the project navigator, open the new->folder dialog and enter a path (e.g. com/rphelan/controls).  Eclipse will automatically create all folders in the path if they don't already exist.  This is very useful when first creating a project.
2. You can double-click to maximize/restore any panel in Eclipse.  I frequently expand my editor window to show the maximum amount of code possible.  (Note:  this does not legitimize writing super long lines of code.  I recommend wrapping at around 80 characters)

If several of these are new to you, try out just one or two at a time and see how you like them. Once they are second nature, try adding a few more. My theory is that the less I have to rely on my mouse when developing the better.

Want to learn more? Don't forget that you can bring up a list of relevant shortcut key options at any time by pressing Ctrl+Shift+L.

Note: Mac users - just swap out the command key for control in each of these combos.

I was very impressed with this experience in the ease of putting together a taskbar based application. There aren't as many resources out there yet for AIR as there are for Flex, but I found most of the syntax fairly concise and intuitive. The major downside is AIR's memory footprint. This obscenely simple application takes up 20-25 Mb of RAM!  I've been reading similar complaints about other AIR applications too. Hopefully this will be addressed in a future release...

Note: I built this app for my windows box and haven't tested it on a mac... because OSX doesn't really have a taskbar, it may have some issues.

I'm really excited because everything we do here is cutting edge.  Advertising agencies want (and are willing to pay for) the most current and exciting technology.  Also - we're growing fast.  If you live in the area and are a talented Flex or .NET developer, check out the work@phenomblue site.  More details to come.

I have a fairly long history with building charting components in Flash and Flex. My first job involved developing a suite of "drag and drop" charts and other modeling tools in Flash for a financial modeling application. Now I am working at Gallup, Inc. (the guys who do "the Gallup Poll"...) and have authored a Flex application which renders charts for gallup.com articles. Along the way I've studied works by Edward Tufte (he's been called "the DaVinci of data visualization") as well as Stephen Few (who offers some great practical application to Tufte's theory) and others. Given all the research that has been done in human perception and data visualization, I feel that the default styles for the Flex charting components need a bit of tweaking to really optimize their usability. (Also, from what I've seen of the ILOG Elixir library, those charts need A LOT of tweaking... but let's try to stay on topic ;). This article will kick off a series where I will share some of my tricks for making charting components that are both aesthetically pleasing and easy to comprehend.

Getting Started

I'm going to focus on the 3 basic chart types: LineChart, ColumnChart, and BarChart, and you can apply many of these tricks to other more complex types. I created a simple application which sticks one of each chart type in a TabNavigator, gives them some data providers, and sets up the series. Its pretty basic, no special styles are applied. I realize that this would be a very poor structure for a real application - I'm organizing it in the way that best illustrates the techniques below.

From this point on you may find it useful to follow along with the source in the final application.

Application - Source

Develop a Color Scheme

I could write an entire post on the use of color (and I might in the future), but I'll cover this briefly. Usually, you want all of your series to have equal visual weight, so the two obvious options are to vary the hue, or to vary the brightness and saturation. One thing to keep in mind when varying hue though, is that about 1 in 76 people (thats 3.5 million in the US alone) have some sort of color deficit, the most common being red-green color blindness. Selecting red and green colors that don't vary significantly in brightness can make your chart very difficult to interpret for a fairly significant part of the population. It also might make your colors indistinguishable when printed in grayscale. Let's play it safe by using the second option. A great resource that I have used on many occasions is Color Brewer, which was developed by Cynthia Brewer to create good color schemes for maps. The same schemes work great for graphs too! I set it to "sequential" and selected a blue scheme which should work very nicely.

To apply your selected colors, set the "fill" property on each series. You can bind to a SolidColor object created in actionscript, or inline a <fill> tag in mxml.

Changing The Default Styles

First thing's first: the drop shadows have to go. I'm all for using filters and effects in Flex applications, but they really tend to get in the way of the data when used in charts. This is an easy fix. Just set seriesFilters="[]" for each chart.

Similarly, since outlining bars will also add extra clutter, I will set stroke="{null}" for each series (BarSeries and ColumnSeries).

Now, because we want to override a lot of default settings on the Axis, AxisRenderers and GridLines, we'll have to explicitly lay them out in mxml for each chart type. For the BarChart it will look something like this:

AxisRenderers

Rather than the fat blue axis that is available by default, I prefer to use a thinner light gray stroke instead. The only purpose of the axis line is to provide a little visual separation between the categories (or dates) and the data - so it doesn't need a lot of visual weight. The axis that runs along the LinearAxis (eg the horizontal one on a BarChart, or the vertical one on a ColumnChart) won't be necessary at all. It will be implied by the grid lines which will all come to an end right at the axis. To turn it off, set showLine="false".

The next part is a little devious. For simple graphs, we don't need tick marks -- we'll be using Gridlines, so they would be redundant, but you may have noticed by now that I set tickPlacement="outside" and tickLength="n" for all of the axes. What I'm doing is using an invisible (alpha = 0) stroke for the tick marks, and setting their width to create additional space between the labels and the graph. This isn't crucial, but I think the few pixels of extra white space does a lot to enhance the appearance and readability of the graph.

GridLines

Even the grid lines are often non-essential to the readability of the graph. When the data permits it, I prefer to use Ely Greenfield's bar labels and leave the gridlines off all together. This results in a super clean and modern look. For the sake of example though, I included them here.

You always want the grid lines to run perpendicular to the LinearAxis. (The only time I can think of that you would want them running both ways is in a chart with 2 linear axes, like a scatter plot). You control this by setting direction="vertical" or direction="horizontal" on the GridLines element. Likewise, we only want to display the origin (i.e. 0) for the same direction. So on a ColumnChart, you would set direction="horizontal", verticalShowOrigin="false" and horizontalShowOrigin="true". On a BarChart, you would set direction="vertical", verticalShowOrigin="true" and horizontalShowOrigin="false".

I chose to make the stroke for the origin the same as the stroke for the Axis: light gray with 3 pixel weight. The stroke for the grid lines themselves should be very faint - no more than 1 pixel wide and only slightly lighter or darker than the background color. We don't want the grid lines to compete for the viewer's attention along with the actual data.

The final trick I employed here was offsetting the gridlines -.5 pixels. This solves a glitch where the top line doesn't always display. Try removing the line x="-.5" in the SampleBarChart class and you will see what I mean. Obviously this is a hack, but it has worked pretty well for me thus far.

LineCharts

There aren't many differences here except we are setting the "lineStroke" style instead of "fill" on the series. My rule of thumb is that the thickness of the line should approximately equal width/number of points or 3, whichever is less. This is a very general heuristic, but will help ensure that in very dense data sets, the thickness of the line doesn't obscure the data points. Because this isn't easy to generalize for all different types of dataProviders and because my data set isn't dynamic, I just set the weight to 3.

I also added a labelFunction to the DateTimeAxis so that the dates would show up in a more readable format. "Feb 2008" is much more readable than "2/08".

The Final Product

That's it! You could further improve on this example by adding a legend, selecting a better font, and maybe embedding the text - but I'll leave that for you to experiment with. Of course these settings won't work for every situation, but I think it makes for a good starting point for whatever types of data you might come across. As you probably have noticed, the emphasis is all on simplicity. By removing the extra "fluff", you create a chart where the data is the main focus and enable the user to have the best possible experience.

If you have additional suggestions, or questions regarding chart styles feel free to comment.

Application - Source

AnyEdit Tools

Adds a bunch of useful tools into the right-click context menu, in a submenu called "Convert". My personal favorites are the "Convert -> Leading tabs to spaces" and "Convert -> Leading spaces to tabs". I know that the Flex Coding Conventions tell you not to use tabs, but I prefer tabs to spaces in my own code because it keeps everything nicely formatted and easy to maintain. If I need to say, paste some code into a blog entry, I use the AnyEdit tools to convert those tabs back to spaces so that it displays correctly. I also frequently copy and paste bits of code found on websites, the user documentation, etc. into my source, and want to convert those tabs back to spaces. Huge time saver!

• Convert -> Camel <-> Underscores
• Convert -> Leading tabs to spaces
• Convert -> Leading spaces to tabs
• Convert -> Chars to html entities
• Convert -> Html entities to chars
• Convert -> To / From Unicode notation
• Convert -> To / From Base64

RegEx Editor

This is a "View" that you can add to your perspective via Window -> Show View -> Other -> Regex Util. You can enter a regular expression and a string to test against. It supports syntax highlighting and has very useful tooltips for characters that are part of regular expression syntax.

Mylyn

I'm experimenting with using this at work to connect to our JIRA repository. (You could use it to connect to Adobe's bug tracking system too). Also works for Bugzilla, Trac, and possibly others. Its cool that it pops up a message right in Eclipse whenever a new task is assigned to you, and also that you can tightly integrate it into your regular workflow. The downside is that it seems to be lacking some of the basic features that the web interface has which (because of our system's configuration) prevents me from being able to create new tasks. Maybe I just need to wait another version or two?

Heap Status

I wrote a separate blog post about this a while back, its cool to be able to get a glimpse of how the VM is managing your memory.

Keep Resident

Uses some Windows hooks to try and keep Eclipse in memory as much as possible. Use this if you are experiencing frequent "hang-ups" with your IDE.

The performance of Eclipse (and other large Java applications) has long suffered due to the Windows virtual memory manager. Windows has a tendency to preemptively swap Java processes out of physical memory, even when there is still plenty of physical memory available. This interacts very poorly with Java processes, which do not have good locality and touch a lot of memory. The problem is exacerbated when Java performs garbage collection, which causes the Java process to touch lots of memory that has been paged out to disk. Ever had Eclipse randomly hang for 15-20 seconds? This is most likely the culprit.

I added myself as a watcher to this feature request ages ago, and yesterday it got mysteriously re-opened and marked as "Internal Review". Here's hoping they include it in Flex 4. Go there and vote!

Here's what I had to do to get Cairngen running on OSX 10.4 / Eclipse 3.3.2. I'm assuming it would work for 10.5 too, but I haven't tested it.

1. Download the following jars:
   • Mozilla Rhino (js.jar)
   • Jakarta BSF (bsf.jar)
   • Apache Commons Logging (commons-logging-1.1.1.jar)
2. I placed the jars in the Ant lib folder in my Eclipse installation: eclipse/plugins/org.apache.ant_1.7.0.../lib
3. Go to Eclipse->Preferences->Ant->Runtime->Classpath, select "Ant Home Entries" and add the three jars using the "Add External JARs..." button.

That's it. Hope you don't have to waste as much time figuring this out as I did!

I have to credit Brian Holmes for providing a really easy way to do non-visual components without extending UIComponent. This makes the RPChangeWatcher (thusly named to avoid namespace conflicts) really lightweight. Check out the sample application:

application - source

This is a very simple example, but imagine you're using some form of MVC and the currentDP being a variable in your model. This particular view doesn't care how or why currentDP gets updated, it just wants to display an animation to transition between datasets. That isn't possible using regular data binding, but it's pretty clean and simple with an mxml ChangeWatcher.

I haven't experimented with this a lot yet, but given that you can use data binding on the host and chain properties, I can see some potential for some pretty advanced use cases.

Any thoughts?