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