diff --git a/pages/installing_new_languages.html b/pages/installing_new_languages.html index 3600788463..7e511c30e8 100644 --- a/pages/installing_new_languages.html +++ b/pages/installing_new_languages.html @@ -9,23 +9,24 @@ lastmod: 2014-12-10T00:00:00-00:00 --- -

Installing new languages

+

Internationalization

Introduction

- During the generation of a new project, JHipster only installs English and French languages. However, JHipster supports more languages that can be installed using this sub-generator. + During the generation of a new project you will be asked whether or not you want to enable internationalization support.

- The default language in JHipster is English, but this can be changed in the src/main/webapp/scripts/app/app.js, by modifying the following code: + If enabling it you will need to select the native language of your application. + After that you can choose the additional languages you would like to install. + If you don't want to support any additional languages from start you can always add languages later when needed by running the language sub-generator.

- $translateProvider.preferredLanguage('en');
- (using your preferred language's code instead of 'en'). + If you are sure you will never translate this application into another language you should not enable the internationalization.

-

Which other languages are supported out of the box?

+

Supported languages

-

By default we provide French and English, but you can add many more languages:

+

These are the currently supported languages

-

How to install new languages?

+

Does JHipster not support your language? Please help us with a PR!

+ + +

How to add languages after project generation?

- In order to install new languages, just type: + To do this you can run the languages sub-generator with:

@@ -65,45 +69,88 @@

How to install new languages?

+

+ Note that you will need to regenerate your entities if you would like to have them translated in the language you just added. +

-

How to create a new language that is not supported?

+

How to add a new language that is not supported?

- All languages are saved in the folder /src/main/webapp/i18n + All languages are saved in the folder src/main/webapp/i18n (client side) and src/main/resources/i18n (server side)

Here are the steps to install a new language called new_lang:

    -
  1. Duplicate the /src/main/webapp/i18/en folder to /src/main/webapp/i18/new_lang: this where all the front-end translations are stored
    2. -
  2. Translate all files under the folder /src/main/webapp/i18/new_lang
    3. +
  3. Duplicate the src/main/webapp/i18/en folder to src/main/webapp/i18/new_lang (this is where all the front-end translations are stored)
    4. +
  4. Translate all files under the folder src/main/webapp/i18/new_lang
  5. -

    Update the LANGUAGES constant defined in the folder src/main/webapp/components/language/language.service.js -
    to add the new language new_lang

    - 
    -        
-.constant('LANGUAGES', [
-  'en', 'fr', 'new_lang'
-  //JHipster will add new languages here
-]
-        
-
    +

    Add the languege code new_lang to the LANGUAGES constant defined in src/main/webapp/app/components/language/language.constants.js + 

    .constant('LANGUAGES', [
+    'en',
+    'fr',
+    'new_lang'
+    // jhipster-needle-i18n-language-constant - JHipster will add/remove languages in this array
+]
    6. -
  6. In the src/main/resources/i18n folder, copy the messages_en.properties file to messages_new_lang.properties: this where the server-side translations are stored
    7. +
  7. In the src/main/resources/i18n folder, copy the messages_en.properties file to messages_new_lang.properties (this is where the server-side translations are stored)
  8. Translate all keys in the messages_new_lang.properties file
    9. -
  9. Add the new language's name in the function of filter('findLanguageFromKey') in the src/main/webapp/scripts/components/language/language.controller.js file
    10. -
  10. If there's no pluralization function for the new_lang, under src/main/webapp/bower_components/messageformat/locale, you may need to create it. More info in [Angular translate](http://angular-translate.github.io/docs/#/guide/14_pluralization) and [MessageFormat](https://github.com/SlexAxton/messageformat.js)
    11. -
  11. Add the file with the pluralization function in src/main/webapp/index.html
    12. +
  12. +

    Add the new language's name in the function of filter('findLanguageFromKey') in the src/main/webapp/app/components/language/language.filter.js file

    + 
    function findLanguageFromKeyFilter(lang) {
+    return {
+        'ca': 'Català',
+        'da': 'Dansk',
+        'de': 'Deutsch',
+        'en': 'English',
+        'es': 'Español',
+        'fr': 'Français',
+        'gl': 'Galego',
+        'hu': 'Magyar',
+        'it': 'Italiano',
+        'ja': '日本語',
+        'ko': '한국어',
+        'nl': 'Nederlands',
+        'pl': 'Polski',
+        'pt-br': 'Português (Brasil)',
+        'pt-pt': 'Português',
+        'ro': 'Română',
+        'ru': 'Русский',
+        'sv': 'Svenska',
+        'ta': 'தமிழ்',
+        'tr': 'Türkçe',
+        'zh-cn': '中文（简体）',
+        'zh-tw': '繁體中文',
+        'new_lang': 'New Lang'
+    }[lang];
+}
    +
    13. +
  13. + If there's no pluralization function for the new_lang in folder src/main/webapp/bower_components/messageformat/locale you need to create it. + More info in Angular translate + and MessageFormat
    14. +
  14. +

    If the messageformat locale file exits in previous step add the file in bower.json

    + 
    "messageformat": {
+    "main": [
+        "messageformat.js",
+        "locale/en.js",
+        "locale/fr.js",
+        "locale/new_lang.js"
+    ]
+}
    +

    If the messageformat locale file does not exits in the previous step include the file manually in src/main/webapp/index.html

    +

- The new language new_lang is now available in the language menu, and is available both in the front-end AngularJS application and in the back-end Spring application. + The new language new_lang is now available in the language menu, and it is available both in the front-end AngularJS application and in the back-end Spring application.

How to remove an existing language?

Here are the steps to remove a language called old_lang:

    -
  1. Remove the language folder from /src/main/webapp/i18/old_lang
    2. -
  2. Remove the constant entry in src/main/webapp/scripts/components/language/language.service.js
    3. +
  3. Remove the language folder from src/main/webapp/i18/old_lang
    4. +
  4. Remove the constant entry in src/main/webapp/app/components/language/language.constants.js
  5. Remove the src/main/resources/i18n/messages_old_lang.properties file