Resolving Theme URLs"

From Documentation
m (Created page with "{{ZKDevelopersReferencePageHeader}} Themes comprises of stylesheets and images. The URLs for those resources must be resolved once the theme changes. {{ZKDevelopersReferencePa...")
 
 
Line 1: Line 1:
 
{{ZKDevelopersReferencePageHeader}}
 
{{ZKDevelopersReferencePageHeader}}
  
Themes comprises of stylesheets and images. The URLs for those resources must be resolved once the theme changes.  
+
__TOC__
 +
 
 +
Themes comprises of stylesheets and images. The URLs for those resources must be resolved once the theme changes.
 +
 
 +
Several APIs were available to redirect theme resources to the correct location.
 +
 
 +
<javadoc class="true" method="encodeThemeURL(java.lang.String)">org.zkoss.web.fn.ServletFns</javadoc> is for translating image locations inside *.css.dsp files.
 +
 
 +
<javadoc class="true" method="resolveThemeURL(java.lang.String)">org.zkoss.web.fn.ServletFns</javadoc> is for redirecting the retrieval of stylesheets inside a ThemeProvider.
 +
 
 +
= Example Usage (inside *.css.dsp) =
 +
 
 +
<source lang="css">
 +
tr.z-row-over > td.z-row-inner, tr.z-row-over > .z-cell {
 +
    background-image: url(${c:encodeThemeURL('~./zul/img/grid/column-over.png')});
 +
}
 +
</source>
 +
 
 +
= Example Usage (inside a ThemeProvider): =
 +
 
 +
<source lang="java">
 +
...
 +
public String beforeWidgetCSS(Execution exec, String uri) {
 +
if (uri.startsWith("~./zul/css/") ||
 +
uri.startsWith("~./js/zul/")) {
 +
 +
uri = ServletFns.resolveThemeURL(uri);
 +
}
 +
 +
return uri;
 +
}
 +
...
 +
</source>
  
 
{{ZKDevelopersReferencePageFooter}}
 
{{ZKDevelopersReferencePageFooter}}

Latest revision as of 17:56, 7 April 2013

Themes comprises of stylesheets and images. The URLs for those resources must be resolved once the theme changes.

Several APIs were available to redirect theme resources to the correct location.

ServletFns.encodeThemeURL(String) is for translating image locations inside *.css.dsp files.

ServletFns.resolveThemeURL(String) is for redirecting the retrieval of stylesheets inside a ThemeProvider.

Example Usage (inside *.css.dsp)

tr.z-row-over > td.z-row-inner, tr.z-row-over > .z-cell {
    background-image: url(${c:encodeThemeURL('~./zul/img/grid/column-over.png')});
}

Example Usage (inside a ThemeProvider):

...
public String beforeWidgetCSS(Execution exec, String uri) {
	if (uri.startsWith("~./zul/css/") ||
		uri.startsWith("~./js/zul/")) {
		
		uri = ServletFns.resolveThemeURL(uri);
	}
	
	return uri;
}
...



Last Update : 2013/04/07

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.