Using DECJ to simplify Web front-end development (iii) declarative internationalization

Introduction

This issue will cover DECJ internationalization (i18n) support, including declarative multilanguage support and declarative CSS file dynamic on-demand loading.

Declarative CSS files loaded on demand

Using the DECJ framework, developers simply declare each CSS file required by the module in the module definition to enable the CSS to be loaded dynamically when the module is loaded without having to add a link tag to the page to refer to each CSS file.

module-defined CSS properties are used to declare individual CSS files required by the module. The property value is an array of strings whose elements are the URLs of the CSS files to be loaded. If you only need to load a CSS file, the value of the CSS property can also be a string. As shown in Listing 19:

Listing 19. Loading using DECJ's declarative CSS file

css:["Dialog.css", "Menu.css"]

DECJ when you actually load a module-defined CSS file, you can load the corresponding CSS file based on the current locale. For example, "DIALOG.CSS" is specified in Listing 19, and a file named "Dialog-zh_cn.css" will be loaded when DECJ the current locale is "ZH_CN" according to its algorithm. This allows different page styles to be used in different languages when the page is displayed in a multilingual situation.

DECJ also supports the load of CSS files hosted on other domains, that is, the implementation of Cross-domain CSS file loading, which supports CDN (Content Delivery Network). For CSS files that are in the same domain as the paging file, DECJ is loaded with Ajax. And for the page file in a different domain name CSS file (external CSS file), DECJ will use the way link element dynamic loading.

However, because most browsers do not support events that indicate that the link element has loaded its contents, such as onload, onreadystatechange, and so on, DECJ needs some "hint" information to help it verify that an external CSS file is loaded. To do this, the tail of each external CSS file needs to add a special CSS rule called Loadclue. The selector for the Loadclue rule must be an ID selector, and it cannot be the same as the selector in other CSS files that the current module is dynamically loading. Therefore, the name of the Loadclue rule is usually the same as the short file name of the CSS file in which it resides (not including the string representing the locale) plus "-clue". The declaration part of the Loadclue rule needs to contain "Display:none". For example, there is an external CSS file URL "http://cdn.site.com/css/dialog-zh_CN.css", then the end of the CSS file needs to add a selector for the "#dialog-clue" loadclue rules, As shown in Listing 20:

Listing 20. The "hint" required to load an external CSS file

#dialog-clue{
display:none;
}

If the selector name of the Loadclue rule is different from the text name of the CSS file in which it resides, then when you declare the CSS file in the module definition, you need to append the name of the selector at the end of the corresponding URL. As shown in Listing 21:

Listing 21. Add "hint" after the external CSS file URL

css:["Http://cdn.site.com/css/dialog-zh_CN.css#dialog-LoadClue"]

Declarative Multi-language support

Using the DECJ framework to develop Web applications that support multiple languages, developers do not need to write cumbersome code. Only the following 3 steps are required to achieve this.

The first step is to create a resource file. In the DECJ framework, the resource file is actually a JavaScript module. The file name of the resource file needs to contain the corresponding locale. For example, a file name for a resource file that applies to the Chinese Simplified Chinese language (the corresponding locale zh_cn) should contain "ZH_CN", such as "Userinfo-zh_cn.js". Listing 22 shows the contents of the sample resource file Userinfo-zh_cn.js. When saving a resource file, note that the text encoding of the file is set to UTF-8 to avoid garbled problems when the related strings appear on the page.

Listing 22. Use DECJ to define resource files---Chinese

Define ({
  "Expertise-area": "Areas of expertise",
  "FirstName": "Name",
  "LastName": "Last Name"
});

Add a resource file named "Userinfo-en_us.js" for English, as shown in Listing 23:

Listing 23. Use DECJ to define resource files---English

Define ({
  "Expertise-area": "Expertise Area",
  "FirstName": "The name of",
  "LastName": "Last Name"
});

2nd step. Declare the resource file that the module needs to reference in the module definition. The resources attribute defined by the module is used to declare individual resource files required by the module. The value of the resources property is an array. Each element of the array is the URL of the resource file required by the module. When you declare the URL of a resource file, you do not need to specify the locale part of the file name (such as "-ZH_CN") because DECJ automatically loads the corresponding locale resource file based on the language settings of the current browser. As shown in Listing 24 code:

Listing 24. Declaring a resource file in a module definition

define ([' jquery ', ' DECJ '],function (JQUERY,DECJ) {
  //...
  ) return {
      //...
     resources:[' Res/userinfo ', ' res/anotherres ']
      //...
  };

3rd step. Use the string defined in the resource file in the module page. Using a string defined in a resource file in a page only requires a class named "res" or "res-replace" to be added to the class attribute value of the relevant HTML element, and the element label content is set to resource key. As shown in the HTML code in Listing 25:

Listing 25. Using resource strings in module pages

<label>
    <label class= "Res-replace" >firstname</label>
    <input name= "FN" type= "text" Value= "FirstName" title= "FirstName"/> </label><br/>
  <label>
    <label class= " Res-replace ">lastname</label>
    <input name=" LastName "type=" text "value=" LastName "title=" LastName " />
  </label><br/>

  <label>
    <label class= "Res-replace" >expertise-area</ label><br/>
    <select multiple= "true" name= "expertise" >
      <option value= "java" >java </option>
      <option value= "cpp" >C++</option>
      <option value= "Javascript" > javascript</option>
      <option value= "Design-pattern" >design pattern</option>
      < Option value= "Oracedb" >oracle database</option>
      <option value= "CSS" >CSS</option>
      <option value= "html" >html</option>
    </select>
  </label>