 | Implementing views for mobile devices
In the previous section, you created a servlet filter that detects the
User-Agent header from a servlet request and sets the browser adapter
accordingly. Now that you can differentiate between standard and
mobile devices based on the User-Agent, you will implement some simple
JSPs that are intended for display in a mobile device.
Create mobile version of header JSP
fragments
As shown earlier, the AdvancedSearchView and CatalogSearchResultsView
are not optimal for a mobile device because the display is much
smaller and the bandwidth may be of concern. You will import a new
simplified header for all views based on the out-of-the-box header.
The simplified header reduces the page size and eliminates the
navigator menu at the top of the page.
- From the J2EE perspective of Rational Application Developer,
expand Stores > WebContent > ConsumerDirect
> include > styles > style1.
- Right-click the style1 folder and click
Import.
- In the Import wizard, select File system and click
Next.
- Browse to change the source folder to
MobileCommerceCode\Part4\4.2\include\styles\style1.
- Select the following JSP files to import them:
-
MobileCachedHeaderDisplay.jsp
-
MobileContentContainerTop.jsp
- Click Finish.
- Right-click ConsumerDirect > include and click
Import.
- In the Import wizard, select File system and click
Next.
- Browse to change the source folder to
MobileCommerceCode\Part4\4.2\include\.
- Select the following files to import them:
-
MobileHeaderDisplay.jspf
-
MobileLayoutContainerTop.jspf
- Click Finish.
Create the mobile implementation of
search
As shown earlier, the advanced search and search results are not
optimal for a mobile device. The display is much smaller, links are
smaller, and the bandwidth may be of concern. We will provide new simple
implementations of the AdvancedSearchView and
CatalogSearchResultsView to display better on the mobile
device.
To implement these, you will import a new version of
CatalogSearchForm.jsp called
MobileCatalogSearchForm.jsp, and a new version of
SearchResultDisplay.jsp called
MobileSearchResultDisplay.jsp. Each is designed to be
displayed on a mobile device:
- From the J2EE perspective of Rational Application Developer,
expand Stores > WebContent > ConsumerDirect.
- Right-click ConsumerDirect folder and click New
> Folder.
- Under the Folder Name, type
mobile and click
Finish.
- Right-click the newly created mobile directory and click
Import.
- In the Import wizard, select File system and click
Next.
- Browse and change the source folder to
MobileCommerceCode\Part4\4.3\mobile.
- Select the following files to import them:
-
MobileCatalogSearchForm.jsp
-
MobileSearchResultDisplay.jsp
- Click Finish.
When viewing the modifications in later steps, notice the changes. The
enhancements to the JSP follow some simple best practices. The overall
page has been reduced in size to fit on the smaller browser. We have
removed the images for each search result because they take up the
display area and bandwidth to download. Also, we are using the
shortDescription for each product, rather than longDescription, to
reduce the text required to display.
Create mobile implementation of top category
and product pages
Out-of-the-box top categories and product pages are not suitable for
smaller display areas on the mobile devices. One of the best practices
is to use the screen area to show maximum information without having
to scroll. For example, in the top categories page, remove all the
images to display the names of the top categories. We will provide new
simple implementations of TopCategoriesDisplayView,
CategoriesDisplayView, and ProductDisplayView to display
better on the mobile device.
To implement these, you will import a new version of:
-
TopCategoriesDisplay.jsp called
MobileTopCategoriesDisplay.jsp
-
CategoriesDisplay.jsp called
MobileCategoriesDisplay.jsp
-
ProductDisplay.jsp
-
CachedProductOnlyDisplay.jsp called
MobileProductDisplay.jsp, Mobile
CachedProductOnlyDisplay.jsp
Each is designed to be displayed on a mobile device:
- From the J2EE perspective of Rational Application Developer,
expand Stores > WebContent > ConsumerDirect
> mobile.
- Right-click the newly created mobile directory from the previous
section and click Import.
- In the Import wizard, select File system and click
Next.
- Browse and change the source folder to
MobileCommerceCode\Part4\4.4\mobile.
- Select the following files to import them:
-
MobileTopCategoriesDisplay.jsp
-
MobileCategoriesDisplay.jsp
-
MobileProductDisplay.jsp
-
MobileCachedProductOnlyDisplay.jsp
- Click Finish.
When viewing the modifications in later steps, notice the changes. The
enhancements to the JSP follow best practices.
Create the new Struts configuration file for
mobile devices
To keep the device-specific configurations separated, you will define a
new Struts configuration file for these. You will use the same
action-mapping and global-forward names as the out-of-the-box views,
but define them for the specific browser adapter (or device
format).
Note that you will use a device format ID of -2 in the Struts
global-forwards. This corresponds to the "I Mode" device in the
DEVICEFMT table in the WebSphere Commerce database. Alternatively, you
can define a new DEVICEFMT and use it for different devices.
- From the J2EE perspective of IBM WebSphere Commerce Developer,
expand Stores > Struts.
- Right-click Struts and click New >
Other.
- In the Wizard, expand Web > Struts >
Struts Configuration File > Next.
- On the Struts Configuration File Wizard, enter the
following:
- Folder:
/Stores/WebContent/WEB-INF
- File name:
struts-config-mobile.xml
- Click Finish. The struts-config-mobile.xml source
view opens for editing. If not, from the J2EE perspective of
Rational Application Developer, expand Stores > Web
Content > WEB-INF and double-click
struts-config-mobile.xml.
- Define a new global-forward and action for the AdvancedSearchView
specific to
storeID = 10001 and
deviceFormatID = -2. Insert the
following section into the <global-forwards> section
of the struts-config-mobile.xml file:
<!-- Global Forwards -->
<global-forwards>
<forward className="com.ibm.commerce.struts.ECActionForward"
name="AdvancedSearchView/10001/-2"
path="/mobile/MobileCatalogSearchForm.jsp"/>
<forward className="com.ibm.commerce.struts.ECActionForward"
name="CatalogSearchResultView/10001/-2"
path="/mobile/MobileSearchResultDisplay.jsp"/>
</global-forwards>
|
These global-forwards are using the same forward names as the default
configurations, but you added "/-2" to indicate this applies to device
format -2 (I Mode), and you have put in custom JSP pages for the path
of each forward. Now only on device format -2 will these
global-forwards be used. Otherwise, the runtime framework will use the
default configuration (where no device format is specified).
- Define a new action for the AdvancedSearchView specific to
storeID = 10001. Insert the following section into the
<action-mappings> section of the
struts-config-mobile.xml file:
<!-- Action Mappings -->
<action-mappings type="com.ibm.commerce.struts.ECActionMapping">
<action path="/AdvancedSearchView"
type="com.ibm.commerce.struts.BaseAction">
<set-property property="https" value="10001:0"/>
</action>
<action path="/CatalogSearchResultView"
type="com.ibm.commerce.struts.BaseAction">
<set-property property="https" value="10001:0"/>
</action>
</action-mappings>
|
- Repeat Steps 6 and 7 for TopCategoriesDisplayView,
CategoriesDisplayView, and ProductDisplayView:
<forward className="com.ibm.commerce.struts.ECActionForward"
name="TopCategoriesDisplayView/10001/-2"
path="/mobile/MobileTopCategoriesDisplay.jsp"/>
<forward className="com.ibm.commerce.struts.ECActionForward"
name="ProductDisplayView/10001/-2"
path="/mobile/MobileProductDisplay.jsp"/>
<forward className="com.ibm.commerce.struts.ECActionForward"
name="ProductDisplayView/10001/-2"
path="/mobile/MobileCategoriesDisplay.jsp"/>
<action path="/TopCategoriesDisplayView"
type="com.ibm.commerce.struts.BaseAction">
<set-property property="https" value="10001:0"/>
</action>
<action path="/ProductDisplayView"
type="com.ibm.commerce.struts.BaseAction">
<set-property property="https" value="10001:0"/>
</action>
<action path="/CategoryDisplayView"
type="com.ibm.commerce.struts.BaseAction">
<set-property property="https" value="10001:0"/>
</action>
|
- Note you can find the completed file under
MobileCommerceCode\Part4\4.5\struts-config-mobile.xml.
Compare it to your implementation.
- Save and close the modified struts-config-mobile.xml.
 |
Register new CategoryDisplayView and
ProductDisplayView JSPs
Insert the following records into the WebSphere Commerce database:
insert into DISPENTREL values (0, 50001, null, -2, 10001,
'mobile/MobileProductDisplay.jsp', 'ProductBean',0,0,null, null,-1,null,null,0)
insert into DISPCGPREL values (0, 50001, null, -2, 'mobile/MobileCategoriesDisplay.jsp',
10001,0,null,-1,null,null,null,0)
|
Ensure that the value 50001 for DISPENTREL_ID and DISPCGPREL_ID is unique in
the tables.
Register the new Struts configuration in the
Stores project
You have now defined mobile device-specific global-forwards and
action-mappings in a new Struts configuration file. You now need to
include this struts-config-mobile.xml as one of the Struts
configurations for the WebSphere Commerce Stores Request Servlet to
use. To do this, follow these steps:
- From the J2EE perspective of Rational Application Developer,
expand Stores, and double-click Deployment Descriptor:
Stores to open for editing.
- When the Web Deployment Descriptor opens, click the
Source tab to modify web.xml.
- Locate the following section in the source XML:
<param-value>/WEB-INF/struts-config.xml,/WEB-INF/struts-config-GiftCenter.xml,/
WEB-INF/struts-config-migrate.xml,/WEB-INF/struts-config-ext.xml</param-value>
|
- Add in the struts-config-mobile.xml to this list. You will put
the new XML as the last entry, so it takes precedence over all
other Struts configuration files for this Web module during
runtime.
<param-value>/WEB-INF/struts-config.xml,/WEB-INF/struts-config-GiftCenter.xml,/
WEB-INF/struts-config-migrate.xml,/WEB-INF/struts-config-ext.xml,/WEB-INF/
struts-config-mobile.xml</param-value>
|
- Note you can find the completed file under
MobileCommerceCode\Part4\4.6\web.xml. Compare it to
your implementation.
- Save the changes and close the Web Deployment Descriptor.
|
Test the new mobile views in
simulator
At this point, you have made a new servlet filter, which detects the
User-Agent from the HTTP Header and sets the corresponding browser
adapter to identify which global-forwards from Struts will be used.
You are now ready to test the new configuration to see the new
simplified mobile JSP pages when you view the Advanced Catalog Search
in ConsumerDirect.
- Re-start the WebSphere Commerce Test Server to ensure the
modified configuration files are used.
- Open the mobile device simulator by clicking the "Apple Safari"
icon in the Quick Launch menu.
- In the mobile device 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 new Mobile Top Categories page appears. Notice the changes to
the display (Figure 7).
Figure 7.
ConsumerDirect modified TopCategoriesDisplay in a mobile device
simulator
- Click in the store window, hold, and scroll to the right. Click
MOBILE SEARCH in the top header.
- The new mobile AdvancedSearchView page appears (Figure 8). This
reflects the new implementation you just created in the previous
steps, specific to the mobile device.
Figure 8. ConsumerDirect modified AdvancedSearch in a mobile device
simulator
- Enter a search criteria of "chair" in
the "Search for" text box and click the SEARCH button. This
takes you to the new Mobile CatalogSearchResultView. Again, notice
the new simplified implementation for the mobile device (Figure
9).
Figure 9. ConsumerDirect modified CatalogSearchResultDisplay in a mobile device
simulator
- To compare, open a standard browser and repeat the sections above
to ensure the original behavior has not changed for a non-mobile
device.
- Also inspect the console output in Rational Application Developer
to see the User-Agent and browser adapters, which are detected and
mapped.
|
| |
