2012-12-18 03:04题主

分享一下webbuilder的ide中,图标自定义和支持png的方法

通过阅读源码可以看到,其实wb在代码中写死了只能是images根目录下的gif图标文件才能在列表中显示出来,而且子目录的图标也不会在下拉列表中显示。
那么,我们的目标就是:iconCls下拉列表支持显示子目录文件,且能够支持更多格式,如png
1、修改Designer.java代码
增加方法listIconFile,用于读取图标文件,可以支持子目录扫描、自定义图标后缀


然后修改原有的方法getIconList,在里面调用刚刚新增的方法

2、修改iconCls下拉框的界面部分代码,目前发现两处
其中移除如下图所示,需要在IDE中修改
修改listConfig为:
另外一出则需要在designer.js中修改:
designer.js中有个函数为edtIcon,按照如下修改即可

好了,大功告成,看看效果如何?

另,写了一个方便的方法,用于扫描目录直接生成图标CSS文件
红框需要自己注意路径
当然,调用很简单,如:
2012-12-18 07:39#1

更新自动写CSS文件的方法:


使用:
2012-12-18 08:30#2
不错,学习
2012-12-18 09:37#3
不错,我最近也在研究这个,不过 我测试的结果是webbuilder本身就支持png图片,也支持选择不同目录下的png图片。
在icon的属性设置里可以直接选中你要添加的png gif图片的服务器路径,清空iconcls。
这样就可以实现自定义图标的加载了。不需要修改webbuilder的代码。
这个方法也更容易进行图标的分类。

属性iconcls直接加载太多的图片选择起来也麻烦,不如直接在icon里按照目录选择。

一点经验 希望对大家有些用处。
2012-12-18 09:55#4
嗯,是滴,只是很多组件没有添加icon属性
2012-12-18 10:23#5
不错,谢谢分享
2012-12-18 10:30#6
俺是依葫芦画瓢,直接在image下添加图片文件,然后配置style.css,jpg格式的也行,貌似gif图片文件最小
2012-12-18 21:03#7
谢谢 huangking,非常热心。
2012-12-20 18:27#8
huangking厉害,继续期待新的研究成果分享~
2012-12-24 09:06#9
学习了
2014-03-26 17:43#10
非常可惜 在6.8版本中 这个方法 好像不行啊! 
楼主还能指点下?
2014-03-26 18:18#11
6.8可以使用
2014-03-27 16:45#12
6.8 按照他的方法 我出现这样问题。 显示的名称多了.png  保存了也不胜效,楼上还能指点下?
如果把 f.getNamge() 修改为:FileUtil.extractFileExt(f.getName())), 下拉框又不显示图标了!

楼上可以指点下?
2014-03-27 17:07#13
文件名称要高样式表名称结合起来,看一下style.css中的样式名称
2014-03-27 17:18#14
个style.css 只是用来增加新图片 ,这样写有问题吗? 
主要是没找到在哪里控制下拉框名称显示的。

2014-04-02 17:24#15
样式表中的名称必须对应上才行。
2014-04-04 09:50#16
thank you .

返回开发者社区