资源依赖关系定义及引用

静态资源包括js,css,flash等的依赖关系在类路径中META-INF/resource/resource-dependences.xml文件中描述。 如有需要用户可以自行定制自己的资源依赖关系。如下

<resource>
 <packages type="js">
  <package name="Ext.ux.scrolledTabPanel" file="/ext/ux/scrolledTabPanel.js">
   <requires name="Ext.Layout"></requires>
  </package>
 </packages>
 <packages type="css">
  <package name="Ext.ux.scrolledTabPanel"
   file="/ext/skin/${skin}/yuiext/css/scrolledTabPanel.css">
  </package>
 </packages>
</resource>

在构件渲染类中即可引用定义的资源：

public class AjaxScrolledTabLayoutRenderer extends AjaxTabLayoutRenderer {
    ...
    @Override
    public String[] getDependedJSPackages(FacesContext context, UIComponent component) {
        return new String[] { "Ext.ux.scrolledTabPanel" };
    }
    @Override
    public String[] getDependedCSSPackages(FacesContext context, UIComponent component) {
        return new String[] { "Ext.ux.scrolledTabPanel" };
    }
    ...
}

皮肤制作及使用

META-INF/resource/skins.xml文件用于定义构件外观皮肤，如下

<skins>
 <skin id="black" file="/ext/skin/black/yuiext/css/xtheme-black.css">
     <displayName><![CDATA[Black]]></displayName>
     <displayName locale="zh_CN"><![CDATA[Black]]></displayName>
     <authorName><![CDATA[Ext JS - JavaScript Library]]></authorName>
     <authorEmail><![CDATA[jack.slocum@yahoo.com]]></authorEmail>
 </skin>
    ......
</skins>

然后相对于META-INF/resource放置相关资源，就可以直接使用皮肤Black了。