Login Register

Implementing the Dojo car store application

Dojo Car Store is a globalized fictional MVC Web application demo. It’s designed to illustrate how to integrate dojo with typical web technology and construct a globalized AJAX Web application.

As a pure JavaScript library, dojo can be used with a wide variety of server side technologies, including JSP, PHP, Ruby, WebService, etc. This tutorial chooses JSP for demonstration and focuses on how to integrate dojo globalization features with the existing J2EE globalization best practices (JSTL, JSF, etc.).

Dojo Car Store mainly provides the following functions:
1. Locale switching
2. Car exhibiting (including detailed information)
3. Shopping cart
4. Order and shipment form

4.2 Step by step implementation
4.2.1. Locale (language) switching
You have two options for switching locales (languages) in Dojo Car Store.
- Option 1: Browser language option
Step1:
Open the language configuration tab of your browser:
- For Firefox: Tools-Options-Advanced-Language options
- For IE: Tools-Internet Options-General-Languages
Step2:
Add a locale (language) to or remove a locale (language) from the list, and set your preferred language as the first priority option.
Step3:
Click Confirm, close the tab, and refresh the current page. Please make sure that there is no locale parameter like …… index.jsp?locale=en_US in the address field of the browser, because the demo will deduce locale information from your preferred language list first (see Option2), and then from the browser language configuration.

- Option2: User’s preferred language list on the entry page – index.jsp
Select your preferred language from the dropdown list of languages. When you select another locale, the page will be refreshed automatically.

To ensure a consistent locale deducing strategy for both the client side (dojo) and the server side (JSTL /JSF tag),
the following steps are used:
Step 1: Get the locale from HttpRequest on the server side (for the above mentioned Option1):
<% Locale locale = request.getLocale(); %>
or
Get the locale parameter from HttpRequest URL on the server side (for the above mentioned Option2):
<% String localeStr = request.getParameter("locale");
……
Locale locale = new Locale(……) %>
or
Get the locale parameter from Http session on the server side:
<% Object sessionLocale = session.getAttribute("locale"); %>

Step 2: Set the retained locale in the session scope for later use.
<% session.setAttribute("locale", locale); %>
Note: Here the parameter set in the session is the uniform locale for both the client and the server side.

Step3: Initialize the dojo global parameter dojo.locale as:

'">

Please also note that dojo only accepts locale string with the format “en-us”, but the locale string from Servlet API has the format “en_US”. Therefore, the above modification is required.

Please refer to index.jsp and checkout.jsp (under DojoGlobalizationDemo.war/DojoCarStore/) for more details.

4.2.2. Literal translation
The literal translations of Dojo Car Store are implemented in the following ways:
1. JSTL i18n tags
Three JSTL i18n tags are used for loading resource bundle: setLocale, setBundle, and message.
Step1: Set the resource bundle locale:

Here, ${sessionScope.locale} is the locale parameter set in session previously.
Step2: Set the base resource bundle:

Step3: Display the literal translation using the resource bundle:

2. Localized JSF tags
Three JSF tags are used for loading the resource bundle: locale, loadBundle, outputText
Step1: Set the locale for the JSF view tag:

Here, #{locale} is the locale parameter set in session previously.
Step2: Set the base resource bundle:

Step3: Display the literal translation using the resource bundle:

3. JSON resource bundle
The literal translations of all the localized dojo widgets come from the JSON resource bundle, for example, DateTextbox, ValidationTextbox, etc. Actually, you can get any JSON resource bundle in the dojo package including CLDR data (please refer to Dojo resource bundle usage sample in Appendix A ).

4. Java resource bundle
Some literal translations are first generated on the server side and then sent back to the client side.
Therefore, these literal translations are loaded from the resource bundle using the normal Java method like:
ResourceBundle resBundle = ResourceBundle.getBundle(……, this.locale);
String pattern = resBundle.getString(……);
Object[] msgArgs = {String.valueOf(this.currentOrderId)};
String confirmJson = …… + MessageFormat.format(pattern, msgArgs) + ……;

Please refer to dojo.g11n.demo.servlet.DojoServlet and dojo.g11n.demo.db.DBManager for more details.

5. DB
Car profiles are stored in separate tables in DB with different language versions (the name of a table contains locale information like “CAR_en”), so when a user loads car profiles, the locale parameter should match the corresponding table.

Please refer to dojo.g11n.demo.servlet.DojoServlet and dojo.g11n.demo.db.DBManager for more details.

4.2.3. UI Implementation
1. Car inventory list
Car inventory list exhibits the images of all the cars in the inventory. You can switch between pages and click the image of a certain car to see its detailed information (or drag it to the Car detail view area directly)

This part mainly includes: Dojo animate transition (fadeIn / fadeOut), Dojo drag&drop, Dojo xhr transport, Dojo Fisheye widget etc.
Please refer to index.jsp and indexController.js(imgController) for more details.

2. Car detail view
Car detail view displays detailed information about the selected car, including car name, price, description, index, etc. Car detail view also provides a slide show that displays different car images. To add the current car to the shopping cart, you can either click the “Add to Cart” button or drag the corresponding image of the car to the shopping cart directly

This part mainly includes: Dojo ContentPane, Dojo animate transition (fadeIn / fadeOut), Dojo drag&drop, Dojo currency API, Dojo JSON, etc.

Please refer to index.jsp and indexController.js(detailController) for more details.

3. Shopping cart
Shopping cart contains information about the cars that you have selected, including car index, name, price, quantity, and total price. To add a car to the shopping cart, you can drag the corresponding image of the car from the Car inventory list or the Car detail view into the shopping cart. Another way to add a car to the shopping cart is to click the Add To Cart button in the Car detail view.

This part mainly includes: Dojo ContentPane, Dojo Currency/Number API, Dojo JSON, Dojo Style, Dojo xhr transport, etc.

Please refer to index.jsp and indexController.js(shoppingCartController) for more details.

4. Order and shipment form completion
When checking out, you need to fill in the shipment and Credit card information forms. In this part, dijit.form.DateTextbox / ValidationTextbox are used because they provide customized validation rules as well as localized warning messages.

After completing the forms, you can click the Checkout button to submit the order. Here, Dojo Dialog widget is used to promote the transaction confirmation and error information.

Please refer to checkout.jsp and checkOutController.js for more details.

4.2.4. Server side XMLHttpRequest processor
DojoServlet processes all the XMLHttpRequest sent through Dojo xhr from client side, such as:
1. Setting CharacterEncoding for both the request and the response as UTF-8;
2. Deducing locale from the request session:
locale = request.getSession().getAttribute(“locale”)
Note:
This demo provides two ways for locale switching. Therefore, simply deducing locale like
Locale locale = request.getLocale(); is not enough because this way only deduces the best matched locale between the client browser and the web container, without considering the user selected language (from the dropdown list). This is simplified by getting the locale parameter from the session (see 4.2.1) because this parameter is the uniform locale on both the server side and the client side.

Please refer to dojo.g11n.demo.servlet.DojoServlet for more details.

4.2.5. Persistence controller & DB
DBManager manages DB connection, data query and updating. Car profiles are stored in DB with different language versions, so car profile query is locale specific.

Dojo Car Store uses embedded Derby 10.1.3.1 by default (DojoGlobalizationDemo.war/DB/DojoCarStoreDB). You can also choose Derby client mode or DB2 instead, please refer to Appendix B for detailed steps.
Note: Derby database uses Unicode by default. When creating databases, tables, and inserting data, please make sure that they are encoded as UTF-8. Please refer to dojo.g11n.demo.db.DBManager for more details.

4.2.6. Web Server g11n configuration.
Dojo Car Store uses POST XMLHttpRequest (only UTF-8 encoding) to submit client data that contains locale specific literal, and then uses request.setCharacterEncoding(“UTF-8”) to get the submitted data correctly.

Note: If you use GET XMLHttpRequest and append the data parameters to URL, please make sure that the Web server parses the URL using the correct encoding, because request.setCharacterEncoding(“UTF-8”) only deals with the request body but not the URL itself. For example, in Tomcat server.xml, there will be a configuration item named URIEncoding. Please set its value to UTF-8, so that Web server will use UTF-8 to parse URL parameters.

5. Limitations
The Dojo Car Store is for demo purpose only, so all the data is fictional. If occasionally you find the page is not rendered correctly, it may be caused by a browser cache problem. Please restart your browser and try again. If the problem still exists, please check your server and database.