Worklight基于HTML5和JavaScript的跨平台应用

随着智能手机和平板电脑的普及,越来越多的互联网 IT 企业把注意力集中到了移动平台上。目前市场上主流的移动平台有 Apple 的 iOS, Google 的 Android, 微软的 Windows Phone, BlackBerry 以及 Nokia 的 Symbian 等。这些移动平台的开发环境和编程语言都不尽相同。同时,一个平台又有多个版本,例如 Android2.3 和 Android3.0 分别支持智能手机和平板电脑。正是由于这些多样性,使得移动应用的开发存在成本高、周期长和维护困难等问题。

Worklight 是 IBM 收购的一套用于移动应用开发和基础平台整合的企业级解决方案。它支持多种移动平台的本地应用开发,同时也支持基于 HTML5 和 JavaScript 的跨平台应用。

本文主要介绍 Worklight 的 RuntimeSkin 特性以及如何使用该特性开发针对不同移动终端的跨平台应用。

开发环境安装与配置

Worklight 提供的是一整套移动应用的开发环境,涵盖了从开发到集成,到管理、部署、监控行等软件开发生命周期的各个方面。它主要由四个部分组成,Worklight Studio、 Worklight Server、Device Runtime 和 Worklight Console:

Worklight Studio 是基于 Eclipse 的集成开发环境,用户可以很方便地创建、开发、部署和测试不同平台的本地应用或者混合型应用。 Worklight Server 是一个基于 Tomcat 的服务器,用于部署开发好的移动应用程序。同时它还提供适配器 (
Adapter) 组件来进行用户登录验证、后台数据交互、消息推送等企业级应用操作。 Device Runtime 是 Worklight SDK 中包含一个组件,它主要提供了可以调用移动平台本地资源的多种接口,开发者可以使用 JavaScript API, 操作系统本地库和第三方库来调用这些接口,充分利用了本地应用的
优点。 Worklight Console 可以让用户通过浏览器来监控、管理当前部署在 Worklight Server 上的应用程序和适配器组件。Worklight Console 同时还负责消息推送管理以及报表分析。

Worklight 开发环境的下载与安装步骤可以从 developerWorks IBM Worklight 学习资源上获得。

什么是运行时皮肤(Runtime Skin)

运行时皮肤是指 Worklight 的应用程序可以为已经创建好的手机平台环境(Worklight Environment)添加多个皮肤,每一个皮肤是平台环境的一个子集,所有的皮肤作为应用程序的一部分打包在安装文件中。当应用程序运行时会根据具体的移动设备动态地决定使用哪一个皮肤。运行时皮肤的应用场景有很多,比如不同的手机尺寸,不同的手机平台版本,是否支持 HTML5 等等。

下面我们以一个新闻浏览的应用程序为例,具体介绍如何应用 Worklight 的 Runtime Skin 特性。

创建 Worklight 工程和应用程序

我们创建一个 Worklight 工程。在 Eclipse 中选择 File->New->Worklight Project, 如图 1 所示。

图 1. 创建 Worklight 工程

输入工程名称 Mobile News。接着我们创建一个 Worklight 应用程序,选择 File->New->Worklight
Application,如图 2 所示。

图 2. 创建 Worklight 应用程序

在弹出的窗口中选择第一步新建的工程,
然后输入应用程序的名称 NewsApp,如图 3 所示。

图 3. 在工程中创建应用程序

创建完工程和应用程序以后,Worklight 会自动生成如下的目录结构,如图 4 所示。

图 4. 应用程序目录结构

我们看到在 apps 目录下包含刚刚创建的应用程序 NewsApp,初始情况下每一个应用程序会有一个 common 的运行时环境,它会被不同手机平台环境(例如 iOS, Android, BlackBerry 等)所共用。在 common 文件夹下有三个文件夹 css, images 和 js,分别存放了程序相关的 css 文件,图片和 JavaScript 文件。NewsApp.html 是程序自动创建的主 html 文件。

时间: 2024-09-20 14:53:57

Worklight基于HTML5和JavaScript的跨平台应用的相关文章

基于HTML5的网页版沙丘 II游戏

网页版基于HTML5的沙丘 II游戏由俄罗斯开发者Aleksander Guryanov基于HTML5以及JavaScript开发,关于游戏的情节依然沿用1992年版的沙丘 II,让玩家享受经典的即时战略(RTS)游戏.但唯一不同的是,游戏玩家不需要再下载游戏客户端,而是只需要在浏览器中打开网页.同时开发者Aleksander Guryanov努力将其打造为一个完全开放源码的版本,以寻求该网页游戏的开放性. 沙丘 II这款游戏根据1965年Frank Herbert的小说以及1984年David

《响应式Web设计:HTML5和CSS3实践指南》——1.3节基于cookie及JavaScript的响应式图像

1.3 基于cookie及JavaScript的响应式图像使用复杂的服务器端逻辑也能实现响应式图像.有时因为一些特殊的需求,开发者往往不能够采取最简单的方法来实现特定的目标.之前提到的基于宽度百分比的方法依赖于客户端来实现对于大图像文件的缩放.而本方法则是在服务器端依据客户的请求,返回恰当大小的图像文件.如果你正为网页加载过慢导致的网站性能问题而烦恼,也许该方法能够给不堪重负的服务器负载和网络带宽带来一些改进. 1.3.1 准备工作本条目所涉及的方法都需要在服务器端实现相应的功能.首先,服务器端

《Windows 8 开发权威指南:HTML5 和JavaScript卷》——2.2 JavaScript概述

2.2 JavaScript概述 2.2.1 什么是JavaScript 1.什么是脚本语言 脚本语言是一种应用程序扩展语言,用于系统的扩展,使其按用户的意愿去运行. 所有的基础功能由系统提供,脚本语言在更高一层次描述如何调用系统接口. 解释执行. 2.脚本语言的分类 嵌入式. 非嵌入式. 3.什么是JavaScript 一种计算机程序设计语言. 脚本语言. 解释语言:程序语言代码→语言翻译程序→机器代码. 可以直接嵌入到HTML文档中. 增强用户交互性. 下面通过一个例子来对JavaScrip

腾讯开源基于HTML5技术的专业级图像处理引擎 AlloyImage

腾讯开源基于http://www.aliyun.com/zixun/aggregation/33875.html">HTML5技术的专业级图像处理引擎 Alloy Image 发表于16小时前| 次阅读| 来源CSDN| 0 条评论| 作者张红月 腾讯AlloyTeamAlloyImageAlloyPhotoGitHub开源HTML5 摘要:近日,腾讯 Web前端团队AlloyTeam推出了最 新的开源项目:一个基于HTML5技术的专业级图像处理引擎--AlloyImage(简称AI),以

《Windows 8 开发权威指南:HTML5 和JavaScript卷》——2.3 IE10与CSS3

2.3 IE10与CSS3 2.3.1 使用CSS3添加圆角 通过使用CSS3(级联样式表Level 3)为布局元素生成圆角,可以美化网站的外观.本小节我们主要通过使用Internet Explorer 9对圆角的内建支持,学习使网站布局更具吸引力的一些基本方法.我们主要通过以下几部分进行说明: 起点 生成全部相同的圆角 分别生成多个圆角 使用椭圆生成圆角 1.起点 我们从基本的网页开始操作,图2-1所示的网页为一家虚拟咖啡公司的初始网页,其中包括一些HTML元素.一些级联样式表和几个图像. 说

基于HTML5实现的超酷摄像头(HTML5 webcam)拍照功能 - photoboo

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 在线演示 WebRTC可能是明年最受关注的HTML5标准了,Mozilla为此开发了一套帮助你控制硬件的API,例如,摄像头,麦克风,或者是加速表.你可以不依赖其它的插件来调用你需要的本机11585.html">硬件设备. 在今天的这篇文章中,我们将介绍来自Wolfram Hempel开发的Photobooth.js,使用这个

基于Python和JavaScript编写物联网温度计程序

Zerynth作为Android和iOS手机端应用程序,在物联网项目中,可以对图形界面进行快速原型设计. 借助Zerynth可以把任何手机作为智能对象加入控制器组成物联网系统.尤其是通过建立双向通信信道,可以管理和控制与它连接的手机设备. 本文我们将介绍使用单片机微控制器连接Zerynth,开发一个简单但强大的物联网温度计. 准备工作 首先你需要一块电路板,选择 Zerynth支持的32位微控制器设备 即可.我们选择的是 Flip&Click Mikroelektronika ,它拥有许多和Ar

基于HTML5的可预览多图片Ajax上传_AJAX相关

一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如flash文件需与页面同父文件夹,JavaScript文件大小也很可观. 我之前曾翻译编辑过一篇"Ajax Upload多文件上传插件"的文章,此插件的亮点是使用隐藏的iframe框架页面模拟ajax上传,但是,实际上,还是一次只能上传1张图片,可以多次上传而已. HTML5是个好东东,其中

JS基于HTML5的canvas标签实现炫目的色相球动画效果实例_javascript技巧

本文实例讲述了JS基于HTML5的canvas标签实现色相球效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>JS canvas标签制作色相球</title> </head> <body> <canvas></canvas&g