Select

The Select component displays a list of options in a drop-down box, allowing you to choose one.
The options are held in a model which can be specified in many different ways, as these examples demonstrate.
Each option has a label, which is what you see displayed in the list.
Each option also has a value, which uniquely identifies it to the server. If the value is not a string, then an encoder must be provided.
Each Label component in these examples is providing a label next to its corresponding Select component. It does not affect the Select's option labels.

The Select component expects you to provide a SelectModel, but to keep things simple it will also accept enums and lists of strings as the following examples show.
In this example we provide the strings right in the template. Each option label and value is the same as the string.

: You chose:
In this example the model is an enum, which Select infers from color1's type. The option labels are produced by "humanising" the enum values.

You chose:
In this example we provide a map of strings right in the template. The mapped key and value become the option value and label, respectively.

: You chose:
In this example the model is an enum plus properties. The option labels come from the page's properties file if there's a matching entry in it.

: You chose:
The blank option appears because Select has a parameter blankOption with a default value of AUTO whose meaning is here.

References: Label, Select, BlankOption.

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>Select</h3>
    The Select component displays a list of <strong>options</strong> in a drop-down box, allowing
    you to choose one.<br/>
    The options are held in a <strong>model</strong> which can be specified in many different ways, as these examples demonstrate.<br/>
    Each option has a <strong>label</strong>, which is what you see displayed in the list.<br/>
    Each option also has a <strong>value</strong>, which uniquely identifies it to the server.
    If the value is not a string, then an <strong>encoder</strong> must be provided.<br/>
    Each <strong>Label</strong> component in these examples is providing a label next to its corresponding Select component. 
    It does not affect the Select's option labels.<br/><br/>

    The Select component expects you to provide a SelectModel, but to keep things simple it will also accept enums and lists of strings 
    as the following examples show.
    
    <div class="eg">
        In this example we provide the <strong>strings</strong> right in the template. Each option label and value is the same as the string.<br/><br/>
            
        <t:form class="form-inline">
            <div class="form-group">
                <t:label for="color0"/>:
                <t:select t:id="color0" model="literal:Red,Yellow,Blue"/>
                <t:submit/>
                You chose: ${color0}
            </div>
        </t:form>
    </div>
    <div class="eg">
        In this example the model is an <strong>enum</strong>, which Select infers from color1's type.  The option labels are produced by "humanising" the enum values.<br/><br/>
            
        <t:form class="form-inline">
            <div class="form-group">
                <t:label for="color1"/>
                <t:select t:id="color1"/>
                <t:submit/>
                You chose: ${color1}
            </div>
        </t:form>
    </div>
    <div class="eg">
        In this example we provide a <strong>map of strings</strong> right in the template.  The mapped key and value become the option value and label, respectively.<br/><br/>
            
        <t:form class="form-inline">
            <div class="form-group">
                <t:label for="color2"/>:
                <t:select t:id="color2" model="literal:R=Red,G=Green,B=Blue"/>
                <t:submit/>
                You chose: ${color2}
            </div>
        </t:form>
    </div>
    <div class="eg">
        In this example the model is an <strong>enum plus properties</strong>.  The option labels come from the page's properties file if there's a matching entry in it.<br/><br/>
            
        <t:form class="form-inline">
            <div class="form-group">
                <t:label for="color3"/>:
                <t:select t:id="color3"/>
                <t:submit/>
                You chose: ${color3}
            </div>
        </t:form>
    </div>
    
    The blank option appears because Select has a parameter <em>blankOption</em> with a default value of <em>AUTO</em> whose meaning 
    is <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/corelib/data/BlankOption.html">here</a>.<br/><br/> 

    References: 
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/corelib/components/Label.html">Label</a>, 
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/corelib/components/Select.html">Select</a>, 
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/corelib/data/BlankOption.html">BlankOption</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/select/Select.tml"/>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/select/Select.properties"/>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/select/Select.java"/>
        <t:sourcecodetab src="/web/src/main/resources/META-INF/assets/css/examples/select.css"/>
    </t:tabgroup>
</body>
</html>



YELLOW=Canary Yellow
CYAN=Aquatic Cyan



package jumpstart.web.pages.examples.select;

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

@Import(stylesheet = "css/examples/select.css")
public class Select {

    @Property
    private String color0;

    @Property
    private Color1 color1;

    public enum Color1 {
        RED, GREEN, BLUE
    }

    @Property
    private String color2;

    @Property
    private Color3 color3;

    public enum Color3 {
        YELLOW, CYAN, MAGENTA
    }

    void onActivate(String color0, Color1 color1, String color2, Color3 color3) {
        this.color0 = color0;
        this.color1 = color1;
        this.color2 = color2;
        this.color3 = color3;
    }

    Object[] onPassivate() {
        return new Object[] { color0, color1, color2, color3 };
    }

}



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

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