Flex

TextMate Jump to Function

My personal battle between TextMate and Eclipse continues. In this case, I wanted to to see if it was possible to recreate the “jump to definition” functionality of Eclipse within TM…you know, when you control click a function name in eclipse will take you to that definition. Well, I found this post which pretty much re-creates this functionality, except using a key commmand instead of control-click, which is fine by me. I just need to add ‘as’ and ‘mxml’ to the list of file names to search through and it worked great. Currently it doesn’t work for getters/setters, I’ll see if I can hook that up as well.

Next up I’d like to see about jumping back and forth between edit locations in files (the option-apple-arrow key combos in eclipse on mac).

Marketing binge and purge

Sometimes it just makes me laugh at seeing marketing mayhem. I was checking out the Flash Catalyst labs page and stumbled across this doozy:

Faster time to market through agile design and development workflows that support iterative development

  • Agile prototyping and iterative design: Try a number of different designs quickly. Work with developers in parallel without losing fidelity.

Nice. Throw in the confusing re-branding of the ‘Flash Platform’ to…the ‘Flash Platform’, the confusion over Flex and Flex Builder and how they relate to Flash, how AIR relates to Flash, 6 different versions of CS 4 and 4 different products under the FMS banner, and you’ve got a strong need for less buzzwords and more cohesiveness.

Don’t get me wrong…I appreciate the effort, we have to get the Flash Platform out there, but it’s starting to smell like Microsoft up in here.

Eclipse Text Editor Improvements?

Does anybody out there have any suggestions as far as making improvements or tweaks to the text editors of eclipse? Cool plugins perhaps? I really miss a lot of the fluidity in TextMate when working in Flex Builder (things like tab triggers for snippets), but it’s still a little too much to develop Flex apps in TM. I was excited to find a plugin called Afae, which sounded like exactly what I was looking for, but it’s still a little weird and there’s no documentation as far as I can tell.

Searching an ArrayCollection using IViewCursor.find*

I ran into an issue today with this so I thought I'd post about it. Using a cursor with an ArrayCollection makes it pretty easy to search that collection for particular objects. Using the IViewCursor.find* methods (findAny, findFirst or findLast), you can specify a generic object which contain name/value pairs to try to match on the objects within the collection. In order to use the IViewCursor .find* methods, the collection must first be sorted.

So for example, if you has an AC of Book objects, and those Book objects contained properties for category_id and author_id, you could search the collection for a particular object like this:

Actionscript:
  1. var cursor:IViewCursor = booksCollection.createCursor();
  2.  
  3. var searchObj:Object = {category_id:1, author_id:3};
  4.  
  5. cursor.findAny(searchObj);

The gotcha I ran into today is that when you specify a search object, all the property fields that you are searching for must have been included in the sort. So if you sorted the booksCollection above just using a Sort for category_id, and tried the same search object, the author_id field would be ignored.

Ending a Flex Builder Debug session would cause Safari to quit

I have a feeling this is something specific to my installation, but adding it to google just in case. Whenever I ran a debug session for an actionscript project in Flex builder, Safari would quit when the session ended, either by terminating it in FB or by closing the browser window. To solve it, I went into the preferences under General > Web Browser and selected the radio button for "Use External Web Browser" and chose the checkbox for Safari, and that fixed it immediately.

Flex: Don’t forget to ‘Export Release Build’

Generally while working on a project in Flex Builder, when you run your app it generates a debuggable swf and outputs it to the bin-debug folder. Note that this is not the 'final' or 'live' version that you deploy as your app...it's bloated with debugging code and such. For that you need to select Project > Export Release Build..., and (by default) it will create a bin-release directory which contains the final output files to deploy the app.

Dynamically loading fonts at runtime

Had a crazy time with this one...mostly, I think, due to FlashPlayer's security mechanisms, which was making it a little difficult to test locally.

Anyway, I created the font swfs using flex, since that would allow me to set select a range of fonts to embed, as opposed to using a font library asset in a CS 3 swf, which doesn't.

Creating the font swf in Flex is mega-easy. What i did was set up a project in FlexBuilder named 'Fonts', then created another runnable Application class that matches the name of the font. By the way, Scott Morgan's article on YDN was where I got most of this from. I just changed a couple of small things from his article.

Here's the entire AS class that I used to export the font. This class declares the fonts as embedded assets and gives the font assets a class name. In the constructor for the class, the font is registered with the flash.text.Font class using Font.registerFont(fontClass). That's it.

ArialNarrow.as

Actionscript:
  1. package
  2. {
  3.     import flash.display.Sprite;
  4.     import flash.text.Font;
  5.     import flash.system.Security;
  6.    
  7.     public class ArialNarrow extends Sprite
  8.     {
  9.        
  10.         /**
  11.          *  Embed the fonts in all of their different variations that we want to have accessible.
  12.          *  Remeber that bold is a 'fontWeight' and italic is a 'fontStyle'.
  13.          *  The unicode range is the basic Latin 1 character set.
  14.         */   
  15.         [Embed(source='assets/Arial Narrow.ttf', fontFamily='Arial Narrow', fontName='Arial Narrow', fontWeight="normal", mimeType="application/x-font-truetype", unicodeRange='U+0020-U+002F,U+0030-U+0039,U+003A-U+0040,U+0041-U+005A,U+005B-U+0060,U+0061-U+007A,U+007B-U+007E')] 
  16.       public static var ArialNarrow:Class
  17.      
  18.       [Embed(source='assets/Arial Narrow Bold.ttf', fontFamily='Arial Narrow', fontName='Arial Narrow',  fontWeight="bold", unicodeRange='U+0020-U+002F,U+0030-U+0039,U+003A-U+0040,U+0041-U+005A,U+005B-U+0060,U+0061-U+007A,U+007B-U+007E')] 
  19.       public static var ArialNarrowBold:Class;
  20.      
  21.       [Embed(source='assets/Arial Narrow Italic.ttf', fontFamily='Arial Narrow', fontName='Arial Narrow',  fontStyle='italic', unicodeRange='U+0020-U+002F,U+0030-U+0039,U+003A-U+0040,U+0041-U+005A,U+005B-U+0060,U+0061-U+007A,U+007B-U+007E')] 
  22.       public static var ArialNarrowItalic:Class;
  23.      
  24.       [Embed(source='assets/Arial Narrow Bold Italic.ttf', fontFamily='Arial Narrow', fontName='Arial Narrow', fontWeight="bold",  fontStyle='italic', unicodeRange='U+0020-U+002F,U+0030-U+0039,U+003A-U+0040,U+0041-U+005A,U+005B-U+0060,U+0061-U+007A,U+007B-U+007E')] 
  25.       public static var ArialNarrowBoldItalic:Class;
  26.            
  27.         public function ArialNarrow()
  28.         {
  29.             super();
  30.             Security.allowDomain("*");
  31.             registerFonts();
  32.         }
  33.        
  34.         /**
  35.          *  Flash keeps a table of fonts available for embedding.
  36.          *  In order to let Flash know that we have loaded a new font
  37.          *  available for embedding, we need to register that font's class reference
  38.          *  with the Font class.
  39.          *
  40.          */  
  41.         public function registerFonts():void{
  42.             Font.registerFont(ArialNarrow)
  43.             Font.registerFont(ArialNarrowBold)
  44.             Font.registerFont(ArialNarrowItalic)
  45.             Font.registerFont(ArialNarrowBoldItalic)
  46.         }
  47.        
  48.     }
  49. }

Couple of notes about the embed metadata tags. First, i had to set the fontFamily attribute to the name of the font as I was going to use it in the app. I was using HTML text, so <font face="Arial Narrow" ... ></font> worked fine. Also, as noted in the comments in the class, when embedding multiple variations of the same font, keep in mind there is a distinction between 'fontWeight' and 'fontStyle'. Don't try to declare 'bold' as a fontStyle or you will get errors like 'exception during transcoding: Font for alias with bold weight was not found at:'.

Another hugely important thing to note is that in the swf in which you are loading the fonts into, there can be no references to the font already. If you have text fields on stage or anything that use that font, it won't work. I had to go back and set all my text fields to use _sans. Once I removed all references to the font, the loaded font showed up. I use Charles debug, and it was through that which I actually found out I had the font reference in the main swf. If you click on the swf in the structure pane, then click on the response tab up top, it gives you a breakdown on the fonts that are in your swf (there's a 'swf' tab on the bottom once you are looking at the response window, the info about the swf is in there).

Mate Flex Framework

I just heard about the new Flex framework Mate (pronounced ma-tay) from asfusion. After spending some time going through their site I gotta say I am VERY impressed, both by the framework itself, and the documentation they have put together (considering how many times I've been let down by poor documentation in the past, Mate's is great by comparison) .

The framework is tag-based, easy to follow, and looks like it should be pretty easy for people to pick up. It uses EventMap files which contain EventHandler child tags which describe what to do in response to a certain event....call service, set a property on an object, etc. Some cool things I noticed right off the bat:

  • the way their system works, you can use model objects in the Cairgorm style (one ModelLocator singleton) or in the PureMVC style (proxy/"manager" objects managing their data) and it works the same either way.
  • Objects can be created and cached for future reference in response to an event
  • The framework uses "injector" tags to set/bind properties of one an object to another.

There's definitely a lot more cool stuff going on in Mate. Go check it out at http://mate.asfusion.com/

Flex Builder vs. TextMate

I was doing a bunch of Flex work for the past few months, and get really comfortable with Flex Builder. There are so many awesome features to aid development it simply kicks ass.

However, my current project is Flash CS3-based, so I went back to TextMate, which I also love. There are many great features in TextMate which eclipse does not do that really make me miss working in it.

My main points of comparison:
TextMate:

  • Perceptual Bulk - TextMate feels so lean, where FlexBuilder just feels so heavy. Probably due to eclipse not being a native mac app, but still, I just feel 'cleaner' working in TextMate.
  • Tab Triggers - I can't count how much typing I've saved using tab triggers in TextMate. Type in a few key strokes and hit tab, and some templated code gets placed...with tabstops mixed in so you can simply tab to the next appropriate place to type. I only pray that someone tells me you can do that in eclipse.
  • Column Selection - Another tool of TextMate that i find incredibly timesaving. being able to select a rectangular area of text, and have whatever you type repeated on each of the selected lines, is a blessing. Another thing I wish eclipse would support.

Flex Builder (eclipse):

  • Integrated debugger - That pretty much puts the smack down right there.
  • Code Sense/Code Completion - Another swift backhand. For being such an awesome text editor, why can't TextMate handle this better? (yes I know about using the escape key for auto-complete, but that's pretty weak compared to what you get in eclipse).
  • Find in Language Reference - I use this constantly, and as far I know it doesn't exist in TextMate (for actionscript anyway)

There's probably a few more but those are what jump out at me. If anyone knows how to get some of the features listed above into the other app, please do tell :)

Sending Negative Integers through AMFPHP

There is a weird bug in AMFPHP regarding sending negative integers. If you try and send a number such as -87, it shows up as 4294967209 in php. I did some digging and found on the amfphp forums that it has to do with amfphp's readAmf3Int() method in AMFDeserialzer.php. Here is the updated function that was posted on the forum:

PHP:
  1. function readAmf3Int()
  2.     {
  3.         $res = 0;
  4.         $int = $this->readByte();
  5.        
  6.         if($int <128) {
  7.             return $int;
  8.         } else {
  9.             $int = ($int & 0x7f) <<7;
  10.            
  11.             $tmp = $this->readByte();
  12.            
  13.             if($tmp <128) {
  14.                 $int |= $tmp;
  15.             }else{
  16.                 $int = ($int | ($tmp & 0x7f)) <<7;
  17.                 $tmp = $this->readByte();
  18.                 if($tmp <128){
  19.                     $int |= $tmp;
  20.                 }else{
  21.                     $int = ($int | ($tmp & 0x7f)) <<8;
  22.                     $tmp = $this->readByte();
  23.                     $int |= $tmp;
  24.                 }
  25.             }
  26.         }
  27.  
  28.         $mask = 1<<28;
  29.         $res = -($int & $mask) | $int;
  30.  
  31.         return $res;
  32.     }