title: What is the JSF resource library for and how should it be used?
body: <p>The JSF <a href="http://docs.oracle.com/javaee/6/javaserverfaces/2.1/docs/vdldocs/facelets/h/outputStylesheet.html" rel="noreferrer"><code>&lt;h:outputStylesheet&gt;</code></a>, <a href="http://docs.oracle.com/javaee/6/javaserverfaces/2.1/docs/vdldocs/facelets/h/outputScript.html" rel="noreferrer"><code>&lt;h:outputScript&gt;</code></a> and <a href="http://docs.oracle.com/javaee/6/javaserverfaces/2.1/docs/vdldocs/facelets/h/graphicImage.html" rel="noreferrer"><code>&lt;h:graphicImage&gt;</code></a> components have a <code>library</code> attribute. What is this and how should this be used? There are a lot of examples on the web which use it as follows with the common content/file type <code>css</code>, <code>js</code> and <code>img</code> (or <code>image</code>) as library name depending on the tag used:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;h:outputStylesheet library="css" name="style.css" /&gt;
  &lt;h:outputScript library="js" name="script.js" /&gt;
  &lt;h:graphicImage library="img" name="logo.png" /&gt;
  </code></pre>
  
  <p>How is it useful? The <code>library</code> value in those examples seems to be just repeating whatever is already been represented by the tag name. For a <code>&lt;h:outputStylesheet&gt;</code> it's based on the tag name already obvious that it represents a "CSS library". What's the difference with the following which also just works the same way?</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;h:outputStylesheet name="css/style.css" /&gt;
  &lt;h:outputScript name="js/script.js" /&gt;
  &lt;h:graphicImage name="img/logo.png" /&gt;
  </code></pre>
  
  <p>Also, the generated HTML output is a bit different. Given a context path of <code>/contextname</code> and <code>FacesServlet</code> mapping on an URL pattern of <code>*.xhtml</code>, the former generates the following HTML with the library name as request parameter:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;link rel="stylesheet" type="text/css" href="/contextname/javax.faces.resource/style.css.xhtml?ln=css" /&gt;
  &lt;script type="text/javascript" src="/contextname/javax.faces.resource/script.js.xhtml?ln=js"&gt;&lt;/script&gt;
  &lt;img src="/contextname/javax.faces.resource/logo.png.xhtml?ln=img" alt="" /&gt;
  </code></pre>
  
  <p>While the latter generates the following HTML with the library name just in the path of the URI:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;link rel="stylesheet" type="text/css" href="/contextname/javax.faces.resource/css/style.css.xhtml" /&gt;
  &lt;script type="text/javascript" src="/contextname/javax.faces.resource/js/script.js.xhtml"&gt;&lt;/script&gt;
  &lt;img src="/contextname/javax.faces.resource/img/logo.png.xhtml" alt="" /&gt;
  </code></pre>
  
  <p>The latter approach makes in hindsight also more sense than the former approach. How exactly is the <code>library</code> attribute then useful?</p>