Web Localization

The Web Localization view in the IDE is a tool which helps you localize strings, resources, and content of a Tizen Web project. The view offers folder-based localization, which allows you to easily localize your project.

To start the tool, right-click the selected project in the Project Explorer view and select Localization.

Figure: Opening the Web Localization view

Managing Locales

To manage localized strings and resource content, you must add the locale you need in the Overview tab:

1. Click Add locale(s).

   

2. In the New Target Locale table, select the locale you want.

   

   The Overview tab shows the selected target locale information.

   

A container named locales is created for the localized content. Under the container, a subfolder for a locale is added when you set a locale, for example, /locales/en-us and /locales/zn-cn.

Localizing Strings

To localize and handle strings, use the String tab:

1. To add a localized string, click Add Localization on the toolbar.

   

2. In the New Localization dialog, enter the identifier for the localized string content. In the table, enter values for the default locale and all the locales you have specified in the Overview tab.

   Figure: String localization

   

3. To save the localized string content, click OK.

   The String tab shows the defined strings.

   

   You can add more items to the table or remove them, as needed. You can also change the table tab configuration between ID and Locale.

When you have finished the localization of the string:

• language.js file is created in the application's top-level folder and each locale folder under locales, containing the localized string content.

  Figure: language.js

  

• The <script> element, whose src attribute is language.js, is added to the index.html file.

  Figure: src element in index.html

  

Note
For more information about using localized string content, see Localization.

Localizing Resources

In the Resource tab, you can localize resource files, such as images, sound, video, HTML, and JavaScript more efficiently. The Resource tab displays the resources of the project in a tile form.

Figure: Resource tab

If a resource is not localized, the plus button appears on the resource tile. To localize the resource:

1. Click the plus button on the resource tile.
2. In the Select a file to set dialog, select a new resource to replace the default resource, and click OK.

   

   The complex folder structures are created and the names of the resource files are replaced.

Folder-based Localization

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 with names determined by region codes, such as en-us and ko-kr. The locale folders are located under a container folder named locales. The localized resources are used depending on the location settings of the device. If there are no localized resources, the default resource is used.

For example, if the locale of a device is ko-kr, the images/a.png and images/c.png images are replaced with the locales/ko-kr/images/a.png and locales/ko-kr/images/c.png images. However, the images/b.png image is not replaced, because there is no applicable resource in the locales/ko-kr/images/ folder.

root/
   images/
      a.png
      b.png
      c.png
   locales/
      ko-kr/
         images/
            a.png
            c.png