JIL Widget開發入門教程
本文和大家重點學習一下JIL Widget開發入門的一些知識，基于window下開發JIL Widge只需要兩個工具：一個是Java虛擬機，另一個是jilSDK開發工具，所以說jil的運行環境非常簡單。
JIL Widget開發入門
2009年7月我有幸參加了中國移動通信集團廣東有限公司舉辦的JILWidge開發培訓會。感覺Jil這項技術很不錯，所以將自己的使用體會與大家分享學習。
一、JIL概述
JIL是由中國移動、軟銀和沃達豐于2008年4月24日共同創建的,中文名稱為“聯合創新實驗室”（JointInnovationLab，JIL）.中移動想將Jil Widget通過BAE安裝到各操作系統的手機上，現在大概只支持Ophone、WindowMobile、Symbian這三個平臺。
BAE(BrowserBasedApplicationEngine)是面向移動互聯網的，跨移動終端操作系統平臺的應用運行環境，感覺就是一個Widget的引擎，有點類似java虛擬機那樣去解釋應用程序。他們會為各種手機平臺開發不同的BAE然后在上面運行JILWidget(感覺BAE就如同是安裝在不同手機中的瀏覽器)。BAE以后會預裝在新推出的移動手機上，老用戶就要通過移動網站下載了。據移動透路MMarket會在8月10日后的某一天開始正式運行，他們會在MMarket上放上***批的Jilwidget。
二、JILWidget開發環境的安裝
基于window下開發JILWidge只需要兩個工具：一個是Java虛擬機，另一個是jilSDK開發工具，所以說jil的運行環境非常簡單。
如下圖2-1的兩個安裝包文件:
(一)Java的安裝
Java虛擬機需要用1.5以上的版本，具體的安裝步驟如下：
1.雙擊jdk-1_5_0_17-windows-i586-p.exe彈出許可協議，點擊接受，然后按下一步。
2.選擇安裝目錄后，點擊下一步并開始安裝直到顯示安裝完成。
3.Java環境的測試
(1)在window開始菜單中點擊運行，在運行中輸入cmd然后打開命令行窗口。
(2)在命令行中輸入java并按回車鍵，如果能顯示如下圖2-6信息就表示java環境運行正常了。
#p#
(二)JilSDK的安裝
1.雙擊jil_sdk_setup.exe工具包彈出許可協議后點擊接受，然后按下一步
2.選擇安裝目錄后點擊下一步，直到安裝完成為止。
(三)JilSDK的運行
1．JilSDK安裝完成后會在桌面上生成”JILSDK”的快捷方式如下圖2-10,Jil的SDK其實就是內置在Eclipse中的一個插件。
2.雙擊快捷方式后會進入啟動界面
3.***次訪問時會提示您選擇工作空間,點擊Ok后會進行開發工具的主界面
#p#
(四)JILWidget開發的模擬器的啟動
1.配置環境變量。設置步驟如下
對著”我的電腦”點擊右鍵->選擇屬性->選擇高級->選擇環境變量，然后編輯系統變量中的path變量，在變量值中輸入您的SDKTools目錄的路徑，如下圖2-13。輸入完后按確定保存。
2.創建sdcard鏡像文件
在命令行窗口中輸入如圖2-14的命令后會在對應目錄中生成一個如圖2-15的鏡像文件。
上圖命令的意思是創建一個50M的sdcard，Sdcard的大小可以按您的實際需求改變。
3.啟動模擬器
(1)在文本編輯器中輸入圖2-16的Jil模擬器啟動命令，并保存為如圖2-17的bat文件。
(2)雙擊MyOphone.bat文件起動模擬器，***次啟動模擬器的時候需要比較長的時間。
#p#
三、簡單JILWidget開發的應用----漂亮的液晶時鐘
（一）開發如上圖3-1的液晶時鐘時需要做以下準備
1.首先準備好13幅液晶數字的圖片，它們的顯示效果和名稱如圖3-2所示
2.編寫好的一段液晶時鐘的JavaScript代碼
- viewplaincopytoclipboardprint?
- varNumSrc="images/c0.gif";
- for(vari=0;i<=9;i++){
- eval("varc"+i+"=newImage();c"+i+".src=NumSrc.replace('c0.gif','c'+i+'.gif');");
- }
- document.write('<tablebordertableborder="0"cellspacing="0"bgcolor=blackheight=1><tr>');
- document.write('<td><imgsrcimgsrc='+NumSrc+'id="lch1"></td>');
- document.write('<td><imgsrcimgsrc='+NumSrc+'id="lch2"></td>');
- document.write('<td><imgsrcimgsrc='+NumSrc.replace("c0.gif","colon.gif")+'></td>');
- document.write('<td><imgsrcimgsrc='+NumSrc+'id="lcm1"></td>');
- document.write('<td><imgsrcimgsrc='+NumSrc+'id="lcm2"></td>');
- document.write('<td><imgsrcimgsrc='+NumSrc.replace("c0.gif","colon.gif")+'></td>');
- document.write('<td><imgsrcimgsrc='+NumSrc+'id="lcs1"></td>');
- document.write('<td><imgsrcimgsrc='+NumSrc+'id="lcs2"></td>');
- document.write('<td><imgsrcimgsrc='+NumSrc.replace("c0.gif","cam.gif")+'id="lcapm"></td>');
- document.write('</tr></table>');
- functiontimerun(){
- now=newDate();
- myhour=now.getHours();
- myminute=now.getMinutes();
- mysecond=now.getSeconds();
- //判斷是上午還是下午:
- if(myhour<12)lcapm.src=NumSrc.replace("c0.gif","cam.gif");
- elselcapm.src=NumSrc.replace("c0.gif","cpm.gif");
- if(myhour>12)myhour-=12;
- //改變小時數圖片:
- lch1.src=eval("c"+Math.floor(myhour/10)+".src");
- lch2.src=eval("c"+myhour%10+".src");
- //改變分鐘數圖片:
- lcm1.src=eval("c"+Math.floor(myminute/10)+".src");
- lcm2.src=eval("c"+myminute%10+".src");
- //改變秒鐘數圖片:
- lcs1.src=eval("c"+Math.floor(mysecond/10)+".src");
- lcs2.src=eval("c"+mysecond%10+".src");
- //循環運行本函數:
- setTimeout("timerun()",500);
- }
- varNumSrc="images/c0.gif";
- for(vari=0;i<=9;i++){
- eval("varc"+i+"=newImage();c"+i+".src=NumSrc.replace('c0.gif','c'+i+'.gif');");
- }
- document.write('<tablebordertableborder="0"cellspacing="0"bgcolor=blackheight=1><tr>');
- document.write('<td><imgsrcimgsrc='+NumSrc+'id="lch1"></td>');
- document.write('<td><imgsrcimgsrc='+NumSrc+'id="lch2"></td>');
- document.write('<td><imgsrcimgsrc='+NumSrc.replace("c0.gif","colon.gif")+'></td>');
- document.write('<td><imgsrcimgsrc='+NumSrc+'id="lcm1"></td>');
- document.write('<td><imgsrcimgsrc='+NumSrc+'id="lcm2"></td>');
- document.write('<td><imgsrcimgsrc='+NumSrc.replace("c0.gif","colon.gif")+'></td>');
- document.write('<td><imgsrcimgsrc='+NumSrc+'id="lcs1"></td>');
- document.write('<td><imgsrcimgsrc='+NumSrc+'id="lcs2"></td>');
- document.write('<td><imgsrcimgsrc='+NumSrc.replace("c0.gif","cam.gif")+'id="lcapm"></td>');
- document.write('</tr></table>');
- functiontimerun(){
- now=newDate();
- myhour=now.getHours();
- myminute=now.getMinutes();
- mysecond=now.getSeconds();
- //判斷是上午還是下午:
- if(myhour<12)lcapm.src=NumSrc.replace("c0.gif","cam.gif");
- elselcapm.src=NumSrc.replace("c0.gif","cpm.gif");
- if(myhour>12)myhour-=12;
- //改變小時數圖片:
- lch1.src=eval("c"+Math.floor(myhour/10)+".src");
- lch2.src=eval("c"+myhour%10+".src");
- //改變分鐘數圖片:
- lcm1.src=eval("c"+Math.floor(myminute/10)+".src");
- lcm2.src=eval("c"+myminute%10+".src");
- //改變秒鐘數圖片:
- lcs1.src=eval("c"+Math.floor(mysecond/10)+".src");
- lcs2.src=eval("c"+mysecond%10+".src");
- //循環運行本函數:
- setTimeout("timerun()",500);
- }
準備好以上文件后，我們就可以進行widget的開發了。#p#
(二)在JilSDK中制作漂亮的液晶時鐘
1.在eclipse中新建一個WidgetProject
2.在彈出的NewWidgetProject窗口中輸入ProjectName如圖3-5中的Clock，并點擊finish.
3.按finish后系統會生成如3-6的公程文件
◆config.xml應用程序的配置文件
◆Default.png默認的背景圖
◆Icon.png默認的應用程序圖標
◆Clock.htmlwidgetUI界面
◆Clock.jswidget程序實現代碼
◆Clock.csswidget樣式代碼
◆bin目錄會生成一個系統編譯后的wgt文件，如Clock.wgt
4.新建images目錄并將數字圖片文件拷進該目錄。
5.在Clock.js文件中輸入已準備好的代碼
6.在Clock.html文件對應的位置中輸入<script>timerun();</script>啟動代碼，如圖3-8所示。
7.對剛才輸入的兩個文件進行保存，這時會在bin中產生一個Clock.wgt文件，這個就是我們***個生成widget應用了。
#p#
三）在JILWidget開發的模擬器中安裝及運行液晶時鐘
1.進入bin目錄并將Clock.wgt文件拷進模擬器的sdcard中。（在模擬器啟動的狀態下進行）
在啟動的命令窗口中輸入：adbpushClock.wgt/sdcard按回車后出現successfully提示。如圖3-10所示
2.點擊模擬器的FileManager圖標，然后進入SdCard，這時會看到我們剛才拷進模擬器的Clock.wgt文件。如下圖所示
3.點擊clock.wgt會彈出安裝提示按yes鍵后直到安裝完成。如下圖3-12和圖3-13所示
4.點擊模擬器的WidgetManager圖標后會進入installed程序列表，點擊后就會產生圖3-1所示的液晶時鐘界面了。
#p#
三、JILWidget開發的應用程序的發布
開發好的Widget是需上傳到MMarket上并要通過驗證和簽名后才能正式發布的。
在MMarket上的軟件獲得的利潤會和移動3:7分成（移動3開發者7）。
四、總結
Jilwidget開發優點和缺點
1.優點
(1)開發簡單
(2)可以在BAE的基礎上跨越不同的手機平臺（基本做一次開發就可以用了）
(3)可將現有的javascript適當修改一下就可以應用到widget上面(并支持jQuery等)
2.缺點
(1)安全性相對較差
(2)模擬器啟動慢，操作系統也相對慢
(3)開發的程序有局限性.
(4)對視頻音頻暫時支持不是太好
總的來說JilWidget是一個非常適合現有web開發人員去轉型編寫手機端應用，不像開發Symbian、WindowMobile等手機應用那樣有很高的門檻。jilsdk是一個很輕量級的手機端應用開發工具，能使我們輕而易舉地踏進火爆的3G手機時代。祝愿未來的Ophone會給我們帶來更多的驚喜。
五、開發工具參考網址
(1)http://www.jil.org/#SDKSSDK開發包下載
(2)http://www.jil.org/#DOCUMENTS文檔下載
(3)http://www.jil.org/#CODE開發源代碼例子
(4)http://www.sun.comJava虛擬機
【編輯推薦】
- AndroidWidget開發系列解讀
- AndroidWidget開發詳解
- 全面認識WebWidget開發
- DashBoard的Widget開發指南
- 解析AndroidWidget開發中如何構建Activity類
