Multi-language support in jQueryMobile

With the popularization of mobile technology, jQueryMobile, a JavaScript framework based on jQuery and targeting mobile platforms, came into being. JQueryMobile not only inherits many advantages of jQuery, but also customizes many skin and development components on the mobile platform, greatly reducing... syntaxHighlighter. all (); With the popularization of Mobile technology, jQuery Mobile, a JavaScript framework based on jQuery, came into being. JQuery Mobile not only inherits many advantages of jQuery, but also customizes many skin and development components on the Mobile platform, greatly reducing the workload of developers. With the increasing improvement of HTML5 technology and the cross-platform features of JavaScript technology, jQuery Mobile or similar frameworks will inevitably have a wider market, this is evident in Adobe's decision to abandon mobile Flash and Microsoft's marginalized SilverLight.

 

Although jQuery Mobile is very comprehensive and powerful, it unexpectedly does not provide a set of standard methods to support multi-language processing. Multi-language support is required for a large website, especially enterprise-level global websites. Many other frameworks such as Dojo have built-in support for this function. In view of this, this article will discuss how to provide a simple and effective method for jQuery Mobile multi-language support. This method is based on the traditional multi-language support method implemented on the server and the method supported by Dojo on multiple enterprise websites.

This article assumes that the reader has some knowledge and experience on jQuery and jQuery Mobile, and has a considerable understanding of HTML5 and CSS3. Therefore, the specific API of the above technology will not be described in detail. If you have any questions, please refer to the relevant documents or contact the author. At the end of this article, we will provide the program source code used in this article.

Basic Ideas

To put it simply, multi-language support is to create a ing table for all the words that can be found on the website, and display different values corresponding to the same keyword based on the user's language selection. Multi-language support is a problem that needs to be considered at the initial stage of website development, because the ing table will contain the text content of the entire website, if you decide to create and use such a ing table during the development process, it will take a lot of time to modify the completed webpage, which does not include the time for retesting.

Our basic ideas can be summarized as follows:

1. Create a ing table

   As mentioned above, the ing table will contain all the text content used by the website. Before any page is created, the ing table should already exist, to provide the required text for the page. Because the ing table needs to be read by jQuery on the client, we recommend that you create the ing table in XML or JSON format.

2. Insert a new tag for the HTML page of jQuery Mobile

   JQuery Mobile itself does not support multiple languages. Therefore, we need a new tag to indicate that the HTML content needs to be replaced by the content in the ing table, and what is the corresponding keyword of the content. This tag can be any non-HTML Tag value, such as langID.

3. Insert the text content of the ing table during the creation of the jQuery Mobile Page

   Different from jQuery Mobile, jQuery's page creation process contains multiple different stages, such as pagebeforecreate, pagecreate, and pageinit. In general, we will modify HTML content in pageinit or add the event processing method. However, the content of the ing table must be replaced before pageinit. In pageinit, jQuery Mobile has already created various components. Modifying the HTML content directly at this time will cause the created parts to fail to be displayed normally.

4. Process Dynamic Content of jQuery Mobile

   Many jQuery Mobile components contain special text, such as the prompt information in an input box, which is not directly reflected in HTML, or cannot be simply replaced, at this time, you need to use JavaScript programs to modify such content.

Procedure

Next we will use jQueryMobile to create a login interface to explain the four steps mentioned above. Each step also contains a screenshot of the sample effect.

1. Create a ing table

   As mentioned above, the ing table can be in XML or JSON format to facilitate jQuery reading. In our example, we recommend using the JSON format, which is not only easy to read, but also convenient for direct use as an object in JavaScript programs.

   In our example, both Chinese and English languages are supported. Therefore, we will create two ing tables, corresponding to Chinese and English respectively. In fact, you can also put all languages into one ing table. However, for ease of management and prevention of too large ing tables, we recommend that you use different ing table files to correspond to different languages.

   On the logon page, we need to display the following Chinese and English texts:

   • The title of the logon interface,For example, Login/Login
   • Introduction to the logon interface,For example, enter your username and password/Please provide your username and password
   • User name tag,For example: User Name/User Name
   • Password tag,For example: Password/Password
   • Login button tag,For example, Login/Login

   In this case, our ing table will display the following content:

   Listing 1. Chinese ing table text_cn.json

   {"Login": {"Title": "Login", "Description": "Enter your username and password", "Lable_User_Name": "username", "Label_Password ": "password", "Label_Login_button": "Logon", "Tip_User_Name": "mobile phone number or email address "}}

   Listing 2. English ing table text_en.json

   {"Login" : {"Title" : "Login","Description" : "Please provide your username and password", "Lable_User_Name" : "User Name", "Label_Password" : "Password", "Label_Login_button" : "Login", "Tip_User_Name" : "Mobile number or email address"}}

   Note that the keys of the two ing tables must be consistent.

2. Insert a new tag

   First, we will use jQuery Mobile to create a simple logon interface, which consists of two input box parts and one button component, including the header and introduction content. The HTML content is as follows:

   Header

   Title

   Introduction

   Description

   Username and password input box

   User Name LabelPassword Label

   Logon button

   Login Button

   We want this logon interface to be displayed in the pop-up box, so we need to do the following in JavaScript:

   $(document).on("pageinit", "#pop_login", function(event) {$("#pop_login").dialog();});

   The last page shown is as follows:

   Figure 1. logon interface 1

   Now we need to insert a tag for all the text that appears, indicating that the HTML content needs to be replaced by the actual content in the ing table. We will useLangIDAs a tag, you can select your preferred tag name.

   For example, replace the title:

   langID="Login.Description">Description

   The tag content we use is Login. Title, indicating that the HTML content is the Title object content under the Login object in the ing table.

   Insert tags to other HTML files. This step is complete.

3. Insert the text content of the ing table

   We have already created a ing table and used tags to map the ing table to HTML. Next, read the content from the ing table and replace the content in the corresponding HTML. As mentioned earlier, the replacement must be completed before pageinit. Otherwise, some parts of jQuery cannot be displayed normally. If you are interested in pageinit, you can try it by yourself. If you replace it with pageinit, the logon button cannot be displayed normally. We will not try again, but simply replace it in pagebeforecreate.

   First, we need to read the ing table file. Suppose we want to display Chinese characters:

   $(document).on("pagebeforecreate", "#pop_login", function(event) {$.ajax({beforeSend: function() { $.mobile.loading("show"); }, type: "GET", url : "language/text_cn.json", dataType : "json", contentType : "application/json; charset=utf-8", async : false, cache : false, success : function(json) {     $.mobile.loading("hide");    language = json;    replaceHTML();}});});

   Pay attention to the following points:

   • Async must be set to false because we want to continue the next step after the ing file is read successfully. If async is true, jQueryMobile starts to create each part before the ing file is read, which also causes the display to fail.
   • After successful reading, we assign the content in the ing table to a global variable: language, because we may need to modify some dynamic content in pageinit, however, you do not want to read the ing table again.
   • ReplaceHTM () is used to replace all the content with the langID label in the HTML with the content in the ing table. The procedure is as follows:

   Function replaceHTML () {$ ("*"). each (function (index, domNode) {var currLanguage = language; var langID = $ (domNode ). attr ("langID"); if (langID) {var langidslept = langID. split (". "); for (var I = 0; I
      
       
   So far, all static HTML content has been replaced, and our interface will become like this:
   Figure 2. logon page 2
      

4. Process Dynamic Content

   After the preceding three steps, it seems that our interface has been completed. You only need to modify the read ing table file to correctly display the required language. However, in fact, only static content can be displayed in the previous three steps, and dynamic content cannot be displayed.

   Next, we will add dynamic content to this interface. We will add a prompt to the user name input box.

   Because the prompt information is a label rather than content of the input box part, we cannot replace the prompt information using the method previously used. This requires manual replacement in JavaScript programs.

   $("#txt_userID").attr("placeholder", language.Login.Tip_User_Name);

   In this way, the prompt information is replaced with the correct content. The final logon interface is shown as follows:

   Figure 3. logon page 3

Advantages and Disadvantages Analysis and Improvement

The advantages of this solution are:

• The steps are simple and easy to use.
• Good scalability, easy to add new support languages.
• Smooth operation, and users will not find the screen replacement process.
• Translators can directly translate the ing table files without having to understand the program itself.

This solution also has the following Disadvantages:

• Because you need to download the ing table file, when the ing table contains a large amount of content and the network condition is not good, you may need to wait a long time to see the screen.
• Because of the cache, modifying the ing table may cause the program to fail. For example, if JavaScript tries to read a new ing table keyword, And the cached ing table does not contain this keyword, a JavaScript error will occur.
• The ing table can only store fixed text content. For dynamic content such as "User XXX does not exist", xxx is the dynamic user name entered by the user, and additional processing is required for display. The date format and other content must also be processed.

To solve the preceding defects, we can make the following adjustments:

• After the ing table is downloaded for the first time, the ing table is saved to the local cache of the browser. Read from the cache every time to save the read time.
• To make possible changes to the ing table, a version number is required for the ing table in the cache. When the server modifies the ing table, the JavaScript program needs to send the new version number to the client. If the version number does not match, download the new ing table.
• For dynamic text or date, you can use a regular expression after reading the content of the ing table for further processing.
• Currently, the displayed language must be set on the server side. We can read the language settings of the browser on the client, and automatically read the ing table consistent with the browser language, making it easier for users to use.

Note:: The Code does not include libraries of jQuery and jQuery Mobile. Please download them on the official website.

 

 

Download

Description	Name	Size
Sample Code	SourceCode.zip	3KB