flex国际化

 

flex国际化  

2010-05-26 19:17:48|  分类： Flex|字号 订阅

 

 

首先还是先来看看效果吧。

1.默认的中文页面

 

2.点击右上角的“英文”按钮，页面就切换到英文的页面。效果如下图

 

3.点击右上角的“日文”按钮，页面就切换到日文的页面。效果如下图

 

4.选择日文之后，登录进去查询页面。效果如下图

 

设计思路：就是通过读取资源文件。

步骤：1.建立如下图的local文件夹和三个同名的资源文件

 2.在flex complier中加如下信息

-locale zh_CN en_US ja_JP  -source-path+=E:\workspace\eoso\locale\{locale}。+=后面是你工程的路径

3.在flex build path中新建文件夹 内容是locale/{locale}

4.在WEB-INF/flex/local目录上新建两个文件夹。名为ja_JP，zh_CN。名字必须这样。（这一步非常重要，不然，你会遇到can't open ja_JP什么的问题）

4.ok，就最后一步了，在代码中引用。代码如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
   width="100%" 
   height="100%"  
   creationCompleteEffect="{wipeUp}"
   xmlns:ns1="page.orderManagement.*"
   layout="absolute" 
   backgroundGradientAlphas="[1.0, 1.0]" 
   backgroundGradientColors="[#5769F1, #EEF4D8]"
   creationComplete="this.initApp()">
    <mx:Metadata> 
        [ResourceBundle("rs")] 
     </mx:Metadata> 
 <mx:WipeUp id="wipeUp" duration="1000" />
 <mx:states>
  <mx:State name="main">
   <mx:SetStyle name="backgroundGradientColors" value="[#7BBBF8, #EEF4D8]"/>
   <mx:RemoveChild target="{panel0}"/>
   <mx:RemoveChild target="{text1}"/>
   <mx:RemoveChild target="{hboxLanguage}"/>
   <mx:AddChild position="lastChild">
    <mx:LinkButton x="904" y="3"  label="{resourceManager.getString('rs', 'Exit')}" click="this.userLogout();"/>
   </mx:AddChild>
   <mx:AddChild position="lastChild">
    <mx:Canvas horizontalCenter="0" verticalCenter="13" width="960" height="580" backgroundColor="#FFFFFF">
     <ns1:orderQuery  id="orderQuery"   width="100%" height="100%"/>
    </mx:Canvas>
   </mx:AddChild>
   <mx:RemoveChild target="{message}"/>
  </mx:State>
 </mx:states>
 <mx:Style>

  
  Application { 
   fontSize:14pt;
  }
  ToolTip{
   fontSize:14pt;
  }
 </mx:Style>
 <mx:Script>
  <![CDATA[
   import mx.controls.Alert;
   import mx.containers.Panel;
   import mx.controls.Image;
   import service.Session;
   import model.User;
  
      import service.CommonService;
  
  private function initApp():void{
     this.lblCheckCode.label=GenerateCheckCode();
     this.addEventListener(KeyboardEvent.KEY_DOWN,this.sendMessageUseEnterKey);
     //得到用户电脑当前分辨率
     var x:Number=Capabilities.screenResolutionX;
     var y:Number=Capabilities.screenResolutionY;
     if(x!=1024||y!=768)
     {
        var userDPI:String= x+"×"+y;
        this.message.visible=true;
        this.message.text=resourceManager.getString('rs', 'eoso_message1')+userDPI
        +"\n"+resourceManager.getString('rs', 'eoso_message2')+"：1024×768";
     }
  }

     //用户登录 
        private function userLogin():void
        {
           if(this.txt_UserName.text==null||this.txt_UserName.text=="")
           {
              this.tip.text=resourceManager.getString('rs', 'eoso_message3');
              return;
           }
           else if(this.textInputPassword.text==null||this.textInputPassword.text=="")
           {
              this.tip.text=resourceManager.getString('rs', 'eoso_message12');
              return;
           } 
           else if(this.txtCheckCode.text==null||this.txtCheckCode.text=="")
           {
              this.tip.text=resourceManager.getString('rs', 'eoso_message4');
              return;
           } 
           else if(this.txtCheckCode.text.toLocaleLowerCase()!=this.lblCheckCode.label.toLocaleLowerCase())
           {
             //验证码不正确！
              this.tip.text=resourceManager.getString('rs', 'eoso_message5');
              return;
           } 
           else{
            var commonService:CommonService = new CommonService();
            commonService.Login(this.txt_UserName.text,this.textInputPassword.text,this);
           }
        }
       //用户登录 回调
        public function loginSuccess(user:User):void
        {
      this.currentState='main';
        }
        //重置
        private function btnReset_clickHandler(event:MouseEvent):void{
           this.txt_UserName.text=null;
           this.textInputPassword.text=null;
           this.tip.text=null;
        }
       private function userLogout():void
          {
           Session.currentUser=null;
           navigateToURL(new URLRequest("/eoso/eoso.html"), "_self"); 
          }
          
         private function GenerateCheckCode():String{
     var ran:Number;
     var number:Number;
     var code:String;
     var checkcode:String="";
     //生成四为随机数
     for(var i:int=0;i<4;i++){
         ran=Math.random();
         number=Math.round(ran*1000);
         if(number%2==0)
         code=String.fromCharCode(48+(number%10));
      else
      code=String.fromCharCode(65+(number%26));
      checkcode+=code;
        }
   
        return checkcode; 
         }

   /*监听回车键 */
   private function sendMessageUseEnterKey(evt:KeyboardEvent):void
   {
    if(evt.keyCode==13)
    {
     this.userLogin();
      }
     }
 
  ]]>
 </mx:Script>

  <mx:HBox x="723" y="10" color="white" id="hboxLanguage"> 
     <mx:LinkButton label="中  文" 
         click="resourceManager.localeChain = ['zh_CN']" /> 
     <mx:LinkButton label="English"  
         click="resourceManager.localeChain = ['en_US']" /> 
     <mx:LinkButton label="日本�Z" 
         click="resourceManager.localeChain = ['ja_JP']" /> 
  </mx:HBox> 
  <mx:Text  text="{resourceManager.getString('rs', 'EOSSystem')}" fontSize="40" width="281" height="50" id="text1" horizontalCenter="0" verticalCenter="-200"/>
  <mx:Panel width="310" height="240" layout="absolute"  titleIcon="@Embed('image/logo.gif')" title="{resourceManager.getString('rs', 'Welcome')}" id="panel0" backgroundColor="#7BBBF8" backgroundAlpha="0.29" borderColor="#C9EFB0" cornerRadius="20" alpha="1.0"  verticalCenter="5" horizontalCenter="0"> 
  
  <mx:Label id="formitem0" textAlign="right" text="{resourceManager.getString('rs', 'username')}"   x="5" y="37" width="100"/>
  <mx:TextInput id="txt_UserName" text="SUPP001"  x="112" y="36" tabIndex="1"/>
  <mx:Label id="password" textAlign="right" text="{resourceManager.getString('rs', 'password')}" x="5" y="77" width="100"/>
  <mx:TextInput id="textInputPassword" text="SUPP001" tabIndex="2" displayAsPassword="true" x="112" y="75"/>
  <mx:Button id="btnReset0" width="85" label="{resourceManager.getString('rs', 'Reset')}" tabIndex="5" click="btnReset_clickHandler(event)" cornerRadius="13" x="156" y="160"/>
  <mx:Button id="login_btn0" width="85" label="{resourceManager.getString('rs', 'OK')}" tabIndex="4" toolTip="{resourceManager.getString('rs', 'eoso_message')}" click="this.userLogin()" cornerRadius="13"  x="57" y="160"/>
  <mx:Label id="tip" color="red" x="53" y="5"/>
  <mx:Label x="4" y="120" textAlign="right"  text="{resourceManager.getString('rs', 'AuthenticationCode')}" width="100"/>
  <mx:TextInput x="112" y="118" width="71" tabIndex="3" id="txtCheckCode" maxChars="4" />
  <mx:LinkButton x="191" y="118" toolTip="{resourceManager.getString('rs', 'eoso_message6')}"  width="71"  id="lblCheckCode" click="this.lblCheckCode.label=GenerateCheckCode();" fontSize="13" height="25"/>
  
  </mx:Panel>

  <mx:Text id="message" visible="false" verticalCenter="200" horizontalCenter="0" text="&#xa;"/>
</mx:Application>
注意蓝色部分。rs是资源文件名，后面一个是Key。怎么样。比较简单吧！

当然也遇到一些问题：

1.由于各国语言的长度不同，导致对齐是个问题，费了很大的功夫才保证了页面的美观。

2.本文所讲的国际化其实并不是完整的国际化。因为国际化并不仅仅指语言的国际化。还有其他很多方面要考虑。比如，日期的显示因国家不同而不同。欧美是月日年，中国是年月日。这一点足以说明国际化远非就是语言之间对等的翻译和切换。