Skip to main content

Internationalization Support for APIManager apps

This requirement came from some of the users who are already using WSO2 API Manager product and from WSO2 AM 1.3.0 on wards [released on today],this feature has implemented.You can find WSO2 AM 1.3.0 binary pack from here.

Basically for the two apps [Publisher/Store] in WSO2 API Manager,now a developer can change app labels/messages according to the set language in the web browser.

From this blog-post,I'll explain the steps to localize publisher app to Spanish,which contains unicode charactors.

1. First set the browser language to your preferred language.
 Eg: In Google chrome navigate to Settings->Show advanced settings->;Languages and select your preferred language.

2. set the browser encoding type as UTF-8.

3. Then let's change the publisher app accordingly, Extract your downloaded pack and navigate to the deployed publisher app from the location "AM_Home}/repository/deployment/server/jaggeryapps/publisher".

4. We have kept two resource files to define Strings with key as one resource file [eg:locale_en.json] to store the Strings defined in .jag [jagggery] files according to browser locale,while another resource file called 'i18nResources.json' to store Strings defined in client side javascript files such as popping up message strings when an UI event triggerred. You can find the location for these two files from  the above publisher deployment folder with browsing through  'publisher/site/conf/locales'.



5. The jaggery related resource files are located at 'publisher/site/conf/locales/jaggery' folder while javascript resource file is located at   'publisher/site/conf/locales/js' folder.


6. Localize Strings defined in jaggery files

In this blogpost ,since we are going to localize the app with Spanish,first to localize Strings defined in jaggery files,you need to add a new file with your browser set locale value.Say your web browser langauge set to Spanish thus relevant locale code is 'es'. 
Then you have to create a new file called locale_{lolcaleCode}.json [Here that file has to name as locale_es.json] inside 'publisher/site/conf/locales/jaggery' folder  and add the key-value pairs.

Please refer the default resource file for jaggery,that we have added to same above location called 'locale_en.json' and how we have defined key-value pairs for Strings.Below is a part from locale_es.json file I created.


7. Localize Strings defined in client side javascript files

To localize the javascript UI messages,navigate to  'publisher/site/conf/locales/js  and update the json file called "i18nResources.json" with relevant values for the key strings.

That's all.Once you browse changed publisher app view with Spanish,it'll be as below.



Implementation Details
If you much familiar with jaggery apps,you may know that all the strings shown from the app,are defined in either server side jaggery files [.jag files] or in  client side javascript files [.js files]. 

To implement localization support for jaggery,we have used its inbuilt script module called 'i18n' and its functionalities.For more info refer http://jaggeryjs.org/apidocs/i18n.jag

To implement javascript localization support,we have used MIT licensed js plugin called 'i18next' support and it's inbuilt functions.For more info refer http://jamuhl.github.com/i18next/



Comments

  1. jrobinssJanuary 16, 2014 at 3:05 AM

    Hi Lalaji,
    Thanks for the info.
    You don't say, but...
    is there any place on the web where I could find files for each language? Or at least popular languages, such as Spanish, French, ertc?
    thanks!
    Julien Robinson

    ReplyDelete
  2. Lalaji SureshikaJanuary 16, 2014 at 3:58 AM

    Hi Julien,

    We default ship localization files for english and spanish in WSO2 APIM apps.If you want to provide support for other langauges like french in APIPublisher/Store,you have to customize the apps by adding new localize files to below four locations.

    To localize jaggery file included strings in publisher=>add new locale file for {AM_Homr}/repository/deployment/server/jaggeryapps/publisher/site/conf/locales/jaggery
    To localize jaggery file included strings in store=>add new locale file for {AM_Homr}/repository/deployment/server/jaggeryapps/store/site/conf/locales/jaggery

    To localize javascript file included strings in publisher=>add new locale file for {AM_Homr}/repository/deployment/server/jaggeryapps/publisher/site/conf/locales/js
    To localize javascript file included strings in store=>add new locale file for {AM_Homr}/repository/deployment/server/jaggeryapps/store/site/conf/locales/js

    ReplyDelete
  3. UnknownJune 24, 2016 at 6:33 AM

    Hello! For localization projects, I would recommend using a software localization tool like POEditor.

    ReplyDelete

Post a Comment

Popular posts from this blog

Convert an InputStream to XML

For that we can use DocumentBuilder class in java. By using the method parse(InputStream) ; A new DOM Document object will return. InputStream input; DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance(); DocumentBuilder parser = factory.newDocumentBuilder(); Document dc= parser.parse(input); In the above code segment,by using the created Document object,the corresponding XML file for the inputStream can be accessed. References: http://www.w3schools.com/dom/dom_intro.asp http:// download.oracle.com/javase/1.4.2/docs/api/javax/xml/parsers/DocumentBuilder.html
2 comments
Read more

CORS support from WSO2 API Manager 2.0.0

Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources  on a web page to be requested from another domain outside the domain from which the first restricted resource was served. For example, an HTML page of a web application served from http://domain-a.com makes an <img src >  request for a different domain as 'domain-b.com' to get an image via an API request.  For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts as in above example and only allows to make HTTP requests to its own domain. To avoid this limitation modern browsers have been used CORS standard to allow cross domain requests. Modern browsers use CORS in an API container - such as  XMLHttpRequest  or Fetch - to mitigate risks of cross-origin HTTP requests.Thing to  note is it's not only sufficient that the browsers handle client side of cross-origin sharing,but also the servers from which these resources getting need to handl
Post a Comment
Read more

[WSO2 AM] APIStore User Signup as an approval process

In previous versions of WSO2 APIManager before 1.6.0, it was allowed any user who's accessible the running APIStore come and register to the app.But there will be requirement like,without allowing any user to signup by him/her self alone,first get an approve by a privileged user and then allow to complete app registration.Same requirement can be apply to application creation and subscription creation as well.To fulfill that,we have introduced workflow extension support for  WSO2 APIManager  and you can find the introductory post on this feature from my previous blog post on " workflow-extentions-with-wso2-am-160 " . From this blog-post,I'll explain how to achieve simple workflow integration with default shipped resources with  WSO2 APIManager 1.6.0 and WSO2 Business Process Server 3.1.0 with targeting "user-signup" process. Steps First download the WSO2 APIManager 1.6.0[AM] binary pack from product download page . Extract it and navigate to
Post a Comment
Read more