10 Replies Latest reply on Aug 28, 2013 6:39 AM by Usman Khalid

    Richfaces 4.3.3,JSF 2.1 skin loading issues

    Usman Khalid Newbie

      Hi,

       

      I am new to richfaces, i configured it. followed the steps given in getting started and i am able to get rich tags in my xhtml.

       

      but due to some reason its not loading the skin. i have to work and devlop the mobile optimized application. Please help me.

      below is my web.xml

       

      <?xml version="1.0" encoding="UTF-8"?>

      <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">

        <display-name>JsfRich</display-name>

        <welcome-file-list>

          <welcome-file>index.html</welcome-file>

          <welcome-file>index.htm</welcome-file>

          <welcome-file>index.jsp</welcome-file>

          <welcome-file>default.html</welcome-file>

          <welcome-file>default.htm</welcome-file>

          <welcome-file>default.jsp</welcome-file>

        </welcome-file-list>

        <servlet>

              <servlet-name>Faces Servlet</servlet-name>

              <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>

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

          </servlet>

          <servlet-mapping>

              <servlet-name>Faces Servlet</servlet-name>

             

              <url-pattern>/faces/*</url-pattern>

          </servlet-mapping>

          <servlet-mapping>

              <servlet-name>Faces Servlet</servlet-name>

              <url-pattern>*.faces</url-pattern>

          </servlet-mapping>

          <mime-mapping>

              <extension>ecss</extension>

              <mime-type>text/css</mime-type>

          </mime-mapping>  

        <context-param>

          <param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name>

          <param-value>resources.application</param-value>

        </context-param>

        <listener>

          <listener-class>com.sun.faces.config.ConfigureListener</listener-class>

        </listener>

       

        <!-- Richfaces Config -->

       

      <context-param>

       

       

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

       

       

         <param-value>false</param-value>

       

       

      </context-param>

      <context-param>

       

       

        <param-name>org.ajax4jsf.skin</param-name>

       

       

        <param-value>blueSky</param-value>

       

       

      </context-param>

      </web-app>

       

       

       

      here is my faces-config.xml

       

      <?xml version="1.0" encoding="UTF-8"?>

       

       

      <faces-config

          xmlns="http://java.sun.com/xml/ns/javaee"

          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

          xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_1.xsd"

          version="2.1">

      <application></application>

      </faces-config>

       

       

      here is template.xhtml

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

                "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      <html xmlns="http://www.w3.org/1999/xhtml"

            xmlns:ui="http://java.sun.com/jsf/facelets"

            xmlns:h="http://java.sun.com/jsf/html"

            xmlns:f="http://java.sun.com/jsf/core"

            >

      <h:head>

        <title><ui:insert name="title">Default title</ui:insert></title>

      </h:head>

       

       

      <body>

      <f:view>

      <ui:debug hotkey="x" rendered="#{initParam['javax.faces.FACELETS_DEVELOPMENT']}"/>

       

       

      <div id="header">

          <ui:insert name="header">

        

          <!--  include your header file or uncomment the include below and create header.xhtml in this directory -->

          <ui:include src="header.xhtml"/>

          </ui:insert>

      </div>

       

       

       

       

      <div id="content">

        <ui:insert name="content">

          Content area.  See comments below this line in the source.

          <!--  include your content file or uncomment the include below and create content.xhtml in this directory -->

          <!-- <div> -->

          <!-- <ui:include src="content.xhtml"/> --> 

          <!-- </div> -->

        </ui:insert>

      </div>

       

       

      <div id="footer">

        <ui:insert name="footer">

        

          <!--  include your header file or uncomment the include below and create footer.xhtml in this directory -->

        <ui:include src="footer.xhtml"/> 

        </ui:insert>

      </div>

      </f:view>

      </body>

       

       

      </html>

       

      Here is  index.xhtml

       

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

       

       

       

       

       

       

      <ui:composition template="/WEB-INF/template/template.xhtml" xmlns="http://www.w3.org/1999/xhtml"

        xmlns:ui="http://java.sun.com/jsf/facelets"

        xmlns:h="http://java.sun.com/jsf/html"

        xmlns:f="http://java.sun.com/jsf/core"

        xmlns:rich="http://richfaces.org/rich"

        xmlns:a4j="http://richfaces.org/a4j">

       

        <ui:define name="content">

        <rich:calendar>

        </rich:calendar>

      <a4j:commandButton value="submit"></a4j:commandButton>

       

       

      <rich:panel>

              <f:facet name="header">

                  <h:outputText value="Person Info"></h:outputText>

              </f:facet>

              <h:panelGrid columns="2">

                  <h:outputText value="Name: " />

                  <rich:inplaceInput defaultLabel="click to enter your name" />

                  <h:outputText value="Email:" />

                  <rich:inplaceInput defaultLabel="click to enter your email" />

              </h:panelGrid>

          </rich:panel>

        </ui:define>

       

      </ui:composition>

       

       

       

       

      No skin applied on it please help me

        • 1. Re: Richfaces 4.3.3,JSF 2.1 skin loading issues
          Juraj Húska Master

          Hello,

           

          have you included all required libraries into your .war ?

           

          Mainly: cssparser, guava, sac ?

          • 2. Re: Richfaces 4.3.3,JSF 2.1 skin loading issues
            Usman Khalid Newbie

            Yes i included all the libraries in buildpath

            • 3. Re: Richfaces 4.3.3,JSF 2.1 skin loading issues
              Juraj Húska Master

              What URL are you accessing in your browser in order to load your application ? I am particularly interested in the end part ...

              • 4. Re: Richfaces 4.3.3,JSF 2.1 skin loading issues
                Usman Khalid Newbie

                localhost:8080/context/index.jsf

                • 5. Re: Richfaces 4.3.3,JSF 2.1 skin loading issues
                  Juraj Húska Master

                  Sorry, now when looking closer to you web.xml I can see that you are probably mixing RichFaces 3.3.x with 4.x

                   

                  From what page have you followed the getting started ?

                   

                  Here is the example of the web.xml for the RichFaces 4:

                  richfaces/examples/showcase/src/main/webapp-jbas71/WEB-INF/web.xml at master · richfaces/richfaces · GitHub

                  • 6. Re: Richfaces 4.3.3,JSF 2.1 skin loading issues
                    Usman Khalid Newbie

                    I tried the same web.xml  no change.... can you do me a favor and  just set up one  page richface4.3.3 and jsf 2.1 project with just one richfaces widget and post it to me to see what i am doing wrong there is no such example available without maven

                    • 7. Re: Richfaces 4.3.3,JSF 2.1 skin loading issues
                      Brian Leathem Master

                      Is one of these quickstart projects helpful in getting you bootstrapped?

                      richfaces/jdf-quickstarts · GitHub

                      • 8. Re: Richfaces 4.3.3,JSF 2.1 skin loading issues
                        Usman Khalid Newbie

                        I have no experience with maven :S can you post a quickstart without maven ?

                        Brian i know you are the lead developer, but i am trying to figuring this out from 2 days. Please help me.

                         

                        If you just create a quickstart project for me with richfaces 4.3.3 and jsf 2.1 without maven i would compare my code and configuration to see where i am doing wrong. Please HELP ME !

                        • 9. Re: Richfaces 4.3.3,JSF 2.1 skin loading issues
                          Juraj Húska Master

                          I have pushed to GitHub an example of not Maven based project:

                          jhuska/richfaces-sanbox · GitHub

                           

                          It is working, see the web.xml and the list of the libraries in the WEB-INF/libraries.

                           

                          Does it work for you ?

                          • 10. Re: Richfaces 4.3.3,JSF 2.1 skin loading issues
                            Usman Khalid Newbie

                            Thanks  Juraj Huska, it worked for me . but i have another issue  when i  use this

                             

                            <context-param> 

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

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

                            </context-param>

                             

                            Skin wont apply as it apply before.

                             

                            and also can you help me in creating the back button i see a submit button on desktop browser and no back button on mobile browser.

                             

                            Below is my test and first xhtml page.

                             

                            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                             

                             

                            <html lang="en"

                                  xmlns="http://www.w3.org/1999/xhtml"

                                  xmlns:h="http://java.sun.com/jsf/html"

                                  xmlns:f="http://java.sun.com/jsf/core"

                                  xmlns:c="http://java.sun.com/jsp/jstl/core"

                                  xmlns:ui="http://java.sun.com/jsf/facelets"

                                  xmlns:a4j="http://richfaces.org/a4j"

                                  xmlns:fn="http://java.sun.com/jsp/jstl/functions"

                                  xmlns:rich="http://richfaces.org/rich"

                                  >

                                  <f:view>

                            <h:head>

                                    <title>RichFaces Mobile Showcase</title>

                                    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

                                    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>

                             

                             

                                    <!-- enable full-screen mode -->

                                    <meta name="apple-mobile-web-app-capable" content="yes"/>

                                    <!-- controls the appearance of the status bar in full-screen mode -->

                                    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>

                             

                             

                                    <link rel="stylesheet" href="slidfast.css" />

                                    <script type="text/javascript" src="slidfast.js"></script>

                             

                             

                                    <script type="text/javascript">

                             

                             

                                       var _gaq = _gaq || [];

                                       _gaq.push(['_setAccount', 'UA-7306415-7']);

                                       _gaq.push(['_setDomainName', 'richfaces.org']);

                                       _gaq.push(['_setAllowLinker', true]);

                                       _gaq.push(['_trackPageview']);

                             

                             

                                       (function() {

                                       var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

                                       ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

                                       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

                                       })();

                             

                             

                                       //initialize mobile RichFaces with slidfast

                                       slidfast({

                                           defaultPageID:'home-page',

                                           callback: 'handleHashChange',

                                           backButtonID: 'back-button' //optional

                                       });

                             

                             

                                    </script>

                             

                             

                                </h:head>

                             

                             

                             

                             

                            <h:body>

                            <link rel="stylesheet" href="rf-mobile-skin.css" />

                             

                             

                                      <div id="browser">

                            <header>

                                            <div>

                                               <div id="back-button" class="hide-button">Back</div>

                                               <a href="index.jsp">

                                                   <img src="rf-logo-small.png" alt="RF logo" class="logo"/>

                                               </a>

                                               <h:graphicImage id="ajaxLoader" width="16" height="16" value="/loader.gif" alt="loader" style="float: right; margin: 14px; visibility: hidden" />

                                               <a4j:status onstart="#{rich:element('ajaxLoader')}.style.visibility='visible'" onstop="#{rich:element('ajaxLoader')}.style.visibility='hidden'" />

                                            </div>

                                        </header>

                             

                             

                            <h:form>

                            <div id="page-container">

                            <div id="home-page" >

                            <rich:panel>

                                    <f:facet name="header">

                                        <h:outputText value="Person Info"></h:outputText>

                                    </f:facet>

                                    <h:panelGrid columns="2">

                                        <h:outputText value="Name: " />

                                        <rich:inplaceInput defaultLabel="click to enter your name" />

                                        <h:outputText value="Email:" />

                                        <rich:inplaceInput defaultLabel="click to enter your email" />

                                    </h:panelGrid>

                                </rich:panel>

                            </div>

                            <div id="component-page" >

                            <div>

                                                        <h:outputStylesheet>

                                                            .navigation .rf-tab-hdr-brd,.navigation .rf-tab {

                                                            display: none;

                                                            }

                                                        </h:outputStylesheet>

                                                        <div>

                                                            <fieldset >

                                                               <rich:calendar>

                                                               </rich:calendar>

                                                            </fieldset>

                             

                             

                                                         </div>

                                                    </div>

                            </div>

                            </div>

                            </h:form>

                            </div>

                            </h:body>

                            </f:view>

                            </html>