Building mobile applications for WebSphere Commerce using the

Building mobile applications for WebSphereCommerce using the hybrid applicationprogramming modelSkill Level: Intermediate

Alex Shum ([email protected])Advisory Software DeveloperIBM

Alan Cole ([email protected])Research Staff MemberIBM

22 Sep 2010

Learn how to build mobile applications for WebSphere® Commerce using the hybridapplication programming model. This article describes the hybrid model, how itcompares to the other mobile application programming models, and how to use it tobuild iPhone® and Android® applications for WebSphere Commerce in two casestudies.

Overview

With the proliferation of Internet-capable mobile devices, mobile applications havebecome integral parts of many cross-channel retail solutions. In particular, theincreasing popularity of iPhone OS and Android devices has driven demand fornative applications with capabilities beyond what web applications running in mobilebrowsers can offer. However, building a fully native application from scratch is asignificant commitment of skills and resources, and a majority of the code written forone platform will not be reusable on another. This is where the hybrid applicationprogramming model comes in - with the hybrid model. You will reuse many of yourexisting web application assets to build mobile applications.

Note that this article is targeted at architects and developers interested in building

Building mobile applications for WebSphere Commerce using the hybrid application programming model Trademarks© Copyright IBM Corporation 2010. All rights reserved. Page 1 of 36

mailto:[email protected]

mailto:[email protected]

http://www.ibm.com/developerworks/ibm/trademarks/

http://www.ibm.com/legal/copytrade.shtml

mobile applications for WebSphere Commerce. It assumes a basic understanding ofWebSphere Commerce and mobile application development. A companion whitepaper, Leveraging mobile commerce in your multi-channel strategy, discusses themarket opportunity in mobile commerce, and sketches some approaches to takeadvantage of those opportunities within WebSphere Commerce.

Mobile application programming models

We can categorize the approaches to providing a mobile application by whether it isa web application, a native (on-device) application, or some combination of the two.The following sections briefly describe some of the characteristics of each of thesemodels.

Mobile web applications

A mobile web application is delivered to a mobile device using a combination ofHTML, cascading stylesheets (CSS), and JavaScript. You can can more or lesscustomize mobile devices. You can also customize specific devices.

The advantage of this model is that it is based on familiar web programming skills. Itdoes not require the end user to install any special application since it depends onthe built-in browser. It is easy to iterate development. Upgrades are provided withoutuser action simply by upgrading the content provided by the server. It has theadvantage that the same, or nearly the same, content serves the ever-growingfamily of mobile devices.

Version 7 of WebSphere Commerce contains a Madisons Mobile store that providesa customized web experience for smartphones. However, there are somedisadvantages to this approach, including the fact that the application may lack thelook and feel of the native applications, possible performance impacts, and lack ofaccess to some device capabilities, such as the local address book or camera.

This approach also depends on the capabilities of the mobile browser, and this canbe a serious source of incompatibility, especially for older handsets. The advent ofHTML5 and the increasing adoption of the Webkit browser engine help alleviatesome of these concerns, but only as newer, more capable devices gain marketshare.

Native applications

By contrast, native applications are coded specifically for a single mobile platform,using device-specific functions and libraries provided by the manufacturer. Suchapplications can easily incorporate the platform's unique look and feel, and generallyperform better than web applications. They can access any of the native devicecapabilities for which an API is provided.

developerWorks® ibm.com/developerWorks


https://www14.software.ibm.com/webapp/iwm/web/signup.do?source=sw-app&S_PKG=commmobile&S_TACT=109J67IW&S_CMP=web_ibm_ws_comm_herolt_mobcomm



The problem is that you must write the application from scratch for each supporteddevice. The number of such devices is large, and constantly changing at a furiousrate, as numerous companies fight for market share with ever more capable devices.Writing a native application also requires specialized skills, which may not transfereasily from one device to another.

Hybrid applications

Hybrid applications attempt to combine the strong points of both the web and thenative application, and are the focus of this article. The basic idea is that a nativeapplication shell is written, but the main content provided is done through the use ofweb views, incorporating HTML, CSS, and JavaScript as usual. The native skeletonmay include libraries, accessible from JavaScript, which provide access to devicecapabilities such as the local address list, the GPS, the camera, and other devicefeatures. This allows the web application to include code accessing devicecapabilities.

One of the key features of the hybrid application model is bridging between aJavaScript routine and a native device capability. If this framework had to bedeveloped anew for each supported device by each user, the task is substantial.But, in fact, a number of frameworks of exactly this nature are available, bothproprietary and open source. When such a framework supports multiple devices, itmeans that you can use the same server-side code for all supported devices, with atminimum, minor customization, representing a potentially huge savings in requiredresources.

Note that the difference between native and hybrid applications is mainly at theimplementation level. From the end user's perspective, a hybrid application istypically indistinguishable from a native application. A hybrid application is availableto end users through the platform's application marketplace (for example, the iPhoneApp Store), and offers a native user experience, just like a native application.

Fundamentals of a hybrid application

A hybrid application is basically a native application with embedded web content.The UI of a hybrid application is typically composed of a combination of native viewsand web views - views that can display local or remote web content. One example isan application in which the main content area is composed of a single web view. Youcan use platform-specific CSS to give the web content a native look and feel, whileyou can use native views to render platform-specific controls that are difficult toconstruct with web content and CSS, such as menus and tab bars.

Note that there is no set rule on using native views versus web content. Somescenarios allow for a mostly web content approach, while others might demand aheavier use of native views.

ibm.com/developerWorks developerWorks®




In Figure 1, on the left, you see the Madisons Mobile starter store on Mobile Safari(web content in blue). On the right, you see the same page in a hybrid application(web content in blue, native views in red).

Figure 1. User interfaces of hybrid vs. mobile web applications

In Figure 2, you can compare the UI elements on the different mobile platforms.

Figure 2. Comparing UI elements on different mobile platforms





Interactions between native code and embedded web content

On many mobile platforms, an application's native code can execute JavaScriptfunctions in the embedded web content. This allows the native code to retrieveinformation from the web content (for example, the value of an HTML form input)and trigger actions in the web content (for example, hide/unhide an HTML element).Conversely, the application's native code can intercept requests made by theembedded web content and execute native functions on behalf of the web content.This is, in effect, a two-way bridge between native code and embedded web content,and is commonly used to give embedded web content access to device capabilitiesnormally unavailable to web content.

One example is giving the embedded web content access to the native addressbook. Normally, the native address book of a mobile device is inaccessible to theweb content. But, with this two-way bridge between the native code and webcontent, the embedded web content of a hybrid application can request the nativecode to display the native address book on behalf of the web content. Once the userhas performed the required action in the native address book (for example, selectsan e-mail address), the native code can execute a JavaScript callback function topass control and data back to the embedded web content (see Figure 3).

Figure 3. Interactions between native code and embedded web content





If multiple mobile platforms are being targeted, there is a definite benefit to making





this bridge between JavaScript and native code as similar as possible across all theplatforms. This allows the same web content (and hence, the same JavaScript) to beused across multiple mobile platforms. One such development framework, thoughnot used in the prototypes discussed here, is the open source PhoneGap.

In the following case studies, we will look at how you can apply these patterns tobuild iPhone and Android applications for WebSphere Commerce.

Case study 1. Building an iPhone application for WebSphereCommerce using the hybrid model

Our first case study is the Madisons iPhone application that we have built as a proofof concept. It is basically the Madisons Mobile starter store packaged as an iPhoneapplication with a native look and feel, plus additional features not found in themobile web application, including:

• An enhanced home screen with interactive e-marketing spots

• An enhanced store locator with geolocation support and integrated mapview

• A swipeable product details screen

• Integration with the iPhone address book

Figure 4 shows the home screen of the application. You see the interactivee-marketing spots occupying the main content area of the home screen, as well asthe native navigation controls of the application.

Figure 4. Madisons iPhone application - home screen









Figure 5 shows the catalog browsing flow of the application. You see how a shoppercan navigate to a product and add it to the wish list or shopping cart.

Figure 5. Madisons iPhone application - catalog browsing

Figure 6 shows the store locator flow of the application. You see how a shopper canlocate nearby stores and view their maps using the application's store locator andgeolocation support.

Figure 6. Madisons iPhone application - store locator

Figure 7 shows the checkout flow of the application. You see how a shopper canmake a purchase for in-store pickup using the application.





Figure 7. Madisons iPhone application - shopping cart and checkout

High-level design

We designed the Madisons iPhone application as a productivity application thatextensively uses the navigation and tab bar interfaces. It has a screen flow almostidentical to the page flow of the Madisons Mobile starter store. The application isorganized into tabs, each corresponding to a section of the starter store. Thescreens under each tab are managed by a navigation interface, replacing the titlebar and breadcrumb trail in the starter store. The main content area of theapplication is composed of UIWebView instances displaying remote MadisonsMobile pages with an iPhone-specific CSS, while the navigation and tab barinterfaces are rendered by native views and controllers.

Like all iPhone applications, the Madisons iPhone application was developed usingthe iPhone SDK. The iPhone SDK contains a set of development tools for writingand testing iPhone applications. Highlights include:

• Xcode: This the integrated development environment.

• Interface builder: This is the tool to create and update the UIs of iPhoneapplications in the form of interface builder (NIB) files.

• iPhone simulator: This is the tool to run and test iPhone applications ona simulated device.

Note that the following sections assume a basic understanding of iPhone applicationdevelopment. For more details on iPhone application development, refer to theiPhone Dev Center and the iPhone Human Interface Guidelines.



http://developer.apple.com/iphone/index.action

http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html



Server-side changes

Device detection

We used the device detection function of WebSphere Commerce to identify requestsfrom the Madisons iPhone application. We created a wc-devices.xml file in theWC_eardir/xml/config/com.ibm.commerce.foundation-ext directory to map theUIWebView user agent to a device format ID. We then used this device format ID to:

• Map view requests from the application to the Madisons Mobile JSP filesin the Struts configuration entries.

• Toggle the inclusion of the iPhone-specific CSS and execution ofiPhone-specific code in the JSP files.

Listing 1 shows the custom wc-devices.xml file that maps requests from theapplication to the appropriate device format. See Table 1 for the locations of thechanged files.

Listing 1. wc-devices.xml file mapping the UIWebView user agent to deviceformat ID -12

<_config:Devices xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://www.ibm.com/xmlns/prod/commerce/foundation/config \../xsd/wc-devices.xsd"xmlns:_config="http://www.ibm.com/xmlns/prod/commerce/foundation/config">

<_config:DeviceGroup internalID="-11" channelID="-6"><_config:Device name="BlackBerry Bold 9000" userAgentPattern="BlackBerry9000.*"/><_config:Device name="BlackBerry Storm 9530" userAgentPattern="BlackBerry9500.*"/><_config:Device name="BlackBerry Curve 8320" userAgentPattern="BlackBerry8320.*"/><_config:Device name="HTC S740" userAgentPattern=".*MSIEMobile.*"/><_config:Device name="Nokia S60"userAgentPattern=".*SymbianOS.*Series60/3.1.*Nokia3250.*" />

<_config:Device name="Nokia N97"userAgentPattern=".*SymbianOS.*Series60/5.0.*Nokia3250.*" />

<_config:Device name="Apple iPhone"userAgentPattern=".*iPhone.*Safari.*"/>

</_config:DeviceGroup>

<_config:DeviceGroup internalID="-12" channelID="-6" ><_config:Device name="Apple iPhone Native App"userAgentPattern=".*iPhone.*"/>

</_config:DeviceGroup>

</_config:Devices>

Listing 2 shows the custom Struts configuration entries added tostruts-config-ext.xml. This file maps requests from our application to the Madisons





Mobile starter store.

Listing 2. Excerpt of Struts configuration entries mapping view requests fromdevice format ID -12 to the Madisons Mobile starter store JSP files

<forward className="com.ibm.commerce.struts.ECActionForward"name="ChangePassword/10000001/-12"path="/mobile/UserArea/AccountSection/PasswordSubsection/PasswordUpdateForm.jsp"/><forward className="com.ibm.commerce.struts.ECActionForward"name="ReLogonFormView/10000001/-12"path="/mobile/UserArea/AccountSection/LogonSubsection/UserTimeoutView.jsp"/><forward className="com.ibm.commerce.struts.ECActionForward"name="RememberMeLogonFormView/10000001/-12"path="/mobile/UserArea/AccountSection/LogonSubsection/logon.jsp"/><forward className="com.ibm.commerce.struts.ECActionForward"name="AccessControlErrorView/10000001/-12"path="/mobile/GenericError.jsp"/>

Listing 3 shows the changes made to the JSTLEnvironmentSetup.jspf file to supportweb content enhancements specific to our application, in particular theiPhone-specific CSS.

Listing 3. JSTLEnvironmentSetup.jspf code that changes the CSS path basedon the device format ID

<%-- Set variables for device specific rendering --%><c:if test="${EC_deviceAdapter.deviceFormatId == -12}"><c:set var="_iPhoneNativeApp" value="true"/><c:set var="mobileBasePath" value="mobile/iPhone"/><c:set var="pageMax1" value="500"/><c:set var="pageMax2" value="500"/></c:if><c:set var="cssPath" value="${jspStoreImgDir}${mobileBasePath}/${vfileStylesheet}"/>

Note that we have already incorporated these changes into WebSphere CommerceV7 Feature Pack 1. The Madisons Mobile starter store will be updated with thesechanges if you have installed Feature Pack 1 and published the Madisons Mobileenhancements store archive.

iPhone-specific CSS

We used an iPhone-specific CSS (Listing 4) to give a native look and feel to theembedded web content. We also used the CSS to:

• Disable the default tap highlight color, since we used the :activepseudo-class to highlight active (tapped) items.

• Disable text selection and the copy-and-paste callout.

Note that the CSS uses many properties prefixed with -webkit-, WebKitimplementations of CSS3 properties. Most of them work on both iPhone andAndroid, as both platforms use WebKit as the rendering engine for the web content.





Listing 4. Excerpt of the iPhone-specific CSS

/* Defines the look of section headers */div.heading_container {/* Gives the background a slight gradient */background-image:-webkit-gradient(linear, left top, left bottom, from(white), to(#e0e0e0));

border-color: #e0e0e0;border-style: solid;border-width: 1px 0px 0px 0px;margin: 0px;padding: 5px 10px;}

/* Defines the look of section titles */div.heading_container > h2 {margin: 0px;padding: 0px;color: gray;font-weight: bold;font-size: 14px;overflow: hidden;/* Truncates the title and adds a trailing ellipsis (...) if it overflows */text-overflow: ellipsis;white-space : nowrap;/* Gives the title an embossed look */text-shadow: white 0px 1px 0px;}

div.content_box > ul {margin: 0px;padding: 0px;list-style: none;}

/* Hides the bullets (>>) */span.bullet {

display: none}

/* Gives lists the look of edge-to-edge tables */div.content_box > ul > li {background-color: white;border-color: #e0e0e0;border-style: solid;border-width: 0px 0px 1px 0px;margin: 0px;padding: 10px;}

/* Gives clickable list items the look of table items */div.content_box > ul > li > a {/* Adds trailing chevrons (>) to the table items */background-image: url('../images/chevron.png'), url('../images/link.png');background-position: center right, top left;background-repeat: no-repeat, repeat-x;display: block;margin: -10px;padding: 10px 20px 10px 10px;color: black;font-size: 17px;font-weight: bold;overflow: hidden;/* Truncates the text and adds a trailing ellipsis (...) if it overflows */text-decoration: none;text-overflow: ellipsis;white-space : nowrap;-webkit-background-size: auto auto, auto 100%;





}

/* Defines the look of table items when tapped */a.arrow:active {background-color: #ff5000;/* Reverses the color of the chevron and text */background-image: url('../images/chevron_white.png'), url('../images/link.png');color: white;}

* {/* Disables the default tap highlight color */-webkit-tap-highlight-color: rgba(0,0,0,0);/* Disable text selection and the copy-and-paste callout */-webkit-touch-callout: none;-webkit-user-select: none;}

Figure 8 shows the before and after HTML lists.

Figure 8. HTML lists, before and after

Again, the iPhone-specific CSS is included in the Feature Pack 1 Madisons Mobileenhancements store archive. It is found in the mobile/iPhone/css directory under thestore directory, once the store archive has been published.

Table 1 shows a summary of the server-side changes.

Table 1. Summary of server-side changesPath Description

WC_eardir/xml/config/com.ibm.commerce.foundation/wc-devices.xmlMapping for iPhone (UIWebView) user agent

WC_eardir/Stores.war/WEB-INF/struts-config-ext.xmlStruts configuration entries for iPhone

WC_eardir/Stores.war/Madisons/mobile/include/JSTLEnvironmentSetup.jspfSet CSS and style paths for iPhone

WC_eardir/Stores.war/Madisons/mobile/iPhone/css/common1_1.cssMain iPhone-specific CSS

WC_eardir/Stores.war/Madisons/mobile/iPhone/css/general.cssWC_eardir/Stores.war/Madisons/mobile/iPhone/css/table.css...

Additional CSSs included by mainiPhone-specific CSS

WC_eardir/Stores.war/Madisons/mobile/iPhone/images/chevron.pngWC_eardir/Stores.war/Madisons/mobile/iPhone/images/chevron_white.png...

iPhone-specific CSS images

WC_eardir/Stores.war/Madisons/mobile/iPhone/include/styles/style1/CachedHeaderDisplay.jspReplacement page header for iPhone

WC_eardir/Stores.war/Madisons/mobile/iPhone/include/styles/style1/CachedFooterDisplay.jspReplacement page footer for iPhone





Application delegate and view hierarchy

We used the Interface Builder to define the view hierarchy of the Madisons iPhoneapplication in the application's main NIB file (MainWindow.xib). It is composed of aset of views managed by the native navigation and tab bar interfaces - compositeviews controlled by UINavigationController and UITabBarControllerinstances. At the top of the view hierarchy is a tab bar interface, right under theapplication's UIWindow instance. The tab bar interface is controlled by aUITabBarController instance, which constructs and manages the views underthe tab bar interface, including the tab bar and its tabs, with each tab having a stackof views managed by a navigation interface. Each navigation interface is controlledby a UINavigationController instance, which constructs and manages theviews under the navigation interface, including the navigation bar and its stack ofviews (see Table 2).

Table 2. Structure of MainWindow.xib

• UITabBarController - controls the tab bar interface

• UITabBar

• UINavigationController - controls the navigation interface of the home tab

• UINavigationBar

• WebViewController - controls the home page, i.e. root view of the hometab navigation interface

• UINavigationItem

• UITabBarItem - defines the title/image of the home tab

• UINavigationController - controls the navigation interface of the store locator tab

• ...

• ...

• UINavigationController - controls the navigation interface of the wish list tab

• ...

• ...

• ...

As you can see in Figure 9, the top view of each navigation interface is a viewcontrolled by a custom view controller (class WebViewController). The view isdefined in its own NIB file (WebViewController.xib) and is composed of aUIWebView instance and a UIActivityIndicatorView instance. When theapplication launches, the application delegate instructs each of these





WebViewController instances to load the initial web content of each tab, such ashttp://host/webapp/wcs/stores/servlet/mIndex_storeId_catalogId_langId for theHome tab.

Figure 9. The application's view hierarchy

Listing 5 shows the code used in the TestUIShellAppDelegate class to specify theinitial URL of each tab's root view.

Listing 5. TestUIShellAppDelegate - applicationDidFinishLaunching

- (void)applicationDidFinishLaunching:(UIApplication *)application {

NSString *langId = NSLocalizedString(@"langId", @"");

WebViewController *webViewController= (WebViewController *)homeTabNavigationController.topViewController;

NSString *urlString = [NSStringstringWithFormat:@"http://%@/webapp/wcs/stores/servlet/mIndex_%@_%@_%@",host, storeId, catalogId, langId];

NSURLRequest *request = [NSURLRequestrequestWithURL:[NSURL URLWithString:urlString]];

webViewController.request = request;

webViewController= (WebViewController *)storeLocatorTabNavigationController.topViewController;

urlString = [NSStringstringWithFormat:@"http://%@/webapp/wcs/stores/servlet/mStoreLocatorView?catalogId=%@ \

&fromPage=&storeId=%@&langId=%@",host, catalogId, storeId, langId];

request = [NSURLRequest requestWithURL:[NSURL URLWithString:urlString]];webViewController.request = request;

// Similar code for the other tabs...

[window addSubview:tabBarController.view];[window makeKeyAndVisible];

}

Listing 6 shows the code used in the WebViewController class to load the URLrequest.

Listing 6. WebViewController - viewDidLoad





// Implement viewDidLoad to do additional setup after loading the view, typically from a// nib.// The view is loaded from the NIB file when the view first appears,// or when it needs to reappear after being unloaded due to memory warning- (void)viewDidLoad {[super viewDidLoad];// Load the request[webView loadRequest:request];}

Navigation interface

Navigation among UIWebView instances (for example, the user navigating fromthe home screen to the category screen by tapping on a category) is managed byUINavigationController and WebViewController instances. To recap, eachUIWebView instance in the application's view hierarchy is controlled by aWebViewController instance. The WebViewController instance is alsoconfigured as the delegate of the UIWebView instance (the WebViewControllerclass implements the UIWebViewDelegate protocol), allowing theWebViewController instance to intercept URL requests made by the web contentof the UIWebView instance.

For example, when the user taps a category on the home screen (see figure 10), theweb content of the UIWebView instance (the Madisons Mobile home page) makes aURL request to load the category page. The WebViewController instance, actingas the delegate of the UIWebView instance, intercepts the URL request, pushes anew WebViewController instance onto the navigation stack of theUINavigationController instance, and prompts the newWebViewController instance to load the URL request in its UIWebView instance.

Figure 10. Navigation interface





When loading starts, the UIActivityIndicatorView instance is shown toindicate that the screen is loading. When loading is finished, theUIActivityIndicatorView instance is hidden and the document title isextracted from the web content via thestringByEvaluatingJavaScriptFromString: method and set as the title ofthe screen. The back button on the navigation bar is automatically programmed topop the top view controller from the navigation stack when tapped.

Listing 7 shows the code used in the WebViewController class to intercept andhandle normal URL requests.

Listing 7. Excerpt of WebViewController.m - handling normal URL requests





- (BOOL)webView:(UIWebView *)aWebViewshouldStartLoadWithRequest:(NSURLRequest *)aRequestnavigationType:(UIWebViewNavigationType)navigationType {if (webView.request == nil || [activityIndicatorView isAnimating]) {// Continue loading if it is the initial request of the web view or if it is// a redirect (in which case loading is not "finished")return YES;

}else if (...) {// Code to intercept other URL requests

}else {// Push a new WebViewController instance onto the navigation stack and use it// to load the requestWebViewController *newWebViewController= [[WebViewController alloc] initWithNibName:@"WebViewController" bundle:nil];

[webViewController.navigationControllerpushViewController:newWebViewController animated:YES];

[newWebViewController release];return NO;

}return NO;}

- (void)webViewDidStartLoad:(UIWebView *)aWebView {webView.hidden = YES;[activityIndicatorView startAnimating];}

- (void)webViewDidFinishLoad:(UIWebView *)aWebView {// Extract the document title from the web content and set it as the title// of the viewif (self.navigationItem.title == nil) {self.navigationItem.title= [webView stringByEvaluatingJavaScriptFromString:@"document.title"];

}webView.hidden = NO;[activityIndicatorView stopAnimating];}

Swipeable product details screen

To enhance the usability of the product details screen, we defined a custom viewcontroller (class ProductScrollViewController) to give users the ability toscroll horizontally among products by swiping. Its view contains a UIScrollViewinstance, a scrollable view in which product details are shown side by side, and aUIPageControl instance, which acts as the page indicator.

When the user taps a product on the subcategory screen (Figure 11), the webcontent of the UIWebView instance (the Madisons Mobile subcategory page) willmake a URL request to load the product details page. The WebViewControllerinstance, acting as the delegate of the UIWebView instance, intercepts the URLrequest, and pushes a new ProductScrollViewController instance instead ofthe typical WebViewController instance onto the navigation stack.

Figure 11. Swipeable product details screen





When its view finishes loading with an empty UIScrollView instance, theProductScrollViewController instance starts loading the product detailsviews using WebViewController instances and adds them as subviews under theUIScrollView instance. The ProductScrollViewController instance startsby loading the views of the current product as well as the ones previous and next toit. When the user scrolls the UIScrollView instance, theProductScrollViewController instance loads the views of the new product (ifnot already loaded) as well as the ones previous and next to it.

Listing 8 shows the code used in the ProductScrollViewController class to handlepage scrolling.

Listing 8. Excerpt of ProductScrollViewController.m

- (void)viewDidLoad {





[super viewDidLoad];

pageControl.numberOfPages = [urls count];pageControl.currentPage = currentPage;

scrollView.pagingEnabled = YES;scrollView.contentSize= CGSizeMake(scrollView.frame.size.width * pageControl.numberOfPages,scrollView.frame.size.height);

scrollView.showsHorizontalScrollIndicator = NO;scrollView.showsVerticalScrollIndicator = NO;scrollView.scrollsToTop = NO;scrollView.delegate = self;

[scrollView setContentOffset:CGPointMake(scrollView.frame.size.width *currentPage, 0)];

[scrollView setBackgroundColor:[UIColor blackColor]];

[self loadScrollViewWithPage:pageControl.currentPage - 1];[self loadScrollViewWithPage:pageControl.currentPage];[self loadScrollViewWithPage:pageControl.currentPage + 1];}

- (void)loadScrollViewWithPage:(int)page {if (page < 0 || page >= pageControl.numberOfPages) {return;

}WebViewController *controller = [viewControllers objectAtIndex:page];if (controller == [NSNull null]) {controller = [[WebViewController alloc] initWithNibName:

@"WebViewController"bundle:[NSBundle mainBundle]];

controller.navigationController= (UINavigationController *)self.parentViewController;

controller.request = [NSURLRequest requestWithURL:[URLSobjectAtIndex:page]];

[viewControllers replaceObjectAtIndex:page withObject:controller];[controller release];

}if (nil == controller.view.superview) {CGRect frame = scrollView.frame;frame.origin.x = frame.size.width * page;frame.origin.y = 0;controller.view.frame = frame;[scrollView addSubview:controller.view];

}}

- (void)scrollViewDidScroll:(UIScrollView *)sender {if (pageControlUsed) {// do nothing - the scroll was initiated from the page control,// not the user draggingreturn;

}

// Switch the indicator when more than 50% of// the previous/next page is visibleCGFloat pageWidth = scrollView.frame.size.width;int page = floor((scrollView.contentOffset.x - pageWidth / 2) /pageWidth) + 1;

pageControl.currentPage = page;

[self loadScrollViewWithPage:page - 1];[self loadScrollViewWithPage:page];[self loadScrollViewWithPage:page + 1];}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {





pageControlUsed = NO;}

- (IBAction)changePage:(id)sender {int page = pageControl.currentPage;[self loadScrollViewWithPage:page - 1];[self loadScrollViewWithPage:page];[self loadScrollViewWithPage:page + 1];

CGRect frame = scrollView.frame;frame.origin.x = frame.size.width * page;frame.origin.y = 0;[scrollView scrollRectToVisible:frame animated:YES];// Scroll initiated by page controlpageControlUsed = YES;}

Integration with the iPhone address book

The same technique coupled with the ability to execute JavaScript code against theweb content is used by the application to allow the Madisons Mobile e-mail wish listpage to access e-mail addresses in the iPhone address book. A link with aspecially-crafted URL is added to the e-mail wish list page, such astestuishell:///emailpicker#callbackHandler. The protocoltestuishell:// is used to distinguish it from normal HTTP requests, whilefragment callbackHandler is the name of the JavaScript callback function that isexecuted when the action completes.

Note: There is no specific requirement on the format of the specially-crafted URL(including its protocol), other than it is syntactically correct and is distinguished fromnormal HTTP requests.

Figure 12. Integration with the iPhone address book





When the user taps the link (Figure 12), the page fires the specially-crafted URLrequest. When the WebViewController instance intercepts the URL request, itcreates a new ABPeoplePickerNavigationController instance and uses itspresentModalViewController:animated: method to show the iPhoneaddress book modally. Once the user selects an e-mail address, the messagepeoplePickerNavigationController:shouldContinueAfterSelectingPerson:property:identifier:is sent to the WebViewController instance, which was set as the delegate of theABPeoplePickerNavigationController instance. Upon receiving thismessage, the WebViewController instance calls the JavaScript callback functioncallbackHandler with the e-mail address as an argument. On the e-mail wish list





page, the JavaScript function callbackHandler() populates the e-mail addressinput field with the e-mail address passed in as an argument.

Listings 9 shows the code used in the WebViewController class to intercept thetestuishell:///emailpicker request and to display the iPhone address book. It alsoshows the code used in the class to call the JavaScript callback function when theuser selects the e-mail address.

Listing 9. WebViewController.m - integration with the iPhone address book

- (BOOL)webView:(UIWebView *)aWebViewshouldStartLoadWithRequest:(NSURLRequest *)aRequestnavigationType:(UIWebViewNavigationType)navigationType {if (webView.request == nil || [activityIndicatorView isAnimating]) {// Continue loading if it is the initial request of the web view or if it is// a redirect (in which case loading is not "finished")return YES;

}else if ([aRequest.URL.scheme isEqualToString:@"testuishell"]) {if ([aRequest.URL.path isEqualToString:@"/emailpicker"]) {// Code to handle e-mail address selection// Remember the requestself.api = aRequest.URL.path;// Extract the JavaScript callback function from the URL and remember itself.callbackHandler = aRequest.URL.fragment;// Create the address book view controller...ABPeoplePickerNavigationController *peoplePickerNavigationController= [[ABPeoplePickerNavigationController alloc] init];

peoplePickerNavigationController.displayedProperties= [NSArray arrayWithObject:[NSNumber numberWithInt:kABPersonEmailProperty]];

peoplePickerNavigationController.peoplePickerDelegate = self;// ... and present it modally[self presentModalViewController:peoplePickerNavigationController

animated:YES];[peoplePickerNavigationController release];

}else if (...) {// Code to handle physical address selection

}}else if (...) {// Code to intercept other URL requests

}else {// Code to intercept normal URL requests// See listing 7

}return NO;}

- (void)peoplePickerNavigationControllerDidCancel:(ABPeoplePickerNavigationController *)peoplePicker {[self dismissModalViewControllerAnimated:YES];}

- (BOOL)peoplePickerNavigationController:(ABPeoplePickerNavigationController *)peoplePickershouldContinueAfterSelectingPerson:(ABRecordRef)person {if ([api isEqualToString:@"/emailpicker"]) {// Continue to show the address book until an e-mail address has been// selectedreturn YES;

}else if (...) {





// Code to handle physical address selection}}

- (BOOL)peoplePickerNavigationController:(ABPeoplePickerNavigationController *)peoplePickershouldContinueAfterSelectingPerson:(ABRecordRef)personproperty:(ABPropertyID)propertyidentifier:(ABMultiValueIdentifier)identifier {

if ([api isEqualToString:@"/emailpicker"]) {// E-mail address has been selected, extract e-mail address from address bookABMultiValueRef emails = ABRecordCopyValue(person, property);CFIndex index = ABMultiValueGetIndexForIdentifier(emails, identifier);CFStringRef email = ABMultiValueCopyValueAtIndex(emails, index);// Construct the JavaScript callback (i.e. callback function + argument)NSString *callback = [NSString stringWithFormat:@"%@('%@')", callbackHandler,email];

[webView stringByEvaluatingJavaScriptFromString:callback];CFRelease(email);CFRelease(emails);// Dismiss the address book view controller[self dismissModalViewControllerAnimated:YES];

}return NO;}

Listing 10 shows the button added to the EmailWishList.jsp file to trigger the nativecode. It also shows the JavaScript callback function added to the file to handle thecallback from the native code.

Listing 10. EmailWishlist.jsp - integration with the iPhone address book

<c:if test="${_iPhoneNativeApp == true}"><a class="button"href="testuishell:///emailpicker#emailPickerCallbackHandler">Address Book

</a><script type="text/javascript">function emailPickerCallbackHandler(email) {document.getElementById("recipient").value = email;

}</script></c:if>

Integrated map views

You can use the URL request interception technique that is used to show thescrollable product details screen to replace web content with native views, as in thecase of store maps. The Madisons Mobile store locator is customized to providestore map links to Google® Maps. In Mobile Safari, such URL requests are routed tothe native Maps application where the store maps are shown. This works inembedded web content as well, but causes the application to exit and the Mapsapplication to launch. To prevent that from happening, the application interceptssuch an URL request, and instead, shows the store map using an MKMapViewinstance and a custom UIViewController instance (classMapViewController) (Figure 13).





Figure 13. Integrated map views

Listing 11 shows the code used in the WebViewController class to intercept andhandle requests normally routed to the native Maps application.

Listing 11. WebViewController.m - integrated map views

- (BOOL)webView:(UIWebView *)aWebViewshouldStartLoadWithRequest:(NSURLRequest *)aRequestnavigationType:(UIWebViewNavigationType)navigationType {if (webView.request == nil || [activityIndicatorView isAnimating]) {// Continue loading if it is the initial request of the web view or if// it is a redirect (in which case loading is not "finished")return YES;


}





else if ([aRequest.URL.host isEqualToString:@"maps.google.com"]) {// Code to intercept Google Maps URL requests// Extract latitude, longitude and query (i.e. the address) from// the URLNSString *ll = nil;NSString *q = nil;NSString *query = aRequest.URL.query;NSArray *parameters = [query componentsSeparatedByString:@"&"];for (NSString *parameter in parameters) {if ([parameter hasPrefix:@"ll="]) {ll = [[[parameter substringFromIndex:3]stringByReplacingOccurrencesOfString:@"+" withString:@" "]stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];

}if ([parameter hasPrefix:@"q="]) {q = [[[parameter substringFromIndex:2]stringByReplacingOccurrencesOfString:@"+" withString:@" "]stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];

}}NSArray *latitudeAndLongitude = [ll componentsSeparatedByString:@","];NSArray *addressAndName = [q componentsSeparatedByString:@" ("];// Create the map view controllerMapViewController *mapViewController= [[MapViewController alloc] initWithNibName:@"MapViewController"bundle:[NSBundle mainBundle]];

// Create the annotation pinMyAnnotation *annotation = [[MyAnnotation alloc] init];CLLocationCoordinate2D coordinate;coordinate.latitude = [[latitudeAndLongitude objectAtIndex:0]doubleValue];

coordinate.longitude = [[latitudeAndLongitude objectAtIndex:1]doubleValue];

annotation.coordinate = coordinate;annotation.title = [addressAndName objectAtIndex:1];annotation.title= [annotation.title substringToIndex:annotation.title.length - 1];

annotation.subtitle = [addressAndName objectAtIndex:0];mapViewController.annotation = annotation;[annotation release];// Push the map view controller onto the navigation stackUINavigationController *theNavigationController= (UINavigationController *)self.parentViewController;

if (theNavigationController == nil) {theNavigationController = self.navigationController;

}[theNavigationController pushViewController:mapViewControlleranimated:YES];

[mapViewController release];return NO;


}else {// Code to intercept normal URL requests// See listing 7

}return NO;}

Geolocation support

Since iPhone OS 3, the HTML5 geolocation API is supported by Mobile Safari and





UIWebView. This is used by the application to support the store location bygeolocation without the use of native code (Figure 14).

Figure 14. Geolocation support

Listing 12 shows the JavaScript code used to obtain the geolocation information.

Listing 12. Sample JavaScript code to perform geolocation

function captureCurrentLocation() {// Get location no more than 10 minutes old. 600000 ms = 10 minutes.navigator.geolocation.getCurrentPosition(showLocation, showError,{enableHighAccuracy:true,maximumAge:600000});

}

function showLocation(position) {var fromForm = document.getElementById("store_locator_gps_form");var geoCodeLatitude = fromForm.geoCodeLatitude;var geoCodeLongitude = fromForm.geoCodeLongitude;geoCodeLatitude.value = position.coords.latitude;





geoCodeLongitude.value = position.coords.longitude;fromForm.action = "mStoreLocatorResultView";fromForm.submit();}

Adapting the application for iPads

The hybrid model is applicable to building iPad® applications as well by using thesame techniques. Although iPhone applications can run on iPads as-is, it is a goodidea to create an iPad-specific version of the application (such as "Madisons HD"),or enhance the existing application to support both iPhones and iPads to takeadvantage of the new platform. Be aware that the iPad has its own set of humaninterface guidelines that are quite different from the iPhone ones. You need to factorthat into the application's design - for example, the iPad HIG puts an emphasis onreducing full-screen transitions, which you can achieve by an increased use of splitscreens and popups. This is done by using the device detection mechanismdescribed earlier to distinguish between requests from iPhones and iPads.

Case study 2. Building an Android application

Android is an open source, software stack that has been optimized for mobiledevices under the guidance of the Open Handset Alliance. It is based on a version ofthe Linux kernel and provides a software development kit that is based on a versionof Java™ as a development language. It includes a set of libraries and a number ofdevelopment utilities. It uses the open source WebKit engine as the basis of itsbrowser, and also provides web views embedded within applications (an approachshared with the iPhone, which also uses WebKit).

An application typically consists of one or more "activities,", each of whichcorresponds to a window or dialog. Screen layouts are created dynamically by Javacode, or described statically in XML files. Another key concept in Android is the"intent,", which is a system message. Applications may register to receive certaintypes of intents (such as an incoming phone call), and may in turn generate intentsfor other applications to catch. The application model also includes "contentproviders,", which provide access to data stored on the device, and "services", whichnormally operate in the background to monitor or process various classes of events.The Android application model encourages a loose coalition of applications, contentproviders, and services that can interoperate, to make it easy for an application totake advantage of other applications, content, and services available on the device.

High-level design

The hybrid approach being described here involves creating a stand-alone





application, written in Java, but which incorporates most of the content a user willsee as a web view, served by the WebSphere Commerce server with minimalcustomization. In those cases where special access to a device capability is needed(such as access to the GPS or other location-determination mechanism in the storelocator), the web page delivered by the server may contain JavaScript functions thatcall native (Java) library functions, which in turn obtain and return the requestedinformation. This approach implies the existence of one or more of these "bridginglibraries" that contain JavaScript-callable methods to access local devicecapabilities. Of course, it is immediately apparent that if these Android-specificlibraries are constructed to present the same API as the iPhone-specific librariesdescribed in Case study 1, in most cases, the same server-side content may beused for both platforms, without change.

Look and feel

By far, the greatest amount of screen real estate on the mobile device is taken up bya WebView, which is essentially a web page embedded within the native applicationskeleton. Many of the same considerations that apply to the iPhone also apply toAndroid devices, since most are touch enabled. This implies that buttons and linksmust all be sufficiently large so that they are selected by the touch of a finger.Similarly, text must be large enough to be read easily. Most of these aspects ofpresentation are controlled by style sheets, or CSS, embedded within the web pagesupplied by the WebSphere Commerce server.

One difference is that while the iPhone model currently supports only two screensizes, one for the iPhone and iPod Touch, and the other for the iPad, Androiddevices embody a much more diverse range of screen sizes. This has implicationsin selecting appropriate image sizes for the content page, as well as in selecting fontand button sizes.

The application menu

One of the typical Android conventions that is difficult to incorporate within a pureweb application is the application menu, something that for most devices is activatedby a dedicated hardware key. Consequently, the provision of the application menu isleft to the native skeleton. Figure 15 shows an example of what this might look like.

Figure 15. Madisons Android application - application menu









Listing 13 shows the definition of the menu illustrated here. Android, by default,displays at most six menu items. If more are defined, then it substitutes an itemlabeled "More," as shown in Figure 15. Touching that selection displays a sub-menuwith additional menu items.

Listing 13. Application menu XML

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android"><item android:id="@+id/locator"android:title="@string/StoreLocator"android:icon="@drawable/ic_menu_compass">

</item><item android:id="@+id/wishlist"android:title="@string/WishList"android:icon="@drawable/ic_menu_save">

</item><item android:id="@+id/cart"android:title="@string/ShoppingCart"android:icon="@drawable/ic_menu_cart">

</item><item android:id="@+id/home"android:title="@string/Home"android:icon="@drawable/ic_menu_home">

</item><item android:id="@+id/scan"android:title="@string/Scan"android:icon="@drawable/ic_menu_scan">

</item><item android:id="@+id/account"android:title="@string/MyAccount"android:icon="@drawable/ic_menu_account">

</item><item android:id="@+id/contact"android:title="@string/Contact">

</item></menu>

Code is required in the native portion of the application to handle menu events.Listing 14 and Listing 15 show how the menu itself is instantiated.

Listing 14. Instantiating the application menu

@Overridepublic boolean onCreateOptionsMenu(Menu menu) {new MenuInflater(getApplication()).inflate(R.menu.options, menu);return (super.onCreateOptionsMenu(menu));}

Listing 15. Handling menu events

@Overridepublic boolean onOptionsItemSelected(MenuItem item) {String message = "No option selected";

if (item.getItemId() == R.id.home) {// Handle "Home" menu itemmWebView.loadUrl(homePage);return (true);

} else if (item.getItemId() == R.id.cart) {





// Handle "Shopping Cart" menu itemmWebView.loadUrl(cartURL);return true;

} else ... // Other handlers not shown

Toast.makeText(this, message, Toast.LENGTH_LONG).show();return (super.onOptionsItemSelected(item));}

Access to the local address book

Access to the phone's contact list is handled in the same way as describedpreviously for the iPhone. The actual JavaScript that accesses the address book isdifferent in the Android case, but the interface to it is identical between the twoprototypes, so that the page served by WebSphere Commerce is identical in bothcases.

Barcode scanning

Barcode scanning is an area that is a useful design characteristic of Android forcollaboration among applications. In this example of native code, the "Scan" menuitem calls the zxing ("Zebra Crossing") barcode library method IntentIntegrator toactivate the Barcode Scanner application, turn on the camera, take a picture of abarcode (here, a 2D QR code), decode the image on the device, and return theresult to the application. The application interprets the result as the URL of a productpage to be displayed in the web view. If by some chance the user's device does notcome with a pre-installed Barcode Scanner, this method asks if it needs to bedownloaded and installed here and now. See Listing 16.

Listing 16. Barcode scanning

import com.google.zxing.integration.android.IntentIntegrator;...// Barcode scanprivate void barcodeScan() {IntentIntegrator.initiateScan(MyActivity.this);

}

protected void onActivityResult(int requestCode, int resultCode, Intent data) {switch (requestCode) {case IntentIntegrator.REQUEST_CODE: {if (resultCode == RESULT_OK) {IntentResult scanResult = IntentIntegrator.parseActivityResult(requestCode, resultCode, data);

if (scanResult != null) {String qrCode = scanResult.getContents();// Process the returned string.mWebView.loadUrl(qrCode);

}}break;

}}





}

The code In Listing 16 scans a 2-D QR barcode, interprets that as the URL of aproduct page, and retrieves that page from the WebSphere Commerce server.Figure 16 shows a typical QR code and the corresponding product page that isretrieved from the WebSphere Commerce server.

Figure 16. QR code and the corresponding product page

Store locator

As with the iPhone version, it is useful to allow the user to find a store relative to thecurrent location of the device as an option.

The browser implementation on Android devices is based on the same open sourceWebKit browser engine used by iPhone (and a number of other mobile platforms, as





well). Current Android versions also support the HTML 5 geolocation capability, soyou can use it without the need for native code, as described above for the iPhone.

Conclusion

With the continuing rapid growth in mobile devices and applications, and especiallyin sales of smartphones and deployment of higher-speed networks, we anticipatethat mobile commerce will play an increasingly important role for consumers. In suchan environment, being able to provide a compelling experience for mobileconsumers is one of the key differentiators for a retailer. This article has outlined oneapproach to incorporate mobile commerce as a multi-channel strategy.





Resources

Learn

• A companion paper, Leveraging mobile commerce in your multi-channelStrategy, discusses the market opportunity in mobile commerce, and sketchessome approaches to taking advantage of those opportunities within WebSphereCommerce.

• The iPhone Dev Center is the starting place when developing for the iPhone,iPod Touch, or iPad devices.

• Guidance on user interface design for the iPhone family is provided at theiPhone Human Interface Guidelines site.

• The Android developer site is the place to get started when developing for theAndroid platform.

• PhoneGap is an open source development framework that allows webapplications to use JavaScript to access native device capabilities and supportsmultiple mobile platforms.

Discuss

• Participate in the WebSphere Commerce discussion forum.

About the authors

Alex ShumAlex Shum is an Advisory Software Developer in the WebSphereCommerce Development team at the IBM Toronto Lab, Canada.

Alan ColeAlan Cole is a Research Staff Member of the Mobile Retail Solutionseffort at the IBM T.J. Watson Research Center in Hawthorne, NewYork.





http://developer.apple.com/iphone/index.action

http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html

http://developer.android.com/index.html

http://www.phonegap.com/

http://www.ibm.com/developerworks/forums/forum.jspa?forumID=284

Documents

Building mobile applications for WebSphere Commerce using the