Install the App?

Multilingual Application

ZnetDK for Mobile Multilingual Application
DESCRIPTION

Here is an example of a Web application whose display is translated into English, Spanish and Portuguese.

The source code can be adapted to translate the application into languages other than those offered.


PREREQUISITE The ZnetDK for Mobile Starter Application is installed and configured (go to the Get Started page and follow the given procedure).

STEPS Only 6 steps are required:
  • Step 1: Coding of the display language selection screen,
  • Step 2: Coding a multilingual data form,
  • Step 3: Displaying a multilingual content,
  • Step 4: Translating labels into three languages,
  • Step 5: Adding new items to the App's navigation menu,
  • Step 6: Configuring multilingual display.

DEMONSTRATION See live demo....

Step 1 - Coding the view lang.php

The view lang.php allows to select another language than the one currently set to display the application (English by default, see CFG_DEFAULT_LANGUAGE parameter).
This view must be installed into the INSTALL_DIR/applications/default/app/view/ folder.

  • The labels displayed for each button are defined via a PHP constant (for example MYLOCALE_BUTTON_LANG_ENGLISH) that contains the button text translated into the current display language. The PHP constants in charge of translating the labels of the application are defined in step 4.
  • When a button is clicked, the application is reloaded (via the locale.assign() JavaScript method) with the addition of the lang parameter of type GET to the URL and whose value corresponds to the code of the selected language (for example pt if Portuguese was clicked).
    The URL of the Web App is obtained by a call to the znetdkMobile.ajax.getParamsFromAjaxURL() method.

View lang.php

<div id="myapp-select-lang" class="w3-panel w3-stretch">
    <p>
        <button lang="en" class="w3-button w3-block w3-theme-d3">
            <i class="fa fa-fw fa-lg"></i>
            <b><?php echo MYLOCALE_BUTTON_LANG_ENGLISH; ?></b>
        </button>
    </p>
    <p>
        <button lang="es" class="w3-button w3-block w3-theme-d3">
            <i class="fa fa-fw fa-lg"></i>
            <b><?php echo MYLOCALE_BUTTON_LANG_SPANISH; ?></b>
        </button>
    </p>
    <p>
        <button lang="pt" class="w3-button w3-block w3-theme-d3">
            <i class="fa fa-fw fa-lg"></i>
            <b><?php echo MYLOCALE_BUTTON_LANG_PORTUGUESE; ?></b>
        </button>
    </p>
</div>
<script>
    console.log('View "lang.php"');
    /* Current display language is checked */
    var currentLang = $('html').attr('lang'),
        selectedButton = $('#myapp-select-lang button[lang=' + currentLang + ']');
    selectedButton.prop('disabled', true);
    selectedButton.find('i.fa').addClass('fa-check');

    /* Click event of a button */
    $('#myapp-select-lang button').on('click', function(){
        var newLang = $(this).attr('lang'),
            url = znetdkMobile.ajax.getParamsFromAjaxURL().url;
        znetdkMobile.browser.events.detachBeforeUnload();
        location.assign(url + '?lang=' + newLang);
    });
</script>
PHP HTM5 JS

Step 2 - Coding the view form.php

The view form.php illustrates the display of the same data form in several languages thanks to the PHP constants defined in step 4.
This view must be installed into the INSTALL_DIR/applications/default/app/view/ folder.

View form.php

<form class="w3-panel w3-stretch">
    <label><b><?php echo MYLOCALE_FORM_LABEL_MY_VALUE; ?></b></label>
    <input class="w3-input w3-border" placeholder="<?php echo MYLOCALE_FORM_PLACEHOLDER_MY_VALUE; ?>">
    <button class="w3-button w3-block w3-section w3-green"
        type="button" onclick="znetdkMobile.messages.showSnackbar('<?php echo MYLOCALE_FORM_BUTTON_SUBMIT; ?>')">
        <i class="fa fa-check fa-lg"> </i><?php echo MYLOCALE_FORM_BUTTON_SUBMIT; ?>
    </button>
</form>
PHP HTML5

Step 3 - Coding the views content_[LANG].php

Here are the three views content_en.php, content_es.php and content_pt.php which display the same text translated in the three languages supported by the application.
These views illustrate another way to translate a view in several languages.
They must be installed into the INSTALL_DIR/applications/default/app/view/ folder.

View content_en.php

<h2>Content</h2>
<p>Example of text content translated into the application display language.</p>
HTM5

View content_es.php

<h2>Contenido</h2>
<p>Ejemplo de contenido de texto traducido al idioma de visualización de la aplicación.</p>
HTM5

View content_pt.php

<h2>Contente</h2>
<p>Exemplo de conteúdo de texto traduzido para o idioma de exibição do aplicativo.</p>
HTM5

Step 4 - Translating the labels in locale_[LANG].php

The three scripts locale_en.php, locale_en.php and locale_en.php are created from the INSTALL_DIR/applications/default/app/lang/locale.php script supplied with the Starter Application.
Each script contains the definition of PHP constants which translate the labels of the application into a specific language.
These scripts must be installed into the INSTALL_DIR/applications/default/app/lang/ folder.

View locale_en.php

<?php
/**
* ZnetDK, Starter Web Application for rapid & easy development
* See official website http://www.znetdk.fr
* ------------------------------------------------------------
* Custom english labels of your application
* YOU CAN FREELY CUSTOMIZE THE CONTENT OF THIS FILE
*/

/* General labels */
define('LC_PAGE_TITLE', 'ZnetDK 4 Mobile');

/* Heading labels */
define('LC_HEAD_TITLE', 'Starter App');

/* Heading images */
//define('LC_HEAD_IMG_LOGO', ZNETDK_APP_URI.'images/logo.png');

/* Footer labels */
define('LC_FOOTER_LEFT', 'Version 1.0');
define('LC_FOOTER_CENTER', 'Developed with ZnetDK');
define('LC_FOOTER_RIGHT', '&copy; 2021');

/* Custom labels */
define('MYLOCALE_MENU_HOME', 'Home');
define('MYLOCALE_MENU_LANG', 'Language');
define('MYLOCALE_MENU_FORM', 'Form');
define('MYLOCALE_MENU_CONTENT', 'Content');

define('MYLOCALE_BUTTON_LANG_ENGLISH', 'English');
define('MYLOCALE_BUTTON_LANG_SPANISH', 'Spanish');
define('MYLOCALE_BUTTON_LANG_PORTUGUESE', 'Portuguese');

define('MYLOCALE_FORM_LABEL_MY_VALUE', 'My value');
define('MYLOCALE_FORM_PLACEHOLDER_MY_VALUE', 'Enter a value...');
define('MYLOCALE_FORM_BUTTON_SUBMIT', 'Submit');
PHP

View locale_es.php

<?php
/**
* ZnetDK, Starter Web Application for rapid & easy development
* See official website http://www.znetdk.fr
* ------------------------------------------------------------
* Custom english labels of your application
* YOU CAN FREELY CUSTOMIZE THE CONTENT OF THIS FILE
*/

/* General labels */
define('LC_PAGE_TITLE', 'ZnetDK 4 Mobile');

/* Heading labels */
define('LC_HEAD_TITLE', 'Aplicación de inicio');

/* Heading images */
//define('LC_HEAD_IMG_LOGO', ZNETDK_APP_URI.'images/logo.png');

/* Footer labels */
define('LC_FOOTER_LEFT', 'Versión 1.0');
define('LC_FOOTER_CENTER', 'Desarrollado with ZnetDK');
define('LC_FOOTER_RIGHT', '&copy; 2021');

/* Custom labels */
define('MYLOCALE_MENU_HOME', 'Página de inicio');
define('MYLOCALE_MENU_LANG', 'Idioma');
define('MYLOCALE_MENU_FORM', 'Formulario');
define('MYLOCALE_MENU_CONTENT', 'Contenido');

define('MYLOCALE_BUTTON_LANG_ENGLISH', 'Inglés');
define('MYLOCALE_BUTTON_LANG_SPANISH', 'Español');
define('MYLOCALE_BUTTON_LANG_PORTUGUESE', 'Portugués');

define('MYLOCALE_FORM_LABEL_MY_VALUE', 'Mi valor');
define('MYLOCALE_FORM_PLACEHOLDER_MY_VALUE', 'Ingrese un valor...');
define('MYLOCALE_FORM_BUTTON_SUBMIT', 'Enviar');
PHP

View locale_pt.php

<?php
/**
* ZnetDK, Starter Web Application for rapid & easy development
* See official website http://www.znetdk.fr
* ------------------------------------------------------------
* Custom english labels of your application
* YOU CAN FREELY CUSTOMIZE THE CONTENT OF THIS FILE
*/

/* General labels */
define('LC_PAGE_TITLE', 'ZnetDK 4 Mobile');

/* Heading labels */
define('LC_HEAD_TITLE', 'Aplicativo inicial');

/* Heading images */
//define('LC_HEAD_IMG_LOGO', ZNETDK_APP_URI.'images/logo.png');

/* Footer labels */
define('LC_FOOTER_LEFT', 'Versão 1.0');
define('LC_FOOTER_CENTER', 'Desenvolvido with ZnetDK');
define('LC_FOOTER_RIGHT', '&copy; 2021');

/* Custom labels */
define('MYLOCALE_MENU_HOME', 'Pagina inicial');
define('MYLOCALE_MENU_LANG', 'Língua');
define('MYLOCALE_MENU_FORM', 'Forma');
define('MYLOCALE_MENU_CONTENT', 'Contente');

define('MYLOCALE_BUTTON_LANG_ENGLISH', 'Inglês');
define('MYLOCALE_BUTTON_LANG_SPANISH', 'Espanhol');
define('MYLOCALE_BUTTON_LANG_PORTUGUESE', 'Português');

define('MYLOCALE_FORM_LABEL_MY_VALUE', 'Meu valor');
define('MYLOCALE_FORM_PLACEHOLDER_MY_VALUE', 'Insira um valor...');
define('MYLOCALE_FORM_BUTTON_SUBMIT', 'Enviar');
PHP

Step 5 - Link the views to the navigation menu

Finally, to give users access to the views of the application, menu items are declared into the menu.php script of the Web App (see Get Started | New menu items for more information).

The menu.php script is located into the INSTALL_DIR/applications/default/app/ folder.

Script menu.php

static public function initAppMenuItems() {
    
    // ... Here, some menu items...
    
    \MenuManager::addMenuItem(NULL, '_home', MYLOCALE_MENU_HOME, 'fa-home');
    \MenuManager::addMenuItem('_home', 'lang', MYLOCALE_MENU_LANG, 'fa-language');
    \MenuManager::addMenuItem('_home', 'form', MYLOCALE_MENU_FORM, 'fa-keyboard-o');
    \MenuManager::addMenuItem('_home', 'content', MYLOCALE_MENU_CONTENT, 'fa-newspaper-o');
    
    // ... Here, other menu items...
    
}
PHP

Step 6 - Activate multilingual display in config.php

Multilingual display is enabled by declaring the CFG_MULTI_LANG_ENABLED parameter into the config.php script located into the INSTALL_DIR/applications/default/app/ folder.

The line below can be inserted anywhere in the config.php script.

Script config.php

define('CFG_MULTI_LANG_ENABLED', TRUE);
PHP

Search

Sort order