表單與驗證元件

上一頁
下一頁

表單元件用於在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.