Setup a New Flex Project
To show how this is done, I’ll first create a new Flex project named LocalizationFrameworkResources. I’ll assume you know how to do that. If not, see this topic in the FlexBuilder help system or LiveDocs:
Creating a Flex project with no server
Adding a DateChooser Control
Now that the project has been created, add a DateChooser control. You can do this in design mode or source mode. This is how your project should appear in source mode.
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:DateChooser/>
</mx:Application>
This is how the Flex application should appear if you launch it.
Flex Application with DateChooser Control
Framework Resource Bundle Files
As seen in the screen shot above, the DateChooser control is currently displaying month names and abbreviations for the days of the week in English. While the custom strings that make up most of the UI of your Flex application are localized by putting the custom strings in .properties files, accessed through resource bundles, strings found in controls like the DateChooser are located in Flex framework .properties files, accessed internally via framework resource bundles. This blog post is all about localizing the framework resource bundle files.
We’re going to localize for French, so we need to change the locale of the project to fr_FR. This will cause the compiler to look for French framework resource bundle SWC files.
Open the main app file LocalizationFrameworkResources.mxml, and then select Project – Properties in the FlexBuilder menu. In the dialog box that launches, click on the Flex Compiler property category on the left, and then in the Additional compiler arguments text input change the default locale from en_US to fr_FR. The text input should now read -locale fr_FR, as seen in the following screen shot.
Changing the Project Properties - Locale Compiler Argument
Now We Have a Compile Error
When you close the project properties dialog box, if you have the “Build Automatically” setting checked in the Project menu, the project should immediately attempt to compile, and you should get an error similar to the following:
unable to open ‘C:\Program Files\Adobe\Flex Builder 3\sdks\3.1.0\frameworks\locale\fr_FR’
This error occurs because we have changed the project locale but the French framework resources do not yet exist. Don’t get me started on the topic of why Adobe does not ship FlexBuilder and the Flex SDK with localized framework resources for some of the locales developers are most likely to create applications for, such as Japanese, French, German, Spanish, etc.
Copy the English Framework Resource Files
First we need to make a copy of the English resource .properties files, which we will localize and then build into a SWC file. The English resources are located here:
INSTALL_DIR\Flex Builder 3\sdks\3.1.0\frameworks\projects\framework\bundles\en_US\src
Just create a copy of the entire en_US directory and rename it to fr_FR, so you now have this directory:
INSTALL_DIR\Flex Builder 3\sdks\3.1.0\frameworks\projects\framework\bundles\fr_FR\src
Localize the .properties Files
In order to localize the date related strings in the DateChooser control, we need to localize some strings in two of the framework resource .properties files, controls.properties and SharedResources.properties.
Open these two files in your favorite text editor and change the following strings as indicated (we’re only changing strings absolutely necessary for our example app):
controls.properties
Before:
dayNamesShortest=S,M,T,W,T,F,S
firstDayOfWeek=0
———————-
After:
dayNamesShortest=D,L,M,M,J,V,S
firstDayOfWeek=1 (first day of the week is Monday, well, actually Lundi)
————————————————–
SharedResources.properties
Before:
monthNames=January, February, March, April, May, June, July, August, September, October, November, December
———————-
After:
monthNames=janvier, février, mars, avril, mai, juin, juillet, août, septembre, octobre, novembre, décembre
After making these changes save the files, and ensure the files are saved in UTF-8 encoding, otherwise the high-ascii characters will not display properly (they display as rectangles). If you were localizing into Japanese, Russian, etc. those characters would also not display correctly. The files can be saved with or without the UTF-8 BOM (byte order mark). It is always better to have the BOM, just in case you need to check for it, though in this program you will not need to check for the BOM.
Build SWC Files from the Localized Framework Resource .properties Files
Now the .properties files must be compiled into SWC files. Open a CMD window and change the directory to this path (or the equivalent on your machine):
INSTALL_DIR\Flex Builder 3\sdks\3.1.0
Now execute this on the command line:
bin\compc -locale=fr_FR -source-path+=frameworks/projects/framework/bundles/fr_FR/src -include-resource-bundles=collections,containers,controls,core,effects,formatters,logging,SharedResources,skins,states,styles,utils,validators -output=frameworks/locale/fr_FR/framework_rb.swc
as seen in the value of the compile argument -output, the output file is here:
INSTALL_DIR\Flex Builder 3\sdks\3.1.0\frameworks\locale\fr_FR\framework_rb.swc
Note: this directory must already exist of the compile will fail, so just create an empty directory:
INSTALL_DIR\Flex Builder 3\sdks\3.1.0\frameworks\locale\fr_FR
Recompile and Relaunch
Force a recompile of the application by typing a space in the mxml file and then deleting the space and saving (if Project – Build Automatically is checked in the menu), then relaunch and you should see the month of December (décembre in French) display as follows:
French App
Also notice that the abbreviations for the days of the week are localized.
In Conclusion
That’s it, you have now localized some strings in the Flex framework resource files. You might want to save the .properties files as ANSI format instead of UTF-8, recompile and relaunch the application, to see what happens. You’ll be better prepared to know what to do to correct the situation if you see it first-hand. Here is an example:
French App - Corrupt Characters
Here is the completed application on ChikaraDev, right-click to view the source code:
LocalizationFrameworkResources
Thanks for stopping by the ChikaraDev blog. Come again soon!
Take care, and see you in the Adobe Flex Forums,
Greg
Tags: bundle, framework, locale, localization, localize, resource