Styling Links and Submits (1)

Some techniques for styling PageLink, EventLink, and Submit.
Page Links

Next Next Next
Event Links

Next Next Next
Submit

 
             
References: PageLink, EventLink, ActionLink, Submit, Path, Asset.

Home


<!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>Styling Links and Submits (1)</h3>
    
    Some techniques for styling PageLink, EventLink, and Submit.<br/>

    <div class="eg">
        <strong>Page Links</strong><br/><br/> 
        
        <t:pagelink t:page="examples/styling/LinksAndSubmits2" t:context="literal:PageLink" href="#">
            Next
        </t:pagelink>
        <t:pagelink t:page="examples/styling/LinksAndSubmits2" t:context="literal:PageLink with class btn" 
            class="btn btn-default" href="#">
            Next
        </t:pagelink>
        <t:pagelink t:page="examples/styling/LinksAndSubmits2" t:context="literal:PageLink with img"
            class="imagelink" href="#"> 
            <img src="${nextImageAsset}" alt="Next" />
        </t:pagelink>
    </div>

    <div class="eg">
        <strong>Event Links</strong><br/><br/>
        
        <t:eventlink t:event="NextPage" t:context="literal:EventLink" href="#">
            Next
        </t:eventlink>
        <t:eventlink t:event="NextPage" t:context="literal:EventLink with class btn" class="btn btn-default">
            Next
        </t:eventlink>
        <t:eventlink t:event="NextPage" t:context="literal:EventLink with img" class="imagelink">
            <img src="${nextImageAsset}" alt="Next"/>
        </t:eventlink>
    </div>

    <div class="eg">
        <strong>Submit</strong><br/><br/>
        
        <t:form t:id="inputs">
            <div class="form-group">
                <t:label for="firstName"/>
                <t:textfield t:id="firstName" t:validate="required"/>&nbsp;
            </div>
            <div class="form-group">
                <input type="submit" value="Display"/>&nbsp;
                <t:submit value="Display"/>&nbsp;
                <t:submit value="Display" class=""/>&nbsp;
                <t:submit value="Display" class="btn btn-default"/>&nbsp;
                <input type="image" src="${nextImageAsset}" style="vertical-align: middle;"/>
                <t:submit value=" " class="nextimage"/>&nbsp;
                <t:submit image="asset:images/next-button-48.png"/>&nbsp;
                <t:submit image="asset:images/next-button-48.png" class="" style="vertical-align: middle;"/>&nbsp;
            </div>
        </t:form>
    </div>
    
    References: 
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/corelib/components/PageLink.html">PageLink</a>, 
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/corelib/components/EventLink.html">EventLink</a>, 
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/corelib/components/ActionLink.html">ActionLink</a>, 
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/corelib/components/Submit.html">Submit</a>, 
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/annotations/Path.html">Path</a>,  
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/Asset.html">Asset</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/StylingLinksAndSubmits1.tml"/>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/styling/StylingLinksAndSubmits1.java"/>
        <t:sourcecodetab src="/web/src/main/resources/META-INF/assets/css/examples/links_and_submits.css"/>
    </t:tabgroup>
</body>
</html>



package jumpstart.web.pages.examples.styling;

import org.apache.tapestry5.Asset;
import org.apache.tapestry5.annotations.Import;
import org.apache.tapestry5.annotations.InjectPage;
import org.apache.tapestry5.annotations.Path;
import org.apache.tapestry5.annotations.Property;
import org.apache.tapestry5.ioc.annotations.Inject;

@Import(stylesheet="css/examples/links_and_submits.css")
public class StylingLinksAndSubmits1 {

    // Screen fields

    @Property
    private String firstName;
    
    @Inject
    @Path("images/next-button-48.png")
    @Property
    private Asset nextImageAsset;

    // Other pages
    
    @InjectPage
    private StylingLinksAndSubmits2 page2;

    // The code
    
    Object onNextPage(String context) {
        page2.set(context);
        return page2;
    }
    
    Object onSuccess() {
        page2.set(firstName);
        return page2;
    }

}



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

.buttonlink     { text-decoration: none }
.imagelink      { text-decoration: none }
.nextimage      { background-image: url(../../images/next-button-48.png); background-color: transparent; width: 52px; height: 52px; }