/customers/iconara.net/iconara.net/httpd.www/blog/wp-content/plugins/wp-super-cache/wp-cache-phase1.php Iconara » TextMate Flex tips, part 2

TextMate Flex tips, part 2

It’s been a while since I wrote about TextMate and Flex, but still my last post is one of the first five when I google for “textmate flex“, “textmate flex bundle” or “textmate flex tips“. This surprises me as I thought that by now there should have been more written about Flex and TextMate by now, after all it’s been almost ten months. It turns out that there actually has been things going on, but in the quiet.

I don’t consider syntax highlighting a necessity (although I find it useful) and I mostly get by with TextMate’s excellent completion function and some simple automations I’ve written myself (see last post on the subject). I’ve actually used the ActionScript 2.0 language syntax for my ActionScript 3.0 programming, it hasn’t bothered me much.

However, I still would like support both for MXML and ActionScript 3.0, it’s not essential to my daily work, but I imagine it would make it a bit simpler. A few times I’ve started working on language grammars by myself, but never quite gotten around to creating something useful.

Today I started looking if someone else had gone and done the job for me, but at first I couldn’t find much more than my own post, what I linked to in that post and others that linked to me. I looked through the TextMate mailing list archives and found some discussions from half a year ago about a Flex bundle, but no links and the general feeling was that there wasn’t anything finished, just a bunch of people working on their own bundle.

Eventually I stumbled upon a reference to the TextMate bundle repository’s “review” section (I had no idea that it existed). Therein you can find both an ActionScript 3.0 and a Flex bundle.

I’m amazed that they weren’t the first thing I found, they seem to be really well made and complete. There are lots of nice automations and commands (“open component” is already a favourite).

I not exactly sure who created the bundles, but judging from the repository logs I would say it’s Simon Gregory. I’m also surprised, but flattered, to be listed as a contributor.

Installation

The bundles are located here: http://macromates.com/svn/Bundles/trunk/Review/Bundles/. I guess they will move to the standard bundle repository at some point, but there they are now. The best way to install them is using Subversion(you have Subversion installed, don’t you?):

% cd "Library/Application Support/TextMate/Bundles"
% svn checkout "http://macromates.com/svn/Bundles/trunk/Review/Bundles/ActionScript 3.tmbundle"
% svn checkout "http://macromates.com/svn/Bundles/trunk/Review/Bundles/Flex.tmbundle"
Install the ActionScript 3.0 and Flex bundles. The “%” is the prompt.

You can also follow the instructions in the TextMate Manual — 5.7 Getting More Bundles. Just replace the paths to the standard bundle repository with the path to the review repository.

Quickstart

I’ve been using the bundles for less than an hour so I’m not exactly qualified to give a tutorial, but I’ll try to describe some of my favourite features so far.

The first thing to do is to open the help for the ActionScript 3 bundle (press the Help key on the keyboard and then select the first item in the list), there are some configuration tips and an overview of the commands available. There is also some help available for the Flex bundle. You have to have an open file of the right type to be able to use the help command (if I remember correctly this is a bug/feature of TextMate).

Open component (⇧⌘D)

When I tried this one the first time my reaction was more or less, “ah, this is what I have wanted to do all this time”. Basically it tries to find the source code for a component with the same name as the current word. It works for your own code, but not for libraries nor the Flex framework.

You have to put the insertion point in the component name (just before or just after works), it can’t be in the namespace prefix or anywhere else in the tag. It doesn’t work if you select the name (it works if you select only a portion of the name though, guess that gives the right scope).

The same shortcut also gives “Open Super Class” in ActionScript scope and “Open Code Behind” in MXML scope and “Open Import” if the scope is an import statement, all very useful commands.

Wrap selection in open/close mx: tags (⌃⌥W)

This is the MXML equivalent of the HTML command with a similar name. Very useful for when you want to group some components in a container, just select the components run this command and type the name of a container (unfortunately tab completions won’t work).

It’s great that this command suggests <mx:>, but leaves the mx selected so that you type over it. I usually don’t prefix the Flex framework components so that saves me some key strokes.

XML validation on save

I think this might be why I’m listed as a contributor as this was one of the tips in my last post on Flex. This command overrides the save command of MXML files and runs the contents through xmllint before saving. If the XML syntax is OK the file is saved, otherwise a tooltip with the error is shown.

Building

There are a multitude of commands for buildning and running Flash and Flex applications, I haven’t tried them yet and I’m not sure I’m going to use them (I’m quite happy switching to the terminal to run ant, but I might change my ways, who knows). Nevertheless it looks like there is something for everyone, you can build with ant, mxmlc or fcsh or custom (runs a file called “compile.sh” in the project directory).

Don’t forget to read the help to make sure you have the right configuration, else the commands might not find the compilers.

Completions

There is tab completion for almost anything you can think of, and there are class and method name completions for most Flash and Flex classes. The method completions contain parameter names and types, a bit like code completion in XCode (although it’s not context sensitive). The class name and method completions are available if you press ⌥⎋.

Example: type new XMLS and hit ⌥⎋, select “Autocomplete Function” by pressing 1 (or click on it) and you should automatically get new XMLSocket(host:String, port:int). This might save you a few trips to the API documentation.

It works for imports too, but it’s a shame that you have to manually select if you want to complete a function or an import. Perhaps it’s possible to tweak the scope selectors or the language grammars to only allow the import completion outside, and function completion only inside a class.

Conclusion

I usually rant about how bad things are (perhaps because it’s so much easier) so it feels good to be able to write about something I really, really like. These two bundles are great, and I would love to see them folded into the standard distribution of TextMate.

TextMate is lighyears ahead of FlexBuilder when it comes to code editing and with these bundles it is also starting to feel like a serious contender when it comes to more IDE-ish features like compiler integration and project handling.

3 Responses to “TextMate Flex tips, part 2”

  1. Peder Jakobsen Says:

    Good stuff….

    You’ll want to run %export LC_CTYPE=en_US.UTF-8 in your bundles directory before getting the bundles from SVN, otherwise it won’t work. I have no idea what it does, but it worked for me.

    Also, don’t use svn checkout unless you have write permissions the the repos and you plan to check in code. Instead, use svn export, that way you don’t get all the .svn repos files that will mess up every one of your directories.

  2. Theo Says:

    There is a reason for using checkout intsead of export: updating is very easy, just run “svn update ” and the bundle is updated with the latest version.

  3. www.video-flash.de Says:

    Nachdem vor kurzem mein Flex-Bundle für Textmate plötzlich nicht mehr funktionierte, machte ich mich auf die Suche nach einem Update oder einer Alternative. Dabei bin ich auf ein hervorragende Doppel aus ActionScript 3- und Flex- Bundle gestoßen.

    Edit: I took the liberty of translating the above comment /T#

    After my recent Flex – Bundle for text Mate Suddenly no longer worked, I made myself to The search for an update or an alternative. This, I am on an outstanding double from ActionScript 3 and flex Bundle gestoßen.

    (Evidently Google Translate isn’t yet perfect =) /T#)

Leave a Reply