我做了一版手機地圖，數(shù)據(jù)都是放在服務端的，客戶端通過j2me發(fā)送http請求來進行數(shù)據(jù)交互。網(wǎng)絡通信部分是比較耗時的操作。
為了給用戶提供一個友好的界面，我嘗試使用j2mepolish中的gauge來添加進度條。
以下是我實踐的方式，分享出來，供參考。
為了實現(xiàn)功能，需要首先在發(fā)起通信的form中加入一個gauge，代碼如下：
//#style gauge
Gauge gauge = new Gauge( null, false, Gauge.INDEFINITE, Gauge.CONTINUOUS_RUNNING);
currentForm.append(gauge);
當中需要注意的幾點是：
1.必須加上樣式，即#style gauge ，這樣做是為了能夠通過css控制該進度條的樣式
2.因為是網(wǎng)絡請求，所以不允許用戶來干預進度條，使用false 來屏蔽用戶的交互
3.gauge最后兩個參數(shù)代表，gauge狀態(tài)沒有改變前，一直是運行狀態(tài)。關于這兩個參數(shù)的解釋，建議參考polish的doc文檔，作者在寫了很詳細的解釋。
為了能夠在網(wǎng)絡通信結束后，將這個進度條去掉（因為以后還需要展示這個form,不能再次展示的時候，出現(xiàn)一個莫名其妙的進度條??！比如搜索結果的返回操作就再次展示了這個進度條），所以需要將當前的gauge引用傳入到網(wǎng)絡請求實現(xiàn)類中，如下代碼：
cityForm.loadPage(proName,gauge);
在網(wǎng)絡請求結果處理中，需要將這個進度條的狀態(tài)改變過來，并且從form中隱藏掉這個進度條（當然了，最好的做法是直接刪掉這個元素，我代碼中的實現(xiàn)不夠優(yōu)良），我提供了如下的代碼：
gauge.setValue(Gauge.CONTINUOUS_IDLE);
gauge.setVisible(false);
至此，代碼中的工作結束。進入到重點的css樣式。
由于polish的demo中，代碼注釋中都沒有給出gauge樣式的定義方式。只能夠從代碼中自己尋找支持那些css屬性，這一點，讓我頗為費神。得出的樣式如下：
/**系統(tǒng)加載進度條*/
.gauge{
/**整個進度條的背景色*/
gauge-color:blue;
gauge-height:10;
/**動態(tài)效果的顏色*/
gauge-gap-color:red;
gauge-gap-width:5;
gauge-animation-speed:10;
/**這個參數(shù)必須是在不存在 view type,并且存在gauge-image樣式的情況下才能夠起作用。如果該參數(shù)為1則表示動畫會采用BACKANDFORTH
的方式來播放
gauge-animation-mode:;*/
/***********嘗試使用不同的動畫方式，目前不能顯示***********************
padding: 2;
border-color: white;
gauge-image: url( indicator.png );
gauge-color: rgb( 86, 165, 255 );
gauge-width: 60;
gauge-gap-color: rgb( 38, 95, 158 );*/
/* view-type 是沒有效果的，也是不可用的:
gauge-height: 8;
gauge-mode: chunked;
gauge-gap-width: 5;
gauge-chunk-width: 10;
view-type:rotating-arc;
gauge-rotating-arc-start-color:red;
gauge-rotating-arc-end-color:blue;
gauge-rotating-arc-number:4;*/
}
這個css實現(xiàn)的效果就是在當前發(fā)布的開發(fā)集成測試版(我的博客上提供了下載)手機地圖看到的效果，是一個藍色長條上，紅色的滾動效果。
當中對于圖片使用也加入了說明，大家用的到話，自己嘗試吧。
最后需要說明的是，雖然polish的代碼中雖然寫了對于gauge的view type的代碼，并且實現(xiàn)了一些 gauge view，但是當我在css中寫入view-type:
view-type:rotating-arc的時候，編譯不能夠通過，說是沒有定義這個css屬性。
以上便是我的一些體會，不一定準確，如果有什么錯誤之處，希望指出，以免誤導他人！
posted on 2008-09-06 08:20
張氏兄弟 閱讀(2077)
評論(0) 編輯 收藏 所屬分類:
手機地圖