양식 및 유효성 검사 구성 요소

그만큼 Form Component사용자 입력을 위해 태피스트리 페이지에서 양식을 작성하는 데 사용됩니다. 양식에는 텍스트 필드, 날짜 필드, 확인란 필드, 선택 옵션, 제출 버튼 등이 포함될 수 있습니다.

이 장에서는 몇 가지 주목할만한 양식 구성 요소에 대해 자세히 설명합니다.

확인란 구성 요소

확인란 구성 요소는 상호 배타적 인 두 옵션 중에서 선택하는 데 사용됩니다. 아래와 같이 체크 박스를 사용하여 페이지를 생성합니다.

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는 해당 부울 값과 일치합니다.

Result − http : // localhost : 8080 / myFirstApplication / checkbox 페이지 요청 후 다음과 같은 결과를 생성합니다.

TextField 구성 요소

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>

여기에서 텍스트 페이지에는 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 구성 요소에는 속성을 가리키는 매개 변수 id가 있습니다. pwd. 페이지를 요청하면 다음 결과가 생성됩니다.

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>

여기에서 Select 구성 요소에는 두 개의 매개 변수가 있습니다.

  • 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는 "value"속성과 바인딩됩니다. 페이지를 요청하면 다음과 같은 결과가 생성됩니다.

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>

여기서 제출 구성 요소는 색인 페이지에 값을 제출합니다. 페이지를 요청하면 다음 결과가 생성됩니다.

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를 정의합니다 (예 : =«maximum date, 06/09/2013»). 마찬가지로 MinDate도 할당 할 수 있습니다.

  • MaxLength − maxLength for eg =«최대 길이, 80».

  • Min − 최소.

  • MinLength − 예를 들어 최소 길이 =«최소 길이, 2».

  • Email − 표준 이메일 정규 표현식 ^ \ w [._ \ w] * \ w @ \ w [-._ \ w] * \ w \. \ w2,6 $ 또는 없음을 사용하는 이메일 유효성 검사.

페이지를 요청하면 다음 결과가 생성됩니다.

http://localhost:8080/myFirstApplication/Validate

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved