Flex编译CSS资源与国际化

1)      编译CSS资源

 

文件浏览器（Navigator）中，在标准的Flex CSS文件上点击右键，点击Compile CSS to SWF即可完成编译CSS的任务。

在程序中可以用StyleManager.loadStyleDeclarations()来读出已编译好的CSS文件中的内容。

具体操作如下:

              // 读取Style

                        private function loadStyle():void

              {

                              var eventDispatcher:IEventDispatcher = StyleManager.loadStyleDeclarations("xxx.swf");

                    eventDispatcher.addEventListener(StyleEvent.COMPLETE, completeHandler);

}

然后，

              // 读取完毕的处理

                        private function completeHandler(event:StyleEvent):void

                        {

                              // 具体的处理内容

                              ………………

                              super.initialized = true;

              }

做好了这两个函数后，在要调用的页面编辑它的preinitialize属性，指向loadStyle()，如：

<mx:Application xmlns:mx=http://www.adobe.com/2006/mxml layout="absolute" preinitialize="loadStyle()">

 

2)      编译locale文件

 

为了国际化的需要，我们需要使用locale文件或国际化相关技术。

最简单的方法是本地化编译，即编译不同的语言版本，然后使用Application Server来判定客户使用的是哪种语言，并自动指向对应的swf文件。

具体做法如下：

在项目上点击右键，选择Properties。

                            然后选择Flex Compiler，在Additional Compiler arguments下面已经配置好语言包了，默认为-locale en_US。

                            这时我们可以用一个locale目录来简单定制我们额外设置（当然不包括Flex内部控件的语言）的语言设置。

                            比如改为：-locale=en_US -source-path+=g:\flexproj\locale\{locale}。这样在g盘的flexproj目录下建立一个locale目录。

然后目录下放置包含我们要扩展的语言文件的文件夹就可以了。比如：g:\flexproj\locale\en_US。

注意：locale下面的目录名应该和-locale=设置的名称一致。

那么这样，我们就可以使用额外的语言设置了。

例：

Additional Compiler arguments配置为

-locale+=en_US -source-path+=g:\flexproj\testgoufang\locale\{locale}

然后在对应的locale目录下添加国际化资源文件，如图：

这一部分跟struts相似。

里面的内容为键=值的形式，如：

Title=测试项目

User=用户名

Password=密码

…………

…………

 

使用的时候可以通过[ResourceBundle]元数据标签来绑定locale文件，如：

<mx:Metadata>

                              [ResourceBundle("strings")]

</mx:Metadata>

即绑定上文提到的strings.properties文件，然后我们可以通过ResoueceManager来读出其中的内容，比如：

var Title : String = resourceManager.getString("strings", 'Title');

或者绑定到控件：

[Bindable]

private var Title:String;

…………

Title = resourceManager.getString("strings", 'Title');

…………

<mx:Label text="{Title}"/>

 

上面对针对国际化而使用locale文件的方式做了一个简单的介绍，不过问题还是很多，比如Flex控件的国际化，动态国际化用上面的方法都无法做到。也就是说如果我使用Flex的控件，就必须在程序中指定，或者额外挂在国际化的xxx. Properties文件来进行国际化，并且，只能静态编译多个版本，然后让Application Server根据不同的语言来定位不同版本的SWF文件来进行，这是很不方便的。其实Flex是可以做到的。

 

下面我们来看比较复杂的定制国际化方案：

 

首先，了解一些背景，Flex内部的国际化文件/库只支持两个版本，一个是en_US，另一个是ja_JP。也就是说，开发者在编译Flex项目的时候在Additional Compiler arguments下配置locale=zh_CN是一定会报错的。

原因是因为zh_CN库，Flex是没有提供的。

那么应该怎么办呢，答案是：自己来构建一个。

事实上，在Flex的sdk中已经提供了所有国际化文本的源码，我们可以通过这些源码来进行核心的国际化功能。

我们可以在sdk的目录下找到对应的源码文件夹，如：

D:\Program Files\Adobe\Flex Builder 3\sdks\moxie\frameworks\projects\framework\bundles\en_US

这样我们可以根据这个原型的复制品来制作其他语言包。

比如，我们来制作一个中文语言包：

首先，先在bundles下创建en_US的副本，然后将副本更名为zh_CN，然后把zh_CN下面的具体内容翻译成中文。

在sdk下输入

 

bin\compc -locale=zh_CN -source-path=frameworks/projects/framework/bundles/zh_CN/src -include-resource-bundles=collections,containers,controls,core,effects,formatters,logging,SharedResources,skins,states,styles,validators

-output=frameworks/locale/zh_CN/framework_rb.swc

 

则会将Flex的collections,containers,controls,core,effects,formatters,logging,SharedResources,skins,states,styles,validators模块的语言源文件编译成frameworks/locale/zh_CN/framework_rb.swc的语言库文件，这样，在Additional Compiler arguments下配置locale=zh_CN就不会报错了。

 

此外，语言文件也可以像CSS文件一样编译成SWF文件：

mxmlc -locale= zh_CN

-source-path=locale/{locale} -allow-source-path-overlap=true -include-resource-bundles=collections,containers,controls,core,effects,myResources,skins,styles -output=Resources_ zh_CN.swf

 

编译后的文件更小，效率会更高。

 

在Flex中动态使用国际化：

 

之前我们所讲都是通过Application Server跟据不同的语言来定位不用的SWF文件来实现国际化的。现在，我们来讲一下，如何在Flex中，动态指定国际化语言。

 

首先，我们应通过Additional Compiler arguments的locale选项来指定多个语言：

-locale=zh_CN,en_US，我们也可以这样-locale+=zh_CN，因为en_US为默认语言。

然后，我们可以在程序中指定语言顺序链

resourceManager.localeChain = [ "zh_CN", "en_US" ];

这样我们通过resourceManager.localeChain = [0];就可以选择zh_CN了。

在外部，我们可以通过html-template目录下对index.template.html进行修改，来达到动态更换语言的目的，当然，这也需要Application Server的支持，不过，不再是定位到不同的SWF文件了，比如下面的JS脚本：

 

AC_FL_RunContent(

                  "src", "${swf}",

                  "FlashVars", "localeChain=zh_CN",

                  "width", "${width}",

                  "height", "${height}",

                  "align", "middle",

                  "id", "${application}",

                  "quality", "high",

                  "bgcolor", "${bgcolor}",

                  "name", "${application}",

                  "allowScriptAccess","sameDomain",

                  "type", "application/x-shockwave-flash",

                  "pluginspage", "http://www.adobe.com/go/getflashplayer"

);

我们可以利用JSP或者ASP.NET动态替换红色的部分，来动态的更换语言

当然，我们也可以引用编译的文件，只需要把红色的部分改为：

 

"FlashVars", "resourceModuleURLs=Resources_zh_CN.swf&localeChain= zh_CN ",

 

这样就可以了。