表单与验证组件

上一页
下一页

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

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

复选框组件

复选框组件用于在两个相互排斥的选项之间进行选择。如下所示创建使用复选框的页面：

Checkbox.java

package com.example.MyFirstApplication.pages;  

import org.apache.tapestry5.annotations.Property;  

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

现在，创建一个对应的模板Checkbox.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与相应的布尔值匹配。

结果 - 请求页面https://:8080/myFirstApplication/checkbox后，会产生以下结果。

Checkbox

文本字段组件

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

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>

此处，Text页面包含名为fname和lname的属性。组件id通过属性访问。

请求页面将产生以下结果：

https://:8080/myFirstApplication/Text

Text Field

密码字段组件

PasswordField是一个专门用于密码输入的文本字段。创建一个名为Password的页面，如下所示：

Password.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; 
}

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

Password.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。请求页面将产生以下结果：

https://:8080/myFirstApplication/Password

Password Field

文本区域组件

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

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;  
}

然后，创建一个对应的模板文件，如下所示。

TxtArea.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”。请求页面将产生以下结果：

https://:8080/myFirstApplication/TxtArea**

TextArea Component

选择组件

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

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 
   } 
}

然后，创建一个对应的模板，如下所示：

SelectOption.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组件有两个参数：

  • 类型 - 属性类型为枚举。

  • Id - Id指向Tapestry属性“color1”。

请求页面将产生以下结果：

https://:8080/myFirstApplication/SelectOption

Select Component

单选组组件

RadioGroup组件为Radio组件提供一个容器组。Radio和RadioGroup组件协同工作以更新对象的属性。此组件应围绕其他Radio组件。

Radiobutton.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; 
}

然后，创建一个对应的模板文件，如下所示：

Radiobutton.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”绑定。请求页面将产生以下结果。

https://:8080/myFirstApplication/Radiobutton

Radio Group

提交组件

当用户点击提交按钮时，表单将被发送到标签的action设置中指定的地址。创建一个名为SubmitComponent的页面，如下所示。

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

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

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

SubmitComponent.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>

此处，Submit组件将值提交到Index页面。请求页面将产生以下结果：

https://:8080/myFirstApplication/SubmitComponent

Submit Component

表单验证

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

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

创建一个名为Validate的页面，如下所示。

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; 
}

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

Validate.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 - 定义最大日期，例如 = «最大日期，2013年6月9日»。同样，您也可以分配MinDate。

  • MaxLength - 最大长度，例如 = «最大长度，80»。

  • Min - 最小值。

  • MinLength - 最小长度，例如 = «最小长度，2»。

  • Email - 电子邮件验证，使用标准电子邮件正则表达式 ^\w[._\w]*\w@\w[-._\w]*\w\.\w{2,6}$ 或 none。

请求页面将产生以下结果：

https://:8080/myFirstApplication/Validate

Form Validation
打印页面
上一页
下一页
广告
© . All rights reserved.