Implementing mobile WebSphere Commerce

Allowing the user to select device preference

At this point in the tutorial, you have implemented a servlet filter that intercepts a request to the Stores Request servlet and determines the User-Agent from the HTTP Header. Based on this User-Agent, the requested is mapped to a specific browser adapter automatically. However, some mobile devices that allow zooming and scrolling can still handle the fully functional display. An online shopper may want to view this standard display, rather than the simplified mobile-specific view.

This optional section of the tutorial introduces one such way to achieve this behavior. You will create a link in the header of both the standard and the mobile sites, which will allow the user to force a switch between the two. This overrides the device preference, which you automatically assign based on the User-Agent. You will do this with the use of a cookie, storing the preferred device format.

Create a link in mobile header to force display to standard

Create a link in the header on the mobile site to allow the user to force a switch to the standard display.

1. From the J2EE perspective of Rational Application Developer, expand Stores > WebContent > ConsumerDirect > include > styles > style1.
2. Double-click MobileCachedHeaderDisplay.jsp. Click the Source tab if not already selected.
3. Scroll down to the end of the file and locate the following section:

   </tbody> </table> <!--END HEADER--> <!-- End - JSP File name: style1/CachedHeaderDisplay.jsp -->

   
   
4. Directly above the </tbody> tag , insert the following code snippet. This snippet is also found in MobileCommerceCode\Part6\6.2\snippet1.txt:

   <!-- use standard browser instead of mobile --> <tr> <td class="m_top" id="WC_CachedHeaderDisplay_TableCell_46"> <font color="red"><b> ***<a href="<c:out value="${GoStandardURL}"/>" class="m_top_link"> Switch to Standard Browser View!</a></b>*** </font> </td> </tr>

   
   
5. Create the URL that you will return to, in this case, you will go to the search page. Locate the following section:

   <c:url var="AdvancedSearchViewURL" value="AdvancedSearchView"> <c:param name="langId" value="${langId}" /> <c:param name="storeId" value="${WCParam.storeId}" /> <c:param name="catalogId" value="${catalogId}" /> </c:url>

   
   
6. Directly below the </c:url> above, insert the following code snippet. This snippet is also found in MobileCommerceCode\Part6\6.3\snippet2.txt:

   <c:url var="GoStandardURL" value="TopCategoriesDisplay"> <c:param name="langId" value="${langId}" /> <c:param name="storeId" value="${WCParam.storeId}" /> <c:param name="catalogId" value="${catalogId}" /> <c:param name="devicePref" value="BROWSER" /> </c:url>

   
   
7. Note a complete version of the MobileCachedHeaderDisplay.jsp after this change is found in MobileCommerceCode\Part6\6.2\MobileCachedHeaderDisplay.jsp to compare to your revised version.
8. Save the changes and close the file.

Note that this link sets the devicePref=BROWSER so that while viewing a mobile display. You will force it to switch over to the standard browser display.

Back to top

Create a link in standard header to force display to mobile

Next, you will do the same steps, but create the link in the standard header to allow the user to force a switch to the mobile display.

1. From the J2EE perspective of Rational Application Developer, expand Stores > WebContent > ConsumerDirect > include > styles > style1.
2. Double-click CachedHeaderDisplay.jsp.
3. Scroll down to the end of the file and locate the following section:

   </tr></tbody> </table> <!--END HEADER--> <!-- End - JSP File name: style1/CachedHeaderDisplay.jsp -->

   
   
4. Directly between the </tr> and the </tbody> tags, insert the following code snippet. This snippet is also found in MobileCommerceCode\Part6\6.3\snippet1.txt:

   <!-- use standard browser instead of mobile --> <tr> <td class="m_top" id="WC_CachedHeaderDisplay_TableCell_46"> <font color="red"><b> ***<a href="<c:out value="${GoMobileURL}"/>" class="m_top_link"> Switch to Mobile Browser View!</a></b>*** </font> </td> </tr>

   
   
5. Create the URL that you will return to. In this case, you will go to the search page. Locate the following section:

   <c:url var="AdvancedSearchViewURL" value="AdvancedSearchView"> <c:param name="langId" value="${langId}" /> <c:param name="storeId" value="${WCParam.storeId}" /> <c:param name="catalogId" value="${catalogId}" /> </c:url>

   
   
6. Directly below the </c:url> above, insert the following code snippet. This snippet is also found in MobileCommerceCode\Part6\6.3\snippet2.txt:

   <c:url var="GoMobileURL" value="TopCategoriesDisplay"> <c:param name="langId" value="${langId}" /> <c:param name="storeId" value="${WCParam.storeId}" /> <c:param name="catalogId" value="${catalogId}" /> <c:param name="devicePref" value="MOBILE" /> </c:url>

   
   
7. Note a complete version of the CachedHeaderDisplay.jsp after this change is found in MobileCommerceCode\Part6\6.3\CachedHeaderDisplay.jsp to compare to your revised version.
8. Save the changes and close the file.
9. In Windows Explorer, remove the compiled JSP files to force the parent files to get recompiled after our header changes:

   <WCToolkit>\wasprofile\temp\localhost\server1\WC\Stores.war\ConsumerDirect

   
   

Note that this link sets the devicePref=MOBILE so that while viewing a mobile display, you will force it to switch over to the standard browser display.

Back to top

Modify the servlet filter to set preferred display

To switch to the mobile display (from standard) or the standard display (from mobile), create a link in the header so it is available from all pages. This link submits the current view adding a parameter called devicePref and sets to either BROWSER or MOBILE, depending on which display is the one to be switched to.

Currently, the MobileDeviceServletFilter automatically detects the User-agent from the header of the servlet request and maps that to the browser adapter.

The updated behavior of the filter is as follows:

1. Check the serlvet request parameters for a parameter called "devicePref". If this was set, it was because the user has clicked the link on the store to switch the display from mobile to standard (or vice-versa).
2. If the parameter is set, you create/update the cookie called DEVICEPREF and set the value of this parameter. You also set the browser adapter for the current request to match that of the parameter.
3. If the parameter is not set, check if a cookie already exists called DEVICEPREF. This means that the display preference link was clicked in a prior request of this session, but you will keep that preference for this request as well. Set the browser adapter for the current request to match that of the cookie.
4. If the parameter is not set, and the cookie does not already exist, use the default behavior implemented and automatically assign the browser adapter based on the User-Agent in the request header.

To implement this logic, follow the steps below:

1. From the J2EE perspective of Rational Application Developer, expand WebSphereCommerceServerExtensionsLogic > src > com.wstc.filter.
2. Double-click MobileDeviceServletFilter.java to open the file for editing.
3. Locate the following section:

   //Wrap the response and request objects so we can play with the // cookies HttpServletResponseWrapper resp = new HttpServletResponseWrapper( (HttpServletResponse) response); HttpServletRequestWrapper req = new HttpServletRequestWrapper( (HttpServletRequest) request);

   
   
4. Directly below the print statement above, insert the following code snippet. This snippet is also found in MobileCommerceCode\Part6\6.4\snippet1.txt:

   String devicePref = (String) serRequest.getParameter("devicePref"); if (devicePref != null) { System.out .println("===DEBUG=== Adding cookie to response based on devicePref in request " + devicePref); //then set cookie to say mobile resp.addCookie(new javax.servlet.http.Cookie("DEVICEPREF", devicePref)); } else { System.out .println("===DEBUG=== devicePref is null in request , no cookie added"); } // lets check cookies, and set our devicePref to this Cookie[] cookie = req.getCookies(); if (cookie != null && cookie.length > 0) { for (int i = 0; i < cookie.length; i++) { Cookie currentCookie = cookie[i]; String cookieName = currentCookie.getName(); System.out.println("===DEBUG=== COOKIE = " + cookieName); if (cookieName.equals("DEVICEPREF")) { device = new String(currentCookie.getValue()); System.out.println("===DEBUG=== DEVICEPREF COOKIE = " + device); } } }

   
   
5. Inspect the code above. Get the request parameter "devicePref", which is what you have set on the links just created in the headers to force to a different display. If this parameter is set, create a cookie called "DEVICEPREF" in the response with the same value as the parameter.

   Finally, if the parameter was not set, iterate through all the cookies in the request and check if you already have a DEVICEPREF cookie set (from a previous request). If so, set this to the current device.

6. Locate the following section:

   //The current User-Agent we detect from the HTTP Header System.out.println("===DEBUG=== User-Agent: " + header);

   
   
7. Directly below the print statement above, insert the following code snippet. This snippet is also found in MobileCommerceCode\Part6\6.4\snippet2.txt:

   // If devicePref set in this request, lets use that if (devicePref != null) { device = new String(devicePref); System.out.println("===DEBUG=== devicePref is not null: " + devicePref); }

   
   
8. Inspect the code above. The important line here is where you are setting the device to the value of the devicePref request parameter.
9. Note that a modified version of the MobileDeviceServletFilter.java is available in MobileCommerceCode\Part6\6.4\snippet2.txt.
10. Save the changes to MobileDeviceServletFilter.java.

Back to top

Test the links to force the display change

Now that you have modified the JSP to include a link to switch from between the standard and mobile views, you will test the logic in the mobile device simulator and try to force the standard display in the mobile browser.

1. Re-start the WebSphere Commerce Test Server to ensure the modified configuration files are used.
2. From the Dynamic Cache Monitor, clear the cache by clicking Cache Contents, then the Clear Cache button.
3. Open the mobile device simulator by clicking the "Apple Safari" icon in the Quick Launch menu.
4. In the simulator, enter the following URL in the Address field:

   http://localhost/webapp/wcs/stores/servlet/ConsumerDirect/index.jsp

   
   
5. The ConsumerDirect language selection page appears. Click United States English.
6. The mobile version of TopCategoriesDisplay appears. Notice the new link *** Switch to Standard Browser View! *** (Figure 10).
   
   Figure 10. TopCategoriesDisplay in a mobile device simulator with link to force a standard display
   
   
   
7. Click the *** Switch to Standard Browser View! *** link under the header. This reloads the page in the standard browser display instead of the mobile display.
8. Notice the debug output in the Rational Application Developer console, which looks similar to the following:

   [11/26/08 10:11:20:719 EST] 00000061 SystemOut O ===DEBUG=== Adding cookie to response based on devicePref in request BROWSER [11/26/08 10:11:20:719 EST] 00000061 SystemOut O ===DEBUG=== COOKIE = JSESSIONID [11/26/08 10:11:20:719 EST] 00000061 SystemOut O ===DEBUG=== COOKIE = WC_SESSION_ESTABLISHED [11/26/08 10:11:20:719 EST] 00000061 SystemOut O ===DEBUG=== COOKIE = WC_ACTIVEPOINTER [11/26/08 10:11:20:719 EST] 00000061 SystemOut O ===DEBUG=== COOKIE = WC_GENERIC_ACTIVITYDATA [11/26/08 10:11:20:719 EST] 00000061 SystemOut O ===DEBUG=== COOKIE = WC_USERACTIVITY_-1002 [11/26/08 10:11:20:719 EST] 00000061 SystemOut O ===DEBUG=== User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.27.1 (KHTML, like Gecko) Version/3.2.1 Safari/525.27.1 [11/26/08 10:11:20:719 EST] 00000061 SystemOut O ===DEBUG=== devicePref is not null: BROWSER [11/26/08 10:11:20:719 EST] 00000061 SystemOut O ===DEBUG=== Setting to use BROWSER DEVICE

   
   

   Notice that you find devicePref in the request parameters, and then create a cookie into our response. The devicePref was set to BROWSER (as in standard browser) and was set from the URL you just clicked.

9. Click the Advanced Search link and notice that any subsequent requests you now detect the DEVICEPREF cookie in the request to keep using the standard browser on a mobile device:

   [11/26/08 10:07:49:438 EST] 00000037 SystemOut O ===DEBUG=== devicePref is null in request , no cookie added [11/26/08 10:07:49:438 EST] 00000037 SystemOut O ===DEBUG=== COOKIE = DEVICEPREF [11/26/08 10:07:49:438 EST] 00000037 SystemOut O ===DEBUG=== DEVICEPREF COOKIE = BROWSER [11/26/08 10:07:49:438 EST] 00000037 SystemOut O ===DEBUG=== COOKIE = JSESSIONID [11/26/08 10:07:49:438 EST] 00000037 SystemOut O ===DEBUG=== COOKIE = WC_SESSION_ESTABLISHED [11/26/08 10:07:49:438 EST] 00000037 SystemOut O ===DEBUG=== COOKIE = WC_ACTIVEPOINTER [11/26/08 10:07:49:438 EST] 00000037 SystemOut O ===DEBUG=== COOKIE = WC_GENERIC_ACTIVITYDATA [11/26/08 10:07:49:438 EST] 00000037 SystemOut O ===DEBUG=== COOKIE = WC_USERACTIVITY_-1002 [11/26/08 10:07:49:438 EST] 00000037 SystemOut O ===DEBUG=== User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.27.1 (KHTML, like Gecko) Version/3.2.1 Safari/525.27.1 [11/26/08 10:07:49:438 EST] 00000037 SystemOut O ===DEBUG=== Setting to use BROWSER DEVICE

   
   
10. Click the *** Switch to Mobile Browser View! *** link to switch back to the mobile display. Continue to explore the switching between the mobile and standard views.

6 of 10 | Previous | Next

Comments

Back to top

Table of contents

• Before you start
• Inspecting the ConsumerDirect store from a mobile device
• Adding a servlet filter
• Implementing views for mobile devices
• Caching the configuration for mobile WebSphere Commerce
• Allowing the user to select device preference
• Conclusion
• Download
• Resources
• About the authors

---

6 of 10 | Previous | Next

Dig deeper into WebSphere on developerWorks

IBM SmartCloud trial. No charge.

Unleash the power of hybrid cloud computing today!

---

Public and private solutions in one trial.

Special offers