使用 WebSphere Portal 和 IBM Worklight 交付出色的移动 Web 体验,第 2 部分: 集成对 WebSphere Portal 页面的多设备支持

IBM® WebSphere® Portal 和 IBM 的 Exceptional Web Experience 解决方案十多年来一直是 Web 体验领域中的市场领袖。IBM Worklight™ 是一个交付原生、混合和 Web 应用程序的全新的、完整的移动企业应用程序平台。本文将介绍如何在实现 WebSphere Portal 与 Worklight 集成的过程中实现对 Android 和 iOS 应用程序的同时支持。此练习改进了 第 1 部分 中提供的示例,演示了如何构建一个 iOS 应用程序并动态地包含合适的 Worklight 资源。

Jonathan Lidaka, WebSphere Portal 前端工程师, IBM

Jon Lidaka 是 IBM 三角公园研发实验室的一位前端工程师。在参与 Portal 开发的过程中,他主要从事主题开发(专门研究可访问性和全球化)以及各种组件的研究(包括管理 portlet 和 Web 应用程序集成器)。目前他领导着 Portal 的移动开发工作。Jon 在多个 IBM 大会上发表过有关用户界面设计和针对移动设备优化 Portal 主题的演讲。



2013 年 5 月 27 日

免费下载:IBM® Worklight Mobile Platform
下载更多的 IBM 软件试用版,并加入 IBM 软件下载与技术交流群组,参与在线交流。

简介

立即获取 Worklight

立即免费下载 IBM Worklight Developer Edition 5.0,并永久免费使用!

IBM Worklight 平台使您能够为许多设备环境创建应用程序,其中包括 iOS、Android 和 Blackberry。通过使用(Worklight 发布并使用的)Apache Cordova 等技术,您可通过 JavaScript™ 从您的 Web 标记调用原生功能。

本文将介绍创建一个与 IBM WebSphere Portal 集成的混合 iOS 应用程序的过程。文中将讨论确定访问过门户和包含合适的资源(适合 iOS 或 Android)来支持应用程序的原生功能的过程。

先决条件

文本对本系列文章 第 1 部分 中提供的信息进行了扩充。在继续执行这里列出的步骤之前,请完成第 1 部分中的示例解决方案。

除了第 1 部分中定义的先决条件之外,您还必须安装 Apple Xcode 来构建这里描述的示例混合应用程序。本文基于支持 Apple iPhone 的 Worklight 混合应用程序。此示例已在 Apple Xcode version 4.4.1 上进行了测试,仅适用于 Apple OS X。


在 Worklight 中创建 iOS 环境

  1. 要在 Worklight 中为 iPhone 创建一个新环境,可以打开项目资源管理器,右键单击应用程序文件夹中的 WLPortalApp,然后选择 New > Worklight Environment(图 1)。
    图 1. 创建一个新的 Worklight 环境
    图 1. 创建一个新的 Worklight 环境
  2. New Worklight Environment 面板将显示(图 2)。对于这个特定的示例,请选择 iPhone。如果需要为其他 iOS 设备(比如 iPad)创建环境,也可以在这个面板上指定其他选项。单击 Finish
    图 2. Eclipse 中显示的 Worklight 环境
    图 2. Eclipse 中显示的 Worklight 环境
  3. Worklight Studio 使用一个针对 iPhone 设备的原生应用程序更新项目(图 3)。
    图 3. 将 iPhone 原生应用程序添加到项目中
    图 3. 将 iPhone 原生应用程序添加到项目中
  4. 接下来,打开 iOS 原生应用程序的主要类文件(图 4)。这个文件位于 \WLPortal\apps\WLPortalApp\iPhone\native\classes\WLPortalApp.m。这是将要修改的文件,类似于第 1 部分中的 WLPortalApp.java 文件。所有 iOS 应用程序都是使用 Objective-C 编写的(参阅 参考资料)。
    图 4. iOS 原生应用程序的主要类文件
    图 4. iOS 原生应用程序的主要类文件
  5. 要在 iOS 应用程序中显示该门户,则需要修改启动器方法,以便加载门户 URL。要修改的方法名为 didFinishLaunchingWithOptions(清单 1),通常会启动默认创建的一个内部 HTML 文件。
    清单 1. WLPortalApp.m 中的didFinishLaunchingWithOptions 方法
    /**
     * This is main kick off after the app inits, the views and Settings are setup here.
     */
    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:
    (NSDictionary *)launchOptions 
    {
        BOOL ret = [super application:application didFinishLaunchingWithOptions:
    launchOptions];
       
        /*
         * If you need to do any extra app-specific initialization, you can do it here.
         **/
        
        return ret;
    }
  6. 将清单 1 中的代码块替换为清单 2 中的代码。新代码将会自动在一个定向到该门户的 Web 视图中启动该应用程序。
    清单 2. 将应用程序定向到门户 URL 的 didFinishLaunchingWithOptions 方法
    -(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:
    (NSDictionary *)launchOptions
    {
        BOOL superResult = [super application:application didFinishLaunchingWithOptions:
    launchOptions];
        NSURL* remoteURL = [NSURL URLWithString:@"http://9.99.999.999:10039/wps/portal”];
        NSURLRequest* request = [NSURLRequest requestWithURL:remoteURL];
        [self.viewController.webView loadRequest:request];
        return superResult;
    }

    此示例中的 IP 地址应是您希望在混合应用程序中呈现的 WebSphere Portal 服务器的地址。
  7. 打开位于 \WLPortal\apps\WLPortalApp\iphone\native 的 Cordova.plist 文件。
  8. 找到名为 OpenAllWhitelistURLsInWebView 的属性键并将它设置为 “true”(清单 3)。
    清单 3. 将 OpenAllWhitelistURLsInWebView 设置为 true
    <key>OpenAllWhitelistURLsInWebView</key>
    <true/>
  9. 现在您已设置了应用程序,接下来需要验证是否会构建和部署它。从图 5 中可以看出,Build All and Deploy 命令表明将基于 Web 应用程序的变化而重新部署原始应用程序。右键单击应用程序并选择 Run As > Build All and Deploy 来执行 Build All and Deploy 命令。
    图 5. 选择构建和部署
    图 5. 选择构建和部署
  10. 构建过程开始后,可以在 Eclipse 右下角的状态栏中看到进度。当该过程完成时,您应在 Worklight 控制台中看到消息 Application 'YourApp' deployed successfully with all environments。iOS 和 Android 应用程序都已更新。
  11. 接下来,您希望在 iOS 模拟器中查看该应用程序。为此,首先右键单击 Eclipse 中该项目下的 iphone,然后选择 Run as > Xcode project(图 6)。这将启动 Xcode,您的应用程序会显示在控制台中(图 7)。
    图 6. 以 Xcode 项目的形式运行应用程序
    图 6. 以 Xcode 项目的形式运行应用程序
    图 7. 您的应用程序显示在 Xcode 中
    图 7. 您的应用程序显示在 Xcode 中
  12. 因为该应用程序是为 iPhone 设备创建的,所以单价控制台左上角的 Run 图标旁边的向下箭头,选择 iPhone 5.1 Simulator,将模拟器更改为 iPhone(图 8)。
    图 8. 将模拟器更改为 iPhone
    图 8. 将模拟器更改为 iPhone
  13. 选择左上角的 Run 图标(图 9),模拟器将会启动您的应用程序(图 10)。
    图 9. Xcode 中的 Run 按钮
    图 9. Xcode 中的 Run 按钮
    图 10. 您的应用程序在 iPhone 模拟器中运行
    图 10. 您的应用程序在 iPhone 模拟器中运行

同时针对 iOS 和 Android 更新 WebSphere Portal 主题

WebSphere Portal 主题现在需要一项更新,以便识别移动设备操作系统和包含正确的文件集,从而节省 Worklight 资源。移动设备操作系统的标识将由 WebSphere Portal 中的设备类机制确定。针对 Android 和 iOS 的智能电话客户端开箱即用地组合到了一个设备类中,即 smartphone。您需要将客户端分开,以便基于操作系统来加载资源。

  1. 要更新 iPhone 客户端,以便采用与 Android 不同的方式标识它,可以运行清单 4 中的 xmlaccess 脚本。
    清单 4. 更改 iPhone 和 Adroid Mobile 的设备类的 XMLAccess 脚本
    <?xml version="1.0" encoding="UTF-8"?>
    <request type="update" 
    		 version="8.0.0.0" 
    		 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    		 xsi:noNamespaceSchemaLocation="PortalConfig_8.0.0.xsd">
        <portal action="locate">
            <client action="update" domain="rel" manufacturer="Apple" markup="html" 
    uniquename="wps.client.iphone">
                <useragent-pattern>.*iPhone.*</useragent-pattern>
    	<client-capability update="remove">com.ibm.portal.devicesupport.deviceclass=
    smartphone</client-capability>
    	<client-capability update="set">com.ibm.portal.devicesupport.deviceclass=
    smartphone-ios</client-capability>     	
                <client-capability update="set">HTML_4_0</client-capability>
            </client>
        </portal>
    </request>

    如果以前使用过 smartphone 设备类,那么您必须更新所有定制逻辑或静态模板,以便使用新类 smartphone-ios。
  2. 在第 1 部分中,您创建了一个定制主题,而且该主题的一部分是创建一个包含 自定义动态资源 的新的 Web 应用程序 EAR。打开 head.jsp 文件,它位于 /<wp_profile>/installedApps/<node>/<custom_ear>/<custom_war>/themes/html/dynamicSpots/。在 head.jsp 文件底部,添加清单 5 中的代码,该代码将获取设备类并在一个 JSP 变量中设置它。
    清单 5. 获取设备类
    <c:set var="deviceClass" scope="request" value="${wp.clientProfile['DeviceClass']}"
    />
  3. 在获取设备类的代码行之后,使用获取的信息检查 iOS 或 Android 智能电话设备(清单 6)。
    清单 6. 检查 iOS 或 Android 智能电话的逻辑
    <c:if test="${deviceClass == 'smartphone'}">
    <!--android devices -->
    <c:if test="${deviceClass == 'smartphone-ios'}">
    <!--ios devices -->
    </c:if>
  4. 现在主题已经可确定访问门户的设备,您可以将特定于 iOS 的文件从 Worklight 迁移到 WebSphere Portal。第 1 部分中使用的许多文件可在不同设备中共享,无法共享的文件将包含命名空间 ios。定义将要包含在 WebSphere Portal 中的 JavaScript 的文件是 WLPortalApp.html,该文件位于 \WLPortal\apps\WLPortalApp\iphone\native\www\default\。
  5. 需要专门为 iPhone 创建的第一个文件是静态属性文件。静态属性是在 HTML 文件顶部定义的(清单 7)。
    清单 7. iPhone 设备的静态属性
    	var WL = WL ? WL : {};
    
    	/**
    	 * WLClient configuration variables.
    	 * Values are injected by the deployer that packs the gadget.
    	 */
    
    	 WL.StaticAppProps = {
    	"APP_DISPLAY_NAME": "WLPortalApp",
    	"APP_SERVICES_URL": "\/apps\/services\/",
    	"APP_VERSION": "1.0",
    	"ENVIRONMENT": "iphone",
    	"LOGIN_DISPLAY_TYPE": "embedded",
    	"WORKLIGHT_ROOT_URL": "\/apps\/services\/api\/WLPortalApp\/iphone\/"
    };
  6. 获取此 HTML 文件中的 JavaScript(清单 7),并以适合的方式将其包含在一个名为 staticprops.ios.js 的新 JavaScript 文件中。将这个新文件放在以下位置: fs-type1:themes/<customTheme>/worklight/common/js/(图 11)。
    图 11. 创建新文件 staticprops.ios.js
    图 11. 创建新文件 staticprops.ios.js
  7. 另一需要重命名并复制到 common JavaScript 文件夹的文件是 wlcommon.js,它位于 \WLPortal\apps\WLPortalApp\iphone\native\www\default\common\js\。
    图 12. wlcommon.js 重命名为特定于 iOS 的名称
    图 12. wlcommon.js 重命名为特定于 iOS 的名称
  8. 下一组需要从 Worklight 复制到 Portal 的文件位于 wlclient 文件夹中。这些文件需要使用 “ios” 命名空间重命名:
    • checksum.js
    • cordova.js
    以下文件(位于 \WLPortal\apps\WLPortalApp\iphone\native\www\default\wlclient\js\)可按原样复制:
    • json2.js
    • wpgap.ios.js
    完成重命名后,将所有 4 个文件复制到 WebSphere Portal 的以下位置:fs-type1:themes/<customTheme>/worklight/wlclient/js/。
    图 13. wlclient JavaScript 文件夹中的新文件
    wlclient JavaScript 文件夹中的新文件
  9. Worklight API 需要的所有文件现在都已准备就绪,需要根据访问 WebSphere Portal 的设备将它们包含在页面上。需要为 Android 设备提供的 JavaScript 可直接从第 1 部分中创建的 wl_client 模块获取。将合适的脚本(包含元素)添加到用于 Android 移动设备的 head.jsp 中(清单 8)。
    清单 8. 添加到 head.jsp 中针对 Android 移动设备的 JavaScript
    <c:if test="${deviceClass == 'smartphone'}">
    <!--android devices -->
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/common/js/staticprops.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/cordova.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/common/js/wljq.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/common/js/base.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/messages.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/common/js/wlcommon.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/diagnosticDialog.js" allowRelativeURL=
    "true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/deviceAuthentication.js" 
    allowRelativeURL="true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/window.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/worklight.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/wlclient.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/wlfragments.js" allowRelativeURL=
    "true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/encryptedcache.js" allowRelativeURL=
    "true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/checksum.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/wlgap.android.js" allowRelativeURL="
    true" mode="download" lateBinding="false"/>'></script>
    </c:if>
  10. 接下来,将适合 iOS 设备的 JavaScript 添加到 head.jsp 中。该列表基本上与 Android 移动设备相同,您可以基于 WLPortalApp.html 中定义的脚本来验证它,WLPortalApp.html 位于 \WLPortal\apps\WLPortalApp\iphone\native\www\default\ 中。但是,具有 “ios” 命名空间的文件已替换为相应的 Android 文件,而且已添加 json2.js(清单 9)。
    清单 9. 添加到 head.jsp 中的针对 iOS 移动设备的 Javascript
    <c:if test="${deviceClass == 'smartphone-ios'}">
    <!-- ios devices -->
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/common/js/staticprops.ios.js" allowRelativeURL=
    "true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/cordova.ios.js" allowRelativeURL=
    "true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/common/js/wljq.js" allowRelativeURL="true" mode=
    "download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/common/js/base.js" allowRelativeURL="true" mode=
    "download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/messages.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/common/js/wlcommon.ios.js" allowRelativeURL=
    "true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/diagnosticDialog.js" allowRelativeURL=
    "true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/deviceAuthentication.js" 
    allowRelativeURL="true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/window.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/worklight.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/wlclient.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/wlfragments.js" allowRelativeURL=
    "true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/encryptedcache.js" allowRelativeURL=
    "true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/checksum.ios.js" allowRelativeURL=
    "true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/json2.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/wlgap.ios.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    </c:if>

    当投入生产时,为每个特定于设备的文件集创建 JavaScript 层很有用。这会减少页面呈现时的请求,有助于提高性能。
  11. 现在,已通过 head.jsp 文件包含 Android JavaScript 文件,您应从 profile_worklight.json 文件(位于 fs-type1:themes/<customTheme>/profiles/)中删除 wl_client 模块。 .
    清单 10. 最初的 profile_worklight.json 模块集
    	"moduleIDs": [
    		"wp_theme_portal_80",
    		"wp_portlet_css",
    		"wp_one_ui",
    		"wp_one_ui_dijit",
    		"wp_legacy_layouts",
    		"wp_client_ext",
    		"wp_status_bar",
    		"wp_theme_menus",
    		"wp_theme_skin_region",
    		"wp_theme_high_contrast",
    		"wp_layout_windowstates",
    		"wl_client",
    		"wl_init"
    	],
    清单 11. 删除 wlclient 后的 profile_worklight.json 文件
    	"moduleIDs": [
    		"wp_theme_portal_80",
    		"wp_portlet_css",
    		"wp_one_ui",
    		"wp_one_ui_dijit",
    		"wp_legacy_layouts",
    		"wp_client_ext",
    		"wp_status_bar",
    		"wp_theme_menus",
    		"wp_theme_skin_region",
    		"wp_theme_high_contrast",
    		"wp_layout_windowstates",
    		"wl_init"
    	],
  12. 因为 wl_client 模块已从配置文件中删除,所以您必须从 wl_init 模块中删除前提条件。为此,请打开 worklight.json 共享文件并删除 prereq 定义,该贡献文件位于 fs-type1:themes/<customTheme>/contributions。
    清单 12. 最初的 wl_init 模块定义
    {
    	"id":"wl_init",
    	"prereqs":[{
    		"id":"wl_client"
    	},{
    		"id":"wp_client_main"
    	},{
    		"id":"wp_client_ext"
    	}],
    	"contributions":[{
    		"type":"config",
    		"sub-contributions":[{
    			"type":"js",
    			"uris":[{
    				"value":"/worklight/common/js/init.js"
    			}]
    		}]
    	}]
    }
    清单 13. 删除 wl_client prereq 后的 wl_init 模块
    {
    		"id":"wl_init",
    		"prereqs":[
    		{
    			"id":"wp_client_main"
    		},{
    			"id":"wp_client_ext"
    		}],
    		"contributions":[{
    			"type":"config",
    			"sub-contributions":[{
    				"type":"js",
    				"uris":[{
    					"value":"/worklight/common/js/init.js"
    				}
    				]
    			}]
    		}]
    	}

所有内容都已准备就绪,您的门户已可以检测访问 WebSphere Portal 的设备,包含与 Worklight 正确集成所需的文件集.


测试应用程序

因为此练习是第 1 部分的延续,所以已有一个示例用于测试 Worklight API。该示例将在页面的顶部显示设备名称和版本。测试将确认是否为 Android 模拟器和 iOS 模拟器正确显示了此信息。

  1. 再次右键单击应用程序并选择 Build All and Deploy 来构建并部署应用程序。您可以在 Eclipse 右下角的状态栏中查看进度。
  2. 当完成该过程时,右键单击 WLPortalWLPortalAppAndroid 并选择 Run As... > Android Application。这将启动 Android Emulator,该应用程序会显示您的 WebSphere Portal。
  3. 在该应用程序呈现 WebSphere Portal 应用程序后,导航到您对其应用定制主题和 Worklight 配置文件的页面。如果您没有访问此页面的匿名访问权限,那么请登录并导航到此页面。这需要花费几秒钟的时间来加载设备设置,但您会看到它们显示在页面顶部,如图 14 所示。
    图 14. Android 模拟器显示了 Portal 和 Worklight API 示例
    图 14. Android 模拟器显示了 Portal 和 Worklight API 示例
  4. 右键单击 WLPortalApp 下的 iphone 并选择 Run As > Xcode project。这将启动 Xcode 应用程序,您需要在 iOS 模拟器中运行该应用程序。运行该应用程序之后,它会显示您的 WebSphere Portal。
  5. 在该应用程序呈现 WebSphere Portal 应用程序后,再次导航到您对其应用定制主题和 Worklight 配置文件的页面。您会看到设备名称和版本显示在页面顶部,如图 15 所示。
    图 15. iOS 模拟器显示了 WebSphere Portal 和 Worklight API
    图 15. iOS 模拟器显示了 WebSphere Portal 和 Worklight API

结束语

IBM WebSphere Portal 使您能够轻松地调整可供多渠道 Web 应用程序使用的原生设备功能。为 Android 和 iOS 创建的 Worklight shell 也可封装为一个可交付程序,如果需要的话,可以将它发布到一个应用程序商店中或通过 MDM 部署。结果是,您扩展了全面的 WebSphere Portal 多渠道网站管理功能,以包含为多个设备定制的原生设备服务。本系列的后续文章将分别探讨单一登录身份验证的配置,以及如何将 Worklight 与 Web Exeperience Factory 集成。


下载

描述名字大小
应用程序的样例Part2-sample_files.zip9 KB

参考资料

学习

获得产品和技术

讨论

条评论

developerWorks: 登录

标有星(*)号的字段是必填字段。


需要一个 IBM ID?
忘记 IBM ID?


忘记密码?
更改您的密码

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件

 


在您首次登录 developerWorks 时,会为您创建一份个人概要。您的个人概要中的信息(您的姓名、国家/地区,以及公司名称)是公开显示的,而且会随着您发布的任何内容一起显示,除非您选择隐藏您的公司名称。您可以随时更新您的 IBM 帐户。

所有提交的信息确保安全。

选择您的昵称



当您初次登录到 developerWorks 时,将会为您创建一份概要信息,您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。

昵称长度在 3 至 31 个字符之间。 您的昵称在 developerWorks 社区中必须是唯一的,并且出于隐私保护的原因,不能是您的电子邮件地址。

标有星(*)号的字段是必填字段。

(昵称长度在 3 至 31 个字符之间)

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

 


所有提交的信息确保安全。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=移动开发, WebSphere, Lotus
ArticleID=931443
ArticleTitle=使用 WebSphere Portal 和 IBM Worklight 交付出色的移动 Web 体验,第 2 部分: 集成对 WebSphere Portal 页面的多设备支持
publish-date=05272013