XUL组件集为每种浏览器提供了几套样式表：较小(smaller)，较大(larger) 和 普通(normal)。默认使用normal集。你可以配置WEB-INF/zk.xml来选择一个不同的主题。
有两种方式改变字体的大小和样式(family)：使用library属性和使用内置的(built-in)CSS文件。
内置的它们使用了下面的变量控制字体大小。
|
名称 |
默认 |
描述 |
|---|---|---|
|
|
|
默认字体大小。它被用于多大数组件 |
|
|
|
对于要求小字体的组件使用的小一号字体，如 |
|
|
|
非常小的字体，很少使用。 |
|
|
|
|
若想改变默认的字体大小，你可以在WEB-INF/zk.xml内指定library属性，如下。
<library-property>
<name>org.zkoss.zul.theme.fontSizeM</name>
<value>12px</value>
</library-property>
<library-property>
<name>org.zkoss.zul.theme.fontSizeS</name>
<value>10px</value>
</library-property>
<library-property>
<name>org.zkoss.zul.theme.fontSizeXS</name>
<value>9px</value>
</library-property>
下面的内置变量控制字体样式。
|
名称 |
描述 |
|---|---|
|
|
默认： 此字体样式被用于titles和caption |
|
|
默认： 此字体样式被用于conntents。 |
较小字体的主题文件为normsm*.css.dsp。你可以配置WEB-INF/zk.xml来使用它，如下。
<desktop-config> <disable-theme-uri>~./zul/css/norm*.css.dsp*</disable-theme-uri> <theme-uri>~./zul/css/normsm*.css.dsp*</theme-uri> </desktop-config>
参考Developer's Reference 来获取更多关于如何配置WEB-INF/zk.xml的信息。
较大字体的主题文件为normlg*.css.dsp。你可以配置WEB-INF/zk.xml来使用它，如下。
<desktop-config> <disable-theme-uri>~./zul/css/norm*.css.dsp*</disable-theme-uri> <theme-uri>~./zul/css/normlg*.css.dsp*</theme-uri> </desktop-config>
通过提供你自制的样式表(CSS)来定制ZK XUL组件的外观是很简单的。你可以参考ZUL工程中的 norm.css.dsp 和normie.css.dsp。若你只想改变字体，则可以参考normsm.css.dsp。
<desktop-config> <theme-uri>/css/my-fine-font.css</theme-uri> </desktop-config>
如你想在运行时依赖当前用户，cookie ，locale 或其它决定主题，则可以实现一个主题提供者(theme provider)。主题提供者为实现了org.zkoss.zk.ui.util.ThemeProvider接口的类。
package my;
public class MyThemeProvider implements ThemeProvder {
public Collection getThemeURIs(Execution exec, List uris) {
for (Iterator it = uris.iterator(); it.hasNext();) {
if ("~./zul/css/norm*.css.dsp*".equals(it.next()))
it.remove(); //remove the default theme
}
HttpServletRequest req = (HttpServletRequest)exec.getNativeRequest();
uris.add(getMyThemeURI(req));
return uris;
}
}
然后，配置WEB-INF/zk.xml添加如下几行。
<desktop-config> <theme-provider-classgt;my.MyThemeProvider</theme-provider-class> </desktop-config>
又见zkdemo.war内的org.zkoss.zkdemo.userguide.FontSizeThemeProvider决定了基于cookie 的主题。