フォームと検証コンポーネント

*Form Component* は、ユーザー入力用のタペストリーページにフォームを作成するために使用されます。 フォームには、テキストフィールド、日付フィールド、チェックボックスフィールド、選択オプション、送信ボタンなどを含めることができます。

この章では、いくつかの重要なフォームコンポーネントについて詳しく説明します。

チェックボックスコンポーネント

チェックボックスコンポーネントは、相互に排他的な2つのオプションから選択するために使用されます。以下に示すように、チェックボックスを使用してページを作成します-

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は、対応するブール値と一致します。

結果-ページ、http：//localhost：8080/myFirstApplication/checkboxをリクエストすると、次の結果が生成されます。

チェックボックス

TextFieldコンポーネント

TextFieldコンポーネントを使用すると、ユーザーは1行のテキストを編集できます。以下に示すように、ページ*テキスト*を作成します。

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 および lname という名前のプロパティが含まれています。コンポーネントIDは、プロパティによってアクセスされます。

ページを要求すると、次の結果が生成されます-

*http：//localhost：8080/myFirstApplication/Text*

テキストフィールド

PasswordFieldコンポーネント

PasswordFieldは、パスワード用の特殊なテキストフィールドエントリです。以下に示すようにページのパスワードを作成します-

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コンポーネントには、プロパティ pwd を指すパラメーターidがあります。ページを要求すると、次の結果が生成されます-

*http：//localhost：8080/myFirstApplication/Password*

パスワードフィールド

TextAreaコンポーネント

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」を指します。ページを要求すると、次の結果が生成されます-

*http：//localhost：8080/myFirstApplication/TxtArea* **

テキストエリアコンポーネント

コンポーネントを選択

選択コンポーネントには、選択肢のドロップダウンリストが含まれています。以下に示すように、ページ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>

ここでは、選択コンポーネントには2つのパラメータがあります-

Type -プロパティのタイプは列挙型です。
Id -IDはTapestryプロパティ「color1」を指します。

ページを要求すると、次の結果が生成されます-

*http：//localhost：8080/myFirstApplication/SelectOption*

コンポーネントの選択

RadioGroupコンポーネント

RadioGroupコンポーネントは、Radioコンポーネントのコンテナグループを提供します。 RadioおよびRadioGroupコンポーネントは連携して、オブジェクトのプロパティを更新します。このコンポーネントは、他の無線コンポーネントをラップする必要があります。以下に示すように、新しいページ「Radiobutton.java」を作成します-

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がプロパティ「値」とバインドしています。ページをリクエストすると、次の結果が生成されます。

*http：//localhost：8080/myFirstApplication/Radiobutton*

ラジオグループ

コンポーネントを送信

ユーザーが送信ボタンをクリックすると、タグのアクション設定で指定されたアドレスにフォームが送信されます。以下に示すように、ページ 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ページに送信します。ページを要求すると、次の結果が生成されます-

*http：//localhost：8080/myFirstApplication/SubmitComponent*

コンポーネントを送信

フォーム検証

フォームの検証は通常、クライアントが必要なすべてのデータを入力してフォームを送信した後にサーバーで行われます。クライアントが入力したデータが正しくないか、単に欠落している場合、サーバーはすべてのデータをクライアントに送り返して、正しい情報でフォームを再送信するように要求する必要があります。

検証のプロセスを理解するために、次の簡単な例を考えてみましょう。

以下に示すように、ページ 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 -たとえば、maxDateを定義します =«最大日付、2013年6月9日»。同様に、MinDateを割り当てることもできます。
MaxLength -例えば =«最大長、80»。
最小-最小。
MinLength -例えば =«最小長、2»。
Email -標準の電子メール正規表現^ \ w [._ \ w] \ w @ \ w [-._ \ w] \ w \。\ w2,6 $またはnoneを使用する電子メール検証。

ページを要求すると、次の結果が生成されます-

*http：//localhost：8080/myFirstApplication/Validate*

フォーム検証

Apache-tapestry-forms-validation-components

フォームと検証コンポーネント

チェックボックスコンポーネント

Checkbox.java

TextFieldコンポーネント

Text.java

PasswordFieldコンポーネント

Password.java

Password.tml

TextAreaコンポーネント

TxtArea.java

TxtArea.tml

コンポーネントを選択

SelectOption.java

SelectOption.tml

RadioGroupコンポーネント

Radiobutton.java

Radiobutton.tml

コンポーネントを送信

SubmitComponent.tml

フォーム検証

Validate.java

Validate.tml

目次