Note this blog is obsolete, see https://www.manorrock.com/blog/ for the current blog In the previous blog entry a single resource library contract was applied. However did you know that you can stack them?   We are going to add the following 3 layout contracts, desktop, tablet and phone. The desktop contract <?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE html> <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:ui="http://java.sun.com/jsf/facelets"> <h:head> <title>Resource Library Contract</title> <h:outputStylesheet name="style.css"/> </h:head> <h:body> <h:form> <p> This is a desktop layout. </p> <ui:include src="/sharedlist.xhtml"/> </h:form> </h:body> </html> The tablet contract <?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE html> <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:ui="http://java.sun.com/jsf/facelets"> <h:head> <meta name="viewport" content="user-scalable=no, width=device-width"/> <title>Resource Library Contract</title> <h:outputStylesheet name="style.css"/> </h:head> <h:body> <h:form> <p> Tablet <ui:include src="/sharedlist.xhtml"/> </p> </h:form> </h:body> </html> The phone contract <?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE html> <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:ui="http://java.sun.com/jsf/facelets"> <h:head> <meta name="viewport" content="user-scalable=no, width=device-width"/> <title>Resource Library Contract</title> <h:outputStylesheet name="style.css"/> </h:head> <h:body> <h:form> <p> Phone </p> <ui:include src="/sharedlist.xhtml"/> </h:form> </h:body> </html> And the landing page <?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"> <h:head> <title>Style and Layout Resource Library Contract sample</title> </h:head> <h:body> <h1>Style and Layout Resource Library Contract sample</h1> <ul> <li><a href="#{facesContext.externalContext.requestContextPath}/faces/styleandlayout.xhtml?contract=desktop,blue">Blue and Desktop</a></li> <li><a href="#{facesContext.externalContext.requestContextPath}/faces/styleandlayout.xhtml?contract=phone,blue">Blue and Phone</a></li> <li><a href="#{facesContext.externalContext.requestContextPath}/faces/styleandlayout.xhtml?contract=tablet,blue">Blue and Tablet</a></li> <li><a href="#{facesContext.externalContext.requestContextPath}/faces/styleandlayout.xhtml?contract=desktop,red">Red and Desktop</a></li> <li><a href="#{facesContext.externalContext.requestContextPath}/faces/styleandlayout.xhtml?contract=phone,red">Red and Phone</a></li> <li><a href="#{facesContext.externalContext.requestContextPath}/faces/styleandlayout.xhtml?contract=tablet,red">Red and Tablet</a></li> </ul> </h:body> </html> Note the code for this sample is available as part of the Glassfish samples (see the subversion repository at https://svn.java.net/svn/glassfish-samples~svn/trunk/ws/javaee7/jsf/stylelayoutrlc/) And that is it. Enjoy!