Details
-
Type: Improvement
-
Status: Closed
-
Priority: Major
-
Resolution: Fixed
-
Affects Version/s: 2.0-Beta1
-
Component/s: Sample Apps
-
Labels:None
-
Environment:ICEfaces
Description
Testing for this should include:
/faces/*
*.faces
*.jsf
Activity
- All
- Comments
- History
- Activity
- Remote Attachments
- Subversion
I retested the updated version of Auction and the mappings all seem to work fine. The problem with the static resources being served has mostly been fixed by improvements to how the application loads them. There are still a few resources (mainly that are loaded from within the .css files) that cause the warning to be displayed because they are treated as FacesServlet requests.
[#|2010-09-29T14:55:00.607-0700|WARNING|glassfishv3.0|org.icefaces.impl.event.BridgeSetup|_ThreadID=26;_ThreadName=Thread-1;|ICEfaces configured for view /resources/css/images/banner_bg.gif but h:head and h:body components are required|#]
[#|2010-09-29T14:55:00.639-0700|WARNING|glassfishv3.0|org.icefaces.impl.event.BridgeSetup|_ThreadID=35;_ThreadName=Thread-1;|ICEfaces configured for view /resources/css/images/bgslice_footer.gif but h:head and h:body components are required|#]
[#|2010-09-29T14:55:00.826-0700|WARNING|glassfishv3.0|org.icefaces.impl.event.BridgeSetup|_ThreadID=26;_ThreadName=Thread-1;|ICEfaces configured for view /resources/css/images/favicon.ico but h:head and h:body components are required|#]
This isn't strictly a failure, just a by-product of using the /faces/ mapping and not being able to flexibly deal with that in the .css files.
I talked to Patrick, who's currently working on improving the Auction example to better illustrate best practices - including serving up resources.
I was curious about the amount of processing involved with the various images and css files when they include /faces/ in the path and are therefore handled through the FacesServlet. So I created a servlet filter that was mapped only to .gif, .jpg, and .css requests and added up the cumulative time for loading these resources. Basically it measured the time that expires for each of those requests that we are interested in and keeps a running total:
long startRequest = System.currentTimeMillis();
chain.doFilter(req,res);
long expired = System.currentTimeMillis() - startRequest;
cumulativeProcessingTime += expired;
I then ran 100 wget requests against the page to get an idea of how much time was being spent serving up these resources using the page as it's currently coded using the /faces/* mapping:
for index in
{00..99}; do wget -r http://localhost:8080/auction/faces/auction.xhtml; done
I ran it 3 times, then I then "fixed" most of the resources on the page and ran the same test. The results:
– NOT FIXED –
3 separate runs of 100 wget calls against the page with the resources not fixed. The last logging call in each case is presented to show the cumulative time spent serving those resources:
DebugFilter.doFilter:
request : /auction/faces/images/header_arrow_down.gif
expired : 4
cumulative: 6726
DebugFilter.doFilter:
request : /auction/faces/images/header_arrow_down.gif
expired : 2
cumulative: 7106
DebugFilter.doFilter:
request : /auction/faces/images/header_arrow_down.gif
expired : 2
cumulative: 6487
– FIXED –
3 separate runs of 100 wget calls against the page with the resources fixed so that they are not served using the /faces/ mapping. The last logging call in each case is presented to show the cumulative time spent serving those resources:
DebugFilter.doFilter:
request : /auction/images/header_arrow_down.gif
expired : 0
cumulative: 1155
DebugFilter.doFilter:
request : /auction/images/header_arrow_down.gif
expired : 1
cumulative: 1078
DebugFilter.doFilter:
request : /auction/images/header_arrow_down.gif
expired : 0
cumulative: 847
Predictably, there's a fairly significant overhead involved so we should ensure that we do what we can from both the application development side and the component/framework side to avoid this.
So I think there is a combination of things here:
1) From an application perspective, we should probably use some "best practice" strategies for locating images. Perhaps not putting the path information into the actual bean and just use the file name. Leaving the pathing information in the markup makes it easier to adjust the path, move the resources, etc. We can get rid of most of the warnings by massaging the markup in the same types of ways that Ted has noted above (using h:graphicImage with absolute paths, pre-pending #
{request.contextPath}to the front, etc.).
2) When you use a path mapping like /faces/*, there should be a way to handle resources in a JSF-compliant way that include the faces mapping.
Needs further discussion on the proper approach still.
Predictably, this occurs because, with relative link paths, /faces/ is included as part of the path and then each request is treated as a Faces request rather than a static resource.
Auction works fine with all 3 different mappings. The only issue that I can see is that with the /faces/* mapping, each resource request is resulting in the following warning:
[#|2010-09-23T11:11:32.821-0700|WARNING|glassfishv3.0|org.icefaces.impl.event.BridgeSetup|_ThreadID=38;_ThreadName=Thread-1;|ICEfaces configured for view /images/chat-icon.gif but h:head and h:body components are required|#]
[#|2010-09-23T11:11:32.823-0700|WARNING|glassfishv3.0|org.icefaces.impl.event.BridgeSetup|_ThreadID=35;_ThreadName=Thread-1;|ICEfaces configured for view /css/images/footer_faces.jpg but h:head and h:body components are required|#]
...
Assigning to Deryk for dispatch.
Copied from ICE-5366:
auction verified to be functional under /faces/* mapping.
application must be visited with the following URL:
http://localhost:8080/auction/faces/auction.xhtml
Application is not designed to handle servlet mapping changes, but the following page changes are an improvement:
(many images are still broken)
Index: samples/auction/src/main/webapp/auction.xhtml
===================================================================
— samples/auction/src/main/webapp/auction.xhtml (revision 22160)
+++ samples/auction/src/main/webapp/auction.xhtml (working copy)
@@ -27,8 +27,8 @@
<h:head><title>Auction Monitor - JSF 2.0 Direct-to-DOM (D2D) Version</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<h:outputScript name="jsf.js" library="javax.faces"/>
- <link href="./resources/demo_template.css" rel="stylesheet" type="text/css"/>
- <link href="./resources/auction_styles.css" rel="stylesheet" type="text/css"/>
+ <link href="# {facesContext.externalContext.requestContextPath}/resources/demo_template.css" rel="stylesheet" type="text/css"/>
+ <link href="#{facesContext.externalContext.requestContextPath}/resources/auction_styles.css" rel="stylesheet" type="text/css"/>
<!-<link href="/auction/javax.faces.resource/demo_template.css.jsf" rel="stylesheet" type="text/css" />->
<!-<link href="/auction/javax.faces.resource/auction_styles.css.jsf" rel="stylesheet" type="text/css" />->
<!--Appear to alternately reverse order between requests
@@ -51,12 +51,12 @@
</script>
<div>
<div class="header_right"> - <img src="./css/images/banner_logo.jpg" alt="ICEfaces" width="267"
+ <h:graphicImage value="/css/images/banner_logo.jpg" alt="ICEfaces" width="267"
height="159"/>
</div>
<div class="header_container">
<div class="header_left"> - <img src="./css/images/banner_hdr_auction.jpg"
+ <h:graphicImage value="/css/images/banner_hdr_auction.jpg"
width="463" height="100"
title="Component Suite Showcase"
alt="Component Suite Showcase"/>
@@ -221,7 +221,7 @@
<div align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr style="background-image: url(images/button_bkgnd2.gif); background-position:top; background-repeat:repeat-x;"> - <td width="13%" valign="top"><img src="images/chat-icon.gif"
+ <td width="13%" valign="top"><h:graphicImage value="/images/chat-icon.gif"
width="49" height="35"/>
</td>
<h:panelGroup rendered="# {UserBean.conversationStatus}">
@@ -374,7 +374,7 @@
</div>
</div>
- <div class="footer_right"><img src="./css/images/footer_faces.jpg"
+ <div class="footer_right"><h:graphicImage value="/css/images/footer_faces.jpg"
alt="ICEfaces" width="121"
height="95" border="0"/></div>
</div>
@@ -382,8 +382,8 @@
<!-- PRELOAD TAB IMAGES -->
<div style="display: none">
- <img src="./images/button_bid_accept.gif"/>
- <img src="./images/button_bid_decline.gif"/>
+ <h:graphicImage value="/images/button_bid_accept.gif"/>
+ <h:graphicImage value="/images/button_bid_decline.gif"/>
</div>
</h:body>
</html>
So it's probably recommended not to use /faces/ style path mapping for the FacesServlet if not strictly necessary. It will impact the performance as certain static resources will be routed to the FacesServlet (which is inefficient) and the warning messages will be issued to the logs because each request is being examined by ICEfaces as a JSF request.