上星期去参加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技术,我以最少的代码,完成了一个秀图软件。