myfaces-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Apache Wiki <wikidi...@apache.org>
Subject [Myfaces Wiki] Update of "Trinidad Skinning FAQ" by SimonLessard
Date Thu, 17 Aug 2006 14:41:50 GMT
Dear Wiki user,

You have subscribed to a wiki page or wiki category on "Myfaces Wiki" for change notification.

The following page has been changed by SimonLessard:
http://wiki.apache.org/myfaces/Trinidad_Skinning_FAQ

------------------------------------------------------------------------------
  }
  }}}
  
+ === How can I specify a valid url to an image inside my skin? I'm all mixed up! ===
+ 
+ Trinidad's skinning engine supports 4 URL types: absolute, relative, context relative and
server relative.
+ 
+  * '''Absolute''' URLs specify the complete URL to the resource, inclusing the protocol
(e.g. {{{http://}}}). Example:
+  {{{
+ .AFErrorIcon:alias
+ {
+   content: url(http://incubator.apache.org/images/asf_logo_wide.gif);
+ }
+ }}}
+ 
+  * '''Relative''' URLs are used if the specified url does not start with a slash ("/") and
if there's no protocol present. A relative URL is based on the skin's CSS file location. For
instance, if the CSS is located in {{{MyWebApp/skins/mySkin/}}} and the specified url is {{{skinImages/myImage.gif}}},
then the final URL will be {{{/MyWebApp/skins/mySkin/skinImages/myImage.gif}}}. Example:
+  {{{
+ .AFErrorAnchorIcon:alias
+ {
+   content: url(skin_images/ObjectIconError.gif);
+ }
+ }}}
+ 
+  * '''Context relative''' URLs are resolsed relatively to the context root of the web application.
To use them, you simply have to make it start with a single slash ("/"). For instance, if
the context root is {{{/MyWebApp}}} and the specified URL is {{{/images/myImage.jpeg}}}, the
resulting URL will be {{{/MyWebApp/images/myImage.jpeg}}}. Example:
+  {{{
+ .AFErrorAnchorIcon:alias
+ {
+   content: url(/skins/mySkin/skin_images/ObjectIconError.gif);
+ }
+ }}}
+ 
+  * '''Server relative''' URLs are resolved relatively to the web server as opposed to the
context root. This allow to easily refer to resources located on another application on the
same server. To use this type of URL, the specified URL must starts with two slashes ("//").
Example:
+  {{{
+ af|selectInputDate::launch-icon
+ {
+   content: url(//MyOtherWebApp/images/myCalendar.gif);
+ }
+ }}}
+ 
+ '''Equivalence'''
+ Most of the times, you can write equivalent URLs in any of the 4 forms. For example, if
your web application is located at {{{http:www.mycompany.com/MyWebApp/}}} and your CSS is
located in {{{/skins/mySkin/}}} folder, the following 4 entries are equivalent:
+ {{{
+ .AFErrorAnchorIcon:alias
+ {
+   /* Absolute */
+   content: url(http://www.mycompany.com/MyWebApp/skins/mySkin/skin_images/ObjectIconError.gif);
+ }
+ 
+ .AFErrorAnchorIcon:alias
+ {
+   /* Relative */
+   content: url(skin_images/ObjectIconError.gif);
+ }
+ 
+ .AFErrorAnchorIcon:alias
+ {
+   /* Context relative */
+   content: url(/skins/mySkin/skin_images/ObjectIconError.gif);
+ }
+ 
+ .AFErrorAnchorIcon:alias
+ {
+   /* Server relative */
+   content: url(//MyWebApp/skins/mySkin/skin_images/ObjectIconError.gif);
+ }
+ }}}
+ 
+ === Why is there so many ways to specify URLs? Is there a preferred type? ===
+ 
+ The 4 ways to specify an URL exist to offer maximum flexibility to our users. In the majority
of cases however, only relative will be used. 
+ 
+ Relative is the preferred type when you specify a skin icon because they it is the most
resistant to directory structure changes. Also, it's very possible that in the future, Trinidad
will allow to create JAR archives containing all skin data. Such JAR should be independant
of server and context as well as contains every resource it needs and only relative URLs are
consistent with that idea.
+ 

Mime
View raw message