為了給用戶提供一個友好的界面,我嘗試使用j2mepolish中的gauge來添加進度條。
以下是我實踐的方式,分享出來,供參考。
為了實現功能,需要首先在發起通信的form中加入一個gauge,代碼如下:
//#style gauge
Gauge gauge = new Gauge( null, false, Gauge.INDEFINITE, Gauge.CONTINUOUS_RUNNING);
currentForm.append(gauge);
Gauge gauge = new Gauge( null, false, Gauge.INDEFINITE, Gauge.CONTINUOUS_RUNNING);
currentForm.append(gauge);
當中需要注意的幾點是:
1.必須加上樣式,即#style gauge ,這樣做是為了能夠通過css控制該進度條的樣式
2.因為是網絡請求,所以不允許用戶來干預進度條,使用false 來屏蔽用戶的交互
3.gauge最后兩個參數代表,gauge狀態沒有改變前,一直是運行狀態。關于這兩個參數的解釋,建議參考polish的doc文檔,作者在寫了很詳細的解釋。
為了能夠在網絡通信結束后,將這個進度條去掉(因為以后還需要展示這個form,不能再次展示的時候,出現一個莫名其妙的進度條啊!比如搜索結果的返回操作就再次展示了這個進度條),所以需要將當前的gauge引用傳入到網絡請求實現類中,如下代碼:
cityForm.loadPage(proName,gauge);
在網絡請求結果處理中,需要將這個進度條的狀態改變過來,并且從form中隱藏掉這個進度條(當然了,最好的做法是直接刪掉這個元素,我代碼中的實現不夠優良),我提供了如下的代碼:gauge.setValue(Gauge.CONTINUOUS_IDLE);
gauge.setVisible(false);
gauge.setVisible(false);
至此,代碼中的工作結束。進入到重點的css樣式。
由于polish的demo中,代碼注釋中都沒有給出gauge樣式的定義方式。只能夠從代碼中自己尋找支持那些css屬性,這一點,讓我頗為費神。得出的樣式如下:
/**系統加載進度條*/
.gauge{
/**整個進度條的背景色*/
gauge-color:blue;
gauge-height:10;
/**動態效果的顏色*/
gauge-gap-color:red;
gauge-gap-width:5;
gauge-animation-speed:10;
/**這個參數必須是在不存在 view type,并且存在gauge-image樣式的情況下才能夠起作用。如果該參數為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;*/
}
.gauge{
/**整個進度條的背景色*/
gauge-color:blue;
gauge-height:10;
/**動態效果的顏色*/
gauge-gap-color:red;
gauge-gap-width:5;
gauge-animation-speed:10;
/**這個參數必須是在不存在 view type,并且存在gauge-image樣式的情況下才能夠起作用。如果該參數為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實現的效果就是在當前發布的開發集成測試版(我的博客上提供了下載)手機地圖看到的效果,是一個藍色長條上,紅色的滾動效果。
當中對于圖片使用也加入了說明,大家用的到話,自己嘗試吧。
最后需要說明的是,雖然polish的代碼中雖然寫了對于gauge的view type的代碼,并且實現了一些 gauge view,但是當我在css中寫入view-type:view-type:rotating-arc的時候,編譯不能夠通過,說是沒有定義這個css屬性。
以上便是我的一些體會,不一定準確,如果有什么錯誤之處,希望指出,以免誤導他人!