Core Input Components

This page demonstrates Tapestry's core input components.
Component Name Use them and press Submit Submitted Value
Checkbox: false
Checklist:
DateField:
(dd/MM/yyyy)
Palette:
Available
Selected

 []
PasswordField:
RadioGroup,
Radio,
and Label:

Select:
TextArea:
TextField:

Examples of components that are not part of core are Kaptcha and Upload. They are in later examples.

Home

References: Flash Strategy, Form Components, Checkbox, Checklist, DateField, Palette, PasswordField, RadioGroup, Radio, Label, Select, TextArea, TextField.


<!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">
<head>
    <link rel="stylesheet" type="text/css" href="${asset:css/examples/examples.css}"/>
    <style type="text/css">
        form        { text-align: center; }
        table       { font-family: Arial, Helvetica, sans-serif;  font-size: 13px; font-weight: normal; margin: auto; }
        th          { background-color: #bee; text-align: center; padding: 10px 10px; }
        td          { background-color: #eeb; text-align: left; padding: 10px 10px; }
        td.name     { text-align: right; vertical-align: top; }
        div.t-palette { width: 460px; }
        .datePicker td .topLabel { color:black; }
    </style>
</head>
<body class="container">
    <h3>Core Input Components</h3>
    
    This page demonstrates Tapestry's core input components.
    
    <div class="eg">
        <t:Form t:id="inputs">
            <table>
                <tr>
                    <th>Component Name</th>
                    <th>Use them and press Submit</th>
                    <th>Submitted Value</th>
                </tr>
                <tr>
                    <td class="name">Checkbox:</td>
                    <!-- We include type only to make it previewable. -->
                    <td><t:Checkbox t:id="checkboxValue" type="checkbox"/></td>
                    <td>${checkboxValue}</td>
                </tr>
                <tr>
                    <td class="name">Checklist:</td>
                    <td><t:Checklist t:id="checklist" t:model="stationery" t:selected="checklistSelectedValues" t:encoder="stringValueEncoder"/></td>
                    <td>${checklistSelectedValues}</td>
                </tr>
                <tr>
                    <td class="name">DateField:</td>
                    <td><t:DateField t:id="dateValue" t:format="prop:dateInFormatStr"/> (${dateInFormatStr})</td>
                    <!-- We include ${datetimeOutFormatStr} only to make it previewable. -->
                    <td><t:output value="dateValue" format="prop:datetimeOutFormatStr">${datetimeOutFormatStr}</t:output></td>
                </tr>
                <tr>
                    <td class="name">Palette:</td>
                    <td><t:Palette t:id="palette" t:model="pets" t:selected="paletteSelectedValues" t:encoder="stringValueEncoder"/></td>
                    <td>${paletteSelectedValues}</td>
                </tr>
                <tr>
                    <td class="name">PasswordField:</td>
                    <!-- We include type only to make it previewable. -->
                    <td><t:PasswordField t:id="passwordValue" type="password"/></td>
                    <td>${passwordValue}</td>
                </tr>
                <tr>
                    <td class="name">RadioGroup,<br/> Radio,<br/> and Label:</td>
                    <td>
                        <t:RadioGroup value="radioSelectedValue">
                            <!-- We include type and name only to make it previewable. -->
                            <t:Radio t:id="radioH" value="literal:H" label="High" type="radio" name="group"/><t:label for="radioH"/><br/>
                            <t:Radio t:id="radioM" value="literal:M" label="Medium" type="radio" name="group"/><t:label for="radioM"/><br/>
                            <t:Radio t:id="radioL" value="literal:L" label="Low" type="radio" name="group"/><t:label for="radioL"/>
                        </t:RadioGroup>
                    </td>
                    <td>${radioSelectedValue}</td>
                </tr>
                <tr>
                    <td class="name">Select:</td>
                    <td><t:Select t:id="select" t:model="literal:Ms,Mrs,Mr,Dr,Prof" t:value="selectedValue"/></td>
                    <td>${selectedValue}</td>
                </tr>
                <tr>
                    <td class="name">TextArea:</td>
                    <td><t:TextArea t:id="textAreaValue"></t:TextArea></td>
                    <!-- We include ${textAreaValue} only to make it previewable. -->
                    <td><t:textoutput value="textAreaValue">${textAreaValue}</t:textoutput></td>
                </tr>
                <tr>
                    <td class="name">TextField:</td>
                    <td><t:TextField t:id="textValue"/></td>
                    <td>${textValue}</td>
                </tr>
            </table><br/>
            
            <t:submit/>
            
        </t:Form>
    </div>
    
    Examples of components that are not part of core are Kaptcha and Upload. They are in later examples.<br/><br/>
    
    <t:pagelink t:page="Index">Home</t:pagelink><br/><br/>
    
    References:
    <a href="http://tapestry.apache.org/persistent-page-data.html#PersistentPageData-FlashStrategy">Flash Strategy</a>, 
    <a href="http://tapestry.apache.org/component-reference.html#ComponentReference-FormComponents">Form Components</a>, 
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/corelib/components/Checkbox.html">Checkbox</a>, 
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/corelib/components/Checklist.html">Checklist</a>, 
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/corelib/components/DateField.html">DateField</a>, 
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/corelib/components/Palette.html">Palette</a>, 
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/corelib/components/PasswordField.html">PasswordField</a>, 
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/corelib/components/RadioGroup.html">RadioGroup</a>, 
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/corelib/components/Radio.html">Radio</a>, 
    <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/components/TextArea.html">TextArea</a>,
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/corelib/components/TextField.html">TextField</a>.<br/><br/>

    <t:tabgroup>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/component/CoreInputComponents.tml"/>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/component/CoreInputComponents.java"/>
        <t:sourcecodetab src="/web/src/main/resources/META-INF/assets/css/examples/examples.css"/>
    </t:tabgroup>
</body>
</html>



package jumpstart.web.pages.examples.component;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import org.apache.tapestry5.PersistenceConstants;
import org.apache.tapestry5.annotations.Persist;
import org.apache.tapestry5.annotations.Property;
import org.apache.tapestry5.internal.services.StringValueEncoder;

public class CoreInputComponents {

    @Property
    private final StringValueEncoder stringValueEncoder = new StringValueEncoder();

    /* Checkbox */

    @Property
    @Persist(PersistenceConstants.FLASH)
    private boolean checkboxValue;

    /* Checklist */

    @Property
    @Persist(PersistenceConstants.FLASH)
    private List<String> checklistSelectedValues;

    @Property
    private final String[] STATIONERY = { "Pens", "Pencils", "Paper" };

    /* DateField */

    @Property
    @Persist(PersistenceConstants.FLASH)
    private Date dateValue;

    @Property
    // We could return a DateFormat, but instead we'll return a String which DateField will coerce into a DateFormat.
    private String dateInFormatStr = "dd/MM/yyyy";

    @Property
    // We could return a DateFormat, but instead we'll return a String which DateField will coerce into a DateFormat.
    private String datetimeOutFormatStr = "yyyy-MM-dd HH:mm:ss z";

    /* Palette */

    @Property
    @Persist(PersistenceConstants.FLASH)
    private List<String> paletteSelectedValues;

    @Property
    private final String[] PETS = { "Dog", "Cat", "Parrot", "Mouse" };

    /* Password */

    @Property
    @Persist(PersistenceConstants.FLASH)
    private String passwordValue;

    /* RadioGroup and Radio */

    @Property
    @Persist(PersistenceConstants.FLASH)
    private String radioSelectedValue;

    /* Select */

    @Property
    @Persist(PersistenceConstants.FLASH)
    private String selectedValue;

    /* TextArea */

    @Property
    @Persist(PersistenceConstants.FLASH)
    private String textAreaValue;

    /* TextField */

    @Property
    @Persist(PersistenceConstants.FLASH)
    private String textValue;

    // Life-cycle stuff. Fields that are marked @Persist MUST NOT be initialized in their declarations.

    void onPrepare() {
        if (paletteSelectedValues == null) {
            paletteSelectedValues = new ArrayList<String>();
        }
    }

}



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