5 Replies Latest reply on Jun 13, 2013 2:48 AM by Lukáš Fryč

    Externalize Static resourses

    zied aloui Newbie

      Hi guys,

       

      I'm working on a web application with Richfaces 4.3.1 and jsf 2.1.21.

       

      I try to load static resources (Css, JS and images) from external location (Content Delivery Network).On richfaces documentation, it mentioned that resource mapping is controlled by two configurations:

       

      - mapped resources location (indicated by the red color)

      - resource mapping configuration file (indicated by the blue color)

       

      on the web.xml i added the following lines:

       

       

      web.xml

      <servlet>

              <servlet-name>Resource Servlet</servlet-name>

              <servlet-class>org.richfaces.webapp.ResourceServlet</servlet-class>

              <load-on-startup>1</load-on-startup>

          </servlet>

          <servlet-mapping>

              <servlet-name>Resource Servlet</servlet-name>

              <url-pattern>/org.richfaces.resources/*</url-pattern>

          </servlet-mapping>

                          <context-param>

                              <param-name>org.richfaces.resourceMapping.location</param-name>

                              <param-value>#{facesContext.externalContext.requestContextPath}/rfRes/#{resourceLocation}</param-value>

                          </context-param>

       

                <!-- <context-param>

              <param-name>org.richfaces.staticResourceLocation</param-name>

              <param-value>META-INF/richfaces/static-resource-mappings.properties</param-value>

          </context-param> -->

         

          <context-param>

           <param-name>org.richfaces.resourceMapping.mappingFile</param-name>

           <param-value>META-INF/richfaces/static-resource-mappings.properties</param-value>

      </context-param>

         

          <!-- Enabling resource Optimization -->

          <context-param>

          <param-name>org.richfaces.resourceOptimization.enabled</param-name>

          <param-value>true</param-value>

                  </context-param>

       

       

      On the mapper file static-resource-mappings.properties, i tried to map an image resource like a-down.gif  :

       

      static-resource-mappings.properties
      imageStatic=/image/a-down.gif

       

       

      finally i referenced my resource on myPage.xhtml as following :

      myPage.xhtml
      <h:graphicImage id="showToolbarImg" value="imageStatic" rendered="#{iconBar.hideButton}"

       

      Unfortunately, it's not working .

      I hope somone can help me on this one becasuse it is really puzzeling me.

       

      My packaged directory structure should like following :

       

      Package_Structure.jpg

       

      Thanks.

        • 1. Re: Externalize Static resourses
          Lukáš Fryč Master

          Hey zied,

           

          as you can see, h:graphicImage expects an URL in a @value attribute:

          http://www.jsftoolbox.com/documentation/help/12-TagReference/html/h_graphicImage.html

           

          The URL of a JSF resource can be determined this way:

           

          #{resource['imageStatic']}

          1 of 1 people found this helpful
          • 2. Re: Externalize Static resourses
            zied aloui Newbie

            Hey Lukas,

             

            Thank you for the quick response, it was helpful for me.

            In fact my goal is to externalize a set of rsources, identified as static resources, on a CDN like akamai.

            These resources are present as css files, js files and images.The structure of these resources is as follows:

             

            /staticResources

                  -->/cssFiles

                  -->/jsFiles

                  -->/img

             

            I try to host the staticResources directory on the akamai server as a jar or a zip file. Then to declare these resources from the mapping used for static resources with richfaces.

            To implement that i need to clarify some points :

            (1) It is possible to reference the root image directory from my CDN as following ? :

            static-resource-mappings.properties
            externalImageDirectory=http://akamai/xxx/staticResources/img

             

            (2) To use an external image,we must mapped it like an element or we must mapped the root directory of this image only  ? in the second case, how i can reference the url of selected image from the relative path of root directory in our page xhtml ?

             

            (3) In your previous answer :

             

            Lukáš Fryč a écrit:

             

            Hey zied,

             

            as you can see, h:graphicImage expects an URL in a @value attribute:

            http://www.jsftoolbox.com/documentation/help/12-TagReference/html/h_graphicImage.html

             

            The URL of a JSF resource can be determined this way:

             

            #{resource['imageStatic']}

             

            I inspected the returned value of this expression #{resource['imageStatic']}, it returned /appliTest/v210/s1/resources/image/a-down.gif. This url is based on the context application (appliTest), so how will retun a path of external resource from another server ? in fact, when i used the atribute @value with this expression it didn't work. Otherwise when i used the attribute @name=imageStatic the image was displayed correctly.

             

            (4) Finally, it is possible to access an external static resources from a servlet. because i have a servlet which return a single response's output stream for all css / javascript files ?

             

            Thank you again Lukas


            • 3. Re: Externalize Static resourses
              Lukáš Fryč Master

              zied aloui wrote:

               

               

              I try to host the staticResources directory on the akamai server as a jar or a zip file. Then to declare these resources from the mapping used for static resources with richfaces.

              To implement that i need to clarify some points :

              (1) It is possible to reference the root image directory from my CDN as following ? :

              static-resource-mappings.properties
              externalImageDirectory=http://akamai/xxx/staticResources/img


               

              This is something what web.xml configuration parameter org.richfaces.resourceMapping.location serves for.

              It is basically an EL expression which determines where is a root for all resources referenced by mapping.

              This is little bit downside, since you can either move all or nothing ;-)

               

              If you look at the implementation, you can see that default value is:

               

              #{facesContext.externalContext.requestContextPath}/org.richfaces.resources/javax.faces.resource/#{resourceLocation}

              1 of 1 people found this helpful
              • 4. Re: Externalize Static resourses
                Lukáš Fryč Master

                zied aloui wrote:

                 

                 

                (3) In your previous answer :

                 

                Lukáš Fryč a écrit:

                 

                Hey zied,

                 

                as you can see, h:graphicImage expects an URL in a @value attribute:

                http://www.jsftoolbox.com/documentation/help/12-TagReference/html/h_graphicImage.html

                 

                The URL of a JSF resource can be determined this way:

                 

                #{resource['imageStatic']}

                 

                I inspected the returned value of this expression #{resource['imageStatic']}, it returned /appliTest/v210/s1/resources/image/a-down.gif. This url is based on the context application (appliTest), so how will retun a path of external resource from another server ? in fact, when i used the atribute @value with this expression it didn't work. Otherwise when i used the attribute @name=imageStatic the image was displayed correctly.


                 

                You can reference any http/https URL directly. Just use imageStatic=http://xyz/a-down.gif

                 

                That's actually second option to reference resources in CDN (and the only option when you need to combine some resources from CDN with re-mapped resources generated locally).

                 

                (4) Finally, it is possible to access an external static resources from a servlet. because i have a servlet which return a single response's output stream for all css / javascript files ?


                 

                The external resources can be referenced as you want, but in order to get their URL generated, you have to be in a context of JSF (FacesContext must be available, which is mostly in FacesServlet-processed requests).

                So you can reference those resources from a servlet, but you have to be sure where they resides.