[ICE-7789] Load ACE theme resources by means of a custom h:head renderer - ICEsoft JIRA Issue Tracker

Details

Type: Improvement
Status: Closed
Priority: 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

blocks

ICE-7761 Application specific CSS classes are loaded before ICEfaces CSS

Closed

Activity

Ascending order - Click to sort in descending order

Hide

Permalink

Arturo Zambrano added a comment - 21/Feb/12 11:35 AM

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

Show

Arturo Zambrano added a comment - 21/Feb/12 11:35 AM Fixed at revision 27947 in the trunk and at revision 27949 in the maintenance branch.

Hide

Permalink

Arturo Zambrano added a comment - 21/Feb/12 3:21 PM

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 - 21/Feb/12 3:21 PM This issue was re-opened to make the use of the custom h:head renderer customizable via a context parameter.

Hide

Permalink

Arturo Zambrano added a comment - 23/Feb/12 11:14 AM

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

Show

Arturo Zambrano added a comment - 23/Feb/12 11:14 AM Added "org.icefaces.HEAD_RENDERER" context parameter to specify which h:head renderer class to use.

Hide

Permalink

Arturo Zambrano added a comment - 23/Feb/12 2:54 PM

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 - 23/Feb/12 2:54 PM 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

Permalink

Mark Earlam added a comment - 16/May/12 2:00 AM

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 - 16/May/12 2:00 AM 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&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

Permalink

Arturo Zambrano added a comment - 25/May/12 4:21 PM

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

Show

Arturo Zambrano added a comment - 25/May/12 4:21 PM 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:

20/Feb/12 6:10 PM

Updated:

25/May/12 4:21 PM

Resolved:

23/Feb/12 11:14 AM