???? 在项目中遇到了修改进度条(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中提到的几个图片文件已添加,恭喜你!你已经实现了修改进度条颜色的功能。
?