Primavera – Área de texto MVC

Posted on by Rudeus Greyrat

Aquí aprenderemos sobre la etiqueta de formulario Spring MVC TextArea . Crearemos un proyecto Spring MVC básico en el conjunto de herramientas Spring (STS) para obtener algunos datos del usuario que usa la etiqueta de formulario  TextArea .

spring-form.tld

Podemos usar Java Server Pages (JSP) como un componente de vista en Spring Framework. Para ayudarlo a implementar vistas usando JSP, Spring Framework proporciona una biblioteca de etiquetas de formulario, a saber , spring-form.tld con algunas etiquetas para evaluar errores, configurar temas, formatear los campos para ingresar y generar mensajes internacionalizados.

Etiqueta ‘textarea’: el área de texto es una de las etiquetas proporcionadas por la biblioteca spring-form.tld. Representa un HTML de entrada ‘ textarea ‘. A continuación se muestran los diversos atributos disponibles en la etiqueta de área de texto .

Atributos en la etiqueta ‘textarea’

1. Atributos estándar de HTML

Los atributos estándar de HTML también se denominan atributos globales que se pueden usar con todos los elementos HTML.

Nombre del Atributo Descripción
llave de acceso Para especificar una tecla de acceso directo para activar/centrar en un elemento.
identificación Para especificar una ID única para el elemento.
idioma Para especificar el idioma del contenido.
índice de tabulación Para especificar el orden de tabulación de un elemento.
título Para especificar información adicional sobre el elemento.
directorio Para especificar la dirección del texto del contenido de los elementos.

2. Atributos de eventos HTML

Los atributos de eventos HTML se utilizan para activar una función cuando ocurre un evento particular en el elemento.

Nombre del Atributo Descripción
en la falta de definición Para ejecutar una función de javascript cuando un usuario abandona el campo de texto.
en el cambio Para ejecutar una función javascript cuando un usuario cambia el texto.
al hacer clic Para ejecutar una función de javascript cuando el usuario hace clic en el campo.
ondblclick Para ejecutar una función de JavaScript cuando el usuario hace doble clic en el elemento.
enfocado Para ejecutar una función de javascript cuando el usuario se enfoca en el cuadro de texto.
onkeydown Para ejecutar una función de javascript cuando el usuario está presionando una tecla en el teclado.
al pulsar una tecla Para ejecutar una función de javascript cuando el usuario presiona la tecla en el teclado.
encendido Para ejecutar una función de javascript cuando el usuario está soltando la tecla en el teclado.
en el mouse hacia abajo Para ejecutar una función de javascript cuando el usuario presiona un botón del mouse.
onmovemove Para ejecutar una función de javascript cuando el usuario mueve el puntero del mouse.
fuera del ratón Para ejecutar una función de javascript cuando el usuario mueve el puntero del mouse fuera del campo.
el ratón por encima Para ejecutar una función de javascript cuando el usuario mueve el puntero del mouse sobre el campo.
en el mouse arriba Para ejecutar una función de JavaScript cuando el usuario suelta el botón del mouse.
en seleccionar Para ejecutar una función javascript cuando el usuario selecciona el texto.

3. Atributos requeridos de HTML

Nombre del Atributo Descripción
columnas Para especificar el valor de la columna del área de texto.
filas Para especificar el valor de fila del área de texto.

4. Otros atributos HTML

Nombre del Atributo Descripción
clase css Para especificar un nombre de clase para un elemento HTML para acceder a él.
estilo css Para agregar estilos a un elemento, como color, fuente, tamaño, etc.
cssErrorClass Se utiliza cuando el elemento delimitado tiene errores.
desactivado Para especificar el elemento a deshabilitar o no.
htmlEscape  Para habilitar/deshabilitar el escape HTML de los valores representados.
sendero Para especificar la ruta a una propiedad para vincular los datos.
solo lectura Para hacer que el campo del elemento HTML sea de solo lectura.

Aplicación Spring MVC

A continuación se muestra la aplicación que vamos a crear.

Spring MVC Textarea – Ejemplo de aplicación

Procedimiento

Los pasos para crear una aplicación son los siguientes: 

Paso 1: Cree un proyecto Spring MVC en Spring Tool Suite.

Paso 2: en STS, al crear el proyecto basado en la selección del desarrollador, descargará todas las dependencias maven requeridas, *.jar, archivos lib y proporcionará un servidor integrado.

Paso 3: A continuación se muestra la estructura final del proyecto Spring MVC después de crear también los archivos *.java y *.jsp.

final project structure of the Spring MVC project after creating *.java and *.jsp files

Estructura del proyecto

Implementación

Los archivos a crear son los siguientes: 

  • Note.java: Clase de bean para definir las propiedades y los métodos getter/setter de las propiedades.
  • NoteController.java: clase de controlador para procesar la solicitud y generar la salida.
  • note.jsp: archivo Jsp para obtener la entrada del usuario desde el navegador.
  • noteSummary.jsp: archivo Jsp para mostrar la salida procesada al usuario.

A. Archivo: note.jsp

HTML

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ page session="false"%>
<html>
<head>
<title>GeeksforGeeks - Note</title>
</head>
<body>
    <h1>Welcome to GeeksforGeeks!</h1>
  
    <form:form action="submit" method="post" modelAttribute="note">
        <table>
            <tr>
                <td><form:label path="noteDetail">Feedback Note: </form:label></td>
                <td><form:textarea id="feedBack" path="noteDetail" rows="5" cols="40" title="GFG" 
                                    onfocus="color()" onblur="remove()" cssStyle="font-style:italic"/></td>
            </tr>
            <tr>
                <td><form:button>Submit</form:button></td>
            </tr>
        </table>
    </form:form>
      
    <script type="text/javascript">
      
    function color() {
          document.getElementById("feedBack").style.backgroundColor = "CBF7C7";
        }
      
    function remove() {
          document.getElementById("feedBack").style.backgroundColor = "FFFFFF";
        }
    </script>
</body>
</html>

Esta es la página JSP que interactúa con el usuario para obtener la información. Dentro del formulario, para mostrar los campos correctamente, estamos usando una etiqueta de tabla . Proporcione una etiqueta y el área de texto para ingresar algunos datos usando la etiqueta de formulario: área de texto. El área de texto de la etiqueta proporcionará internamente un cuadro de área de texto HTML durante el procesamiento.

B.Archivo: Note.java

Java

// Java Program to Illustrate Note Class
  
package com.geek.app;
  
// Class
public class Note {
  
    public String noteDetail;
  
    // Method
    public String getNoteDetail() { return noteDetail; }
  
    // Method
    public void setNoteDetail(String noteDetail)
    {
        this.noteDetail = noteDetail;
    }
}
  • Esta es la clase Java Bean para definir las propiedades.
  • Cree la propiedad noteDetail para ingresar los datos ingresados ​​​​por el usuario en ella.
  • Genere métodos getter/setter de la propiedad para obtener/establecer el valor de la propiedad.

C. NoteController.java

Java

package com.geek.app;
  
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
  
@Controller
public class NoteController {
  
    @RequestMapping(value = "/")
    public String viewNote(Model model) {
        Note note = new Note();
        model.addAttribute("note", note);
        return "note";
    }
  
    @RequestMapping(value = "/submit", method = RequestMethod.POST)
    public String submitNote(@ModelAttribute("note") Note note) {
        return "noteSummary";
    }
  
}

Esta es la clase de controlador Spring donde procesa los métodos en función del mapeo de las requests. Aquí, @Controller transmite al contenedor que esta clase es la clase de controlador de resorte. La anotación, @RequestMapping, asigna las URL de solicitud al método especificado en función del valor proporcionado.

D. noteSummary.jsp

HTML

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>GeeksforGeeks - Feedback Summary</title>
</head>
<body>
  
    <h2>Feedback submitted successfully!</h2>
  
    <span>Feedback details: </span>
    <span>${note.noteDetail}</span>
  
</body>
</html>
  • Esta es la página Jsp para mostrar la salida de la entrada procesada.
  • Cuando el controlador procesa la entrada, mostramos la salida al usuario usando esta página Jsp.

Ejecución

  • Después de crear todos los archivos java y jsp necesarios, ejecute el proyecto en el servidor.
  • Justo en el Proyecto, Ejecutar como -> Ejecutar en el servidor.
  • Seleccione el servidor en el host local para ejecutar la aplicación.
  • Abra la URL: http://localhost:8080/app/ en el navegador para obtener la siguiente pantalla.

Página de bienvenida – note.jsp

  • Como proporcionamos diferentes atributos al área de texto , podemos ver esas funciones.

HTML

<form:textarea id="feedBack" path="noteDetail" rows="5" cols="40" title="GFG" 
                onfocus="color()" onblur="remove()" cssStyle="font-style:italic"/>
  • Como discutimos anteriormente, el atributo id especifica la ID para el cuadro de texto.
  • El atributo de ruta especifica el nombre de la ruta a la que deben vincularse los datos ingresados.
  • El atributo de filas especifica el número de filas que se pueden ingresar en el cuadro de texto.
  • El atributo cols especifica el número de columnas que se pueden ingresar en el cuadro de texto.
  • El atributo de título muestra el valor dado: GFG con el cursor en el cuadro de texto.
  • onfocus, onblur son los atributos del evento que ejecutan las funciones respectivas cuando ocurrió el evento.
  • El atributo cssStyle se puede usar para proporcionar cualquier estilo a los datos ingresados ​​​​en el cuadro de texto, como color de fuente, estilo de fuente, familia de fuentes, etc.

Título Atributo

  • Podemos ver el valor GFG en el cuadro de área de texto cuando el cursor se coloca en el cuadro de texto como especificamos el título del atributo = «GFG».
  • Una vez que haga clic en el cuadro de texto, el color cambiará según el atributo de enfoque como se muestra a continuación.

atributo de enfoque

  • Ingrese los datos en el cuadro de texto y haga clic en enviar.

atributo cssStyle

  • Como especificamos el atributo cssStyle = “font-style:italic”, el texto ingresado por el usuario tiene la fuente en cursiva.
  • Una vez que se envía la página, en función de la asignación de URL, la clase de controlador ejecutará el método submitNote en ella y proporcionará el siguiente resultado.

Salida – noteSummary.jsp

De esta manera, podemos usar la etiqueta: área de texto en formularios con los atributos requeridos en función del requisito proporcionado al desarrollar aplicaciones Spring MVC. 

Publicación traducida automáticamente

Artículo escrito por yaminitalisetty y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *