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技术，我以最少的代码，完成了一个秀图软件。