使用混合应用程序编程模型为 WebSphere Commerce 构建移动应用程序.docx
- 文档编号:17705425
- 上传时间:2023-08-03
- 格式:DOCX
- 页数:42
- 大小:930.32KB
使用混合应用程序编程模型为 WebSphere Commerce 构建移动应用程序.docx
《使用混合应用程序编程模型为 WebSphere Commerce 构建移动应用程序.docx》由会员分享,可在线阅读,更多相关《使用混合应用程序编程模型为 WebSphere Commerce 构建移动应用程序.docx(42页珍藏版)》请在冰点文库上搜索。
使用混合应用程序编程模型为WebSphereCommerce构建移动应用程序
《使用混合应用程序编程模型为WebSphereCommerce构建移动应用程序》
——以iPhone和Android应用程序为案例
一、概述
随着拥有Internet访问能力的移动设备的快速增长,移动应用程序已经成为许多跨渠道零售解决方案的必要组成部分。
特别是,iPhoneOS和Android设备的日益流行已经推动了对原生应用程序的需求,这些应用程序拥有在移动浏览器中运行的web应用程序所不能提供的能力。
但是,从头开始构建一个完全原生的应用程序需要投入极大的技能和资源,而且为一个平台编写的大部分代码将不能在另一个平台上重用。
这正是混合应用程序编程模型的用武之地—通过混合模型,您可以重用您的许多现有web应用程序资产来构建移动应用程序。
2、混合应用程序的基本原理
本质上,混合应用程序是包含嵌入式web内容的原生应用程序。
混合应用程序的UI通常结合使用原生视图和web视图—可以显示本地或远程web内容的视图。
一个典型的混合应用程序示例是应用程序中的主内容区域由一个单一的web视图构成。
可以使用特定于平台的CSS来向web内容提供原生观感,同时可以使用原生视图来呈现使用web内容和CSS难以构造的平台特有控件,比如菜单和选项卡栏。
注意,没有关于使用原生视图和web内容的固定规则。
有些场景允许主要使用web内容,而另一些场景可能需要大量使用原生视图。
在图1中的左边,可以看到在MobileSafari中显示的MadisonsMobilestarterstore(蓝色的web内容)。
右边显示了混合应用程序中的相同内容(web内容为蓝色,原生内容为红色)。
图1.混合vs.移动web应用程序的用户界面
图2.比较不同平台上的UI元素
原生代码和嵌入的web内容的交互
在许多移动平台上,应用程序的原生代码可以执行嵌入的web内容中的JavaScript函数。
这允许原生代码从web内容获取信息(比如一个HTML表单输入的值)并触发web内容中的动作(比如,隐藏/显示一个HTML元素)。
相反,原生代码可以截获由嵌入的web内容发起的请求并代表web内容执行原生函数。
这实际上是原生代码和嵌入的web内容之间的一个双向桥梁,通常用于向嵌入的web内容提供web内容通常无法访问的web功能的访问权。
一个例子是向嵌入的web内容提供对本地地址簿的访问权。
通常,移动设备的本地地址簿不允许web内容访问。
但是,通过原生代码和web内容之间的这个双向桥梁,混合应用程序的嵌入web内容就能以web内容的名义请求原生代码显示本地地址簿。
用户在本地地址簿中执行完需要的操作(例如,选择一个电子邮件地址)后,原生代码可以执行一个JavaScript回调函数来将控件和数据传回嵌入的web内容(见图3)。
图3.原生代码和嵌入的web内容之间的交互
如果针对多个移动平台,那么使JavaScript和原生代码之间的这个桥梁在所有平台之间尽可能相似肯定有好处。
这允许跨多个移动平台使用相同的web内容(因此也是相同的JavaScript)。
开源PhoneGap就是这样一个开发框架,尽管它没有在本文讨论的原型中使用。
在下面的用例研究中,我们将介绍如何应用这些模式来为WebSphereCommerce构建iPhone和Android应用程序。
用例研究1.使用混合模型为WebSphereCommerce构建一个iPhone应用程序
我们的第一个用例研究是一个MadisonsiPhone应用程序,它已作为一个概念证明构建。
这个应用程序本质上是作为一个具有原生观感的iPhone应用程序打包的MadisonsMobilestarterstore,它包含移动web应用程序中没有的一些附加特性,其中包括:
∙包含一些交互式电子营销点的增强主屏幕
∙具有地理位置支持和集成地图视图的增强商店定位器
∙一个可翻页(swipeable)的产品细节屏幕
∙与iPhone地址簿的集成
图4显示应用程序的主屏幕。
可以看到,交互式电子营销点占据了主屏幕的主要内容区域,还可以看到应用程序的原生导航控件。
图5展示了应用程序的目录浏览流。
您看到一位购物者如何导航到一个产品并将其添加到关注列表或购物车。
图5.MadisonsiPhone应用程序-目录浏览
图6展示了应用程序的商店定位器流。
您看到一位购物者如何使用应用程序的商店定位器和地理位置支持来定位附近的商店。
图6.MadisonsiPhone应用程序-商店定位器
图7展示了应用程序的结账流。
您看到一位购物者如何使用应用程序进行店内采购。
图7.MadisonsiPhone应用程序-购物车和结账
高级设计
我们将这个MadisonsiPhone应用程序设计为一个广泛使用导航和选项卡条界面的生产力应用程序。
它的屏幕流与MadisonsMobilestarterstore的页面流基本相同。
应用程序被组织为一些选项卡,每个选项卡对应starterstore的一个部分。
每个选项卡下方的屏幕通过一个导航界面管理,替代了starterstore中的标题栏和浏览路径记录。
应用程序的主内容区域由一些UIWebView实例组成,这些实例使用一个特定于iPhone的CSS显示一些远程MadisonsMobile页面,而导航和选项卡栏通过原生视图和控件呈现。
与所有iPhone应用程序一样,MadisonsiPhone应用程序使用iPhoneSDK予以开发。
iPhoneSDK包含一组开发工具来编写和测试iPhone应用程序,主要包括:
∙Xcode:
这是集成开发环境。
∙Interfacebuilder:
这是以界面构建程序(NIB)文件格式创建和更新iPhone应用程序的UI的工具。
∙iPhonesimulator:
这是在一个模拟设备上运行和测试iPhone应用程序的工具。
服务器端更改
设备检测
我们使用WebSphereCommerce的设备检测功能来识别来自MadisonsiPhone的请求。
我们在WC_eardir/xml/config/merce.foundation-ext目录中创建一个wc-devices.xml文件来将UIWebView用户代理映射到一个设备格式ID。
然后,我们使用这个设备格式ID来:
∙将来自应用程序的视图请求映射到Struts配置条目中的MadisonsMobileJSP文件。
在是包含特定于iPhone的CSS还是执行JSP文件中特定于iPhone的代码之间切换。
清单1展示将来自应用程序的请求映射到适当的设备格式的自定义wc-devices.xml文件。
参阅表1了解更改后的文件的位置。
清单1.将UIWebView用户代理映射到设备格式ID-12的wc-devices.xml
<_config:
Devicesxmlns:
xsi="http:
//www.w3.org/2001/XMLSchema-instance"
xsi:
schemaLocation="\
../xsd/wc-devices.xsd"
xmlns:
_config="
<_config:
DeviceGroupinternalID="-11"channelID="-6">
<_config:
Devicename="BlackBerryBold9000"userAgentPattern="BlackBerry9000.*"/>
<_config:
Devicename="BlackBerryStorm9530"userAgentPattern="BlackBerry9500.*"/>
<_config:
Devicename="BlackBerryCurve8320"userAgentPattern="BlackBerry8320.*"/>
<_config:
Devicename="HTCS740"userAgentPattern=".*MSIEMobile.*"/>
<_config:
Devicename="NokiaS60"
userAgentPattern=".*SymbianOS.*Series60/3.1.*Nokia3250.*"/>
<_config:
Devicename="NokiaN97"
userAgentPattern=".*SymbianOS.*Series60/5.0.*Nokia3250.*"/>
--MapstheMobileSafariuseragenttodeviceformatID-11.-->
<_config:
Devicename="AppleiPhone"
userAgentPattern=".*iPhone.*Safari.*"/>
DeviceGroup>
--
MapstheUIWebViewuseragenttodeviceformatID-12.
TheUIWebViewuseragentisdifferentfromtheMobileSafariuseragentinthatthe
UIWebViewuseragentdoesNOTcontainthesubstring"Safari".
-->
<_config:
DeviceGroupinternalID="-12"channelID="-6">
<_config:
Devicename="AppleiPhoneNativeApp"
userAgentPattern=".*iPhone.*"/>
DeviceGroup>
Devices>
清单2展示添加到struts-config-ext.xml的自定义Struts配置条目。
这个文件将来自我们的应用程序的请求映射到MadisonsMobilestarterstore。
清单2.将来自设备格式ID-12的视图请求映射到MadisonsMobilestarterstoreJSP文件的Struts配置条目节选
name="ChangePassword/10000001/-12" path="/mobile/UserArea/AccountSection/PasswordSubsection/PasswordUpdateForm.jsp"/> name="ReLogonFormView/10000001/-12" path="/mobile/UserArea/AccountSection/LogonSubsection/UserTimeoutView.jsp"/> name="RememberMeLogonFormView/10000001/-12" path="/mobile/UserArea/AccountSection/LogonSubsection/logon.jsp"/> name="AccessControlErrorView/10000001/-12" path="/mobile/GenericError.jsp"/> 清单3展示对JSTLEnvironmentSetup.jspf文件进行的更改,以支持特定于我们的应用程序的web内容增强,特别是特定于iPhone的CSS。 清单3.基于设备格式ID更改CSS路径的JSTLEnvironmentSetup.jspf代码 <%--Setvariablesfordevicespecificrendering--%> iftest="${EC_deviceAdapter.deviceFormatId==-12}"> setvar="_iPhoneNativeApp"value="true"/> setvar="mobileBasePath"value="mobile/iPhone"/> setvar="pageMax1"value="500"/> setvar="pageMax2"value="500"/> if> setvar="cssPath"value="${jspStoreImgDir}${mobileBasePath}/${vfileStylesheet}"/> 注意,我们已经将这些更改集成到WebSphereCommerceV7FeaturePack1中。 如果您已安装FeaturePack1并发布了MadisonsMobile增强商店归档,那么MadisonsMobilestarterstore将使用这些更改更新。 特定于iPhone的CSS 我们使用了一个特定于iPhone的CSS(清单4)来向嵌入的web内容提供原生观感。 我们还使用CSS来: ∙禁用默认高亮颜色,因为我们使用: active伪类来突出活动项目。 ∙禁用文本选择和复制粘贴调出。 注意CSS使用许多带有-webkit-前缀的属性,这是CSS3属性的WebKit实现。 大多数这些属性可以在iPhone和Android上工作,因为这两个平台都使用WebKit作为web内容的渲染引擎。 清单4.特定于iPhone的CSS节选 /*Definesthelookofsectionheaders*/ div.heading_container{ /*Givesthebackgroundaslightgradient*/ background-image: -webkit-gradient(linear,lefttop,leftbottom,from(white),to(#e0e0e0)); border-color: #e0e0e0; border-style: solid; border-width: 1px0px0px0px; margin: 0px; padding: 5px10px; } /*Definesthelookofsectiontitles*/ div.heading_container>h2{ margin: 0px; padding: 0px; color: gray; font-weight: bold; font-size: 14px; overflow: hidden; /*Truncatesthetitleandaddsatrailingellipsis(...)ifitoverflows*/ text-overflow: ellipsis; white-space: nowrap; /*Givesthetitleanembossedlook*/ text-shadow: white0px1px0px; } div.content_box>ul{ margin: 0px; padding: 0px; list-style: none; } /*Hidesthebullets(>>)*/ span.bullet{ display: none } /*Givesliststhelookofedge-to-edgetables*/ div.content_box>ul>li{ background-color: white; border-color: #e0e0e0; border-style: solid; border-width: 0px0px1px0px; margin: 0px; padding: 10px; } /*Givesclickablelistitemsthelookoftableitems*/ div.content_box>ul>li>a{ /*Addstrailingchevrons(>)tothetableitems*/ background-image: url('../images/chevron.png'),url('../images/link.png'); background-position: centerright,topleft; background-repeat: no-repeat,repeat-x; display: block; margin: -10px; padding: 10px20px10px10px; color: black; font-size: 17px; font-weight: bold; overflow: hidden; /*Truncatesthetextandaddsatrailingellipsis(...)ifitoverflows*/ text-decoration: none; text-overflow: ellipsis; white-space: nowrap; -webkit-background-size: autoauto,auto100%; } /*Definesthelookoftableitemswhentapped*/ a.arrow: active{ background-color: #ff5000; /*Reversesthecolorofthechevronandtext*/ background-image: url('../images/chevron_white.png'),url('../images/link.png'); color: white; } *{ /*Disablesthedefaulttaphighlightcolor*/ -webkit-tap-highlight-color: rgba(0,0,0,0); /*Disabletextselectionandthecopy-and-pastecallout*/ -webkit-touch-callout: none; -webkit-user-select: none; } 图8.HTML列示,之前和之后 同样,特定于iPhone的CSS包含在FeaturePack1MadisonsMobileenhancementsstore归档中。 它位于store目录下的mobile/iPhone/css目录中,在store归档发布之后。 表1.服务器端更改摘要 路径 说明 WC_eardir/xml/config/merce.foundation/wc-devices.xml iPhone(UIWebView)用户代理的映射 WC_eardir/Stores.war/WEB-INF/struts-config-ext.xml iPhone的Struts配置条目 WC_eardir/Stores.war/Madisons/mobile/include/JSTLEnvironmentSetup.jspf 为iPhone设置CSS和样式路径 WC_eardir/Stores.war/Madisons/mobile/iPhone/css/common1_1.css 特定于iPhone的主CSS WC_eardir/Stores.war/Madisons/mobile/iPhone/css/general.css WC_eardir/Stores.war/Madisons/mobile/iPhone/css/table.css ... 特定于iPhone的主CSS包含的其他CSSs WC_eardir/Stores.war/Madisons/mobile/iPhone/images/chevron.png WC_eardir/Stores.war/Madisons/mobile/iPhone/images/chevron_white.png ... 特定于iPhone的CSS图像 WC_eardir/Stores.war/Madisons/mobile/iPhone/include/styles/style1/CachedHeaderDisplay.jsp iPhone的替代页面 WC_eardir/Stores.war/Madisons/mobile/iPhone/include/styles/style1/CachedFooterDisplay.jsp iPhone的替代页面脚注 应用程序代理和视图层级 我们使用InterfaceBuilder在应用程序的主NIB文件(MainWindow.xib)中定义MadisonsiPhone应用程序的视图层级。 它由一组通过原生导航和选项卡栏界面管理的视图组成—通过UINavigationController和UITabBarController控制的合成视图。 视图层级顶部是一个选项卡栏界面,位于应用程序的UIWindow实例正下方。 选项卡栏界面由一个UITabBarController实例控制,该实例构造和管理选项卡栏界面下方的视图,包括选项卡栏及其选项卡,每个选项卡都有一个由导航界面
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 使用混合应用程序编程模型为 WebSphere Commerce 构建移动应用程序 使用 混合 应用程序 编程 模型 构建 移动