Unable to find or serve localized resource from jsf-resource-library
<p>I am trying to replicate an example from a book,</p>

<p>The structure can be visualized from the image attached below-</p>

<p><strong>UPDATED</strong></p>

<p><a href="https://i.stack.imgur.com/8lJbY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8lJbY.png" alt="enter image description here"></a></p>

<p>The view for which the library will be used is as simple as this given below-</p>

<pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"&gt;
    &lt;h:head&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;h:outputStylesheet library="#{facesContext.viewRoot.locale}/default" name="css/rafa.css"/&gt;
        &lt;h:outputScript library="#{facesContext.viewRoot.locale}/default" name="rafa.js"/&gt;        
    &lt;/h:head&gt;
    &lt;h:body&gt;   
        &lt;f:view locale="#{localeBean.mylocale}"&gt;     
            &lt;div style="width:100%; text-align:center"&gt;
                &lt;h:form&gt;
                    &lt;h:commandButton value="Rafa at Roland Garros" action="#{localeBean.changeLocale('fr')}"/&gt;
                    &lt;h:commandButton value="Rafa at Wimbledon" action="#{localeBean.changeLocale('en')}"/&gt;
                    &lt;h:commandButton value="Rafa at US Open" action="#{localeBean.changeLocale('us')}"/&gt;
                    &lt;h:commandButton value="Rafa at Australian Open" action="#{localeBean.changeLocale('au')}"/&gt;
                &lt;/h:form&gt;
            &lt;/div&gt;
            &lt;div style="width:100%; text-align:center"&gt;
                &lt;!--&lt;h:graphicImage library="#{facesContext.viewRoot.locale}/default" name="img/rafa.png"/&gt; --&gt;
                &lt;h:graphicImage value="#{resource[facesContext.viewRoot.locale+='/default:img/rafa.png']}"/&gt;
            &lt;/div&gt;
        &lt;/f:view&gt;
    &lt;/h:body&gt;
&lt;/html&gt;
</code></pre>

<p>with a </p>

<pre><code>@Named
@RequestScoped
public class LocaleBean {

    private String mylocale = "fr";
    // getters &amp; setters
}
</code></pre>

<p>I am using <code>Glassfish 4.1.1 Application Server</code> with <code>Mojarra 2.2.12</code> being used internally,</p>

<p>The <code>rendered HTML</code> is-</p>

<pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head id="j_idt2"&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;script type="text/javascript" src="/glassfish-ee/javax.faces.resource/rafa.js.xhtml?ln=fr/default&amp;amp;v=1_01_2"&gt;
        &lt;/script&gt;&lt;link type="text/css" rel="stylesheet" href="/glassfish-ee/javax.faces.resource/css/rafa.css.xhtml?ln=fr/default&amp;amp;v=1_0" /&gt;
    &lt;/head&gt;
    &lt;body&gt;     
        &lt;div style="width:100%; text-align:center"&gt;
        &lt;form id="j_idt8" name="j_idt8" method="post" action="/glassfish-ee/ch5/ch5_12/index.xhtml" enctype="application/x-www-form-urlencoded"&gt;
            &lt;input type="hidden" name="j_idt8" value="j_idt8" /&gt;
            &lt;input type="submit" name="j_idt8:j_idt9" value="Rafa at Roland Garros" /&gt;
            &lt;input type="submit" name="j_idt8:j_idt10" value="Rafa at Wimbledon" /&gt;
            &lt;input type="submit" name="j_idt8:j_idt11" value="Rafa at US Open" /&gt;
            &lt;input type="submit" name="j_idt8:j_idt12" value="Rafa at Australian Open" /&gt;
            &lt;input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="---somevalue---" autocomplete="off" /&gt;
        &lt;/form&gt;
        &lt;/div&gt;
            &lt;div style="width:100%; text-align:center"&gt;
                &lt;!--&amp;lt;h:graphicImage library="fr/default" name="img/rafa.png"/&amp;gt; --&gt;
                &lt;img src="/glassfish-ee/javax.faces.resource/img/rafa.png.xhtml?ln=fr/default&amp;amp;v=1_0" /&gt;
            &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>The relative urls of interest in rendered html-</p>

<pre><code>http://localhost:8080/glassfish-ee/javax.faces.resource/rafa.js.xhtml?ln=fr/default&amp;v=1_01_2
http://localhost:8080/glassfish-ee/javax.faces.resource/css/rafa.css.xhtml?ln=fr/default&amp;v=1_0
http://localhost:8080/glassfish-ee/javax.faces.resource/img/rafa.png.xhtml?ln=fr/default&amp;v=1_0
</code></pre>

<p>On the console, I get this-</p>

<pre><code>2016-06-08T20:54:52.672+0530|WARNING: JSF1064: Unable to find or serve resource, rafa.js, from library, fr/default.
2016-06-08T20:54:52.673+0530|WARNING: JSF1064: Unable to find or serve resource, css/rafa.css, from library, fr/default.
2016-06-08T20:54:52.717+0530|WARNING: JSF1064: Unable to find or serve resource, img/rafa.png, from library, fr/default.
2016-06-08T20:54:57.570+0530|WARNING: JSF1064: Unable to find or serve resource, css/rafa.css, from library, fr/default.
2016-06-08T20:56:05.587+0530|WARNING: JSF1064: Unable to find or serve resource, img/rafa.png, from library, fr/default.
2016-06-08T20:56:09.542+0530|WARNING: JSF1064: Unable to find or serve resource, img/rafa.png, from library, fr/default.
</code></pre>

<p>console tab of Google chrome shows-</p>

<p><a href="https://i.stack.imgur.com/sJtiv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sJtiv.png" alt="enter image description here"></a></p>

<p>So finally, where am I going wrong?<br>
Please suggest.</p>

<hr/>

<p>After taking the help of the answer suggested below, with changes,</p>

<p><a href="https://i.stack.imgur.com/dqEqq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dqEqq.png" alt="enter image description here"></a></p>

<p>with an entry-</p>

<pre><code>javax.faces.resource.localePrefix=fr
</code></pre>

<p>Accessing the page with a GET request, an alert pops up due to the following entry in <code>1_2.js</code> file depicted as <code>selected</code> in the structure attached above.</p>

<pre><code>alert("J'ai gagnÃ© Roland Garros ...(resources/fr/1_0/css/js/rafa.js/1_2.js)");
</code></pre>

<p><a href="https://i.stack.imgur.com/bqX0E.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bqX0E.png" alt="enter image description here"></a></p>

<p>I see the same alert popping-up even when after I have changed the <code>locale</code> by pressing the desired <code>command button</code>.</p>

<p>Why? What further needs to be done? Thanks in advance.</p>