Back
Overview | Project
i18n /

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=720px, user-scalable=no">
    <meta name="description" content="i18n sample application" />

    <title>i18n sample application</title>

    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body>
    <div id="main" class="page">
        <div class="header">
            <div class="language-indicator">
                Current language:
                <span id="current-language">English</span>
            </div>
            <div class="sample-text-box">
                <span id="hello-world">Hello world!</span>
            </div>
        </div>
        <div class="content">
            <div class="message-box-wrapper left">
                <div class="message-box">
                    <div class="message-header">
                        PETER
                    </div>
                    <div class="message-content">
                        Hi, I heard that you have developed an app that supports internationalization?
                    </div>
                </div>
            </div>
            <div class="message-box-wrapper right">
                <div class="message-box">
                    <div class="message-header">
                        JESSY
                    </div>
                    <div class="message-content">
                        That's right, the "Hello World!" text above is displayed in the current language.
                    </div>
                </div>
            </div>
            <div class="message-box-wrapper left">
                <div class="message-box">
                    <div class="message-header">
                        PETER
                    </div>
                    <div class="message-content">
                        Cool! How can I test it?
                    </div>
                </div>
            </div>
            <div class="message-box-wrapper right">
                <div class="message-box">
                    <div class="message-header">
                        JESSY
                    </div>
                    <div class="message-content">
                        You just need to go to the "Settings" app to the "Language and input" section. Then relaunch application.
                    </div>
                </div>
            </div>
            <div class="message-box-wrapper left">
                <div class="message-box">
                    <div class="message-header">
                        PETER
                    </div>
                    <div class="message-content">
                        Works well. How did you do it?
                    </div>
                </div>
            </div>
            <div class="message-box-wrapper right">
                <div class="message-box">
                    <div class="message-header">
                        JESSY
                    </div>
                    <div class="message-content">
                        It’s very easy in Tizen... In short, all you need is to create „locales” directory with subdirectories for each supported language.
                        Inside subdirectories create language.js file with definitions for localized strings (key-value pairs). That’s all... web
                        runtime will load the proper language.js file for the current locale.
                        Oh... and in your app files you should use LANG_JSON_DATA global object to get the translation.
                    </div>
                </div>
            </div>
            <div class="message-box-wrapper left">
                <div class="message-box">
                    <div class="message-header">
                        PETER
                    </div>
                    <div class="message-content">
                        You were right, It’s really simple. Good Job!
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- In the runtime this loads language.js file from locales/ directory depending on current phone language. -->
    <script src="language.js"></script>
    <script src="js/app.js"></script>
</body>

</html>