随笔-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 张氏兄弟 阅读(2055) 评论(0)  编辑  收藏 所属分类: 手机地图

只有注册用户登录后才能发表评论。


网站导航: