Almost every day, I come across a procedure which I find really anoying.
As a Flexdeveloper, you get your artwork delivered from a designer. Today, we have Flash Catalyst, which really imporves the workflow. I’m so happy to have it.
What I do is save a Flexproject from Catalyst, import it to Flex and start adding the logic. Great! Now what really bugged me, was localization. I had to copy the Text from each RichTextComponent to a xml file. After that, I had to add the resourceManager.getString() function where the Text previously was. In views with lots of text, this took ages.
So I came up with a neet little AIR App called “localisation token generator”.
What it does is exactly what I described above, only a lot faster. Let me explain in detail:
You start off with a Photoshop File like this (maybe a little more pretty):

You import this file into Flash Catalyst and get this:
<?xml version='1.0' encoding='UTF-8'?>
<s:Application xmlns:d="http://ns.adobe.com/fxg/2008/dt" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" width="800" height="600" backgroundColor="#FFFFFF" preloaderChromeColor="#FFFFFF">
<fx:Style source="Main.css"/>
<s:BitmapImage smooth="true" source="@Embed('/assets/images/artwork/Background.png')" d:userLabel="Background" x="0" y="0"/>
<s:RichText color="#fefefe" fontFamily="News Gothic Std" fontSize="14" kerning="off" lineHeight="214.3%" d:userLabel="My Text Number 1" whiteSpaceCollapse="preserve" x="69" y="67">
<s:content><s:p><s:span>My Text Number 1</s:span></s:p></s:content>
</s:RichText>
<s:RichText color="#fefefe" fontFamily="News Gothic Std" fontSize="14" kerning="off" lineHeight="214.3%" d:userLabel="More Text" whiteSpaceCollapse="preserve" x="68" y="111">
<s:content><s:p><s:span>More Text</s:span></s:p></s:content>
</s:RichText>
<s:RichText color="#FEFEFE" fontFamily="News Gothic Std" fontSize="14" height="208" kerning="off" lineHeight="214.3%" d:userLabel="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed di" whiteSpaceCollapse="preserve" width="576" x="70" y="165">
<s:text>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</s:text>
</s:RichText>
</s:Application>
Now you start up “localisation token generator” and first of all click on “Save required Files” to get a proper xml file for the tokens and the tokensVo.as. Save these files in the src folder of your Flex Project.

Now you first drag the MXML File containing your Code onto the Target MXML Drop Target
Next, drag the tokens.xml file from your src Folder onto the Target XML Drop Target. After doing this, you will have the opportunity to choose your target language. Also a Token Prefix is generated from the mxml’s filename. If you don’t like it, just change it.
Now click on “Generate Tokens” and enjoy! Be sure to have a backup of your files, just in case.
What you will end up will look like this:
<s:Application width="800" height="600"
backgroundColor="#FFFFFF" preloaderChromeColor="#FFFFFF"
xmlns:d="http://ns.adobe.com/fxg/2008/dt"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Style source="Main.css"/>
<s:BitmapImage smooth="true" source="@Embed('/assets/images/artwork/Background.png')" d:userLabel="Background" x="0" y="0"/>
<s:RichText color="#fefefe" fontFamily="News Gothic Std" fontSize="14" kerning="off" lineHeight="214.3%" d:userLabel="My Text Number 1" whiteSpaceCollapse="preserve" x="69" y="67">
<s:content>{TextFlowUtil.importFromString(resourceManager.getString('tokens','Main_MyTextNumber1_1'))}</s:content>
</s:RichText>
<s:RichText color="#fefefe" fontFamily="News Gothic Std" fontSize="14" kerning="off" lineHeight="214.3%" d:userLabel="More Text" whiteSpaceCollapse="preserve" x="68" y="111">
<s:content>{TextFlowUtil.importFromString(resourceManager.getString('tokens','Main_MoreText_2'))}</s:content>
</s:RichText>
<s:RichText color="#fefefe" fontFamily="News Gothic Std" fontSize="14" height="208" kerning="off" lineHeight="214.3%" d:userLabel="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed di" whiteSpaceCollapse="preserve" width="576" x="70" y="165">
<s:content>{TextFlowUtil.importFromString(resourceManager.getString('tokens','Main_Loremipsumdolor_3'))}</s:content>
</s:RichText>
</s:Application>
To get the localisation work, just add some script so your file looks like this:
<s:Application width="800" height="600" creationComplete="application1_creationCompleteHandler(event)"
backgroundColor="#FFFFFF" preloaderChromeColor="#FFFFFF"
xmlns:d="http://ns.adobe.com/fxg/2008/dt"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Style source="Main.css"/>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.resources.ResourceBundle;
import mx.resources.ResourceManager;
import spark.utils.TextFlowUtil;
private var locales:Array;
public var TokenData:XML;
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
var urlLoader:URLLoader = new URLLoader();
urlLoader.addEventListener(Event.COMPLETE, parseTokens);
urlLoader.load(new URLRequest('tokens.xml'));
}
private function parseTokens(e:Event):void
{
var key:XML;
var tokenList:XMLList = new XML( e.target.data )..token;
var languages:XMLList = new XML( e.target.data )..language;
locales = new Array();
// Tokens
for(var i:int = 0; i < languages.length(); i++){
var tokenResource:ResourceBundle = new ResourceBundle(languages[i], 'tokens');
for each(key in tokenList)
{
tokenResource.content[key.@name] = new TokenVo(key.@name, key[languages[i].@id], languages[i]);
}
ResourceManager.getInstance().addResourceBundle(tokenResource);
locales.push(languages[i])
}
ResourceManager.getInstance().localeChain = locales;
ResourceManager.getInstance().localeChain = ["en_UK"];
}
]]>
</fx:Script>
<s:BitmapImage smooth="true" source="@Embed('/assets/images/artwork/Background.png')" d:userLabel="Background" x="0" y="0"/>
<s:RichText color="#fefefe" fontFamily="News Gothic Std" fontSize="14" kerning="off" lineHeight="214.3%" d:userLabel="My Text Number 1" whiteSpaceCollapse="preserve" x="69" y="67">
<s:content>{TextFlowUtil.importFromString(resourceManager.getString('tokens','Main_MyTextNumber1_1'))}</s:content>
</s:RichText>
<s:RichText color="#fefefe" fontFamily="News Gothic Std" fontSize="14" kerning="off" lineHeight="214.3%" d:userLabel="More Text" whiteSpaceCollapse="preserve" x="68" y="111">
<s:content>{TextFlowUtil.importFromString(resourceManager.getString('tokens','Main_MoreText_2'))}</s:content>
</s:RichText>
<s:RichText color="#fefefe" fontFamily="News Gothic Std" fontSize="14" height="208" kerning="off" lineHeight="214.3%" d:userLabel="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed di" whiteSpaceCollapse="preserve" width="576" x="70" y="165">
<s:content>{TextFlowUtil.importFromString(resourceManager.getString('tokens','Main_Loremipsumdolor_3'))}</s:content>
</s:RichText>
</s:Application>
What you have now is a fully functional localized Flex Application.
Hope this saves some time for you. Click on the Badge to install the Application.
Please upgrade your Flash Player This is the content that would be shown if the user does not have Flash Player 9.0.115 or higher installed.