A Better Bus Tracker
During one of our brainstorming sessions for our upcoming You Are Here opening, I remembered once stumbling onto a GPS data feed for the Seattle metro transit system. The metro website has a bus tracker that runs in a java applet from 1999 (that’s like 100 in internet years!), so I grabbed a modest maps flex component and whipped up a less-crappy proof of concept. If all goes well I’ll be featuring this in an interactive window here at the studio during the opening.
Flex Builder 3 & Aptana as Uber-Web-Development IDE
NERD ALERT: This post is for folks that write ActionScript 3 and develop websites. If this isn’t you, click here instead.
Every web developer has their favorite IDE, and after a few years of skipping around I’ve finally settled on Adobe’s Flex Builder as a host for the Aptana plugin. This is an unusual setup—Flex Builder is Adobe’s MXML and ActionScript 3 IDE based on the open source Eclipse, while Aptana has its own standalone version that has a fairly large user base. Both Flex and Aptana can be added to a vanilla Eclipse install as plugins with a bit of tinkering, but Eclipse is primarily targeted towards Java development—which I don’t do—and I’ve found that Eclipse and Aptana are a bit crash prone where Flex Builder rarely gives me any trouble (as usual, your milage may vary). The Flex Builder/Aptana configuration gives me a complete web development environment including auto-complete and error checking for ActionScript 3, HTML, CSS, Javascript, PHP, and Ruby on Rails if I ever get around to learning it. Flex Builder and Aptana come with extremely exhaustive offline documentation for ActionScript, CSS, HTML (hey, sometimes it’s fun to look up some of those obscure tags; check out this post on using definition lists as multi-level menus), and JavaScript—including the Prototype, Scriptaculous, Spry, MochiKit, MooTools, Aflax, Ext, jQuery, Dojo, and YahooUI libraries (wow!). If you have to jump back and forth between different libraries to work with existing codebases, this is amazingly efficient, and having a dual monitor setup with your code on one page and documentation on the other is so convenient I can’t imagine how I got along without it. Some of you may be ready to point out that Eclipse and Aptana are free, while Flex Builder will set you back about $250, but I write enough ActionScript 3 and MXML to justify the cost (also, the Flash IDE totally sucks—Flex Builder not only auto-completes ActionScript 3, but also learns your custom class methods and variables on the fly, and the debugger is invaluable). Do some experimenting yourself and see what sticks; some people swear by FlashDevelop (free, windows only, and since the home page just dumps you into a forum installing and configuring isn’t exactly user friendly), and I’m sure the TextMate gurus could hack together a collection of plugins that could probably do all the same stuff, sans the integrated documentation.
Peter, our sysadmin/IT/server-side dude, recently asked me to help him duplicate my setup, so I thought I would go ahead and do a walkthrough for the blog. We’re all on Macs here, but I’m installing on XP since I don’t want to bork my current environment.
First download and install the Flex Builder 3 trial at http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex3email (425 MB and the installer takes for-freaking-ever, so go get yourself a cup of coffee). Once you have it up and running open up the Help menu and select Software Updates > Find and Install.
Select the “Search for new features to install” radio button and click Next. Click “New Remote Site” and paste in this url: http://update.aptana.com/install/3.2/ and click Finish.
Go ahead and select all the packages, click through the license agreement and click Finish. Go get another cup of coffee. Once the packages are finished downloading click through all the install menus; they are fairly self explanatory. When you restart Flex Builder it may tell you to install the Subversion plugin. I don’t know if this is necessary, but we version control all our projects here so I needed to install it anyway. Now you’ll want to double check to make sure your editors are correctly associated with their file extensions. Select Window > Preferences > General > Editors > File Associations (the Eclipse preference menu is a freaking jungle!).
You will probably have to manually set Aptana as the default editor for HTML, HTM and CSS, and JS doesn’t seem to be in there by default so you’ll have to add it yourself. Finding the documentation is a bit confusing—if you select Help > Help Contents it will open an embedded browser and access Adobe’s online Flex documentation. To get the good stuff you’ll have to select Help > Dynamic Help, then click the “All Topics” link at the bottom of the help pane.
ActionScript 3 reference is under Adobe Flex 3 Help > Adobe Flex 3 Language Reference, and the HTML, CSS, and JS docs are under Aptana Studio Help > Reference. Also be sure to check out the Visual jQuery documentation under Aptana > View > Visual jQuery. You might also be interested in Aptana’s other plugins—RadRails, Aptana PHP, PyDev, and iPhone and AIR support. Now go out there and develop some web!