Clever Geek Handbook

Web filter breaks PrimeFaces mobile view

In my JSF2.1 web application using PrimeFaces 3.4.2, I added a new web page containing only one view with renderKitId="PRIMEFACES_MOBILE"

(PFM 0.9.3). The idea is that the filter redirects requests coming from mobile devices to this page. Unfortunately, this filter completely breaks the css of the mobile page on some mobile devices (yes, not all devices are affected!). When the filter exists, either forwarded calls or direct calls will be corrupted on the affected devices; when the filter is off, everything works fine.

Here's the web filter:

public void doFilter(ServletRequest request, ServletResponse response,
        FilterChain chain)
        throws IOException, ServletException {

    HttpServletRequest req = (HttpServletRequest) request;
    HttpServletResponse resp = (HttpServletResponse) response;

    boolean isMobile = isMobileDevice(req.getHeader("user-agent"));  // utility function

    if (!req.getRequestURI().contains("/mobile/") && isMobile) {
        resp.sendRedirect(req.getContextPath() + "/faces/mobile/index.xhtml");
    } else {
        chain.doFilter(request, response);
    }    
}

The filter has no mapping in web.xml. There is only annotation @WebFilter("/*")

. When the path inside the annotation is fake, everything works well.

The xhtml page ... is pretty simple:

<?xml version='1.0' encoding='UTF-8' ?>
<!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:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pm="http://primefaces.org/mobile" >
    <h:head>
    </h:head>
    <h:body>
        <f:view renderKitId="PRIMEFACES_MOBILE">
            <pm:page title="Hello World">
                <pm:view id="main">
                    <pm:header title="Header" />
                </pm:view>
            </pm:page>        
        </f:view>    
    </h:body>
</html>

More information on affected devices here . I don't know how to debug this. I looked at the generated html using Firebug but couldn't find any difference between the working one and the other.

+3


source to share


1 answer


You have to let the filter skip requests for JSF resources in CSS / JS / image files.



if (req.getRequestURI().startsWith(req.getContextPath() + ResourceHandler.RESOURCE_IDENTIFIER)) {
    chain.doFilter(request, response);
    return;
}
+10


source






More articles:


All Articles