隨筆-60  評論-138  文章-1  trackbacks-0
            我做了一版手機地圖,數據都是放在服務端的,客戶端通過j2me發送http請求來進行數據交互。網絡通信部分是比較耗時的操作。
            為了給用戶提供一個友好的界面,我嘗試使用j2mepolish中的gauge來添加進度條。
            以下是我實踐的方式,分享出來,供參考。
            為了實現功能,需要首先在發起通信的form中加入一個gauge,代碼如下:
           
          //#style gauge
                      Gauge gauge = new Gauge( nullfalse, 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);

            至此,代碼中的工作結束。進入到重點的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;
          */
          }

           這個css實現的效果就是在當前發布的開發集成測試版(我的博客上提供了下載)手機地圖看到的效果,是一個藍色長條上,紅色的滾動效果。
           當中對于圖片使用也加入了說明,大家用的到話,自己嘗試吧。
           最后需要說明的是,雖然polish的代碼中雖然寫了對于gauge的view type的代碼,并且實現了一些 gauge view,但是當我在css中寫入view-type:view-type:rotating-arc的時候,編譯不能夠通過,說是沒有定義這個css屬性。
            以上便是我的一些體會,不一定準確,如果有什么錯誤之處,希望指出,以免誤導他人!
          posted on 2008-09-06 08:20 張氏兄弟 閱讀(2077) 評論(0)  編輯  收藏 所屬分類: 手機地圖
          主站蜘蛛池模板: 新兴县| 冷水江市| 化州市| 中阳县| 临西县| 拉萨市| 惠来县| 玉屏| 松江区| 龙岩市| 通山县| 汨罗市| 安仁县| 都昌县| 苍山县| 东宁县| 潞城市| 吴忠市| 眉山市| 山东省| 常熟市| 勐海县| 仪征市| 沈阳市| 贵南县| 红河县| 诸暨市| 城口县| 承德市| 东源县| 甘泉县| 新沂市| 电白县| 阿克陶县| 惠州市| 苍梧县| 乡城县| 昌宁县| 宁陕县| 乐东| 淳化县|