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