Formularios y componentes de validación
los Form Componentse utiliza para crear un formulario en la página del tapiz para la entrada del usuario. Un formulario puede contener campos de texto, campos de fecha, campos de casilla de verificación, seleccionar opciones, botón de envío y más.
Este capítulo explica en detalle algunos de los componentes de formulario notables.
Componente de casilla de verificación
Un componente de casilla de verificación se utiliza para elegir entre dos opciones mutuamente excluyentes. Cree una página usando la casilla de verificación como se muestra a continuación:
Checkbox.java
package com.example.MyFirstApplication.pages;
import org.apache.tapestry5.annotations.Property;
public class Checkbox {
@Property
private boolean check1;
@Property
private boolean check2;
}Ahora, crea una plantilla correspondiente Checkbox.tml como se muestra a continuación -
<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>Aquí, el id del parámetro de la casilla de verificación coincide con el valor booleano correspondiente.
Result - Después de solicitar la página, http: // localhost: 8080 / myFirstApplication / checkbox produce el siguiente resultado.
Componente TextField
El componente TextField permite al usuario editar una sola línea de texto. Crear una paginaText Como se muestra abajo.
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;
}Luego, cree una plantilla correspondiente como se muestra a continuación: 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>Aquí, la página de texto incluye una propiedad denominada fname y lname. Las propiedades acceden a los ID de los componentes.
Solicitar la página producirá el siguiente resultado:
http://localhost:8080/myFirstApplication/Text
Componente PasswordField
PasswordField es una entrada de campo de texto especializada para la contraseña. Cree una contraseña de página como se muestra a continuación:
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;
}Ahora, cree un archivo de plantilla correspondiente como se muestra a continuación:
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>Aquí, el componente PasswordField tiene el parámetro id, que apunta a la propiedad pwd. Solicitar la página producirá el siguiente resultado:
http://localhost:8080/myFirstApplication/Password
Componente TextArea
El componente TextArea es un control de texto de entrada de varias líneas. Cree una página TxtArea como se muestra a continuación.
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;
}Luego, cree un archivo de plantilla correspondiente como se muestra a continuación.
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>Aquí, el id del parámetro del componente TextArea apunta a la propiedad "str". Solicitar la página producirá el siguiente resultado:
http://localhost:8080/myFirstApplication/TxtArea**
Seleccionar componente
El componente Seleccionar contiene una lista desplegable de opciones. Cree una página SelectOption como se muestra a continuación.
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
}
}Luego, cree una plantilla correspondiente es la siguiente:
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>Aquí, el componente Seleccionar tiene dos parámetros:
Type - El tipo de propiedad es una enumeración.
Id - Id apunta a la propiedad Tapestry "color1".
Solicitar la página producirá el siguiente resultado:
http://localhost:8080/myFirstApplication/SelectOption
Componente RadioGroup
El componente RadioGroup proporciona un grupo contenedor para componentes Radio. Los componentes Radio y RadioGroup trabajan juntos para actualizar una propiedad de un objeto. Este componente debe envolver otros componentes de radio. Cree una nueva página "Radiobutton.java" como se muestra a continuación -
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;
}Luego, cree un archivo de plantilla correspondiente como se muestra a continuación:
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>Aquí, la identificación del componente de RadioGroup se vincula con la propiedad "valor". Solicitar la página producirá el siguiente resultado.
http://localhost:8080/myFirstApplication/Radiobutton
Enviar componente
Cuando un usuario hace clic en un botón de envío, el formulario se envía a la dirección especificada en la configuración de acción de la etiqueta. Crear una paginaSubmitComponent Como se muestra abajo.
package com.example.MyFirstApplication.pages;
import org.apache.tapestry5.annotations.InjectPage;
public class SubmitComponent {
@InjectPage
private Index page1;
Object onSuccess() {
return page1;
}
}Ahora, cree un archivo de plantilla correspondiente como se muestra a continuación.
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>Aquí, el componente Enviar envía el valor a la página Índice. Solicitar la página producirá el siguiente resultado:
http://localhost:8080/myFirstApplication/SubmitComponent
Validación de formulario
La validación del formulario normalmente ocurre en el servidor después de que el cliente ingresó todos los datos necesarios y luego envió el formulario. Si los datos ingresados por un cliente eran incorrectos o simplemente faltaban, el servidor tendría que enviar todos los datos al cliente y solicitar que el formulario se vuelva a enviar con la información correcta.
Consideremos el siguiente ejemplo simple para comprender el proceso de validación.
Crear una pagina Validate Como se muestra abajo.
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;
}Ahora, cree un archivo de plantilla correspondiente como se muestra a continuación.
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>La validación de formularios tiene los siguientes parámetros importantes:
Max - define el valor máximo, por ejemplo, = «valor máximo, 20».
MaxDate- define maxDate, por ejemplo, = «fecha máxima, 06/09/2013». Del mismo modo, también puede asignar MinDate.
MaxLength - maxLength para, por ejemplo, = «longitud máxima, 80».
Min - mínimo.
MinLength - Longitud mínima para, por ejemplo, = «longitud mínima, 2».
Email - Validación de correo electrónico que utiliza expresiones regulares de correo electrónico estándar ^ \ w [._ \ w] * \ w @ \ w [-._ \ w] * \ w \. \ W2,6 $ o ninguna.
Solicitar la página producirá el siguiente resultado:
http://localhost:8080/myFirstApplication/Validate
