Skip to main content

JSF Tip #39 - Style and layout resource library contracts

Posted by mriem on November 14, 2013 at 1:09 PM PST

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!

Related Topics >>