ICEfaces
  1. ICEfaces
  2. ICE-7789

Load ACE theme resources by means of a custom h:head renderer

    Details

    • Type: Improvement Improvement
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 3.0
    • Fix Version/s: EE-3.0.0.BETA, 3.0.1
    • Component/s: ACE-Components
    • Labels:
      None
    • Environment:
      Any
    • Affects:
      Documentation (User Guide, Ref. Guide, etc.), Compatibility/Configuration

      Description

      Loading theme resources without a Head renderer has caused other problems at the core level. Furthermore, the original reason for avoiding the use of a Head renderer was to avoid conflicts with other JSF libraries also using a Head renderer, but this wasn't done as part of a thorough, orchestrated plan to avoid conflicts at all levels. For example, nothing has been planned to avoid CSS conflicts with other libraries using different versions of jQuery UI that might have different stylings and affect all widgets on the page with the same class names. Therefore, at the moment, there is no real benefit in not using a Head renderer, and many problems could be avoided by simply using it right now.

        Issue Links

          Activity

          Hide
          Arturo Zambrano added a comment -

          Fixed at revision 27947 in the trunk and at revision 27949 in the maintenance branch.

          Show
          Arturo Zambrano added a comment - Fixed at revision 27947 in the trunk and at revision 27949 in the maintenance branch.
          Hide
          Arturo Zambrano added a comment -

          This issue was re-opened to make the use of the custom h:head renderer customizable via a context parameter.

          Show
          Arturo Zambrano added a comment - This issue was re-opened to make the use of the custom h:head renderer customizable via a context parameter.
          Hide
          Arturo Zambrano added a comment -

          Added "org.icefaces.HEAD_RENDERER" context parameter to specify which h:head renderer class to use.

          Show
          Arturo Zambrano added a comment - Added "org.icefaces.HEAD_RENDERER" context parameter to specify which h:head renderer class to use.
          Hide
          Arturo Zambrano added a comment -

          Removed "org.icefaces.HEAD_RENDERER" context parameter and instead of that the the already-existing "org.icefaces.ace.theme" parameter will be checked to see if its value is "none". If it is, the ACE h:head renderer won't be added to the renderkit, and thus, it won't be used to render h:head, leaving such responsibility to whatever other h:head renderer is added last (be it from a third-party JSF library or simply the default renderer from the JSF runtime in use, mojarra or myfaces).

          Show
          Arturo Zambrano added a comment - Removed "org.icefaces.HEAD_RENDERER" context parameter and instead of that the the already-existing "org.icefaces.ace.theme" parameter will be checked to see if its value is "none". If it is, the ACE h:head renderer won't be added to the renderkit, and thus, it won't be used to render h:head, leaving such responsibility to whatever other h:head renderer is added last (be it from a third-party JSF library or simply the default renderer from the JSF runtime in use, mojarra or myfaces).
          Hide
          Mark Earlam added a comment -

          Unless I am missing something the rime.css is meant to come before our custom stylesheets now but even in your sample application (3.0.1) it renders:

          <?xml version="1.0"?>
          <!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"><head>
          <link href="/showcase/javax.faces.resource/themes/sam/theme.css.jsf?ln=icefaces.ace" rel="stylesheet" type="text/css" />
          <link href="/showcase/javax.faces.resource/demo_template.css.jsf?ln=css" rel="stylesheet" type="text/css" />
          <link href="/showcase/javax.faces.resource/override_styles.css.jsf?ln=css" rel="stylesheet" type="text/css" />
          <link href="/showcase/javax.faces.resource/showcase_styles.css.jsf?ln=css" rel="stylesheet" type="text/css" />
          <link href="/showcase/javax.faces.resource/util/combined.css.jsf?ln=icefaces.ace" rel="stylesheet" type="text/css" />
          <script src="/showcase/javax.faces.resource/util/ace-jquery.js.jsf?ln=icefaces.ace" type="text/javascript"></script>
          <script src="/showcase/javax.faces.resource/util/ace-components.js.jsf?ln=icefaces.ace" type="text/javascript"></script>
          <script src="/showcase/javax.faces.resource/util/ace-menu.js.jsf?ln=icefaces.ace" type="text/javascript"></script>
          <script src="/showcase/javax.faces.resource/util/ace-yui.js.jsf?ln=icefaces.ace" type="text/javascript"></script>
          <script src="/showcase/javax.faces.resource/jsf.js.jsf?ln=javax.faces&amp;v=1002437518" type="text/javascript"></script>
          <script src="/showcase/javax.faces.resource/icepush.js.jsf?v=1002437518" type="text/javascript"></script>
          <script src="/showcase/javax.faces.resource/bridge.js.jsf?v=1002437518" type="text/javascript"></script>
          <script src="/showcase/javax.faces.resource/compat.js.jsf" type="text/javascript"></script>
          <script src="/showcase/javax.faces.resource/icefaces-compat.js.jsf" type="text/javascript"></script>
                  <title id="title">ICEfaces Showcase</title>
                  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><link href="./xmlhttp/css/rime/rime.css" rel="stylesheet" type="text/css" /></head><body class="suite ice-skin-rime">
                      <div id="header">
                  <div id="headerCenter">
                      <div id="headerLogo"><img alt="ICEfaces Logo" src="/showcase/resources/css/images/topBannerImages/title.png" />
                      </div>
                      <div id="headerTabs"><table class="linkTableStyle" id="suiteLinks">
          <tbody>
          <tr>
          <td><span class="linksHolder" id="_t16"><a href="/showcase/showcase.jsf?grp=compatMenu" id="iceSuiteLink" name="iceSuiteLink"><img alt="ICE Components Showcase" class="suiteLinkImageStyle" src="/showcase/resources/css/images/topBannerImages/ice-on.png" title="ICE Components Showcase" /></a><a href="/showcase/showcase.jsf?grp=aceMenu" id="aceSuiteLink" name="aceSuiteLink"><img alt="ACE Components Showcase" class="suiteLinkImageStyle" src="/showcase/resources/css/images/topBannerImages/ace-off.png" title="ACE Components Showcase" /></a></span></td>
          </tr>
          </tbody>
          </table>
          

          The only way we can make this work is to use <ice:outputStyle> which is throwing errors on restoring state so is also useless.

          Is the above expected behaviour and if so how do I get my custom stylesheets below rime.css so they override the styles?

          Show
          Mark Earlam added a comment - Unless I am missing something the rime.css is meant to come before our custom stylesheets now but even in your sample application (3.0.1) it renders: <?xml version= "1.0" ?> <!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" ><head> <link href= "/showcase/javax.faces.resource/themes/sam/theme.css.jsf?ln=icefaces.ace" rel= "stylesheet" type= "text/css" /> <link href= "/showcase/javax.faces.resource/demo_template.css.jsf?ln=css" rel= "stylesheet" type= "text/css" /> <link href= "/showcase/javax.faces.resource/override_styles.css.jsf?ln=css" rel= "stylesheet" type= "text/css" /> <link href= "/showcase/javax.faces.resource/showcase_styles.css.jsf?ln=css" rel= "stylesheet" type= "text/css" /> <link href= "/showcase/javax.faces.resource/util/combined.css.jsf?ln=icefaces.ace" rel= "stylesheet" type= "text/css" /> <script src= "/showcase/javax.faces.resource/util/ace-jquery.js.jsf?ln=icefaces.ace" type= "text/javascript" ></script> <script src= "/showcase/javax.faces.resource/util/ace-components.js.jsf?ln=icefaces.ace" type= "text/javascript" ></script> <script src= "/showcase/javax.faces.resource/util/ace-menu.js.jsf?ln=icefaces.ace" type= "text/javascript" ></script> <script src= "/showcase/javax.faces.resource/util/ace-yui.js.jsf?ln=icefaces.ace" type= "text/javascript" ></script> <script src= "/showcase/javax.faces.resource/jsf.js.jsf?ln=javax.faces&amp;v=1002437518" type= "text/javascript" ></script> <script src= "/showcase/javax.faces.resource/icepush.js.jsf?v=1002437518" type= "text/javascript" ></script> <script src= "/showcase/javax.faces.resource/bridge.js.jsf?v=1002437518" type= "text/javascript" ></script> <script src= "/showcase/javax.faces.resource/compat.js.jsf" type= "text/javascript" ></script> <script src= "/showcase/javax.faces.resource/icefaces-compat.js.jsf" type= "text/javascript" ></script> <title id= "title" >ICEfaces Showcase</title> <meta content= "text/html; charset=utf-8" http-equiv= "Content-Type" /><link href= "./xmlhttp/css/rime/rime.css" rel= "stylesheet" type= "text/css" /></head><body class= "suite ice-skin-rime" > <div id= "header" > <div id= "headerCenter" > <div id= "headerLogo" ><img alt= "ICEfaces Logo" src= "/showcase/resources/css/images/topBannerImages/title.png" /> </div> <div id= "headerTabs" ><table class= "linkTableStyle" id= "suiteLinks" > <tbody> <tr> <td><span class= "linksHolder" id= "_t16" ><a href= "/showcase/showcase.jsf?grp=compatMenu" id= "iceSuiteLink" name= "iceSuiteLink" ><img alt= "ICE Components Showcase" class= "suiteLinkImageStyle" src= "/showcase/resources/css/images/topBannerImages/ice-on.png" title= "ICE Components Showcase" /></a><a href= "/showcase/showcase.jsf?grp=aceMenu" id= "aceSuiteLink" name= "aceSuiteLink" ><img alt= "ACE Components Showcase" class= "suiteLinkImageStyle" src= "/showcase/resources/css/images/topBannerImages/ace-off.png" title= "ACE Components Showcase" /></a></span></td> </tr> </tbody> </table> The only way we can make this work is to use <ice:outputStyle> which is throwing errors on restoring state so is also useless. Is the above expected behaviour and if so how do I get my custom stylesheets below rime.css so they override the styles?
          Hide
          Arturo Zambrano added a comment -

          Try placing your style sheets (using h:outputStylesheet) in the body tag, instead of in h:head.

          Show
          Arturo Zambrano added a comment - Try placing your style sheets (using h:outputStylesheet) in the body tag, instead of in h:head.

            People

            • Assignee:
              Arturo Zambrano
              Reporter:
              Arturo Zambrano
            • Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: