JIL Mobile Widget 初步认识
上星期去参加html5专题讲座沙龙，学到了点比较好奇的东西，所以回来研究研究！
前言
手机平台的技术发展与趋势，「从本机(Native Application)走向云端(Cloud Computing)应用」，是一个不能不谈的发展方向。在云端的架构之下，应用程序都可以由单机形式转变为Web Application。因为运算不在手机端了，是在服务器端；所以，「如果要你撰写一个能秀出服务器端图片的软件，你要怎么做？」
软件构思
传统的应用开发做法，会以单机应用做为思考出发点。一开始，我想：「利用ImageView组件，搭配Socket来连接服务器。」不过，经过一番研究后，想到：「 为何不想想HTML技术，这种方式不是会比传统的UI组件搭配运算代码方式更省力吗。」
图一：一开始的架构--ImageView搭配Socket
我又想：「意思是做成HTML文件，利用手机上的Browser来观看图片吗。这跟网页制作有什么不同。」
用Browser来观看HTML文件，在手机上需要有Browser才行。但Browser是一个完整的应用软件，不易于UI整合；因此，我们需要的是类似ImageView这种组件，但又要能完善支持Web技术，因为这样的组件才能嵌入到UI里，例如与Home Screen做整合，才能提供更佳的使用性。
JIL Mobile Widget带来新形态的软件开发模式
我的想法是：一个能完全支持HTML/CSS/JavsScript的「Web Widget」具备Browser的功能，又能以组件(Widget)的形式与手机UI结合。真有这种技术吗？有Browser的「功能」，又可以如组件(Widget)般嵌入UI！
OPhone的JIL Mobile Widget技术正是一个代表。
图二：采用Web导向方式
OPhone Platform的特色：「加入了由JIL所开发的Mobile Widget。」Mobile Widget提供了相当强大的HTML/CSS/JavaScript功能，特别是WDT（OPhone SDK的Eclipse开发插件）的配合，已经能实现一些「采用HTML制作应用软件、整合云端服务」的理想了。JIL与WDT是未来3G软件开发新模式的示范，值得我们去留意这个方向。
JIL Mobile Widget的应用开发模式
典型的Android应用程序采用Java语言开发，大多数运算被实作在本机上，意谓著这些应用程序都使用手持设备的运算(即Processor)资源；这类的应用程序就是我们经常看见的APK组件。JIL Mobile Widget与APK应用程序很不一样，整个应用就是一套网页，并被包装成WGT组件后安装到手机上。
1. 创建HelloWidget专案
利用Eclipse的New Widget Project功能，立即创建一份基本的JIL Mobile Widget应用，这个应用包含下列文件：
•HelloWidget.html - 主画面文件
•HelloWidget.js - JavaScript代码、由HelloWidget引入使用
•HelloWidget.css - 使用CSS做UI排版(Layout)
•Default.png - 背景图
•Icon.png - 图示
•config.xml - Mobile Widget的设置文件
这些都是WDT在创建Mobile Widget项目时自动产生的文件。有了WDT的协助，简单的Mobile Widget应用可以很快被创建。经过一番功夫，终于学习到OPhone Platform最精采的一项技术。这时，终於可以继续开发我的应用了。
2. 修改HTML (UI)
我首先想到的是：「更换HTML文件的背景图」。这个工作难不倒有网页制作功底的我，所以我很快就制作了一张全新的图档，并取代原来的Default.png。很快地，我了解到Mobile Widget是怎么一会事了。因为这和我过去在制作网页时，所使用的观念相同。
制作JavaScript功能
我继续制作著秀图软件。制作一个秀图软件倒底能有多简单？
制作秀图软件
我想要用JavaScript来展现照片的动态效果，所以很快地想到jQuery这个JavaScript库。 jQuery是一个相当受到欢迎的JavaScript库，jQuery改变我们撰写JavaScript的方式，现在，我们把它放到OPhone Platform里一起使用。也就是，如果我们能善用现有的Web Application技术，「制作联网的OPhone软件就是这么简单。」这是一个很棒的火花，也是移动技术的趋势。
於是我先将jQuery加了进来，然后修改HelloWidget.html，加入：
view plaincopy to clipboardprint?
<script type="text/javascript" src="jquery.min.js"></script>
然后又想到，「照片的画面编排呢？要怎么做？」因为用了Mobile Widget技术，所以当然是使用CSS来做UI排版。於是我又编写了一段CSS代码，同时用来取代自动创建的HelloWidget.css，并存成slideshow.css如下：
view plaincopy to clipboardprint?
#home_slideshow {
width: 180px;
}
#home_slideshow img {
position:absolute;
z-index:8;
opacity:0.0;
}
#home_slideshow img.active {
z-index:10;
opacity:1.0;
}
#home_slideshow img.last-active {
z-index:9;
opacity:0.0;
}
依软件架构的要求，先将3张图片放到我的Web空间里；然后加上了一段HTML代码到HelloWidget.html以秀出图片，并使用上述的CSS做UI排版：
view plaincopy to clipboardprint?
<div id="home_slideshow">
<img src="http://www.jollen.org/consulting/1.jpg" width="240" alt="" class="active" />
<img src="http://www.jollen.org/consulting/ 2.jpg" width="240" alt="" />
<img src="http://www.jollen.org/consulting/ 3.jpg" width="240" alt="" />
</div>
搭配JavaScript可以做出什么效果呢？我决定展现一下过去设计JavaScript的功力，制作了一段代码，可以让3张图片以随机方式每次显示一张。「搭配CSS更可以做出一些显示效果。」把以下代码加入HelloWidget.html：
view plaincopy to clipboardprint?
<script type="text/javascript">
function slideSwitch() {
var $active = $('#home_slideshow img.active');
var $sibs = $active.siblings();
var rnd = Math.floor(Math.random() * $sibs.length );
var $next = $($sibs[rnd]);
if ($active.length == 0) $active = $('#home_slideshow img:last');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1200, function() {
$active.removeClass('active last-active');
});
}
// Using jQuery
$(function() {
setInterval( "slideSwitch()", 5000 );
});
</script>
从这个例子来看，由JIL所制定与开发的Mobile Widget成功让手机软件开发成为一种「跨开发人员」的技术，同时配合API标准的制定，Mobile Widget还可以被导入不同的手机平台，成为一项3G应用开发的新标准。令人耳目一新！
使用Mobile Widget技术，我以最少的代码，完成了一个秀图软件。
JIL Mobile Widget 初步认识相关推荐
- 《移动微技（Mobile Widget）应用开发权威指南》正式出版
<移动微技(Mobile Widget)应用开发权威指南>正式出版 标签: 移动 Widget BAE 微技 开发 JIL 开发者社区 创新丛书 2010-08-09 11:04 < ...
- Windows Mobile Widget Emulator
今天Vimpyboy 在codeplex发布了Windows Mobile Widget Emulator.这是一个用来调试Windows Mobile 6.5 Widget的工具,我在做Window ...
- DJI Mobile SDK初步开发
大疆Mobile SDK初步开发 1. 从MSDK示例代码开始 配置代码运行环境 (1)下载Moblie SDK:DJI MSDK下载. (2)准备Android开发环境,推荐使用Android St ...
- OMS SDK中OPhone应用与BAE JIL中Widget应用的区别
Widget介绍 在OPhone平台 中,Widget应用采用了 JIL (Joint Innovation Lab) Widget标准.JIL Widget是一个采用HTML.JavaScript和 ...
- IT龙门阵73期总结：移动Widget闪亮未来
主题:移动Widget闪亮未来 时间:2009年5月5日 地点:清华紫光国际会议中心B2层第一会议室 主办:TechWeb 腾讯科技 大度咨询 无限论坛 联合创新实验室中方主要项目协调人 张焱 下载 ...
- Windows Mobile 开发
对于当初连Windows是基于消息机制都不知道的我来说,起点可以说是0.之所以写这篇文章,是想和大家分享我的经验,能够为那些初学者提供一些儿帮助.未来我工作和学习的重点将放在用户界面和多媒体开发上.欢 ...
- 【微件知识】：微件-未来互联网是Widget的天下？
微件(Web widget,简称Widget)是一种 Web2.0 的衍生物,它好像是一个小型的应用程式,它可以是一个时钟,一个日记簿,一段视频,天气预报,一个 Flash 游戏等等.以往Widget ...
- 细说新一代HTML5/JavaScript的UI控件wijmo5 的新架构
Wijmo 5是一组JavaScript控件,但是不要与Widgets混淆.在此前开发Wijmo的时候,我们能够用像jQuery UI和jQuery Mobile Widget 框架来构建它,同时也为 ...
- 【Web前端基础】实验6 CSS样式属性
1.木兰花令网页样式 <!doctype html> <html lamh="en"><head><meta charset=" ...
最新文章
- C++11新特性之defaulted函数
- 【Android FFMPEG 开发】Android Studio 中 配置 FFMPEG 库最小兼容版本 ( undefined reference to 'atof' )
- c语言字符串文库总结,C语言字符串.ppt
- eclipse中也可以恢复删除的文件
- python电话号码对应的字符组合_Python3 在字符串中提取字母+数字组合微信账号、电话等 - pytorch中文网...
- plupload+artdialog实现多平台文件上传
- shell中的常用通配符，字符类
- （译）如何使用GameCenter制作一个简单的多人游戏教程：第一部分
- java基础—ＩＯ流概述
- Windows 帐号管理相关操作
- PD虚拟机在big sur系统下无法运行，怎样解决？
- 和包支付的钱哪里来_老瓦发问国际乒联：道理我都懂！问题钱从哪里来？
- Java 对象的串行化（Serialization）
- eclipse主题改变
- linux13：（1.0k）ISO映像文件，镜像文件
- 车型数据导入excel
- 电子技术基础(三)_第2章放大电路原理__晶体三极管与场效应三极管
- window 脚本文件.bat获取最高权限拷贝文件及c++调用.bat文件示例
- 用excel制作双层饼图_Excel 怎么用环形图制作双层饼图,excle饼状图图的制作
- 做软件测试必须了解的7个常用术语