Topic
  • 2 replies
  • Latest Post - ‏2013-11-19T08:36:13Z by FadyRamzy
FadyRamzy
FadyRamzy
29 Posts

Pinned topic Question about Localization in RUI ?

‏2013-11-08T11:59:39Z |

Dear All,

I want to create an RUI project, the user interface should be localized to different languages (English, French and Arabic)

based on the language RUI should read from a .properties file and load the value in runtime

for example if the locale is English, RUI should go and get the English value "Submit" and assign to the submit button and if the locale is French RUI should get the value "soumettre" from the properties file

my questions:

1- From RUI, how to Query the browser locale or machine locale to know the user's language settings

2- What are the steps to create  the properties file? and how to read the values in RUI in runtime?

3- How should it be, a single properties file or a separate properties file for each language?

 

Thank you very much in advance :)

Updated on 2013-11-19T08:36:41Z at 2013-11-19T08:36:41Z by FadyRamzy
  • Smyle Z. Huang
    Smyle Z. Huang
    13 Posts
    ACCEPTED ANSWER

    Re: Question about Localization in RUI ?

    ‏2013-11-12T06:16:13Z  

    Hi,

    For the question 1, looks like you can't directly get these values in EGL, if there is such a method, pls correct me. However it is easy to handle it through a customized external type through several lines of codes. Here is what I did for it:

    1. Create a new EGL source file called localeHelper in a package nls, copy & paste code snippet below to it.
    ------
    externalType localeHelper type JavaScriptObject{relativePath = "msg", javaScriptName = "localeHelper"}
    function getEGLHandlerLocale() returns (String);
    function getBrowserLocale() returns (String);
    end

    -----
    2. Create a JavaScript file to the folder WebContent/msg as indicated by the external type localeHelper, copy & pase code snippet below to it.
    -----
    egl.defineClass("msg", "localeHelper", {
    "getEGLHandlerLocale" : function(widget) { return egl__htmlLocale; },
    "getBrowserLocale" : function(){ return navigator.language || navigator.browserLanguage || navigator.systemLanguage || navigator.userLanguage; }
    });

    -----
    Now you can freely get the locale of your EGL RUI handler or the browser locale. Here is a sample:
    _localeHelper localeHelper{};
    writestdout( "Browser Locale: "+_localeHelper .getBrowserLocale() + ", EGL RUIHandler Locale: " + _localeHelper .getEGLHandlerLocale() );

    For the question 2&3, a property typically consists of two files, the EGL declaration file and *.properties content file. To create a property file:
    Firstly create an EGL source file, for example nls.egl, copy & paste code snippet below to it
    library nls type RUIPropertiesLibrary
    hello string;
    end

    Secondly, you need to create *.properties content file accordingly under WebContent/properties folder. The name convention of the *.properties files are ${EGLPropertyName}-${LocaleCode}.properties. The EGL property name here is nls. The locale code is the language code you want to add. For example, English code is en_US. If you are not sure about the locale code. You can look it up in the locale settings section of your RUI deployment editor. The RUI editor can opened up by double click the .egldd file in your RUI project. Switch to the Rich UI Deployment tab, you will find the locale settings section.

    Now assume you want to add french support. You need to create a nls-fr_FR.properties to the WebContent/properties folder. Then in the content file add which property to be localized. Here is an example:
    hello=Bonjour!
    And the default english property file nls-en_US.properties may look like:
    hello=Hello!

    Ok, it is time to use it. Firstly we will have a RUI handler:
    ----
    handler nlsResources type RUIhandler {initialUI = [ TextLabel1, TextLabel2 ],onConstructionFunction = start, cssFile="css/RUI.css", title="nlsResources"}
    TextLabel1 TextLabel{ text="NLS Say: ", style="display:inline; margin-right:5px;" };
    TextLabel2 TextLabel{ style="display:inline;"  };
    localeHelper localeHelper{};
    function start()
    TextLabel2.text = nls.hello;
    writestdout( "Browser Locale: "+localeHelper.getBrowserLocale() + ", EGL RUIHandler Locale: " + localeHelper.getEGLHandlerLocale() );
    end
    end

    ----
    Then before deploy it to a web project, in the locale section referred above, ensure the English, French options are all checked. After deploy and run it on a web server, the rendering result of nlsResources-en_US.html will look like:
    NLS Say: Hello!
    --------------------------------------------------------------------------------
    Browser Locale: en-us, EGL RUIHandler Locale: en_US

    The rendering result of nlsResources-fr_FR.html will look like:
    NLS Say: Bonjour!
    --------------------------------------------------------------------------------
    Browser Locale: en-us, EGL RUIHandler Locale: fr_FR

    If you want to directly preview the NLS effect in VE instead after deployment. You can modify your language preference by open Window>Preference, in the preference dialog, navigate to EGL > Rich UI > Appearance, go to the languages tab, and in the selection list of Rich UI handler locale, select french for example. All the french NLS resources will be loaded when you are working in your visual editor.

    For your reference, I attached my sample project here.

    Regards,

    Smyle

    Attachments

  • FadyRamzy
    FadyRamzy
    29 Posts
    ACCEPTED ANSWER

    Re: Question about Localization in RUI ?

    ‏2013-11-19T08:36:13Z  

    https://www.ibm.com/developerworks/community/forums/html/topic?id=77777777-0000-0000-0000-000014814142&ps=25

  • Smyle Z. Huang
    Smyle Z. Huang
    13 Posts

    Re: Question about Localization in RUI ?

    ‏2013-11-12T06:16:13Z  

    Hi,

    For the question 1, looks like you can't directly get these values in EGL, if there is such a method, pls correct me. However it is easy to handle it through a customized external type through several lines of codes. Here is what I did for it:

    1. Create a new EGL source file called localeHelper in a package nls, copy & paste code snippet below to it.
    ------
    externalType localeHelper type JavaScriptObject{relativePath = "msg", javaScriptName = "localeHelper"}
    function getEGLHandlerLocale() returns (String);
    function getBrowserLocale() returns (String);
    end

    -----
    2. Create a JavaScript file to the folder WebContent/msg as indicated by the external type localeHelper, copy & pase code snippet below to it.
    -----
    egl.defineClass("msg", "localeHelper", {
    "getEGLHandlerLocale" : function(widget) { return egl__htmlLocale; },
    "getBrowserLocale" : function(){ return navigator.language || navigator.browserLanguage || navigator.systemLanguage || navigator.userLanguage; }
    });

    -----
    Now you can freely get the locale of your EGL RUI handler or the browser locale. Here is a sample:
    _localeHelper localeHelper{};
    writestdout( "Browser Locale: "+_localeHelper .getBrowserLocale() + ", EGL RUIHandler Locale: " + _localeHelper .getEGLHandlerLocale() );

    For the question 2&3, a property typically consists of two files, the EGL declaration file and *.properties content file. To create a property file:
    Firstly create an EGL source file, for example nls.egl, copy & paste code snippet below to it
    library nls type RUIPropertiesLibrary
    hello string;
    end

    Secondly, you need to create *.properties content file accordingly under WebContent/properties folder. The name convention of the *.properties files are ${EGLPropertyName}-${LocaleCode}.properties. The EGL property name here is nls. The locale code is the language code you want to add. For example, English code is en_US. If you are not sure about the locale code. You can look it up in the locale settings section of your RUI deployment editor. The RUI editor can opened up by double click the .egldd file in your RUI project. Switch to the Rich UI Deployment tab, you will find the locale settings section.

    Now assume you want to add french support. You need to create a nls-fr_FR.properties to the WebContent/properties folder. Then in the content file add which property to be localized. Here is an example:
    hello=Bonjour!
    And the default english property file nls-en_US.properties may look like:
    hello=Hello!

    Ok, it is time to use it. Firstly we will have a RUI handler:
    ----
    handler nlsResources type RUIhandler {initialUI = [ TextLabel1, TextLabel2 ],onConstructionFunction = start, cssFile="css/RUI.css", title="nlsResources"}
    TextLabel1 TextLabel{ text="NLS Say: ", style="display:inline; margin-right:5px;" };
    TextLabel2 TextLabel{ style="display:inline;"  };
    localeHelper localeHelper{};
    function start()
    TextLabel2.text = nls.hello;
    writestdout( "Browser Locale: "+localeHelper.getBrowserLocale() + ", EGL RUIHandler Locale: " + localeHelper.getEGLHandlerLocale() );
    end
    end

    ----
    Then before deploy it to a web project, in the locale section referred above, ensure the English, French options are all checked. After deploy and run it on a web server, the rendering result of nlsResources-en_US.html will look like:
    NLS Say: Hello!
    --------------------------------------------------------------------------------
    Browser Locale: en-us, EGL RUIHandler Locale: en_US

    The rendering result of nlsResources-fr_FR.html will look like:
    NLS Say: Bonjour!
    --------------------------------------------------------------------------------
    Browser Locale: en-us, EGL RUIHandler Locale: fr_FR

    If you want to directly preview the NLS effect in VE instead after deployment. You can modify your language preference by open Window>Preference, in the preference dialog, navigate to EGL > Rich UI > Appearance, go to the languages tab, and in the selection list of Rich UI handler locale, select french for example. All the french NLS resources will be loaded when you are working in your visual editor.

    For your reference, I attached my sample project here.

    Regards,

    Smyle

    Attachments

  • FadyRamzy
    FadyRamzy
    29 Posts

    Re: Question about Localization in RUI ?

    ‏2013-11-19T08:36:13Z  

    https://www.ibm.com/developerworks/community/forums/html/topic?id=77777777-0000-0000-0000-000014814142&ps=25