我做了一版手机地图,数据都是放在服务端的,客户端通过j2me发送http请求来进行数据交互。网络通信部分是比较耗时的操作。
为了给用户提供一个友好的界面,我尝试使用j2mepolish中的gauge来添加进度条。
以下是我实践的方式,分享出来,供参考。
为了实现功能,需要首先在发起通信的form中加入一个gauge,代码如下:
//#style 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);
至此,代码中的工作结束。进入到重点的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) 编辑 收藏 所属分类:
手机地图