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.
<?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>
<?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>
<?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>
<?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>
Posted November 14, 2013