使用GXT的ThemeBuilder建立自己的皮肤

EXTJS的neptune虽然是适应目前大屏幕字体，但是配色太糟糕了，蓝的一塌糊涂，真不知道设计者是什么个审美。。。。

好在有ThemeBuilder，可以自己做点不同的配色了。

ThemeBuilder的使用很简单：

1. 展开 gxt-3.1.1-gpl ，里面可以看到目录themebuilder。注意里面的几个文件：

themer.bat                                                     这个是编译工具，注意编译前，必须设置好JAVA_HOME

examples\quick-start\quick-start.theme  这个是皮肤文件，所有的*.theme都是皮肤，皮肤是以脚本的形式打开的，你可以用ultraEdit打开

2.执行命令 themer.bat <你的theme的path>

例如 themer.bat D:\gxt-3.1.1-gpl\themebuilder\examples\quick-start\quick-start.theme

注：如果提示系统无法找到指定路径，你可能要先执行命令SET JAVA_HOME=XXXX

3.等待命令输出，最后执行完毕后，会在你的命令执行目录生成皮肤包。例如上面的例子，就在D:\gxt-3.1.1-gpl\themebuilder\bin下会生成quickstart.jar。

为什么是quickstart.jar呢，是由配置的这行决定的：

  name = "quickstart"

4.将jar加入classpath，然后在GWT的配置文件里加入：

<inherits name="com.example.Theme" />

然后编译后，你会发现UI不一样了。注意这个路径是由配置的这行决定的：

basePackage = "com.example"

然后。。。剩下的工作，就是如何做好你的*.theme文件配置了。简单记录几个经验：

1.注意皮肤里你会发现有很多PNG的图片，这些图片是由生成程序来绘制的图片，不需要任何额外资源，例如展开和收起的图片。是由这个区块决定的：

        /* this is for css png icon */
    tools {
      primaryColor = "#a2becc"
      primaryOverColor = "#bedfef"
      primaryClickColor = util.lightenColor("#bedfef", 0.1)
      warningColor = "#D94E37"
      allowColor = "#C6E38A"

      tabs {
        tabCloseOver = "#ffffff"
      }
    }
2.按钮的样式是由渐变绘图来决定的，你可能要学习这些CSS语法：

pressedGradient = '#E1E1E1 0%, #D5D5D5 50%, #E1E1E1 51%, #E4E4E4 100%'

就是从上到下0%的时候是#E1E1E，50%的时候是#D5D5D5，51%的时候是#E1E1E1，最后的颜色是#E4E4E4

3.有些颜色样式是部分组件公用的，导致配色起来很麻烦，例如收起的ICON我希望收起后变成深色，但是目前还没找到办法

4.其它的还没深入研究，在此只是抛砖引玉，有兴趣的人可以详细研究下。附个自己简单调色后的界面

经过一段时间的研究，Font Awesome也可以用上了，样式终于有点起色。看上去至少不至于那么糟心了，主体框架基本满意。结果如下：

接下来是整菜单树和下拉菜单的Font Awesome支持

顺便再吐个槽，GXT 4.0 的Triton Theme皮肤出来了，我已经对GXT皮肤的开发团队不抱任何信心了。还卖那么贵的$，招几个能做事的美工不行么？

Triton Theme