当前位置: 代码迷 >> Web前端 >> 【smartgwt】批改进度条Progressbar颜色
  详细解决方案

【smartgwt】批改进度条Progressbar颜色

热度:336   发布时间:2013-02-27 10:48:11.0
【smartgwt】修改进度条Progressbar颜色

???? 在项目中遇到了修改进度条(Progressbar)颜色的需求,smartgwt中,并非简单使用setBackgroundColor("...")方式即可实现,所以在此留一文,供大家及自己日后参考。

?

????? 1. 首先,创建一个Progressbar对象,将其放置在HLayout容器中(为了有效控制Progressbar的宽度,需要在HLayout容器外再套一个VLayout容器,原因不详。)

// 创建VLayout容器
VLayout vlayout = new VLayout(4);
vlayout.setWidth(300);
vlayout.setHeight(24);

// 创建HLayout容器
HLayout hlayout = new HLayout();

// 创建Progressbar对象
final Progressbar hBar = new Progressbar();
// 进度条的方向为横向
hBar.setVertical(false);
// 设置进度条完成情况为40%
hBar.setPercentDone(40);
// 设置进度条状态为"Error"
// 该步骤关键,依据需要,我们为进度条添加了一个新的状态"Error"
hBar.setState("Error");
// 如果进度条已经被绘制(drawn)/初始化(initialized),则调用redraw()方法
hBar.redraw();

// 放置Progressbar对象
hlayout .addMember(hBar);
vlayout.addMember(hlayout);

?

??? 2. 如今,我们已经为Progressbar对象添置了新的状态"Error",接下来需要在工程的images文件夹下新增几个图片。在此之前,我们先来看下images文件夹及子文件夹 目录结构。那目录在哪儿?我们启动刚才编写的项目(用Firefox浏览),点击浏览器的“工具” -> “页面信息” -> "媒体”,

?



?

从上述截图,我们可以看到页面使用到的图片资源,目录在“工程目录/sc/skins/Enterprise/images/”,由于当前对象为Progressbar,所以对应图片目录也在Progressbar/下。当前Progressbar对象为水平方向,所以图片命名为:progressbar_h[_状态_]_部分[_empty].gif 。 其中,

??? > 状态部分为可选,表示当前进度条状态

??? > "部分":start/stretch/end,分别表示:图片头部/图片中断/图片尾部。

??? > [_empty]为可选,当有'_empty'时,表示进度条未填充部分。

由此,我们可以了解到,现在我们需要添加的图片依次为:

progressbar_Error_h_start.gif

progressbar_Error_h_stretch.gif

progressbar_Error_h_end.gif

progressbar_Error_h_empty_start.gif

progressbar_Error_h_empty_stretch.gif

progressbar_Error_h_empty_end.gif

?

????? 3.当步骤2中提到的几个图片文件已添加,恭喜你!你已经实现了修改进度条颜色的功能。

?