--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+ <script type="text/javascript" src="../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+ <title>Web Localization</title>
+ </head>
+ <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="toc-navigation">
+</div>
+<div id="container"><div id="contents"><div class="content">
+ <div id="profile">
+ <p><img alt="Mobile Web" src="../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
+ </div>
+
+ <h1>Web Localization</h1>
+ <p>Web Localization is a view-based tool which helps you localize strings, resources, and contents of Tizen web project. The view offers the <a href="#folder-based localization">folder-based localization</a>, by which you can easily localize your project.
+</p>
+ <h2>Starting Web Localization</h2>
+ <p>Right-click the selected project in the <strong>Project Explorer</strong>, and then click <strong>Localization</strong>.</p>
+ <p class="figure">Figure 1. How to open Web Localization</p>
+ <p align="center"><img alt="Open Web Localization" src="../images/lv_open.png" /></p></li>
+ <h2>Managing Locale</h2>
+ <p>To localize strings and resource contents, you should select the specific locale(s) in the <strong>Overview</strong> tab first.</p>
+ <ul>
+ <li>In the <strong>Overview</strong> tab, click the <strong>Add locale(s)</strong> button, then the <strong>New Target Locale</strong> dialog appears.
+ <p class="figure">Figure 2. Web Localization View</p>
+ <p align="center"><img alt="Add locale(s)" src="../images/lv_add_locale.png" /></p></li>
+ <li>In the <strong>Locale</strong> table, choose the locale you want.
+ <p class="figure">Figure 3. New Target Locale Dialog</p>
+ <p align="center"><img alt="Locale Dialog" src="../images/lv_locale_dialog.png" /></p></li>
+ <li><strong>Overview</strong> tab shows selected target locale information.
+ <p class="figure">Figure 4. Locale information</p>
+ <p align="center"><img alt="Locale information" src="../images/lv_target_locale.png" /></p></li>
+ <li>The container named "locales" is created for localized contents. Under the container, a sub-folder for locale is added when you set the locale(for example, "/locales/en-us", "/locales/zn-cn").</li>
+ </ul>
+ <h2>Localizing String</h2>
+ <p>In the <strong>String</strong> tab, you can localize strings and handle them.</p>
+ <ul>
+ <li>Click the <strong>Add Localization</strong> button on the toolbar, then the <strong>New Localization</strong> dialog appears.
+ <p class="figure">Figure 5. Add Localization</p>
+ <p align="center"><img alt="Add Localization" src="../images/lv_add_localization.png" /></p></li>
+ <li>In the dialog, enter the identifier for localized string contents. And enter the value for default and values for locale you specified in the <strong>Locale-Value</strong> table. You now should be able to click <strong>OK</strong> to save the localized string contents.
+ <p class="figure">Figure 6. String Localization</p>
+ <p align="center"><img alt="String Localization" src="../images/lv_string.png" /></p></li>
+ <li>You can add the item to the table or remove the item on the table, and change the view criteria of the table between 'ID' and 'Locale'.
+ <p class="figure">Figure 7. Criteria Change</p>
+ <p align="center"><img alt="Change View" src="../images/lv_view_change.png" /></p></li>
+ <li>When you have finished the localization of the string, in the application's top-level folder and each locale folder under <strong>locales</strong>, <strong>language.js</strong> which contains the localized string contents is created.
+ <p class="figure">Figure 8. language.js</p>
+ <p align="center"><img alt="language.js" src="../images/lv_js_file.png" /></p></li>
+ <li>Then <script> element, of which a src attribute is <strong>language.js</strong>, is added to the <strong>index.html</strong>.</li>
+ <p class="figure">Figure 9. src element in index.html</p>
+ <p align="center"><img alt="src element in index.html" src="../images/lv_js_index.png" /></p></li>
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">Please see the instruction page about using localized string contents in <strong>Guides > Web Application > Tizen Features > Localization</strong></td>
+ </tr>
+ </tbody>
+ </table>
+ </ul>
+
+ <h2>Localizing Resource</h2>
+ <p>With the view, you can localize resource files such as images, sound, video, HTML, and JavaScript more efficiently.</p>
+ <p><strong>Resource</strong> tab displays the resources of the project as a tile form.</p>
+ <p class="figure">Figure 10. Resource tab</p>
+ <p align="center"><img alt="Resource tab" src="../images/lv_resource_tab.png" /></p>
+
+ <p>If a resource is not localized, the plus button appears on the resource tile. To localize the resource, do the followings:</p>
+ <ul>
+ <li>Click the plus button on the resource tile, then <strong>Select a file to set</strong> dialog appears.</li>
+ <li>In the dialog, select new resource to replace the default resource.</li>
+ </ul>
+
+ <p class="figure">Figure 11. Select new resource</p>
+ <p align="center"><img alt="Resource setting" src="../images/lv_resource_tab2.png" /></p>
+
+ <p>Then the complex folder structures are created and the names of the resource files are replaced.</p>
+
+ <h2 id="folder-based localization" name="folder based">Folder-based Localization</h2>
+
+<p>Localization is the process of adapting an application to suit a specific culture. Localization makes the application access different resources without source code changes. Folder-based localization places the resources inside locale folders of which names are determined by region codes such as "en-us", "ko-kr", and so on. The locale folders are located under the container folder named "locales". The localized resources are used depending on the location settings of the device. If there is no localized resource, the default resource is used.</p>
+<p>See the example below. If the locale of a device is "ko-kr", "images/a.png" and "images/c.png" are replaced with "locales/ko-kr/images/a.png" and "locales/ko-kr/images/c.png" each. However "images/b.png" is not replaced because there is no replaceable resource in "locales/ko-kr/images/".</p>
+<pre class="prettyprint">
+root/
+ images/
+ a.png
+ b.png
+ c.png
+ locales/
+ ko-kr/
+ images/
+ a.png
+ c.png
+</pre>
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
projects / sdk / online-doc.git / commitdiff
