AJAX Select (1)

This page demonstrates AJAX-enabling the Select component.
:
:
Keywords: (optional)
References: Ajax and Zones, Zone, Select, TextField, Request, ComponentResources, @Inject, @InjectComponent.

Home

AjaxSelect1.tml


<!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_3.xsd">
<head>
    <link rel="stylesheet" type="text/css" href="${context:css/examples/ajax_select.css}"/>
</head>
<body>
    <h1>AJAX Select (1)</h1>
    
    <noscript class="js-required">
        ${message:javascript_required}
    </noscript>     

    This page demonstrates AJAX-enabling the Select component.

    <div class="eg">
        <form t:type="form" t:id="searchCriteria">
    
            <t:label for="carMake"/>:
            <select t:type="select" t:id="carMake" t:model="carMakes" t:zone="carModelZone"
                t:blankOption="ALWAYS" t:blankLabel="Choose..." t:validate="required"/>
        
            <t:zone t:id="carModelZone" id="carModelZone" style="display: inline;">
                <t:label for="carModel"/>:
                <select t:type="select" t:id="carModel" t:model="carModels" 
                    t:blankOption="ALWAYS" t:blankLabel="Choose..." t:validate="required"/>
            </t:zone>
    
            Keywords: <input t:type="TextField" t:id="keywords"/> (optional)<br/> 
    
            <input type="submit" value="Save"/>
            <t:errors/>
    
        </form>
    </div>

    References: 
    <a href="http://tapestry.apache.org/ajax-and-zones.html">Ajax and Zones</a>, 
    <a href="http://tapestry.apache.org/5.3/apidocs/org/apache/tapestry5/corelib/components/Zone.html">Zone</a>,
    <a href="http://tapestry.apache.org/5.3/apidocs/org/apache/tapestry5/corelib/components/Select.html">Select</a>,
    <a href="http://tapestry.apache.org/5.3/apidocs/org/apache/tapestry5/corelib/components/TextField.html">TextField</a>, 
    <a href="http://tapestry.apache.org/5.3/apidocs/org/apache/tapestry5/services/Request.html">Request</a>, 
    <a href="http://tapestry.apache.org/5.3/apidocs/org/apache/tapestry5/ComponentResources.html">ComponentResources</a>, 
    <a href="http://tapestry.apache.org/5.3/apidocs/org/apache/tapestry5/ioc/annotations/Inject.html">@Inject</a>, 
    <a href="http://tapestry.apache.org/5.3/apidocs/org/apache/tapestry5/annotations/InjectComponent.html">@InjectComponent</a>.<br/><br/> 
    
    <a t:type="pagelink" t:page="Index" href="#">Home</a><br/><br/>
    
    <t:sourcecodedisplay src="/web/src/main/java/jumpstart/web/pages/examples/ajax/AjaxSelect1.tml"/>
    <t:sourcecodedisplay src="/web/src/main/java/jumpstart/web/pages/examples/ajax/AjaxSelect1.java"/>
    <t:sourcecodedisplay src="/web/src/main/java/jumpstart/web/css/examples/ajax_select.css"/>
</body>
</html>

AjaxSelect1.java


package jumpstart.web.pages.examples.ajax;

import org.apache.tapestry5.annotations.InjectComponent;
import org.apache.tapestry5.annotations.InjectPage;
import org.apache.tapestry5.annotations.Property;
import org.apache.tapestry5.corelib.components.Zone;
import org.apache.tapestry5.ioc.annotations.Inject;
import org.apache.tapestry5.services.Request;
import org.apache.tapestry5.services.ajax.AjaxResponseRenderer;

public class AjaxSelect1 {
    static final private String MAKE_HONDA = "Honda";
    static final private String MAKE_TOYOTA = "Toyota";
    static final private String[] ALL_MAKES = new String[] { MAKE_HONDA, MAKE_TOYOTA };

    static final private String[] HONDA_MODELS = new String[] { "Accord", "Civic", "Jazz" };
    static final private String[] TOYOTA_MODELS = new String[] { "Camry", "Corolla" };
    static final private String[] NO_MODELS = new String[] {};

    // Screen fields

    @Property
    private String[] carMakes;

    @Property
    private String carMake;

    @Property
    private String[] carModels;

    @Property
    private String carModel;

    @Property
    private String keywords;

    // Other pages

    @InjectPage
    private AjaxSelect2 page2;

    // Generally useful bits and pieces

    @InjectComponent
    private Zone carModelZone;

    @Inject
    private Request request;

    @Inject
    private AjaxResponseRenderer ajaxResponseRenderer;

    // The code

    void setupRender() {
        if (carMakes == null) {
            carMakes = ALL_MAKES;
            carModels = NO_MODELS;
        }
    }

    void onValueChangedFromCarMake(String carMake) {
        
        // A new make has been chosen - clear the model.

        carModel = null;
        carModels = NO_MODELS;

        // Show the models of the chosen make.
        
        if (carMake != null) {
            if (carMake.equals(MAKE_HONDA)) {
                carModels = HONDA_MODELS;
            }
            else if (carMake.equals(MAKE_TOYOTA)) {
                carModels = TOYOTA_MODELS;
            }
        }

        if (request.isXHR()) {
            ajaxResponseRenderer.addRender(carModelZone);
        }
    }

    Object onSuccess() {
        page2.set(carMake, carModel, keywords);
        return page2;
    }
}

ajax_select.css


body            { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #333;
                    line-height: 17px; }
h1              { font-size: 26px; line-height: 20px; } /* For IE 7 */
form            { margin: 0; }

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

a               { text-decoration: none; color: #3D69B6; }
a:hover         { text-decoration: underline; }

select          { margin-right: 12px; }