ICEfaces
  1. ICEfaces
  2. ICE-9225

Use Resource Ordering to force all CSS resources to load before JavaScript in the Showcase sample app.

          Details

          • Type: Improvement Improvement
          • Status: Closed
          • Priority: Major Major
          • Resolution: Fixed
          • Affects Version/s: None
          • Fix Version/s: EE-3.3.0.GA, 4.0.BETA, 4.0
          • Component/s: Sample Apps
          • Labels:
            None
          • Environment:
            ICEfaces 3.x, showcase sample application.
          • Assignee Priority:
            P2
          • Affects:
            Sample App./Tutorial

            Description

            As per the general best-practice of loading all CSS prior to any JavaScript (https://developers.google.com/speed/articles/include-scripts-properly), we should ensure that the ICEfaces Showcase sample application follows the recommendations.

            We can the use of the ICEfaces Resource Ordering (resource-dependency.xml) technique to demonstrate a way to ensure that all application CSS resources are loaded in the browser prior to any JavaScript being loaded.

              Issue Links

              blocks

              Bug - A problem which impairs or prevents the functions of the product. ICE-9187 showcase - ice:outputProgress Style demo - color styling not working

              • Minor - Minor loss of function, or other problem where easy workaround is present.
              • Closed

                Activity

                Ascending order - Click to sort in descending order
                Ken Fyten created issue -
                Ken Fyten made changes -
                Field Original Value New Value
                Assignee Ken Fyten [ ken.fyten ]
                Fix Version/s 3.4 [ 10770 ]
                Affects Sample App./Tutorial [ 10001 ]
                Assignee Priority P1 [ 10010 ]
                Repository Revision Date User Message
                ICEsoft Public SVN Repository #34579 Mon Apr 29 11:53:42 MDT 2013 ken.fyten ICE-9225 - Modify showcase resource-dependency.xml to attempt to force all CSS to load prior to any JavaScript.
                Files Changed
                Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/resources/META-INF/resource-dependency.xml
                Hide
                Permalink
                Ken Fyten added a comment -

                Initial attempt to force all CSS to load prior to JavaScript committed via showcase resource-dependency.xml changes.

                svn commit -m "ICE-9225 - Modify showcase resource-dependency.xml to attempt to force all CSS to load prior to any JavaScript."
                Sending.../icefaces/samples/showcase/showcase/src/main/resources/META-INF/resource-dependency.xml
                Committed revision 34579.

                Show
                Ken Fyten added a comment - Initial attempt to force all CSS to load prior to JavaScript committed via showcase resource-dependency.xml changes. svn commit -m " ICE-9225 - Modify showcase resource-dependency.xml to attempt to force all CSS to load prior to any JavaScript." Sending.../icefaces/samples/showcase/showcase/src/main/resources/META-INF/resource-dependency.xml Committed revision 34579.
                Hide
                Permalink
                Ken Fyten added a comment -

                With this commit, there remains one issue when coalesceResources= false:

                The "./xmlhttp/css/rime/rime.css" resource doesn't respect the ordering, and is loaded after all the JavaScript.

                See the None_Coalesced_Rime-css_Issue.png.

                Show
                Ken Fyten added a comment - With this commit, there remains one issue when coalesceResources= false: The "./xmlhttp/css/rime/rime.css" resource doesn't respect the ordering, and is loaded after all the JavaScript. See the None_Coalesced_Rime-css_Issue.png.
                Ken Fyten made changes -
                Attachment None_Coalesced_Rime-css_Issue.png [ 15845 ]
                Hide
                Permalink
                Ken Fyten added a comment -

                Additionally, when coalesceResources=true, the Rime.css issue still exists, as well, there is a new issue with the jsf.js file loading first before the css (that doesn't occur when coalesceResources=false).

                See the attached Coalesced_jsf-js_Rime-css_issues.png

                Show
                Ken Fyten added a comment - Additionally, when coalesceResources=true, the Rime.css issue still exists, as well, there is a new issue with the jsf.js file loading first before the css (that doesn't occur when coalesceResources=false). See the attached Coalesced_jsf-js_Rime-css_issues.png
                Ken Fyten made changes -
                Attachment Coalesced_jsf-js_Rime-css_issues.png [ 15846 ]
                Hide
                Permalink
                Ken Fyten added a comment -

                To try to resolve the jsf.js coming first issue when coalesceResources=true I modified the core resource-dependency.xml file as shown in the attached resource-dependency-xml-edits.png, but it made no difference.

                Show
                Ken Fyten added a comment - To try to resolve the jsf.js coming first issue when coalesceResources=true I modified the core resource-dependency.xml file as shown in the attached resource-dependency-xml-edits.png, but it made no difference.
                Ken Fyten made changes -
                Attachment resource-dependency-xml-edits.png [ 15847 ]
                Hide
                Permalink
                Ken Fyten added a comment -

                Assign to Mircea for follow-up.

                Show
                Ken Fyten added a comment - Assign to Mircea for follow-up.
                Ken Fyten made changes -
                Assignee Ken Fyten [ ken.fyten ] Mircea Toma [ mircea.toma ]
                Assignee Priority P1 [ 10010 ] P2 [ 10011 ]
                Ken Fyten made changes -
                Link This issue blocks ICE-9187 [ ICE-9187 ]
                Hide
                Permalink
                Ken Fyten added a comment -

                Note that if it becomes necessary to make the compat themes (such as rime.css) available via the JSF2 resource mechanism, there is an existing JIRA for that: ICE-6581.

                Show
                Ken Fyten added a comment - Note that if it becomes necessary to make the compat themes (such as rime.css) available via the JSF2 resource mechanism, there is an existing JIRA for that: ICE-6581 .
                Repository Revision Date User Message
                ICEsoft Public SVN Repository #34614 Tue Apr 30 14:05:00 MDT 2013 mircea.toma ICE-9225, ICE-9187 Moved rime, royale and xp css files under META-INF/resources directory where they can be resolved by the JSF resource serving mechanism. Modified image relative paths in the CSS files so they work properly, including when the CSS coalesced.
                Files Changed
                Commit graph ADD /icefaces3/trunk/icefaces/compat/core/src/main/resources/META-INF/resources/ice.compat/rime/rime.css
                Commit graph DEL /icefaces3/trunk/icefaces/compat/core/src/main/resources/css/com/icesoft/faces/resources/css/rime/rime.css
                Commit graph ADD /icefaces3/trunk/icefaces/compat/core/src/main/resources/META-INF/resources/ice.compat/rime-accessible
                Commit graph DEL /icefaces3/trunk/icefaces/compat/core/src/main/resources/css/com/icesoft/faces/resources/css/xp-accessible/xp.css
                Commit graph ADD /icefaces3/trunk/icefaces/compat/core/src/main/resources/META-INF/resources/ice.compat/rime
                Commit graph DEL /icefaces3/trunk/icefaces/compat/core/src/main/resources/css/com/icesoft/faces/resources/css/xp-accessible/xp-portlet.css
                Commit graph ADD /icefaces3/trunk/icefaces/compat/core/src/main/resources/META-INF/resources/ice.compat/xp/xp.css
                Commit graph ADD /icefaces3/trunk/icefaces/compat/core/src/main/resources/META-INF/resources/ice.compat/royale-accessible/royale.css
                Commit graph DEL /icefaces3/trunk/icefaces/compat/core/src/main/resources/css/com/icesoft/faces/resources/css/rime/rime-portlet.css
                Commit graph DEL /icefaces3/trunk/icefaces/compat/core/src/main/resources/css/com/icesoft/faces/resources/css/rime-accessible/rime.css
                Commit graph ADD /icefaces3/trunk/icefaces/compat/core/src/main/resources/META-INF/resources/ice.compat/royale
                Commit graph ADD /icefaces3/trunk/icefaces/compat/core/src/main/resources/META-INF/resources/ice.compat/royale/royale.css
                Commit graph ADD /icefaces3/trunk/icefaces/compat/core/src/main/resources/META-INF/resources/ice.compat/rime-accessible/rime.css
                Commit graph DEL /icefaces3/trunk/icefaces/compat/core/src/main/resources/css/com/icesoft/faces/resources/css/royale/royale.css
                Commit graph ADD /icefaces3/trunk/icefaces/compat/core/src/main/resources/META-INF/resources/ice.compat/rime-accessible/rime-portlet.css
                Commit graph ADD /icefaces3/trunk/icefaces/compat/core/src/main/resources/META-INF/resources/ice.compat/xp-accessible
                Commit graph ADD /icefaces3/trunk/icefaces/compat/core/src/main/resources/META-INF/resources/ice.compat/rime/rime-portlet.css
                Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/resources/META-INF/resource-dependency.xml
                Commit graph DEL /icefaces3/trunk/icefaces/compat/core/src/main/resources/css/com/icesoft/faces/resources/css/xp/xp.css
                Commit graph DEL /icefaces3/trunk/icefaces/compat/core/src/main/resources/css/com/icesoft/faces/resources/css/xp/xp-portlet.css
                Commit graph ADD /icefaces3/trunk/icefaces/compat/core/src/main/resources/META-INF/resources/ice.compat/xp-accessible/xp.css
                Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/templates/main-template.xhtml
                Commit graph ADD /icefaces3/trunk/icefaces/compat/core/src/main/resources/META-INF/resources/ice.compat/xp
                Commit graph ADD /icefaces3/trunk/icefaces/compat/core/src/main/resources/META-INF/resources/ice.compat/royale-accessible
                Commit graph ADD /icefaces3/trunk/icefaces/compat/core/src/main/resources/META-INF/resources/ice.compat/xp/xp-portlet.css
                Commit graph DEL /icefaces3/trunk/icefaces/compat/core/src/main/resources/css/com/icesoft/faces/resources/css/rime-accessible/rime-portlet.css
                Commit graph ADD /icefaces3/trunk/icefaces/compat/core/src/main/resources/META-INF/resources/ice.compat
                Commit graph ADD /icefaces3/trunk/icefaces/compat/core/src/main/resources/META-INF/resources/ice.compat/xp-accessible/xp-portlet.css
                Commit graph DEL /icefaces3/trunk/icefaces/compat/core/src/main/resources/css/com/icesoft/faces/resources/css/royale-accessible/royale.css
                Hide
                Permalink
                Mircea Toma added a comment -

                The fix for ICE-9187 has solved this problem as well.

                Show
                Mircea Toma added a comment - The fix for ICE-9187 has solved this problem as well.
                Mircea Toma made changes -
                Status Open [ 1 ] Resolved [ 5 ]
                Resolution Fixed [ 1 ]
                Hide
                Permalink
                Mircea Toma added a comment -

                Make sure rime.css and ./resources/css/override_header.css are loaded before the Javascript resources.

                Show
                Mircea Toma added a comment - Make sure rime.css and ./resources/css/override_header.css are loaded before the Javascript resources.
                Mircea Toma made changes -
                Resolution Fixed [ 1 ]
                Status Resolved [ 5 ] Reopened [ 4 ]
                Repository Revision Date User Message
                ICEsoft Public SVN Repository #34641 Wed May 01 14:45:14 MDT 2013 mircea.toma ICE-9225 Modified showcase app to serve its CSS resources through JSF resource mechanism. Modified resource dendencies that *all* CSS is loaded before any JS resource.
                Files Changed
                Commit graph DEL /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/css/override_styles.css
                Commit graph ADD /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/resources/META-INF/resources/ice.samples.showcase/showcase_styles.css
                Commit graph ADD /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/resources/META-INF/resources/ice.samples.showcase/override_header.css
                Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/resources/META-INF/resource-dependency.xml
                Commit graph DEL /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/css/showcase_styles.css
                Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/templates/main-template.xhtml
                Commit graph ADD /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/resources/META-INF/resources/ice.samples.showcase
                Commit graph DEL /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/css/override_header.css
                Commit graph ADD /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/resources/META-INF/resources
                Commit graph DEL /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/css/demo_template.css
                Commit graph ADD /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/resources/META-INF/resources/ice.samples.showcase/demo_template.css
                Commit graph ADD /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/resources/META-INF/resources/ice.samples.showcase/override_styles.css
                Hide
                Permalink
                Mircea Toma added a comment -

                Modified showcase app to serve its CSS resources through JSF resource mechanism. Modified resource dendencies that all CSS is loaded before any JS resource.

                Show
                Mircea Toma added a comment - Modified showcase app to serve its CSS resources through JSF resource mechanism. Modified resource dendencies that all CSS is loaded before any JS resource.
                Mircea Toma made changes -
                Status Reopened [ 4 ] Resolved [ 5 ]
                Resolution Fixed [ 1 ]
                Ken Fyten made changes -
                Fix Version/s EE-3.3.0.GA [ 10572 ]
                Repository Revision Date User Message
                ICEsoft Public SVN Repository #34979 Mon May 13 09:53:59 MDT 2013 deryk.sinotte ICE-9225: adjust location of application-specific CSS resources so they end up in the correct location
                Files Changed
                Commit graph ADD /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/ice.samples.showcase
                Commit graph DEL /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/resources/META-INF/resources/ice.samples.showcase
                Repository Revision Date User Message
                ICEsoft Public SVN Repository #38613 Thu Oct 17 07:08:42 MDT 2013 mircea.toma ICE-9225 Load the ordered CSS resources first, then the ordered JS resources to help improving the page load time.
                Files Changed
                Commit graph MODIFY /icefaces3/trunk/icefaces/core/src/main/java/org/icefaces/impl/event/ResourceOrdering.java
                Ken Fyten made changes -
                Fix Version/s 4.0 [ 11382 ]
                Ken Fyten made changes -
                Status Resolved [ 5 ] Closed [ 6 ]

                  People

                  • Assignee:
                    Mircea Toma
                    Reporter:
                    Ken Fyten
                  • Votes:
                    0 Vote for this issue
                    Watchers:
                    2 Start watching this issue

                    Dates

                    • Created:
                      Updated:
                      Resolved: