Varied Select

This example demonstrates labelling the blank option by setting the parameter blankLabel.

: You chose:
This example demonstrates labelling the blank option by providing a property in the page's properties file.

: You chose:
This example demonstrates removing the blank option by setting the parameter validate to required.

: You chose:
This example demonstrates keeping the blank option while also setting the parameter validate to required.

:
You chose:
References: 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>Varied Select</h3>
    
    <div class="eg">
        This example demonstrates labelling the blank option by setting the parameter <em>blankLabel</em>.<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" blankLabel="Choose..."/>
                <t:submit/>
                You chose: ${color0}
            </div>
        </t:form>
    </div>
    <div class="eg">
        This example demonstrates labelling the blank option by providing a property in the page's properties file.<br/><br/>
        
        <t:form class="form-inline">
            <div class="form-group">
                <t:label for="color1"/>:
                <t:select t:id="color1" model="literal:Red,Yellow,Blue"/>
                <t:submit/>
                You chose: ${color1}
            </div>
        </t:form>
    </div>
    <div class="eg">
        This example demonstrates removing the blank option by setting the parameter <em>validate</em> to <em>required</em>.<br/><br/>
        
        <t:form class="form-inline">
            <div class="form-group">
                <t:label for="color2"/>:
                <t:select t:id="color2" model="literal:Red,Yellow,Blue" validate="required"/>
                <t:submit/>
                You chose: ${color2}
            </div>
        </t:form>
    </div>
    <div class="eg">
        This example demonstrates keeping the blank option while also setting the parameter <em>validate</em> to <em>required</em>.<br/><br/>
        
        <t:form class="form-inline">
            <div class="form-group">
                <t:label for="color3"/>:
                <t:select t:id="color3" model="literal:Red,Yellow,Blue" validate="required" blankOption="ALWAYS"/>
            </div>
            <div class="form-group">
                <t:submit/>
            </div>
            <div class="form-group">
                You chose: ${color3}
            </div>
        </t:form>
    </div>

    References: 
    <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/VariedSelect.tml"/>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/select/VariedSelect.properties"/>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/select/VariedSelect.java"/>
        <t:sourcecodetab src="/web/src/main/resources/META-INF/assets/css/examples/select.css"/>
    </t:tabgroup>
</body>
</html>



color1-blankLabel=Select...



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 VariedSelect {

    @Property
    private String color0;

    @Property
    private String color1;

    @Property
    private String color2;

    @Property
    private String color3;

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

    String[] onPassivate() {
        return new String[] { 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;
}