slobber

首先解下题目，一般都说抛砖引玉，但是我扔出去这块砖，不知道能不能引来玉，不过就算引不来玉，大家跟贴给点建议，射过来几个箭头，我也会很满足了。另外一个要声明的，这个词并不是我创的，虽然网上还搜不到，不过确实是某网友的创意，我借用下。这篇东西算是我的第一篇成篇幅的文章了，不能说是教程，只是把我遇到的问题及解决的方法，和大家分享一下。这系列文章将会继续出下去，会是不同主题，不过都还是比较基础的内容，给初学Flex的朋友开拓思路。

在本文中，将要去探讨如何在Flex中利用XML构建多语言设置。

在ActionScript 2中，Flash使用了mx.lang.Locale类来进行多语言文本控制，当然，通过类似

myLabel.text = Locale.loadString("IDS_TITLE");

这样的ActionScript语句来获得当前语言的相关字符串，Locale所需要的语言文本是从一个XML文件中获得的，具体的方法大家可以去参考livedoc的相关内容，不过如果一个项目中有成百上千个Label需要进行本地化工作，通过ActionScript一个个的写，这也是一个大工程。

值得庆幸的，在ActionScript 3中我们不再需要mx.lang.Locale，因为Adobe已经把它取消了，采用ResourceBundle类，像JAVA借鉴的。不幸的是，Flex本身并不支持动态加载并显示语言文件，帮助原文中写道“The localization feature currently supports static inclusion of localized resources and not dynamic retrieval of resources at run time.”。关于如何使用ResourceBundle类以及如何利用.properties文件编译多语言文件，请参阅帮助和这篇文章（他也将要写一篇如何从XML加载并显示语言文本，应该会比我的这篇更有价值，我本来也打算看看他的，等了快一个月了，还不出来，希望不是太监文学）。

为了克服刚才提到ActionScript 2中的那样的问题，最好的解决方法是什么？是绑定。绑定可是一个好东西，可以让你省却很多代码，繁琐的操作。将文本与Label的text属性绑定，这样当你选择其他语言时，就可以自动修改内容，而不需要你去特别编写什么了。

源代码：MultiLanguage.zip

好了，来看代码吧。
首先是XML语言文件，很简单，在这里我做了两个文件，一个中文的zh-cn.xml，一个英文的en-us.xml。

locale/zh-cn.xml
<locale>
  <phrase id="title" value="标题" />
  <phrase id="content" value="内容" />
</locale> 

locale/en-us.xml
<locale>
  <phrase id="title" value="Title" />
  <phrase id="content" value="Content" />
</locale> 

每一个phrase就是一个条目，依次排下去就可以了。然后就是这个自定义的Locale类了。在这个类中，主要用到了以下知识，绑定元标记，XML读取及操作，鼠标指针，以及静态变量及方法。

Locale.as
package
{
    import flash.net.URLRequest;
    import flash.net.URLLoader;
    import mx.managers.CursorManager;
 
    public class Locale
    {   
        private static var_phrase:Object;
       
        public static function get phrase():Object
        {
            return _phrase;
        }
       
        [Bindable]
        public function get phrase():Object
        {
            return _phrase;
        }
        private function set phrase(p:Object):void
        {
            phrase = p;
        }
 
        public function getLanguage(lang:String = 'zh-cn'):void
        {
            var xmlURL:String = "locale/" + lang + ".xml";
            var xmlRequest:URLRequest = new URLRequest(xmlURL);
            var xmlLoader:URLLoader = new URLLoader(xmlRequest);
            xmlLoader.addEventListener(Event.COMPLETE,
                                            loadedHandler);   
            mx.managers.CursorManager.setBusyCursor();
        }
        private function loadedHandler(event:Event):void
        {
            var xml:XML = new XML(event.target.data);
            var p:Object = new Object();
            for each (var pxml:XML in xml.children())
            {
                p[pxml.@id] = pxml.@value;
            }
            phrase = p;
            CursorManager.removeBusyCursor();
        }
    }
} 

使用时，主程序的代码

LocaleDemo.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    creationComplete="initApp();" xmlns:ns1="*">
    <mx:Script>
    <![CDATA[
        [Bindable]
        public var locale:Locale;
        private function initApp():void
        {
            locale = new Locale();
            locale.getLanguage();
        }
    ]]>
    </mx:Script>
    <mx:Label width="50%" height="50%" x="208" id="label1" y="25"
        text="{locale.phrase.title}"/>
    <mx:Label width="50%" height="50%" x="208" id="label2" y="55"
        text="{locale.phrase.content}"/>
    <mx:Button label="change"
        click="locale.getLanguage('en-us');" />
</mx:Application> 

代码其实很简单，但是为了让它更好工作，我其实尝试了很多的方法，首先我考虑，这个Locale应该是一个静态的对象，因为当你在整个应用程序里去布置语言字符串时，不应该使用类的实例，而是直接去调用类的静态方法，但是Flex跟我说声对不起，bindable isn’t support static。结果到最后，我不得不去使用一个折中的方法，为它准备了两套输出，一个静态的，用在ActionScript脚本中，这样写起来也短些；另一个就是用于绑定的，当你在一个自定义组件内使用时需要去调用application下的locale对象，不要去尝试在自定义组件中建立一个对locale的弱引用对象，没用的，弱引用之后以不支持绑定，必须写全，后面在具体说明。

<mx:Lable text=”{Application.application.locale.somePhrase}” /> 

Flex调用文件需要使用flash.net.URLLoader和flash.net.URLRequest类，就像上面代码中getLanguage(lang:String)所写的

var xmlURL:String = "locale/" + lang + ".xml";
var xmlRequest:URLRequest = new URLRequest(xmlURL);
var xmlLoader:URLLoader = new URLLoader(xmlRequest); 

loader加载完毕后，文件内容会储存在loader.data中，等加载后就通过loadedHandler函数来继续处理。

xmlLoader.addEventListener(Event.COMPLETE, loadedHandler);   
mx.managers.CursorManager.setBusyCursor(); 

这里，将鼠标变成忙的标识，告诉用户，程序正在工作。CursorManager一般常用的就是setBusyCursor()和removeBusyCursor()，当然也还有其他的功能，比如将鼠标换成其他图标等等，这个很简单，帮助里介绍的很详细了。
大家应该都很清楚Flex框架是事件驱动的异步传输结构，因此，当你写完new URLLoader(xmlRequest)之后，程序不可能马上得到数据，因此，如果你在主程序的initApp()函数中调用locale.getLanguage();之后马上去trace(locale.phrase.title);，那是什么也不会出现的，必须等加载完成之后，phrase中才会有数据，也才能去显示。这样就显示出绑定的好处了，当phrase改变时，由于它是可以绑定对象，它会dispatch一个propertyChanged的事件，然后，各种它绑定到组件就会更新它们的内容，多省事。就是主程序中的加粗部分。

<mx:Label id="label1" text="{locale.phrase.title}"/>
<mx:Label id="label2" text="{locale.phrase.content}"/> 

当再次调用getLanguage()时，绑定的text也会自动更新内容，这样就成英语了。
还有一块源代码没说呢，就是Locale类中的loadedHandler。

private function loadedHandler(event:Event):void
{
    var xml:XML = new XML(event.target.data);
    var p:Object = new Object();
    for each (var pxml:XML in xml.children())
    {
        p[pxml.@id] = pxml.@value;
    }
    phrase = p;
    CursorManager.removeBusyCursor();
} 

这里首先将loader的数据由String转变为XML，然后利用for each，把这些语句条目存到一个对象里。
Flex的对象操作是非常灵活的。Object本身是一个动态类，也就是说，你可以声明对象是决定它的属性，也可以在声明后随时在这个对象的实例中添加属性。例如：

var o:Object = new Object();
o.prop1 = "string";
o.prop2 = {label:'Label', value:'Value'};
o.prop3 = 4;
o.prop4 = new Array(1, 2, 3, 4); 

除了这样添加属性之外，你还可以使用[]来添加属性，就像这样：

var o:Object = new Object();
o['prop1'] = "string";
o['prop2'] = {label:'Label', value:'Value'};
o['prop3'] = 4;
o['prop4'] = new Array(1, 2, 3, 4); 

而我们程序中所使用的就是这个方法，关于XML操作中“@”运算符，大家可以去看其他的文章，讲的都很详细。

p[pxml.@id] = pxml.@value; 

我想，现在你对这个程序的流程很了解了吧，很简单吧。下面我们继续尝试这个类去进行多语言开发。我刚刚提到，如果你自定义了一个组件，而不是在主程序Application中使用locale怎么办？很简单，就像这样：

Comp.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Label id="label"
        text="{Application.application.locale.phrase.title}" />
    <mx:Button id="button" label="修改"
        click="clickHandler(event)" />
    <mx:Script>
    <![CDATA[
        import mx.core.Application;
 
        public function clickHandler(e:Event):void
        {
            Label.text = Locale.phrase.content;
        }
    ]]>
    </mx:Script>
</mx:VBox> 

你在一个Script中打算修改Label.text的话，就可以使用Locale的静态方法，这样可以少打些字，还需要强调的是，你需要确保这时xml文件已经处理完毕。不过，一般情况下，运行这种事件中的代码时，肯定都已经把xml读进来了。

最后是修改后的主程式

LocaleDemo.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    creationComplete="initApp();" xmlns:ns1="*">
    <mx:Script>
    <![CDATA[
        import mx.utils.ObjectUtil;
       
        [Bindable]
        public var lang:Array = new Array(
                                {label:'中文',data:'zh-cn'},
                                {label:'English',data:'en-us'});
           
        [Bindable]
        public var locale:Locale;
        private function initApp():void
        {
            locale = new Locale();
            locale.getLanguage();
        }
    ]]>
    </mx:Script>
    <mx:Label id="label1" text="{locale.phrase.title}"/>
    <mx:Label id="label2" text="{locale.phrase.content}"/>
    <ns1:Comp></ns1:Comp>
    <mx:ComboBox dataProvider="{lang}" id="cb"
        change="locale.getLanguage(cb.selectedItem.data)" />
</mx:Application> 

基本上就是这些了，在大家射箭矢之前，我先说下现在的问题，第一这只是一个Demo，没有丝毫容错性，比如，如果我尝试使用xml中没有的一个条目，那么它会在程序中留下空白，而正常情况下应该用那个id来代替字符串，还有，如果找不到xml文件呢。这些我都没有在这来写，如果把这些写上，我想大家会晕掉的。
更完备的代码等着大家了。

发表评论

标题

在此添加评论

称呼

Email

Web

Please type the 6-digit code you can see here:
 

• 首页
• 文章归档
• 资源中心
• 网站链接

«	二月 2012					»
一	二	三	四	五	六	日
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29

• 类似 Photoshop 的导航窗口——NavigationManager
• Flex 2.0.1 的帮助 CHM 下载
• 利用Cairngorm微架构开发Flex富Internet应用——第三部分: 架构视图
• 利用Cairngorm微架构开发Flex富Internet应用——第一部分: 介绍Cairngorm
• 利用Cairngorm微架构开发Flex富Internet应用程序——第二部分: 在客户端维持状态
• Firework将可以导出成MXML
• 打算考个研了
• 引矢不引玉系列——动态加载外部XML语言文件构建多语言应用程序
• 中秋到，特意做了一個新模板
• [翻译]使用 Flex 2 与 AMFPHP

• Flex [23]
• 随笔 [4]
• web digest [4]
• C [0]
• PHP [1]

• RSS 0.90
• RSS 1.0
• RSS 2.0
• Atom