Apache Tapestry 表单和验证组件


The 表单组件 用于在挂毯页面中创建表单以供用户输入。表单可以包含文本字段、日期字段、复选框字段、选择选项、提交按钮等。

本章详细解释了一些值得注意的表单组件。

复选框组件


复选框组件用于在两个互斥选项之间进行选择。使用 Checkbox 创建页面,如下图:

复选框.java

package com.example.MyFirstApplication.pages;  

import org.apache.tapestry5.annotations.Property;  

public class Checkbox { 
    @Property
    private boolean check1;
   
    @Property
    private boolean check2;
}

现在,创建一个相应的模板 复选框.tml 如下所示:

<html t:type = "newlayout" title = "About MyFirstApplication" 
    xmlns:t = "http:// Tapestry.apache.org/schema/tapestry_5_4.xsd"
    xmlns:p = "tapestry:parameter">
   
    <h3> checkbox component</h3>
    <t:form>
        <t:checkbox t:id = "check1"/> I have a bike <br/>
        <t:checkbox t:id = "check2"/> I have a car
    </t:form>
   
</html> 

此处,复选框参数 id 与相应的布尔值匹配。

Result : 请求页面后,http://localhost:8080/myFirstApplication/checkbox 产生如下结果。

Checkbox

文本字段组件


TextField 组件允许用户编辑单行文本。创建一个页面 Text 如下所示。

文本.java

package com.example.MyFirstApplication.pages;  

import org.apache.tapestry5.annotations.Property; 
import org.apache.tapestry5.corelib.components.TextField;public class Text {  
    @Property
    private String fname;
    @Property
    private String lname;
}

然后,创建一个对应的模板,如下图——Text.tml

<html t:type = "newlayout" title = "About MyFirstApplication" 
    xmlns:t = "http:// Tapestry.apache.org/schema/tapestry_5_4.xsd"
    xmlns:p = "tapestry:parameter">
    <p> Form application </p>
   
    <body>
        <h3> Text field created from Tapestry component </h3>
        <t:form>
            <table>
                <tr>
                    <td>
                        Firstname: </td> <td><t:textfield t:id = "fname" />
                    </td>
                    <td>Lastname: </td> <td> <t:textfield t:id = "lname" /> </td>
                </tr>
            </table>
        </t:form>
    </body>
   
</html>

在这里,文本页面包含一个名为 fname and lname .组件 ID 由属性访问。

请求页面会产生如下结果:

http://localhost:8080/myFirstApplication/Text

Text Field

密码字段组件


PasswordField 是密码的专用文本字段条目。创建页面密码如下图:

密码.java

package com.example.MyFirstApplication.pages;  

import org.apache.tapestry5.annotations.Property; 
import org.apache.tapestry5.corelib.components.PasswordField;  

public class Password {  
    @Property
    private String pwd;
}

现在,创建一个对应的模板文件,如下图:

密码.tml

<html t:type = "newlayout" title = "About MyFirstApplication" 
    xmlns:t = "http:// Tapestry.apache.org/schema/tapestry_5_4.xsd"
    xmlns:p = "tapestry:parameter">
    <p> Form application </p>
    <h3> Password field created from Tapestry component </h3>
   
    <t:form>
        <table>
            <tr>
                <td> Password: </td>
                <td><t:passwordfield t:id = "pwd"/> </td>
            </tr>
        </table>
    </t:form>
   
</html> 

这里,PasswordField 组件有参数 id,它指向属性 pwd .请求页面会产生如下结果:

http://localhost:8080/myFirstApplication/Password

Password Field

文本区域组件


TextArea 组件是一个多行输入文本控件。创建一个页面 TxtArea 如下所示。

文本区域.java

package com.example.MyFirstApplication.pages;  

import org.apache.tapestry5.annotations.Property; 
import org.apache.tapestry5.corelib.components.TextArea;  

public class TxtArea {  
    @Property
    private String str;
}

然后,创建一个对应的模板文件,如下图。

文本区域.tml

<html t:type = "newlayout" title = "About MyFirstApplication" 
    xmlns:t = "http:// Tapestry.apache.org/schema/tapestry_5_4.xsd"
    xmlns:p = "tapestry:parameter">
    <h3>TextArea component </h3>
   
    <t:form>
        <table>
            <tr>
                <td><t:textarea t:id = "str"/>
                </td>
            </tr>
        </table>
    </t:form>
   
</html>

这里,TextArea 组件参数 id 指向属性“str”。请求页面会产生如下结果:

http://localhost:8080/myFirstApplication/TxtArea**

TextArea Component

选择组件


Select 组件包含一个下拉列表选项。创建一个页面 SelectOption 如下所示。

选择选项.java

package com.example.MyFirstApplication.pages;  

import org.apache.tapestry5.annotations.Property; 
import org.apache.tapestry5.corelib.components.Select;  

public class SelectOption { 
    @Property
    private String color0;
   
    @Property
   
    private Color1 color1;
    public enum Color1 {
        YELLOW, RED, GREEN, BLUE, ORANGE
    }
}

然后,创建对应的模板如下:

选择选项.tml

<html t:type = "newlayout" title = "About MyFirstApplication" 
    xmlns:t = "http:// Tapestry.apache.org/schema/tapestry_5_4.xsd"
    xmlns:p = "tapestry:parameter">
    <p> Form application </p>
    <h3> select component </h3>
   
    <t:form>
        <table>
            <tr>
                <td> Select your color here: </td>
                <td> <select t:type = "select" t:id = "color1"></select></td>
            </tr>
        </table>
    </t:form>
   
</html>

这里,Select 组件有两个参数:

  • Type : 属性的类型是枚举。

  • Id :id指向Tapestry属性“color1”。

请求页面会产生如下结果:

http://localhost:8080/myFirstApplication/SelectOption

Select Component

RadioGroup 组件


RadioGroup 组件为 Radio 组件提供了一个容器组。 Radio 和 RadioGroup 组件协同工作以更新对象的属性。该组件应包裹其他 Radio 组件。新建一个页面“Radiobutton.java”,如下图:

单选按钮.java

package com.example.MyFirstApplication.pages;  

import org.apache.tapestry5.PersistenceConstants; 
import org.apache.tapestry5.annotations.Persist; 
import org.apache.tapestry5.annotations.Property;  

public class Radiobutton {  
    @Property
    @Persist(PersistenceConstants.FLASH)
    private String value;
}

然后,创建一个对应的模板文件,如下图:

单选按钮.tml

<html t:type = "Newlayout" title = "About MyFirstApplication" 
    xmlns:t = "http:// Tapestry.apache.org/schema/tapestry_5_4.xsd"
    xmlns:p = "tapestry:parameter">
    <h3>RadioGroup component </h3>
   
    <t:form>
        <t:radiogroup t:id = "value">
            <t:radio t:id = "radioT" value = "literal:T" label = "Male" />
            <t:label for = "radioT"/>
            <t:radio t:id = "radioF" value = "literal:F" label = "Female"/>
            <t:label for = "radioF"/>
        </t:radiogroup>
    </t:form>
   
</html>

在这里,RadioGroup 组件 id 与属性“value”绑定。请求页面将产生以下结果。

http://localhost:8080/myFirstApplication/Radiobutton

Radio Group

提交组件


当用户单击提交按钮时,表单将发送到标记的操作设置中指定的地址。创建一个页面 提交组件 如下所示。

package com.example.MyFirstApplication.pages;  
import org.apache.tapestry5.annotations.InjectPage;  

public class SubmitComponent { 
    @InjectPage
    private Index page1;
    Object onSuccess() {
        return page1;
    }
}

现在,创建一个对应的模板文件,如下所示。

提交组件.tml

<html t:type = "newlayout" title = "About MyFirstApplication" 
    xmlns:t = "http:// Tapestry.apache.org/schema/tapestry_5_4.xsd"
    xmlns:p = "tapestry:parameter">
    <h3>Tapestry Submit component </h3>
   
    <body>
        <t:form>
            <t:submit t:id = "submit1" value = "Click to go Index"/>
        </t:form>
    </body>
   
</html>

在这里,提交组件将值提交到索引页面。请求页面会产生如下结果:

http://localhost:8080/myFirstApplication/SubmitComponent

Submit Component

表单验证


表单验证通常在客户端输入所有必要的数据并提交表单后在服务器上进行。如果客户端输入的数据不正确或只是丢失,服务器将不得不将所有数据发送回客户端并请求重新提交带有正确信息的表单。

让我们考虑以下简单示例来了解验证过程。

创建一个页面 Validate 如下所示。

验证.java

package com.example.MyFirstApplication.pages;  

import org.apache.tapestry5.annotations.Property; 
import org.apache.tapestry5.PersistenceConstants; 
import org.apache.tapestry5.annotations.Persist;  

public class Validate {  
    @Property
    @Persist(PersistenceConstants.FLASH)
    private String firstName;
   
    @Property
    @Persist(PersistenceConstants.FLASH)
    private String lastName;
}

现在,创建一个对应的模板文件,如下所示。

验证.tml

<html t:type = "newlayout" title = "About MyFirstApplication" 
    xmlns:t = "http:// Tapestry.apache.org/schema/tapestry_5_4.xsd"
    xmlns:p = "tapestry:parameter">
  
    <t:form>
        <table>
            <tr>
                <td><t:label for = "firstName"/>:</td>
                <td><input t:type = "TextField" t:id = "firstName"
                t:validate = "required, maxlength = 7" size = "10"/></td>
            </tr>
            <tr>
                <td><t:label for = "lastName"/>:</td>
                <td><input t:type = "TextField" t:id = "lastName"
                t:validate = "required, maxLength = 5" size = "10"/></td>
            </tr>
        </table>
        <t:submit t:id = "sub" value =" Form validation"/>
    </t:form>
   
</html>

表单验证具有以下重要参数:

  • Max :定义最大值,例如= «最大值,20»。

  • MaxDate :定义maxDate,例如= «最大日期,06/09/2013»。同样,你也可以指定 MinDate。

  • 最长长度 : maxLength 例如= «最大长度,80»。

  • Min : 最低限度。

  • 最小长度 : 最小长度例如= «最小长度,2»。

  • Email : 使用标准电子邮件正则表达式 ^\w[._\w]*\w@\w[-._\w]*\w\.\w2,6$ 或无的电子邮件验证。

请求页面会产生如下结果:

http://localhost:8080/myFirstApplication/Validate

Form Validation