 | 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.
- From the J2EE perspective of Rational Application Developer,
expand Stores > WebContent > ConsumerDirect
> include > styles > style1.
- Double-click MobileCachedHeaderDisplay.jsp. Click the
Source tab if not already selected.
- Scroll down to the end of the file and locate the following
section:
</tbody>
</table>
<!--END HEADER-->
<!-- End - JSP File name: style1/CachedHeaderDisplay.jsp -->
|
- 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>
|
- 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>
|
- 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>
|
- 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.
- 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.
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.
- From the J2EE perspective of Rational Application Developer,
expand Stores > WebContent > ConsumerDirect
> include > styles > style1.
- Double-click CachedHeaderDisplay.jsp.
- 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 -->
|
- 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>
|
- 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>
|
- 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>
|
- 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.
- Save the changes and close the file.
- 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.
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:
- 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).
- 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.
- 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.
- 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:
- From the J2EE perspective of Rational Application Developer,
expand WebSphereCommerceServerExtensionsLogic > src
> com.wstc.filter.
- Double-click MobileDeviceServletFilter.java to open the
file for editing.
- 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);
|
- 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);
}
}
}
|
- 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.
- Locate the following section:
//The current User-Agent we detect from the HTTP Header
System.out.println("===DEBUG=== User-Agent: " + header);
|
- 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);
}
|
- Inspect the code above. The important line here is where you are
setting the device to the value of the devicePref request
parameter.
- Note that a modified version of the
MobileDeviceServletFilter.java is available in
MobileCommerceCode\Part6\6.4\snippet2.txt.
- Save the changes to MobileDeviceServletFilter.java.
 |
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.
- Re-start the WebSphere Commerce Test Server to ensure the
modified configuration files are used.
- From the Dynamic Cache Monitor, clear the cache by clicking
Cache Contents, then the Clear Cache
button.
- Open the mobile device simulator by clicking the "Apple Safari"
icon in the Quick Launch menu.
- In the simulator, enter the following URL in the Address
field:
http://localhost/webapp/wcs/stores/servlet/ConsumerDirect/index.jsp
|
- The ConsumerDirect language selection page appears. Click
United States English.
- 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
- 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.
- 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.
- 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
|
- 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.
|
| |
