Multiple Forms (1)

This page demonstrates how to handle a page with more than one Form.
To help us determine which Form has been submitted we give each Form a component id.
In this example the ids are "searchcustomers" and "searchsuppliers".
We include the id in their event handler method names: onSuccessFromSearchCustomers() and onSuccessFromSearchSuppliers().

References: Form, TextField, Errors, How To Use Forms, Forms and Validation.

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>Multiple Forms (1)</h3>
    
    This page demonstrates how to handle a page with more than one Form.
    
    <div class="eg">
        <t:form class="form-inline" t:id="searchcustomers">
            <div class="form-group">
                <t:label for="customerName"/> 
                <t:textfield t:id="customerName"/>
                <t:submit value="Search Customers"/>
            </div>
        </t:form>
        
        <t:form class="form-inline" t:id="searchsuppliers">
            <div class="form-group">
                <t:label for="supplierName"/> 
                <t:textfield t:id="supplierName"/> 
                <t:submit value="Search Suppliers"/>
            </div>
        </t:form>
    </div>
    
    To help us determine which Form has been submitted we give each Form a component id.<br/>
    In this example the ids are "searchcustomers" and "searchsuppliers".<br/>
    We include the id in their event handler method names: onSuccessFromSearchCustomers() and onSuccessFromSearchSuppliers().<br/><br/>

    References: <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/corelib/components/Form.html">Form</a>,
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/corelib/components/TextField.html">TextField</a>,
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/corelib/components/Errors.html">Errors</a>,
    <a href="http://wiki.apache.org/tapestry/Tapestry5HowToUseForms">How To Use Forms</a>, 
    <a href="http://tapestry.apache.org/forms-and-validation.html">Forms and Validation</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/input/MultipleForms1.tml"/>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/input/MultipleForms1.java"/>
        <t:sourcecodetab src="/web/src/main/resources/META-INF/assets/css/examples/multipleforms1.css"/>
    </t:tabgroup>
</body>
</html>



package jumpstart.web.pages.examples.input;

import javax.validation.constraints.NotNull;
import javax.validation.constraints.Size;

import jumpstart.web.pages.examples.input.MultipleForms2.SearchType;

import org.apache.tapestry5.annotations.Import;
import org.apache.tapestry5.annotations.InjectPage;
import org.apache.tapestry5.annotations.Property;

@Import(stylesheet = "css/examples/multipleforms1.css")
public class MultipleForms1 {

    // Screen fields

    @Property
    @NotNull
    @Size(max = 10)
    private String customerName;

    @Property
    @NotNull
    @Size(max = 10)
    private String supplierName;

    // Other pages

    @InjectPage
    private MultipleForms2 page2;

    // The code

    void onPrepareFromSearchCustomers() {
        // Any setting up of editable objects or fields on this form should be done in here.
    }

    void onPrepareFromSearchSuppliers() {
        // Any setting up of editable objects or fields on this form should be done in here.
    }

    Object onSuccessFromSearchCustomers() {
        page2.set(SearchType.CUSTOMERS, customerName);
        return page2;
    }

    Object onSuccessFromSearchSuppliers() {
        page2.set(SearchType.SUPPLIERS, supplierName);
        return page2;
    }
}



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

.eg form {
                margin: -7px;
                border: 14px solid white;
                background-color: #eee;
                padding: 16px;
}

.eg input.form-control {
                width: auto;
}