Archive for July, 2009

Amazon EC2 Error: ‘Has the image been rebundled but not re-registered?’

Jul 29th

Posted by rich in flash

No comments

Went to launch an ec2 instance tonight and get a wierd error:

Registered machine image manifest for ami-XXXXXXXX and manifest in S3 differ. Has the image been rebundled but not re-registered?

Errr…probably :) Anyway, the solution is pretty easy: de-register the old instance and re-register the manifest.xml file in the bucket where your storing your image. Then use the new ami id to launch the instance.

Gaia – Now that’s impressive

Jul 27th

Posted by rich in flash

1 comment

I’ve doing a “regular” flash-based website, which I haven’t done in a while since pretty much all of my work for the last year has been Flex. I’ve heard a lot about Gaia so I decided to implement it on this project, and I have to say, I am really impressed. There’s a small learning curve, and that’s just to get used to the ‘Gaia flow‘, which basically everything revolves around individual site sections that transition and out. Once you pick that up (and that happened pretty quickly) you see the beauty of it.

The thing that I think I appreciate about Gaia so far is that it has the capability to let you do really cool, complicated stuff, but you wouldn’t know it unless you needed it. Otherwise, it stays somewhere off in the distance ready to be called upon when you need it.

Oh yeah, and it takes care of deep linking and SEO for you as a bonus. Oh yeah part 2, it also throws in right-click menu site navigation, if you’d like.

If you’re developing flash sites, you need to look into this. To not would be a foolish waste of your time.

Finally, AS 3 Autocompletion in TextMate

Jul 22nd

Posted by rich in Flex

2 comments

Found this at http://blog.simongregory.com/09/as3-autocompletion-in-textmate/ . I'll admit it's not to the level of Flex Builder, but it's great to see actual autocomplete working in TextMate for AS 3. Once installed, hit option-esc to bring up the autocomplete suggestion list. If you choose a function it will give you the the expected parameters:

PLAIN TEXT
Actionscript:
  1. stage.addEventListener(type:String,listener:Function,useCapture:Boolean=false,priority:int=0,useWeakReference:Boolean=false);

This is the flaky part, because the idea is that you can tab through the parameters to enter your values. But say if you wanted to listen for MouseEvent.CLICK, and don't have the MouseEvent class imported alread. You can easily import it by starting to type M.. and hitting apple-shift-I to import it (then again using autocomplete to choose 'CLICK'), but then you can't tab over to the rest of the parameters. I'm going to dig around to see if there's a workaround.

Other than that, seems to work fine with custom classes, i can autocomplete methods and function just fine. Mix this the other tab triggers in the bundle and you really start to feel a big speed increase when busting out the code.

By the way, apparently there is some confusion because there is an older AS3 bundle. I wound up removing the one i already had installed, and using the GetBundles bundle (a bundle that acts like a package manager) to install the newer version, then the autocomplete worked properly.

How I (sort of) modified Flex’s SystemManager.initialize() method

Jul 7th

Posted by rich in Flex

2 comments

I'm not sure if this method is way off base or not, but it worked. In this case, I wanted to specify a different class to be returned when calling ResourceManager.getInstance(). Currently, flex apps are pretty much hardcoded to return an instance of the mx.resources.ResourceManagerImpl class.

How does it that method know to return an instance of that class? Well, the Flex framework uses a class called Singleton, which keeps a registry that maps interface names to classes that are supposed to be singletons in the app. So, ResourceManager.getInstance() calls Singleton.getInstance() to ask if for the IResourceManager class to use in the app:

PLAIN TEXT
Actionscript:
  1. instance = IResourceManager(Singleton.getInstance("mx.resources::IResourceManager"));

The problem I ran into is that for IResourceManager, and a few other interfaces, the class to return is registered in the SystemManager.initialize() method, which runs way before any of the actual flex application code is available.

However, there is one custom class which can be accessed during the SystemManager.intialize() method: the custom preloader class. The preloader class is accessed a few lines above where Singleton.registerClass() is called to register the IResourceManager singleton.

So, I made a subclass of DownloadProgressBar and set that to be the preloader class. That class uses a static initializer to register my own class to use for ResourceManager.getInstance():

PLAIN TEXT
Actionscript:
  1. private static var classConstructed:Boolean = classConstruct();
  2.    
  3.         private static function classConstruct():Boolean {
  4.             var rm:ResourceManager2;
  5.             Singleton.registerClass("mx.resources::IResourceManager",
  6.             Class(getDefinitionByName("com.venarc.designer.managers.ResourceManager2")));
  7.             return true;
  8.         }

Now my custom ResourceManager2 class is used whenever you call ResourceManager.getInstance(). I wish there were some compiler options for specifying which classes to use for those Singletons, would've made everything a lot easier.

Flex localization with Resource Bundles

Jul 3rd

Posted by rich in Flex

7 comments

Working with resource bundles in Flex is (surprise, surprise) relatively easy and pretty cool. They're a great way to separate content from code and localize your flex apps. You have the choice to either compile the different locales statically into the app, or load them dynamically using the ResourceManager.


Adding support for different locales


First thing you need to know is that, Flex techinically doesn't support most locales right "out of the box". In order to support more, it needs to create a bunch of framework resource SWCs for each locale you want to use. This is really easy though. There is a command-line utillity called copylocale that will handle creating those for you...all you need to do is tell it which locale you want to create. Pop open a terminal and navigate to your flex SDK directory, and run this command, substituting "fr_FR" for the locale you wish to create:

./bin/copylocale en_US fr_FR

This will generate all the asset files the framework needs. You're done with this part.


Adding resource bundles


To add resource bundles, there are a few steps you need to follow. Each step will be discussed further below:

  • Create a source directory in your project for each locale you wish to use. Normally, it would go something allong the lines of src/locale/en_US, src/locale/en_GB, etc.
  • Create a properties file that will contain the resources to be localized. This property file is a simple text file containing key/value pairs. Mostly it's going to contain strings to be localized, but can also contain ClassReferences and Embedded assets, just like a style swf.
  • If you want to compile all the locales into the app, update the compiler settings to include the locales and source paths into the app.
  • If you would like to load the additional locales on demand, create a resource swf to be loaded in by calling ResourceMananger.loadResourceModule().


Creating the properties file


The properties file is what the compiler uses to make the resource bundle. In fact, the compiler parses that file and creates a subclass of ResourceBundle for use in the app. It is made up of simple key/value pairs:

mytitle=Title
myothervalue=This is some other text we want to localize

You don't enclose the strings in quotes, and any whitespace before the value is trimmed (which is great for keeping your properties file nice and neat). Whatever you name the file will be the name of the resource bundle: a file named "strings.properties" becomes the "strings" resource bundle in the app. One important note, the text file must be encoded in UTF-8.

Telling the flex compiler which bundles to include in the app
In order for flex to know which resource bundles you plan on using in the app, you need to explicitly tell it using metadata tags. In mxml it looks like:

PLAIN TEXT
XML:
  1. <mx:Metadata>
  2.      [ResourceBundle("strings")]
  3. </mx:Metadata>

and in actionscript it looks like this:

PLAIN TEXT
Actionscript:
  1. [ResourceBundle("myResources")]


Specifying which locales to compile into the app


If you are going to statically compile all the locales you want to use in the app, you simple add a couple of compiler options:

-locale=en_US,fr_FR -source-path=locale/{locale}

if you get a warning about the source path overlapping after changing those options, you can also add the compiler option -allow-source-path-overlap=true.

Now when you compile your app, flex will create resource bundles for each of the locales.


Creating resource modules to dynamically load in


If you would like to load different locale bundles on the fly, you need to comile swfs for each locale. Unfortunately, you cannot do this within Flex Builder, you must use the command line. Luckily, this is also easy, though it is a two step process.

First, we need to find out exactly which bundles to include into the module swf. The way we do this is by compiling our app with no locale specified, and including the compiler option -resource-bundle-list:

mxmlc -locale= -resource-bundle-list=myresources.txt MyApp.mxml

Note that the above example using the command line, but you can do this part in Flex Builder by adding additional compiler options under the project preferences (Flex Compiler > additional compiler arguments). Now when you compile the app, a text file will be output that contains a list of bundles to include in the module:

bundles = strings collections containers controls core effects skins styles

Note the "strings" bundle. Flex knew to include this because we specified it in the metadata.

What do we do with that list? That's the second step. We go back to the command line, and use that list as part of a the -include-resource-bundles compiler argument when we compile the module swf. Open a terminal window, navigate to your projects directory, and use the following command:

mxmlc -locale=en_US -source-path=locale/{locale} -include-resource-bundles=strings,collections,containers,controls,core,effects,skins,styles -output en_US_resources.swf

You can customize the -output file name to your liking, and be sure the -source-path arguments points to the directory which contains the properties file. Repeat this step for each locale you want to compile, changing the -locale and -output options accordingly.


Using the resource bundles


Using the resource bundles is pretty easy. Wherever you want a string localized, you can do two things:

If you plan on only localizing once when the app starts, you can use the @Resource() compiler directive wherever you want to use the text. You simply pass the name of the resource bundle, and the key which you wish to use:

PLAIN TEXT
XML:
  1. <mx:Label text="@Resource(bundle='strings', key='mytitle')" />

If you plan on dynamically updating the content during the life of the app (for example, allowing the suer to set the locale), you can use bindings and the ResourceManager singleton to specify the strings:

PLAIN TEXT
XML:
  1. <mx:Label text="{resourceManager.getString('strings', 'mytitle')}" />

When using bindings, the value of the string will be updated once you set the ResourceManager.localeChain property, which is an array containing the locales to use, in cascading order. For example, if you specify ['fr_FR', 'en_US'], the ResourceManager will first look for the key in the fr_FR bundle. If that key is not found, it will use the key from the en_US bundle instead. You can use just a single locale in the array if you wish.


Loading additional resource bundles


Again, pretty simple. you can use ResourceManager.loadResourceBundles() to load the resource module swf containing the new locale. One that locale is loaded, you can set the ResourceManager.localeChain property to use the new locale.

For some additional info, the Runtime Localization article on Labs is a great resource. Also see:

http://www.herrodius.com/blog/123
http://soenkerohde.com/2008/07/flex-localization/
http://hillelcoren.com/2008/09/12/resource-bundles-in-flex-wo-lots-of-extra-code/ ( for a nice ResourceManager utility class)