
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- We need a doctype to allow us to use special characters like &nbsp; 
     We use a "strict" DTD to make IE follow the alignment rules. -->
     
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_4.xsd">
<body class="container">
    <h3>Switchable Stylesheets</h3>

    This page can switch between 2 different stylesheets: <em>css/examples/plain.css</em> and <em>css/switched.css</em>.
    
    <div class="eg">
        <t:form t:id="names" class="form-horizontal">
            <div class="form-group">
                <t:label for="firstName" class="col-sm-2"/>
                <div class="col-sm-4">
                    <t:textfield t:id="firstName"/>
                </div>
            </div>
            <div class="form-group">
                <t:label for="lastName" class="col-sm-2"/>
                <div class="col-sm-4">
                    <t:textfield t:id="lastName"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-4 col-sm-offset-2">
                    <t:submit value="Switch Style"/>
                </div>
            </div>
        </t:form>
    </div>
    
    References: 
    <a href="http://www.w3.org/Style/CSS/">Cascading Style Sheets</a>, 
    <a href="http://tapestry.apache.org/css.html">Tapestry CSS Support</a>, 
    <a href="http://tapestry.apache.org/assets.html">Assets</a>, 
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/services/javascript/JavaScriptSupport.html">JavaScriptSupport</a>.<br/><br/>
    
    <t:pagelink page="Index">Home</t:pagelink><br/><br/>
    
    <t:tabgroup>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/styling/SwitchableStylesheets.tml"/>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/styling/SwitchableStylesheets.java"/>
        <t:sourcecodetab src="/web/src/main/resources/META-INF/assets/css/examples/plain.css"/>
        <t:sourcecodetab src="/web/src/main/resources/META-INF/assets/css/examples/switched.css"/>
    </t:tabgroup>
</body>
</html>


package jumpstart.web.pages.examples.styling;

import org.apache.tapestry5.Asset;
import org.apache.tapestry5.PersistenceConstants;
import org.apache.tapestry5.annotations.Path;
import org.apache.tapestry5.annotations.Persist;
import org.apache.tapestry5.annotations.Property;
import org.apache.tapestry5.ioc.annotations.Inject;
import org.apache.tapestry5.services.javascript.JavaScriptSupport;

public class SwitchableStylesheets {

    // The activation context

    private int styleNum;

    // Screen fields

    @Property
    @Persist(PersistenceConstants.FLASH)
    private String firstName;

    @Property
    @Persist(PersistenceConstants.FLASH)
    private String lastName;

    // Generally useful bits and pieces

    @Inject
    @Path("css/examples/plain.css")
    private Asset stylesheet0;

    @Inject
    @Path("css/examples/switched.css")
    private Asset stylesheet1;

    @Inject
    private JavaScriptSupport javaScriptSupport;

    // The code

    void onActivate(int styleNum) {
        this.styleNum = styleNum;
    }

    int onPassivate() {
        return styleNum;
    }
    
    void setupRender() {
        javaScriptSupport.importStylesheet(getStylesheet());
    }

    void onSuccess() {
        styleNum = (styleNum + 1) % 2;
    }

    public Asset getStylesheet() {
        switch (styleNum) {
        case 0:
            return stylesheet0;
        case 1:
            return stylesheet1;
        default:
            return stylesheet0;
        }
    }
}


.eg {
                margin: 20px 0;
                padding: 14px;
                border: 1px solid #ddd;
                border-radius: 6px;
                -webkit-border-radius: 6px;
                -mox-border-radius: 6px;
}


body {
                font-family: Courier, serif;
                font-size: 13px;
                font-weight: normal;
                color: maroon;
}

.eg {
                margin: 14px 0;
                padding: 14px;
                color: #999;
                background: #eee;
                border: 1px solid #ddd;
                border-radius: 4px;
                -webkit-border-radius: 4px;
                -mox-border-radius: 4px;
}

.eg form {
                color: #999;
}

.eg input {
                color: #333;
}

a {
                color: blue
}

a:visited {
                color: blue
}