使用 WebSphere Portal 和 IBM Worklight 交付出色的移动 Web 体验,第 1 部分: 将一个混合移动应用程序与 WebSphere Portal 页面相集成

IBM® WebSphere® Portal 和 IBM 的 Exceptional Web Experience 解决方案十多年来一直是 Web 体验领域中的市场领袖。IBM Worklight 是一个交付原生、混合和 Web 应用程序的全新的、完整的移动企业应用程序平台。本文介绍如何结合使用 WebSphere Portal 和 Worklight,使企业用户能够为他们的 Web 社区提供多渠道站点支持。文中提供了一个练习,演示了如何使用 IBM Worklight Developer Edition 5.0 来构建一个用于查看 WebSphere Portal 页面的混合 Android 应用程序。

Jaye Fitzgerald, Mobile Portal Accelerator 的技术领导, IBM

Jaye Fitzgerald 是 IBM 利特尔顿开发实验室的 Mobile Portal Accelerator 技术领导。他参与开发了 Portal 的移动产品,作为 WebSphere Portal 实验室服务团队的成员提供咨询服务。Jaye 在 Lotusphere 和 IBM Exceptional Web Experience Conferences 上展示过 WebSphere Portal 的移动产品。



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

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



2013 年 3 月 11 日 (最初于 2012 年 8 月 29 日)

简介

立即获取 Worklight

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

移动渠道已成为销售、营销等许多行业的一个重要战略渠道。随着越来越多的企业通过网站来管理他们其品牌,常见的难题就变成了如何向移动设备提供内容和应用程序。

在查看 IBM WebSphere Portal 与 IBM Worklight 的重叠区域之前,了解网站与应用程序之间的差别很重要:

  • 网站将 Web 内容和多个 Web 应用程序聚合为一种单一的用途体验,可跨多种渠道运行,包括桌面浏览器、信息亭、智能电话和平板电脑。我们将使用您最喜欢的航空公司的网站作为一个简单的示例。这些网站可能也有一个移动网站,并且支持电话和平板电脑。WebSphere Portal 是构建网站的绝佳平台。
  • Web 应用程序是自定义的,通常适用于特定的任务。例如,您最喜欢的航空公司应用程序来自一个应用程序商店,并且支持您预定航班或座位,这就是一个 Web 应用程序示例。它通常包含网站功能的一个子集,适用于您可在设备上实际执行的操作。IBM WebSphere Application Server 是提供独立的 Web 应用程序的不二选择。IBM Worklight 提供了创建原生和混合应用程序的能力,您可以使用 WebSphere Application Server 作为后端(如果创建混合应用程序),也可以使用 WebSphere Portal 作为后端(如果创建混合网站)。

然后您要做出的选择是开发一个原生应用程序、混合应用程序还是 Web 应用程序。但还有两个问题需要回答,这两个问题可能会影响到您的移动渠道技术决策:

  1. 您需要支持哪些设备?
  2. 您的应用程序将执行何种操作?

帮助您回答这些问题的基本考虑因素包括:您有哪些用例?您的应用程序是否需要特定的设备功能,比如 GPS 或照相机?应用程序是否需要高保真的屏幕视图,或者移动浏览器是否够用?这些问题的答案对此决策至关重要,原生、混合和纯 Web 应用程序的优缺点也很重要:

  • 原生应用程序适用于企业移动应用程序,拥有很高的成本,拥有与纯原生开发有关的很长的时间线。能够开发 100% 原生应用程序的熟练人员很难找到,而且聘请费用可能很高昂。复杂的原生应用程序可能需要多个技术专家,而且跨平台的问题可能会进一步增加成本。除了初步开发,持续的操作系统更新需要持续的应用程序更新,必须重新提交这些更新来批准使用它们,然后才能在应用程序商店中让它们重新上线。
  • 相反,基于 HTML5、CSS3 和 JavaScript™ 的,或者使用 Dojo 和 jQuery 等客户端框架的完整的 Web 应用程序提供了一种创建移动友好的网站的简单方法。开发成本通常低得多,因为很容易找到拥有常用 Web UI 技能的人员。对设备操作系统的更新通常不会影响移动网站,移动网站的开发方法使它们能够跨供应商设备工作。使用这些通用 Web 标准构建的 Web 应用程序还支持跨各种设备重用代码,这减少了维护和总体拥有成本。此外,您无需担忧应用程序商店的审核过程,也无需担心限制会延迟或停止更新。

    此方法的两个主要缺点包括:

    • 您只能访问浏览器为您提供的原生功能。例如,在 iOS 设备上,您可以访问电位计 (potentiometer)、加速计和 GPS,但不能访问照相机。
    • 您只能以图形方式实现 HTML/CSS/JavaScript 中可实现的功能。结果,一些在原生领域中可用的保真度和 UI 功能无法在浏览器领域中使用。
  • 混合应用程序 结合了两家之长。您既能获得使用 HTML/CSS/JavaScript 进行开发的简单性,又能使用原生服务放大这一简单性,为应用程序商店生成一个应用程序。使用 Apache Cordova(Worklight 在使用和发布)等技术,您可以使用 JavaScript 从 Web 标记调用原生功能。例如,您可以使用一行简单的 JavaScript 代码调用照相机,比如:navigator.camera.takeSnapshot

示例解决方案

本文将介绍构建一个示例解决方案,通过一个混合应用程序来集成 Worklight 5.0 与 WebSphere Portal 8.0 的步骤。本节将介绍此解决方案中涉及的组件,以及您执行这些步骤所需的相关前提条件。

组件

  • Worklight

    Worklight 平台 包含一组组件,它们使您能够管理原生、混合和 Web 应用程序的完整生命周期,这些组件可提供给多个移动平台,其中包括 iOS、Android、BlackBerry 和 Windows® Phone。IBM Worklight Developer Edition 5.0 是一个强大且灵活的移动集成开发环境,您可以 免费下载和使用 它。这里使用了 Worklight Developer Edition 来构建访问 WebSphere Portal 的示例应用程序。

  • WebSphere Portal

    WebSphere Portal 是为桌面和移动设备提供网站框架方面的市场领袖。WebSphere Portal 提供了站点导航和品牌,所以您可针对您的企业定制自己的站点。该框架提供了有针对性的内容,通过分析来度量您站点的有效性。基于角色的访问和上下文驱动的内容也是重要的功能。WebSphere Portal 的优势源于它的 WebSphere Application Server 基础。WebSphere Portal 有丰富的功能,包括安全性、集成的 Web 内容管理、内容目标、虚拟门户等。WebSphere Portal 最大的价值在于能够将拥有这些功能背景的应用程序聚合在您的站点上。

  • 响应式 Web 设计

    对于如今的企业,创建已针对多种设备而进行优化的出色的 Web 体验至关重要。用户现在期望在智能电话上上网就像在桌面计算机上上网一样轻松。但是,目标移动设备的确定通常始于有关原生应用程序的对话。前面已经提到过,这些应用程序拥有高昂的拥有成本且代码重用率有限。另一个解决方案是专门为一个移动设备创建一个备用网站,这不是一个特别实用的解决方案,因为您最终可能有许多代码资源要维护。

    响应式 Web 设计(参阅 参考资料)是一种实用的解决方案,它通过创建灵活、流畅和自适应的网站来摆脱设备和屏幕大小的限制。使用响应式 Web 设计概念,用户界面能够自动针对屏幕分辨率、方向或富 Web 应用程序和混合应用程序的功能而优化。这可以保证您发挥 Web 设计工作的最大价值。

  • 拓扑结构选择

    在计划 Worklight 和 WebSphere Portal 部署时,您会遇到一些服务器拓扑结构选项。IBM Worklight Server 需要使用一个代理来访问 WebSphere Portal。此示例将 WebSphere Portal 和 Worklight 服务器放在同一个开发机器上进行了测试;清单 3 表明,WebSphere Portal URL 中的 IP 地址被用于访问初始页面。在服务器位于不同系统上时,您需要使用一个代理来部署此示例。IBM Worklight 入门 文档中的模块 45 探讨了如何使用一个远程网站,比如一个托管在 WebSphere Portal 服务器上的网站。

其他 IBM 产品也能满足您构建 Web 或混合应用程序的需求。例如,IBM Rational® Application Developer 和 IBM Web Experience Factory 是也可以用于开发应用程序。

先决条件

要构建这里提到的示例移动混合应用程序,则必须正确安装以下软件产品和功能并使它们正常运行:

  • WebSphere Portal 8.0

    参阅 WebSphere Portal 文档,了解安装说明。

  • Eclipse

    下载 Eclipse。此示例基于 Eclipse 3.7.2 (Indigo),已使用 Eclipse IDE for Java™ EE Developers 进行了测试。(Eclipse Classic 和 Eclipse IDE for Java Developers 可能也很有用,但是没有在此示例中测试过它们。)

请注意,这里介绍的应用程序仅适用于 Android 设备。本系列的后续部分将介绍 Worklight 与 Android 和 iOS 操作系统的集成。

  • Android SDK

    安装 Eclipse 后,下一步是添加 Android SDK。此示例已使用 Android SDK 2.3.3 (API 10) 进行了测试。

    Oracle Java JRE 是使用 Android SDK 的前提条件。一旦完成安装,您就可以导航到 Window > Preferences > Java > Installed JREs,配置 Eclipse 实例来使用 JRE(图 1)。

    图 1. 在 Eclipse 中设置 Oracle JRE
    图 1. 在 Eclipse 中设置 Oracle JRE
  • Worklight

    此示例需要安装 IBM Worklight 5.0 或更高版本,不适用于早期版本。您可以免费 下载 IBM Worklight Developer Edition 5.0,使用它们进行开发。有关如何使用该插件更新 Eclipse 的详细信息,可在 IBM Worklight 入门 文档中的 “设置” 模块中找到。

    Worklight 将服务器安装为 Eclipse 的一部分。您可能需要更新 eclipse.ini,以便将端口从 8080 更改为另一个值,比如 8085。启动 Eclipse 时,Worklight 服务器会自动启动。清单 1 显示了一个 eclipse.ini 文件内容示例,其中设置了 -Dworklight_port

    清单 1. eclipse.ini
    -startup
    plugins/org.eclipse.equinox.launcher_1.2.0.v20110502.jar
    --launcher.library
    plugins/org.eclipse.equinox.launcher.win32.win32.x86_64_1.1.100.v20110502
    -showsplash
    org.eclipse.platform
    --launcher.XXMaxPermSize
    256m
    --launcher.defaultAction
    openFile
    -vmargs 
    -Dworklight.port=8085
    -Xms40m
    -Xmx384m
  • WebDAV 客户端

    要使用 Worklight JavaScript 更新 WebSphere Portal 主题,则需要有一个 WebDAV 客户端。此示例是使用 AnyClient 开发的。您可使用 WebSphere Portal 支持的任何 WebDAV 客户端。请参阅 Connecting to the Portal WebDAV with 8.0,了解有关的详细信息。

  • 定制主题

    在将 Worklight JavaScript 应用于您的主题之前,您需要创建自己的定制主题。复制 WebSphere Portal 主题可确保您的主题包含它正常运行所需的所有元素,确保您的更改不会被修复包所覆盖。不要直接修改 WebSphere Portal 主题,因为它可能由服务修复包更新。相反,遵照 本文中创建主题副本的说明


创建 Worklight 应用程序

  1. 启动 Eclipse。在 Worklight 控制台中可以注意到服务器已启动(图 2)。
    图 2. Worklight 服务器已启动
    图 2. Worklight 服务器已启动
  2. 要开始构建应用程序,则需要创建一个新的 Worklight 项目。在 Eclipse 中,导航到 New > Other > Worklight Project 并单击 Next(图 3)。
    图 3. 创建一个新的 Worklight 项目
    图 3. 创建一个新的 Worklight 项目
  3. 为您的项目命名。在图 4 中,该项目被命名为 WLPortal。保留 Hybrid Application 的默认值并单击 Next
    图 4. 为您的 Worklight 项目命名
    图 4. 为您的 Worklight 项目命名
  4. 为 Worklight 项目中的混合应用程序命名,在本例中命名为 WLPortalApp。此示例中没有 JavaScript 包,但您可以在此面板上选择添加一个(图 5)。
    图 5. 为混合应用程序命名
    图 5. 为混合应用程序命名
  5. 单击 Finish。项目和应用程序工件已创建。这可能会花费几分钟的时间。在完成创建后,系统可能要求您切换到 Design 透视图,并在项目资源管理器中查看项目(图 6)。
    图 6. Eclipse 中显示的项目
    图 6. Eclipse 中显示的项目
  6. 接下来,您可能希望创建一个 Worklight 环境来构建混合应用程序。右键单击应用程序文件夹中的 WLPortalApp,选择 New > Worklight Environment(图 7)。
    图 7. 创建一个新 Worklight 环境
    图 7. 创建一个新 Worklight 环境
  7. New Worklight Environment 面板将显示(图 8)。因为这个具体的实例仅适用于混合 Android 应用程序,所以可以选择 Android phones and tablets。如果需要为其他设备操作系统创建环境,也可以在此面板中指定其他选项。单击 Finish
    图 8. Eclipse 中显示的 Worklight 环境
    图 8. Eclipse 中显示的 Worklight 环境
  8. Worklight Studio 使用一个原生应用程序构建并更新该项目(图 9)。原生项目名为 Worklight Project/WorklightApplication/Platform。Worklight Studio 管理此应用程序的生命周期,您不应对它执行任何更改。当构建和部署您最初在项目创建的 Web 应用程序时,原生应用程序将被所有应用程序更改覆盖。
    图 9. 构建原生应用程序
    图 9. 构建原生应用程序
  9. 现在您已经设置了应用程序,请确认将会构建和部署它。可以在图 10 中看到,Build All and Deploy 命令表示将基于 Web 应用程序更改来重新部署原生应用程序。要执行 Build All and Deploy 命令,可右键单击应用程序并选择 Run As > Build All and Deploy
    图 10. 选择构建并部署
    图 10. 选择构建并部署

    开始构建过程之后,可以在 Eclipse 右下角的状态栏中查看进度。当该过程完成时,您应在 Worklight 控制台中看到消息 Application 'YourApp' deployed successfully with all environments(图 11)。

    图 11. 日志中显示了成功的消息
    图 11. 日志中显示了成功的消息

在尝试运行新的 Android 应用程序之前,请创建一个 Android 虚拟设备。参阅 介绍使用硬件设备的文章,了解 AVD 的详细信息。

  1. 要运行 Android 应用程序,请右键单击项目资源管理器中的 WLPortalWLPortalAppAndroid 项目并选择 Run As > Android Application。这会启动 Android 模拟器(如果还未运行)并加载一个新应用程序实例。您可能需要打开最初的模拟器屏幕才能看到应用程序。图 12 显示了您构建的应用程序的一个视图。
    图 12. 模拟器中呈现的应用程序
    图 12. 模拟器中呈现的应用程序

接下来,将代码添加到您应用程序中,以便调用一个 WebSphere Portal 页面。


使用 Worklight JavaScript 更新 WebSphere Portal 主题

  1. 将 WebSphere Portal 与 Worklight 集成的第一步是在 Android 应用程序中显示该门户。为此,需要创建一个混合应用程序,以便连接到原生包装器中的 WebSphere Portal。在 Eclipse 中,打开初始化应用程序的 Java 类(清单 2),该类位于 \WLPortal\apps\WLPortalApp\android\native\src\com\WLPortalApp\WLPortalApp.java
    清单 2. WLPortalApp.java
    package com.WLPortalApp;
    
    import android.os.Bundle;
    
    import com.worklight.androidgap.WLDroidGap;
    
    public class WLPortalApp extends WLDroidGap {
    	@Override
    	public void onCreate(Bundle savedInstanceState) {
    	   super.onCreate(savedInstanceState);
    	   //DeviceAuthManager.getInstance().setProvisioningDelegate(
    	   <Use default ProvisioningDelegateImpl class or replace 
    	   with your IProvisioningDelegate implementation>);
    	   super.loadUrl(getWebMainFilePath());
    	}		
    }

本示例中的 IP 地址应是您希望在混合应用程序中呈现的 WebSphere Portal 服务器的地址。请参阅 示例解决方案组件 一节,了解安装 Worklight 和 WebSphere Portal 的更多信息。

  1. 该应用程序使用清单 2 中所示的类将控制权转移到位于 \WLPortal\apps\WLPortalApp\common\WLPortalApp.html 的 HTML 页面。您需要更改此文件,以便它能前进到 WebSphere Portal IP 地址和端口。为此,可以更改 onCreate 方法来加载 WebSphere Portal URL 并利用 cookie 管理器(清单 3)。
    清单 3. 利用 WebSphere Portal URL 的 onCreate 方法
    public void onCreate(Bundle savedInstanceState) {
    	   super.onCreate(savedInstanceState);
    	   CookieSyncManager.createInstance(appView.getContext());
    	   CookieManager.getInstance().removeSessionCookie();
    	   super.loadUrl("http://9.99.999.999:10039/wps/portal",false);
    	   }
  2. 确保添加了 CookieSyncManager 和 CookieManager 的导入依赖关系,如清单 4 所示。
    清单 4. CookieSyncManager 和 CookieManager 依赖关系
    import android.webkit.CookieSyncManager;
    import android.webkit.CookieManager;
  3. 由于进行了重定向,所以您需要定义另一个方法,让经过验证的页面正常工作,如清单 5 所示。这些更新的结果如清单 6 所示。
    清单 5. 添加这个 loadUrl 方法
    public void loadUrl(String url) {
    	loadUrl(url,false);
    	}
    清单 6. WLPortalApp.java 的最终内容
    package com.WLPortalApp;
    
    import android.os.Bundle;
    import android.webkit.CookieSyncManager;
    import android.webkit.CookieManager;
    
    import com.worklight.androidgap.WLDroidGap;
    
    public class WLPortalApp extends WLDroidGap {
    	@Override
    	public void onCreate(Bundle savedInstanceState) {
    		   super.onCreate(savedInstanceState);
    		   CookieSyncManager.createInstance(appView.getContext());
    		   CookieManager.getInstance().removeSessionCookie();
    		   super.loadUrl("http://9.99.999.999:10039/wps/portal",false);
    	}	
    	
    	public void loadUrl(String url) {
    		loadUrl(url,false);
    	}
    }
  4. 要确保所有链接都使用混合容器 Web 视图打开,可在 cordova.xml(位于 \WLPortal\apps\WLPortalApp\android\native\res\xml\cordova.xml)中将 stay-in-webview 首选项设置为:

    <preference name="stay-in-webview" value="true" />

    如果使用一个非本地门户服务器,那么也可修改此位置的安全策略。默认的安全策略是阻止所有网络访问。然后您可以声明对 cordova.xml 中特定网络域和子域的访问权限。这篇文章 提供了有关的更多信息。

  5. 现在可再次右键单击应用程序,选择 Build All and Deploy。您将在 Eclipse 右下角的状态栏中看到进度。在完成该过程之后,请右键单击 WLPortalWLPortalAppAndroid 并选择 Run As... > Android Application。这将启动 Android 模拟器,应用程序将会显示您的 WebSphere Portal,如图 13 所示。
    图 13. 模拟器运行显示 WebSphere Portal 的应用程序
    图 13. 模拟器运行显示 WebSphere Portal 的应用程序
  6. 现在,您需要获得一个定制主题,该主题基于您 之前 创建的 WebSphere Portal 8.0 主题。您还需要使用 WebDAV 实用程序来执行以下操作:
    • 更新主题模板 (theme.html)。
    • 将 Worklight JavaScript 文件复制到主题。
    • 创建将在一个新主题配置文件中定义的模块。

    启动 WebDAV 实用程序(我们为本示例使用了 AnyClient)并连接到 fs-type1 入口点。在加载它时,会显示如图 14 所示的文件夹结构。

    图 14. fs-type1 的 WebDAV 文件夹结构
    图 14. fs-type1 的 WebDAV 文件夹结构
  7. 导航到您的定制主题,比如 fs-type1:themes/<customTheme>。在定制主题内创建一个名为 worklight 的文件夹(图 15)。
    图 15. 创建的 worklight 文件夹
    图 15. 创建的 worklight 文件夹
  8. 在 Eclipse 中找到您将加载到 WebSphere Portal 中的 Worklight 库的 JavaScript 文件。这些文件夹名为 wlclientcommon,您可在 \WLPortal\apps\WLPortalApp\android\native\assets\www\default\ 下找到它们。将 wlclient 和 common 文件夹都复制到您在 WebDAV 上创建的 worklight 文件夹中。
  9. 打开应用程序在您插入 WebSphere Portal URL 之前加载的主要 HTML 文件,它位于 \WLPortal\apps\WLPortalApp\android\native\assets\www\default\WLPortalApp.html。此文件中有两部分需要集成到 WebSphere Portal 中,因为该应用程序不再使用此文件。
    • 第一部分是 <head> 元素中包含的静态 JavaScript 文件(清单 7)。
      清单 7. WLPortalApp.html 的 head 元素中包含的静态 JavaScript
      <script type="text/javascript">
          // Define WL namespace.
          var WL = WL ? WL : {};
      
          /**
      
           * WLClient configuration variables.
      
           * Values are injected by the deployer that packs the gadget.
      
           */
      
          WL.StaticAppProps = {
          "APP_DISPLAY_NAME": "WLPortalApp",
          "APP_LOGIN_TYPE": "never",
          "APP_SERVICES_URL": "\/apps\/services\/",
          "APP_VERSION": "1.0",
          "ENVIRONMENT": "android",
          "LOGIN_DISPLAY_TYPE": "embedded",
          "LOGIN_REALM": null,
          "WORKLIGHT_ROOT_URL": "\/apps\/services\/api\/WLPortalApp\/android\/"
      };</script>
    • 第二部分是 <body> 元素上的 onload 方法,它用于初始化 Worklight 客户端(清单 8)。
      清单 8. 元素主体上初始化 Worlight JavaScript 的 onload 方法
      <body id="content" onload="WL.Client.init({})" style="display: none">

    这两部分都必须包含在主题中,作为一个模块的工件。获取此 HTML 文件中的 JavaScript,并以一种适用的方式将它包含在各个 JavaScript 文件中。在 Worklight 库的 <customTheme>/worklight/common/js 文件夹中创建两个新文件,分别名为 init.jsstaticprops.js(图 16):fs-type1:themes/<customTheme>/worklight/common/js/

    图 16. 创建新文件 init.js 和 staticprops.js
    图 16. 创建新文件 init.js 和 staticprops.js
  10. 将您刚才创建的 staticprops.js 文件复制到本地机器上并打开该文件(清单 9)。将静态 JavaScript 从 HTML 页面复制到此文件中。
    清单 9. staticprops.js 文件的内容
    var WL = WL ? WL : {};
    WL.StaticAppProps = {
        "APP_DISPLAY_NAME": "WLPortalApp",
        "APP_LOGIN_TYPE": "never",
        "APP_SERVICES_URL": "\/apps\/services\/",
        "APP_VERSION": "1.0",
        "ENVIRONMENT": "android",
        "LOGIN_DISPLAY_TYPE": "embedded",
        "LOGIN_REALM": null,
        "WORKLIGHT_ROOT_URL": "\/apps\/services\/api\/WLPortalApp\/android\/"
    };

    将更新的 staticprops.js 文件复制回 WebDAV 上的 <customTheme>/worklight/common/js 文件夹中。

  11. 将您刚创建的 init.js 文件复制到本地机器上,并打开该文件(清单 10)。这里使用 i$ API(包含在 WebSphere Portal 主题中)创建一个 onload 函数,以便替换 HTML 页面中的内联 onload 方法。
    清单 10. init.js 文件的内容
    i$.addOnLoad(function(){	
    	WL.Client.init({});
    });

    将 init.js 文件复制回 WebDAV 上的 <customTheme>/worklight/common/js 文件夹中。

    请参阅 WebSphere Portal 8.0 Javadocs,了解 i$ API 的更多信息,参阅 WebSphere Portal 维基,了解 使用主题优化框架创建模块 的更多信息。

  12. 需要在定义新主题模块之前创建的最后一个工件是测试 Worklight JavaScript 的示例。此示例将执行测试,确保 Cordova API 可在 WebSphere Portal 主题中使用,并且基于 Cordova API 中的示例集。

    因为此示例仅用于测试该 API 在 WebSphere Portal 中的使用情况,并且重用价值有限,所以不需要为示例代码创建一个模块。可将该代码段直接放在主题模板中,然后将本地化的主题模板复制到您机器上。该主题模板位于 WebDAV 上的定制主题 fs-type1:themes/<customTheme>/nls/theme_en.html 中(图 17)。

    图 17. 要添加示例代码的本地化的主题模板
    图 17. 要添加示例代码的本地化的主题模板
  13. 打开主题模板并查找 <a rel="dynamic-content" href="co:config"></a> 动态内容元素,该元素的位置靠近模板底部。将来自 Cordova API 的 deviceready 示例放在这个动态内容元素之后,如清单 11 所示。
    清单 11. 在 WebSphere Portal 中测试 Cordova API 的示例
    <div class="wpthemeComplementaryContent" 
            id="wpthemeComplementaryContent" 
    		role="region" 
    		aria-labelledby="wpthemeComplementaryContentText">
      <span class="wpthemeAltText" id="wpthemeComplementaryContentText">
    	Complementary Content
      </span>
      <a rel="dynamic-content" href="co:config"></a>
      <script type="text/javascript">
      document.addEventListener("deviceready", onDeviceReady, false);
      function onDeviceReady() {	
            var element = document.getElementById('deviceProperties');
            element.innerHTML = 'Device Name: '     + device.name + '<br/>' + 
                                'Device Version: '  + device.version;
      }
      <script>
    </div>
  14. 测试 Cordova 的 JavaScript 准备就绪后,您需要将一个显示设备信息的元素插入到主题模板中。在紧挨 <body> 元素的下方,将一个具有 ID "deviceProperties" 的元素放在主题模板中。清单 12 给出了一个示例。
    清单 12. 主题模板中的设备属性元素
    <p id="deviceProperties">Loading device info</p>
  15. 让主题模板一直处于打开状态,向 <body> 元素添加一个值为 “content” 的 ID(清单 13)。Worklight init 方法需要使用此 ID。
    清单 13. 将一个新 ID 添加到 body 元素中
    <body id="content" class="lotusui30dojo tundra locale_en">
  16. 现在来自 HTML 页面的内容和用于测试 Worklight JavaScript 的示例以独立文件的形式包含在主题中,您可将它们定义为新模块中的工件。为此,将新主题贡献 (theme contribution) 注册为 WebDAV 中的自定义主题下的 contributions 文件夹中的一个 JSON 配置文件。系统会自动才此文件夹中扫描这些文件,并且定义的贡献是为定义它们的主题而注册的。(如欲了解创建特定于主题的贡献的更多信息,请参阅 注册特定于主题的贡献。)
    1. 打开您的自定义主题下的 contributions 文件夹,创建一个名为 worklight.json 的文件。此文件应为以下内容分别定义两个新模块:
      • Worklight JavaScript 库文件
      • Worklight 初始化 onload 方法

      这两个模块将分别标识为 wl_clientwl_init

    2. 将 worklight.json 文件复制到您的本地机器上,将清单 14 的内容放在此文件中。
      清单 14. worklight.json 文件的内容
      {
         "modules":[{
            "id":"wl_client",
            "contributions":[{
               "type":"config",
                  "sub-contributions":[
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/common/js/staticprops.js"}]
                  },
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/wlclient/js/cordova.js"}]
                  },
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/common/js/wljq.js"}]
                  },
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/common/js/base.js"}]
                  },
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/wlclient/js/messages.js"}]
                  },
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/common/js/wlcommon.js"}]
                  },				
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/wlclient/js/diagnosticDialog.js"}]
                  },
                  {
                     "type":"js",
                     "uris":
                        [{"value":"/worklight/wlclient/js/deviceAuthentication.js"}]
                  },
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/wlclient/js/window.js"}]
                  },
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/wlclient/js/worklight.js"}]
                  },
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/wlclient/js/wlclient.js"}]
                  },
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/wlclient/js/wlfragments.js"}]
                  },
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/wlclient/js/encryptedcache.js"}]
                  },
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/wlclient/js/checksum.js"}]
                  },
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/wlclient/js/wlgap.android.js"}]
                  }]
              }]
         },
         {
            "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"
                  }]
               }]
            }]
         }
         ]
      }
    3. 将 worklight.json 文件复制回 WebDAV 上的 <customTheme>/contributions 文件夹中。
  17. Worklight JavaScript 库现在已在主题模块中定义。测试 JavaScript 的示例直接放在主题模板中,所以它可在测试后轻松地删除,在配置文件中,针对示例代码的模块不是必需的。最后一步是获取这些模块并在主题配置文件中定义它们。创建一个新的配置文件,方法是打开自定义主题中的轻量型配置文件(位于 fs-type1:themes/<customTheme>/profiles/profile_lightweight.json)。将此文件复制到您的本地机器上并重命名为 profile_worklight.json
  18. 打开 profile_worklight.json 文件,并添加您定义为贡献的 wl_client 和 wl_init 模块(清单 15)。
    清单 15. 配置文件中定义的模块 ID 数组的示例
    "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”
    	],
  19. 重命名配置文件,以便您在页面属性对话框中进行选择时能够轻松地识别它。为此,找到英文标题(或您计划使用的语言)并将标题从 “Lightweight” 更改为 “Worklight”(清单 16 和清单 17)。
    清单 16. 更改之前的配置文件标题
    {
    	"value":"Lightweight",
    	"lang":"en"
    },
    清单 17. 更改之后的配置文件标题
    {
    	"value":"Worklight",
    	"lang":"en"
    },
  20. 将 profile_worklight.json 文件复制回 WebDAV 上的 <customTheme>/profiles/ 目录中。清除浏览器缓存,并重新启动 WebSphere Portal,确保已经启用了新配置文件。

    在 WebSphere Portal 中应用 IBM Worklight JavaScript 所需的所有主题工件都已准备就绪。您现在可以获取定义模块的配置文件,以包含 Worklight 工件,并将它应用于某个页面。创建一个页面并应用您的自定义主题,如果您尚未这样做。(请参阅 页面创建和导航,了解创建页面的更多信息。)

    可以通过两种方式将配置文件应用于页面,并查看您对 Worklight 的更改。您可:

    • 将配置文件设置为主题默认设置。
    • 专门针对一个特定页面设置它。

    两种方法都有效,您都可以看到更改,但在一个特定页面上设置配置文件最简单。为此,打开可用于自定义的 Page Properties 对话框,并在 Advanced 选项卡上查找可用主题配置文件的下拉菜单(图 10)。(参阅 更改主题配置文件,了解有关的更多信息。)

    图 18. 页面属性对话框中的属性配置文件
    图 18. 页面属性对话框中的属性配置文件

使用 Android 模拟器测试混合应用程序

现在您已将配置文件应用于某个 WebSphere Portal 页面,您可使用 Android 模拟器测试该示例:

  1. 再次右键单击应用程序并选择 Build All and Deploy 来部署和构建该应用程序。您可以在 Eclipse 右下角的状态栏中查看进度。
  2. 在完成该过程时,右键单击 WLPortalWLPortalAppAndroid 并选择 Run As... > Android Application。这将启动 Android 模拟器,应用程序将会显示您的 WebSphere Portal。
  3. 在该应用程序呈现 WebSphere Portal 应用程序后,如果您没有访问其应用 Worklight 配置文件的新页面的匿名访问权限,那么请登录并导航到该页面。这会花费几秒钟时间加载设备设置,但您会看到它们显示在页面顶部,如图 19 所示。
    图 19. Worklight 应用程序显示了 WebSphere 中的设备信息
    图 19. Worklight 应用程序显示了 WebSphere 中的设备信息

结束语

IBM Worklight 使多渠道 Web 应用程序与设备和设备交付渠道交互变得非常轻松。Worklight shell 是设备上一个精简的原生客户端代码层,能够处理身份验证、安全性、应用程序启动和通知等任务,可针对某个组织或企业的特定需求而进行调整。该 shell 用于启动 Web 内容(应用程序的真正价值)。IBM WebSphere Portal 可将包含利用 Worklight 原生服务的标记的 portlet 与其他 portlet 聚合在一起。为此,将以标准方式提供 Worklight shell,并使其指向 WebSphere Portal 管理的网站。Worklight shell 也可封装为一个可交付程序,如果需要的话,还可以将它发布到一个应用程序商店中,或通过 MDM 部署它。结果是,您扩展了全面的 WebSphere Portal 多渠道网站管理功能,以包含原生设备服务。

本系列中的后续文章将介绍如何在您的 WebSphere Portal 主题中利用原生功能,配置 Worklight 与 WebSphere Portal 之间的身份验证,通过 Worklight 和 Web 内容管理提供与您的设备社交服务的原生集成,以及使用 Worklight 改进您的 IBM Rational Application Developer 和 IBM Web Experience Factory portlet。


下载

描述名字大小
门户主题文件的样例WLPortalApp-theme_files.zip8 KB
应用程序的样例WLPortalApp.zip1 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=861046
ArticleTitle=使用 WebSphere Portal 和 IBM Worklight 交付出色的移动 Web 体验,第 1 部分: 将一个混合移动应用程序与 WebSphere Portal 页面相集成
publish-date=03112013